源文件
This commit is contained in:
207
jeepay-ui-uapp-face/pages/frontPay/frontPay.vue
Normal file
207
jeepay-ui-uapp-face/pages/frontPay/frontPay.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<!-- <view class="front-wrapper">
|
||||
<view class="pay-amount" v-if="vdata.isShow">
|
||||
请支付<view>￥{{ vdata.amount }}(元)</view>
|
||||
</view>
|
||||
<view class="pay-but">
|
||||
<JButton @tap="facePay">使用刷脸支付</JButton>
|
||||
</view>
|
||||
<view class="pay-tips">请将付款码对准右下角识别区，距离10厘米左右。</view>
|
||||
</view> -->
|
||||
<view class="wait-pay-top" v-if="vdata.isShow">
|
||||
<view class="pay-info">
|
||||
<view class="pay-num">￥{{ vdata.amount }}</view>
|
||||
<view class="pay-wait-title">请支付</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="face-button" @tap="facePay">
|
||||
<image src="/static/fronyImg/face-icon.svg" mode="scaleToFill" />
|
||||
刷脸支付
|
||||
</view>
|
||||
<view class="face-scan-tips">
|
||||
<view class="scan-title">
|
||||
<image src="/static/fronyImg/scan-code.svg" mode="scaleToFill" />
|
||||
扫码支付
|
||||
</view>
|
||||
<view class="sub-tips"> 请将付款码对准右下角识别区，距离10厘米左右。 <image src="/static/fronyImg/icon-down.svg" mode="scaleToFill" /> </view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onReady, onLoad } from '@dcloudio/uni-app'
|
||||
onLoad(() => {
|
||||
vdata.isShow = true
|
||||
//接受 后屏信息
|
||||
wxfaceapp.onRemoteMessage(function (res) {
|
||||
console.log('后屏消息', res)
|
||||
analysisMsg(JSON.parse(res.content))
|
||||
})
|
||||
wxfaceapp.startCodeScanner({
|
||||
success: (res) => {
|
||||
console.log('打开扫码器成功')
|
||||
console.log(res.replyCode)
|
||||
console.log(res.reply)
|
||||
//声明监听扫码器 使用 扫码器 扫描 后 调用 扫码器 回调事件 获取支付code
|
||||
wxfaceapp.listenCodePayment({
|
||||
success(res) {
|
||||
//被扫码回调事件
|
||||
wxfaceapp.onCodePayEvent(function (r) {
|
||||
console.log('onCodePayEvent code scanned = ' + r)
|
||||
console.log('扫码器', r)
|
||||
postMsg(r)
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('打开扫码器失败')
|
||||
console.log(res.replyCode)
|
||||
console.log(res.reply)
|
||||
},
|
||||
})
|
||||
})
|
||||
/**
|
||||
* 页面初始化完成 监听数据串口 输入事件
|
||||
* */
|
||||
// onReady(() => {
|
||||
// wxfaceapp.startSerialPortObserver({
|
||||
// success: (r) => {
|
||||
// console.log('开启监听串口输入成功', r)
|
||||
// },
|
||||
// fail: (err) => {
|
||||
// console.log('开启监听串口输入失败：', err)
|
||||
// },
|
||||
// })
|
||||
// })
|
||||
const vdata = reactive({
|
||||
amount: '0.00',
|
||||
isShow: true,
|
||||
})
|
||||
// 微信刷脸 刷脸成功后 使用回调 换取支付code
|
||||
const facePay = () => {
|
||||
wxfaceapp.facePay({
|
||||
requireFaceCode: true, //是否需要获取付款码返回给小程序
|
||||
success(res) {
|
||||
console.log('success [launchFaceApp]')
|
||||
console.log('前屏刷脸结果', res)
|
||||
wxfaceapp.onFacePayPassEvent(function (r) {
|
||||
console.log('微信支付回调', r)
|
||||
postMsg(r)
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
console.log('fail [launchFaceApp]')
|
||||
console.log(res.replyCode)
|
||||
console.log(res.reply)
|
||||
},
|
||||
})
|
||||
}
|
||||
// 发送给后屏
|
||||
const postMsg = (content) => {
|
||||
wxfaceapp.postMsg({
|
||||
targetAppid: 'wx4710a1619fbb3714',
|
||||
content: JSON.stringify(content),
|
||||
success(res) {
|
||||
console.log('sendMsgResult suc', res)
|
||||
},
|
||||
fail(res) {
|
||||
console.log('sendMsgResult failed error = ' + res)
|
||||
},
|
||||
})
|
||||
}
|
||||
/*
|
||||
* 解析后屏 发送的消息
|
||||
* type 值 amount 金额 toBanner 去广告页面
|
||||
*
|
||||
* */
|
||||
function analysisMsg(msg) {
|
||||
console.log('msg', msg)
|
||||
switch (msg.type) {
|
||||
case 'amount':
|
||||
vdata.amount = msg.amount
|
||||
break
|
||||
case 'toBanner':
|
||||
wxfaceapp.stopCodeScanner({})
|
||||
uni.navigateTo({
|
||||
url: '/pages/front/front',
|
||||
})
|
||||
break
|
||||
case 'hideAmount':
|
||||
vdata.isShow = false
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wait-pay-top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60vh;
|
||||
background: url('/static/fronyImg/front-bg.svg') no-repeat center / cover;
|
||||
.pay-info {
|
||||
transform: translateY(-80rpx);
|
||||
color: #fff;
|
||||
.pay-num {
|
||||
font-weight: 700;
|
||||
font-size: 62rpx;
|
||||
font-family: wechat sans;
|
||||
}
|
||||
.pay-wait-title {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: rgba($color: #fff, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.face-button {
|
||||
background-color: $v-primary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 65rpx 40rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 15rpx;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
box-shadow: 0 50rpx 50rpx -50rpx rgba(0, 206, 107, 0.5);
|
||||
image {
|
||||
width: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.face-scan-tips {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
padding-top: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
height: calc(100vh - 60vh - 250rpx);
|
||||
background-color: rgba($color: $v-primary, $alpha: 0.2);
|
||||
.scan-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
color: $v-primary;
|
||||
image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.sub-tips {
|
||||
margin-top: 25rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 22rpx;
|
||||
image {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user