wx-starlock/pages/setting/motorTorsion.vue

<template>
  <view>
    <view class="mx-4 pt-5 text-base">
      <view class="font-bold">请根据门锁实际情况，请谨慎选择电机功率：</view>
      <view class="mt-8">
        <view
          @click="updateValue(1)"
          class="px-2 py-4 my-4 flex items-center rounded-2xl"
          :class="[value === 1 ? 'bg-#d9e8fd' : 'bg-#ececec']"
        >
          <view class="w-80 h-full flex items-center justify-center">
            <up-icon name="checkbox-mark" color="#2a85ec" v-if="value === 1" size="40rpx"></up-icon>
          </view>
          <view class="flex-1">
            <view>小功率：</view>
            <view class="text-#737373 text-sm">耗电少</view>
          </view>
        </view>
        <view
          @click="updateValue(2)"
          class="px-2 py-4 my-4 flex items-center rounded-2xl"
          :class="[value === 2 ? 'bg-#d9e8fd' : 'bg-#ececec']"
        >
          <view class="w-80 h-full flex items-center justify-center">
            <up-icon name="checkbox-mark" color="#2a85ec" v-if="value === 2" size="40rpx"></up-icon>
          </view>
          <view class="flex-1">
            <view>中功率：</view>
            <view class="text-#737373 text-sm">常规使用</view>
          </view>
        </view>
        <view
          @click="updateValue(3)"
          class="px-2 py-4 my-4 flex items-center rounded-2xl"
          :class="[value === 3 ? 'bg-#d9e8fd' : 'bg-#ececec']"
        >
          <view class="w-80 h-full flex items-center justify-center">
            <up-icon name="checkbox-mark" color="#2a85ec" v-if="value === 3" size="40rpx"></up-icon>
          </view>
          <view class="flex-1">
            <view>大功率：</view>
            <view class="text-#737373 text-sm">
              如果开锁时锁舌不能正常回收，或需要带动天地钩，建议选择大功率。此时耗电将会增加。
            </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 $basic = useBasicStore()
  const $bluetooth = useBluetoothStore()
  const $user = useUserStore()

  const value = ref(0)

  const pending = ref(false)

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

  const updateValue = async val => {
    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }
    if (pending.value || value.value === val) return
    pending.value = true
    uni.showLoading({
      title: '更新中'
    })
    const featureBit = 58
    const { code } = await $bluetooth.updateSetting({
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      featureBit,
      params: [val],
      withParams: true
    })
    $bluetooth.closeBluetoothConnection()
    console.log('code-', code)
    if (code === 0) {
      const { code, message } = await updateLockSettingRequest({
        lockId: $bluetooth.currentLockInfo.lockId,
        motorTorsion: val
      })
      pending.value = false
      uni.hideLoading()
      if (code === 0) {
        value.value = val
        $bluetooth.updateCurrentLockSetting({
          ...$bluetooth.currentLockSetting,
          lockSettingInfo: {
            ...$bluetooth.currentLockSetting.lockSettingInfo,
            motorTorsion: value.value
          }
        })
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: message,
          icon: 'none'
        })
      }
    } else {
      pending.value = false
      uni.hideLoading()
      uni.showToast({
        title: '更新失败，请保持在锁附近',
        icon: 'none'
      })
    }
  }
</script>

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