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

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