wx-starlock/pages/setting/faceSetting.vue

<template>
  <view>
    <view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base">
      <view>面容开锁</view>
      <switch
        @click="changeCheck"
        :checked="check"
        class="transform-scale-90"
        :disabled="true"
        color="#002ce5"
      />
    </view>
    <view
      class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base mt-1"
      @click="distanceDialog"
      v-if="distance !== null"
    >
      <view class="max-w-500">
        <view>感应距离</view>
        <view class="text-xs mt-1 text-gray-500">{{ distanceColumns[0][distanceIndex].text }}</view>
      </view>
      <view class="flex items-center">
        <view class="mr-2" :class="[check ? '' : 'text-gray-500']">{{
          distanceColumns[0][distanceIndex].name
        }}</view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view
      @click="enErrUnlockDialog"
      class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base mt-1"
      v-if="enErrUnlock !== null"
    >
      <view class="max-w-500">
        <view>防误开</view>
        <view class="text-xs mt-1 text-gray-500">{{
          enErrUnlockColumns[0][enErrUnlock].text
        }}</view>
      </view>
      <view class="flex items-center">
        <view class="mr-2" :class="[check && distance !== 0 ? '' : 'text-gray-500']">{{
          enErrUnlockColumns[0][enErrUnlock].name
        }}</view>
        <up-icon name="arrow-right"></up-icon>
      </view>
    </view>
    <view
      class="pos-fixed bottom-[calc(env(safe-area-inset-bottom)+48rpx)] mx-3 py-5 px-3 bg-white text-sm rounded-md"
    >
      <view class="text-base font-bold mb-3">添加和使用面容开锁时：</view>
      <view class="text-gray-500">1、请尽量保持单人在门前操作；</view>
      <view class="text-gray-500">2、请站立在门锁正前方约0.5～0.8米，面向门锁；</view>
      <view class="text-gray-500">3、请保持脸部无遮挡，露出五官；</view>
      <view class="text-gray-500"
        >4、面容识别异常时，可触摸数字键盘任意按键，手动重启人脸识别。</view
      >
    </view>
    <up-picker
      :show="showDistance"
      :columns="distanceColumns"
      :defaultIndex="[distanceIndex]"
      title="感应距离"
      keyName="name"
      :visibleItemCount="5"
      @close="showDistance = false"
      @cancel="showDistance = false"
      @confirm="confirmDistance"
    ></up-picker>
    <up-picker
      :show="showEnErrUnlock"
      :columns="enErrUnlockColumns"
      :defaultIndex="[enErrUnlock]"
      title="防误开"
      keyName="name"
      :visibleItemCount="5"
      @close="showEnErrUnlock = false"
      @cancel="showEnErrUnlock = false"
      @confirm="confirmEnErrUnlock"
    ></up-picker>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { updateLockSettingRequest } from '@/api/setting'
  import { useUserStore } from '@/stores/user'
  import { useBasicStore } from '@/stores/basic'

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

  const showDistance = ref(false)
  const showEnErrUnlock = ref(false)
  const distanceIndex = ref(0)

  const check = ref(false)
  const distance = ref(null)
  const enErrUnlock = ref(null)

  const pending = ref(false)

  const distanceColumns = ref([
    [
      { name: '远距离', value: 3, text: '感应到门前约1.5米有人时，将自动启动面部识别开锁。' },
      { name: '中距离', value: 2, text: '感应到门前约0.8米有人时，将自动启动面部识别开锁。' },
      { name: '近距离', value: 1, text: '感应到门前约0.5米有人时，将自动启动面部识别开锁。' },
      { name: '关闭', value: 0, text: '感应距离已关闭，需手动触摸键盘任意键，进行面部识别开锁。' }
    ]
  ])

  const enErrUnlockColumns = ref([])

  const distanceDialog = () => {
    if (!check.value) return
    showDistance.value = true
  }

  const enErrUnlockDialog = () => {
    if (!check.value || distance.value === 0) return
    showEnErrUnlock.value = true
  }

  onMounted(() => {
    const list = []
    for (let i = 0; i <= 30; i++) {
      list.push({
        name: i + '秒',
        value: i,
        text:
          i === 0
            ? '防误开已关闭，关门后仍可使用面容开锁'
            : `防误开已打开，开锁后${i}秒内不可使用面容开锁`
      })
    }
    enErrUnlockColumns.value = [list]
    check.value = $bluetooth.currentLockSetting.lockSettingInfo.faceSwitch === 1
    distance.value = $bluetooth.currentLockSetting.lockSettingInfo.faceInductionDistance
    distanceIndex.value = distanceColumns.value[0].findIndex(item => item.value === distance.value)
    enErrUnlock.value = $bluetooth.currentLockSetting.lockSettingInfo.faceEnErrUnlock
  })

  const confirmEnErrUnlock = data => {
    enErrUnlock.value = data.indexs[0]
    showEnErrUnlock.value = false
    change('faceEnErrUnlock', enErrUnlock.value)
  }

  const confirmDistance = data => {
    distance.value = distanceColumns.value[0][data.indexs[0]].value
    distanceIndex.value = data.indexs[0]
    showDistance.value = false
    change('faceInductionDistance', distance.value)
  }

  const changeCheck = () => {
    check.value = !check.value
    change('faceSwitch', check.value ? 1 : 0)
  }

  const change = async (type, value) => {
    if (pending.value) return
    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }
    pending.value = true
    uni.showLoading({
      title: '设置中'
    })
    const featureBit = 5
    const { code } = await $bluetooth.updateSetting({
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      featureBit,
      params: [check.value ? 1 : 0, distance.value, enErrUnlock.value],
      withParams: true
    })
    $bluetooth.closeBluetoothConnection()
    if (code === 0) {
      const { code, message } = await updateLockSettingRequest({
        lockId: $bluetooth.currentLockInfo.lockId,
        [type]: value
      })
      pending.value = false
      uni.hideLoading()
      if (code === 0) {
        $bluetooth.updateCurrentLockSetting({
          ...$bluetooth.currentLockSetting,
          lockSettingInfo: {
            ...$bluetooth.currentLockSetting.lockSettingInfo,
            faceSwitch: check.value ? 1 : 0,
            faceInductionDistance: distance.value,
            faceEnErrUnlock: enErrUnlock.value
          }
        })
        uni.showToast({
          title: '设置成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: message,
          icon: 'none'
        })
      }
    } else if (code === -21) {
      pending.value = false
      uni.hideLoading()
    } else {
      pending.value = false
      uni.hideLoading()
      uni.showToast({
        title: '设置失败，请保持在锁附近',
        icon: 'none'
      })
    }
  }
</script>

<style lang="scss">
  page {
    background-color: $uni-bg-color-grey;
  }
</style>