shangfutong-ui/jeepay-ui-uapp-face/pages/frontPay/frontPay.vue

<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>