wx-starlock/pages/bindFace/bindFace.vue

<template>
  <view>
    <view class="flex justify-center flex-col pt-10 text-align-center text-base">
      <image
        v-if="showProcess"
        src="/static/images/icon_add_face_1.png"
        mode="widthFix"
        class="mx-[100rpx] w-550 mt-5 rounded-2xl"
      ></image>
      <image
        v-else
        src="/static/images/icon_add_face_2.png"
        mode="widthFix"
        class="mx-[100rpx] w-550 mt-5 rounded-2xl"
      ></image>
      <view class="my-10 text-align-left mx-3">
        <view>请单人正对门锁，距离一个成年人手臂长度</view><view>(约0.6米)。</view
        ><view>保持脸部无遮挡，漏出五官</view>
      </view>
      <view v-if="showProcess" class="mt-5 font-bold"> 正在录入中… </view>
      <view v-else> <view class="button mt-5" @click="ready">准备好了，开始添加</view> </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onUnmounted, getCurrentInstance } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { addFaceRequest } from '@/api/face'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

  const $bluetooth = useBluetoothStore()
  const $basic = useBasicStore()
  const $user = useUserStore()

  const bindFlag = ref(false)
  const showProcess = ref(false)

  const params = ref(null)

  onLoad(async options => {
    if (options.info) {
      params.value = JSON.parse(options.info)
      uni.$on('registerFaceConfirm', async data => {
        if (data.status === 0) {
          bindFlag.value = true
          const { code, message } = await addFaceRequest({
            lockId: $bluetooth.currentLockInfo.lockId,
            startDate: params.value.startDate,
            endDate: params.value.endDate,
            startTime: params.value.startDate,
            endTime: params.value.endDate,
            faceName: params.value.faceName,
            faceNumber: String(data.faceNumber),
            faceUserNo: String(data.faceNumber),
            faceType: params.value.faceType,
            addType: 1,
            weekDay: params.value.weekDays,
            faceRight: params.value.isAdmin,
            isCoerced: params.value.isForce === 1 ? 2 : 1
          })
          if (code === 0) {
            eventChannel.emit('refresherList', {})
            $basic.backAndToast('添加成功', 2)
          } else {
            $basic.backAndToast(message)
          }
        }
      })
      uni.$on('registerFaceProcess', data => {
        if (data.status === 0xff) {
          $basic.backAndToast('添加失败，请重试')
        } else if (data.status === 0xfe) {
          $basic.backAndToast('管理员已满')
        } else if (data.status === 0xfd) {
          $basic.backAndToast('用户已满')
        } else if (data.status === 0xfc) {
          $basic.backAndToast('人脸已满')
        } else if (data.status === 0xfb) {
          uni.showToast({
            title: '人脸已存在',
            icon: 'none'
          })
        }
      })
    }
  })

  const ready = async () => {
    showProcess.value = true
    const { code } = await $bluetooth.registerAuthentication(params.value)
    if (code === 0) {
      /* empty */
    } else if (code === -21) {
      $basic.backAndToast('请先打开蓝牙')
    }
  }

  onUnmounted(() => {
    uni.$off('registerFaceConfirm')
    uni.$off('registerFaceProcess')
    if (!bindFlag.value) {
      $bluetooth.registerAuthenticationCancel({
        type: 'face',
        keyId: $bluetooth.keyId.toString(),
        uid: $user.userInfo.uid.toString()
      })
    }
  })
</script>

<style scoped lang="scss">
  .button {
    border-radius: 64rpx;
    width: 686rpx;
    margin-left: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background-color: #63b8af;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
</style>