wx-starlock/pages/setting/openDirection.vue

<template>
  <view>
    <view class="mx-4 pt-5 text-base">
      <view class="font-bold">请谨慎选择您家的开门方向(如果选择错误，将无法正常开关门)：</view>
      <image
        src="https://oss-lock.xhjcn.ltd/mp/icon_open_direction.png"
        mode="widthFix"
        class="w-full"
      ></image>
      <view class="flex items-center justify-between mx-10 mt-8">
        <view @click="updateValue(1)" class="flex items-center">
          <image
            class="w-40 h-40"
            v-if="value === 1"
            src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
            mode="aspectFill"
          ></image>
          <image
            class="w-40 h-40"
            v-else
            src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
            mode="aspectFill"
          ></image>
          <view class="ml-2">左开</view>
        </view>
        <view @click="updateValue(2)" class="flex items-center">
          <image
            v-if="value === 2"
            class="w-40 h-40"
            src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
            mode="aspectFill"
          ></image>
          <image
            class="w-40 h-40"
            v-else
            src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
            mode="aspectFill"
          ></image>
          <view class="ml-2">右开</view>
        </view>
      </view>
      <view class="mt-10"><text class="font-bold">判断方法：</text>人站在屋外，面向入户门。</view>
      <view>如果门的合页或门轴在左边，则门是左开；</view>
      <view>如果门的合页或门轴在右边，则门是右开。</view>
      <view>如果设置错误，将无法正常开关门。</view>
      <view>建议由安装或维修人员操作。</view>
    </view>
  </view>
</template>

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

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

  const value = ref(0)

  const pending = ref(false)

  onMounted(() => {
    value.value = $bluetooth.currentLockSetting.lockSettingInfo.openDirectionValue
  })

  const updateValue = async val => {
    if (pending.value || value.value === val) return
    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }
    pending.value = true
    uni.showLoading({
      title: '更新中'
    })
    const featureBit = 41
    const { code } = await $bluetooth.updateSetting({
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      featureBit,
      params: [val],
      withParams: true
    })
    $bluetooth.closeBluetoothConnection()
    if (code === 0) {
      const { code, message } = await updateLockSettingRequest({
        lockId: $bluetooth.currentLockInfo.lockId,
        openDirectionValue: val
      })
      pending.value = false
      uni.hideLoading()
      if (code === 0) {
        value.value = val
        $bluetooth.updateCurrentLockSetting({
          ...$bluetooth.currentLockSetting,
          lockSettingInfo: {
            ...$bluetooth.currentLockSetting.lockSettingInfo,
            openDirectionValue: value.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>