129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<template>
|
||
<!-- 切换模式卡片 -->
|
||
<uni-popup type="center" ref="refSwitchModel" @maskClick="emits('makClose')">
|
||
<view class="switch-model">
|
||
<view class="title">切换模式</view>
|
||
<view class="sun-text">如需设置收银机兼容 请点击设置按钮设置</view>
|
||
<view class="sub-title">独立收银模式：<view class="model-tag" v-if="!vdata.pos">当前正在使用</view>
|
||
</view>
|
||
<view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
|
||
<view class="sub-title">POS模式：<view class="model-tag" v-if="vdata.pos">当前正在使用</view>
|
||
</view>
|
||
<view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
|
||
<view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="switchFaceMdoel">
|
||
<image src="/static/iconImg/switch-model-ali.svg" mode="scaleToFill" />
|
||
切换至{{ !vdata.pos ? 'POS' : '独立收银' }}模式
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { ref, reactive } from "vue"
|
||
import storageManage from '@/commons/utils/storageManage.js'
|
||
const emits = defineEmits(['open', 'makClose', 'switch', 'update:value'])
|
||
const refSwitchModel = ref(null)
|
||
const vdata = reactive({
|
||
pos: false
|
||
})
|
||
const open = () => {
|
||
if (storageManage.faceModel() == 'pos') {
|
||
vdata.pos = true
|
||
} else {
|
||
vdata.pos = false
|
||
}
|
||
refSwitchModel.value.open()
|
||
}
|
||
const switchFaceMdoel = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `是否切换为${!vdata.pos ? 'POS' : '独立收银'}模式？`,
|
||
showCancel: true,
|
||
success: ({ confirm, cancel }) => {
|
||
if (confirm) {
|
||
if (!vdata.pos) {
|
||
storageManage.faceModel('pos')
|
||
emits('update:value', 'pos')
|
||
} else {
|
||
storageManage.faceModel('cashier')
|
||
emits('update:value', 'cashier')
|
||
}
|
||
refSwitchModel.value.close()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.switch-model {
|
||
padding: 0.1rpx 20rpx;
|
||
padding-bottom: 30rpx;
|
||
width: 75vw;
|
||
min-height: 300rpx;
|
||
border-radius: 14rpx;
|
||
background-color: #fff;
|
||
|
||
.title {
|
||
margin: 30rpx 0;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
}
|
||
.sun-text{
|
||
margin: 15rpx 0;
|
||
margin-bottom: 30rpx;
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
.sub-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
|
||
.model-tag {
|
||
float: right;
|
||
background-color: $v-primary;
|
||
color: #fff;
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 14rpx;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
color: #595959;
|
||
font-size: 15rpx;
|
||
margin: 20rpx 0;
|
||
line-height: 2;
|
||
}
|
||
|
||
.pay-model {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
height: 60rpx;
|
||
border: 1rpx solid $v-primary;
|
||
border-radius: 5rpx;
|
||
background-color: rgba(241, 255, 245, .3);
|
||
;
|
||
color: $v-primary;
|
||
font-size: 18rpx;
|
||
letter-spacing: 2rpx;
|
||
|
||
image {
|
||
margin-right: 8rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.hover-model {
|
||
background-color: #bebbbb;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style> |