源文件
This commit is contained in:
249
jeepay-ui-uapp-face/pages/payModel/payModel.vue
Normal file
249
jeepay-ui-uapp-face/pages/payModel/payModel.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="model-wrapper">
|
||||
<view class="model-content">
|
||||
<view class="title">您已切换至POS模式 </view>
|
||||
<view class="sub-text">请在收银设备上输入收款金额</view>
|
||||
<view class="sub-title">独立收银模式：
|
||||
</view>
|
||||
<view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
|
||||
<view class="sub-title">POS模式：<view class="model-tag">当前正在使用</view>
|
||||
</view>
|
||||
<view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
|
||||
<view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="switchCashier">
|
||||
<image src="/static/iconImg/switch-model.svg" mode="scaleToFill" />
|
||||
切换至独立收银模式
|
||||
</view>
|
||||
</view>
|
||||
<view class="selected-cas-model">
|
||||
<view class="cas-title">设置收银机刷脸兼容模式</view>
|
||||
<view class="cas-sub-tips">请注意此设置可能会影响收银机刷脸收款请在专业人员指导下设置</view>
|
||||
<view class="cas-sub-tips">如需设置收银机扫码兼容模式 请在系统设置中设置</view>
|
||||
<radio-group @change="radioChange">
|
||||
<view class="radio-wrapper">
|
||||
<label class="radio">
|
||||
<radio value="n" checked="true" />code+n
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="r" />code+r
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="rn" />code+rn
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="" />code
|
||||
</label>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app'
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
/***
|
||||
*前后屏 通信 通知前屏 跳转到待支付页面
|
||||
* */
|
||||
onLoad(() => {
|
||||
wxfaceapp.postMsg({
|
||||
targetAppid: 'wx4710a1619fbb3714',
|
||||
content: JSON.stringify({ type: 'toPay' }),
|
||||
success(res) {
|
||||
console.log('通信成功', res)
|
||||
},
|
||||
fail(res) {
|
||||
console.log('通信失败 ', res)
|
||||
},
|
||||
})
|
||||
})
|
||||
let code = '\n'
|
||||
/**
|
||||
* 页面初始化完成 监听 前屏 向后屏通信 将支付码 写入数据串口
|
||||
* */
|
||||
onReady(() => {
|
||||
wxfaceapp.onRemoteMessage(function (res) {
|
||||
const data = JSON.parse(res.content)
|
||||
if (data.faceCode) {
|
||||
wxfaceapp.writeToSerialPort({
|
||||
msgToFlush: data.faceCode + code,
|
||||
success(res) {
|
||||
console.log('success [writeToSerialPort]', res)
|
||||
},
|
||||
fail(res) {
|
||||
console.log('fail [writeToSerialPort]', res)
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
postFrontMsg({ type: 'hideAmount' })
|
||||
})
|
||||
const switchCashier = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否切换为 独立收银模式？',
|
||||
showCancel: true,
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
storageManage.faceModel('cashier')
|
||||
postFrontMsg({ type: 'toBanner' })
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function postFrontMsg(content) {
|
||||
wxfaceapp.postMsg({
|
||||
targetAppid: 'wx4710a1619fbb3714',
|
||||
content: JSON.stringify(content),
|
||||
success(res) {
|
||||
console.log('通信成功', res)
|
||||
},
|
||||
fail(res) {
|
||||
console.log('通信失败 ', res)
|
||||
},
|
||||
})
|
||||
}
|
||||
const radioChange = (e) => {
|
||||
const v = e.detail.value
|
||||
switch (v) {
|
||||
case 'r':
|
||||
code = '\r'
|
||||
break
|
||||
case 'n':
|
||||
code = '\n'
|
||||
break
|
||||
case 'rn':
|
||||
code = '\r\n'
|
||||
break
|
||||
default:
|
||||
code = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 15vh;
|
||||
min-height: 100vh;
|
||||
|
||||
.model-content {
|
||||
width: 70%;
|
||||
|
||||
.title {
|
||||
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
line-height: 3;
|
||||
font-weight: 600;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.switch-but {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 60rpx;
|
||||
width: 60%;
|
||||
height: 50rpx;
|
||||
border: 1rpx solid rgba($color: #000000, $alpha: 0.1);
|
||||
border-radius: 5rpx;
|
||||
background-color: rgba($color: #409eff, $alpha: 0.175);
|
||||
color: #409eff;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
.model-tag {
|
||||
float: right;
|
||||
background-color: #27DC70;
|
||||
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;
|
||||
margin-top: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid #1AB345;
|
||||
border-radius: 5rpx;
|
||||
background-color: rgba(241, 255, 245, .3);
|
||||
;
|
||||
color: #1AB245;
|
||||
font-size: 18rpx;
|
||||
letter-spacing: 2rpx;
|
||||
|
||||
image {
|
||||
margin-right: 8rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-model {
|
||||
background-color: #1AB345;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.selected-cas-model {
|
||||
margin-top: 5vh;
|
||||
|
||||
.cas-title {
|
||||
width: 100vw;
|
||||
padding-top: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border-top: 2rpx solid #ededed;
|
||||
}
|
||||
|
||||
.cas-sub-tips {
|
||||
margin-top: 20rpx;
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.radio-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user