wx-starlock/pages/setting/lockSound.vue

<template>
  <view>
    <view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base">
      <view class="item-title">锁声音</view>
      <switch
        @click="changeCheck"
        :checked="check"
        class="transform-scale-90"
        :disabled="true"
        color="#002ce5"
      />
    </view>
    <view class="m-4 text-sm">
      功能开启后，你将可以听到智能锁的提示音。包括电量过低，密码错误等提示。
    </view>
    <view class="bg-white" v-if="check">
      <view class="py-3 px-4">请选择音量</view>
      <view
        v-for="(item, index) in volumeList"
        :key="index"
        class="py-3 px-4 border-t-solid border-t-gray-200 border-t-2 flex items-center justify-between"
        @click="value = index + 1"
      >
        <view>{{ item }}</view>
        <view
          class="rounded-50% w-40 h-40 border-solid border-2 flex items-center justify-center"
          :class="[value === index + 1 ? 'border-#002ce5' : 'border-black']"
        >
          <up-icon v-if="value === index + 1" name="checkmark" color="#002ce5"></up-icon>
        </view>
      </view>
    </view>
    <view
      :class="[canUpdate ? 'bg-#63b8af' : 'bg-#a3a3a3']"
      class="mt-4 rounded-3xl w-600 h-80 line-height-80rpx text-center mx-75rpx text-white text-xl font-bold"
      @click="update"
    >
      保存
    </view>
  </view>
</template>

<script setup>
  import { computed, 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 check = ref(false)

  const volumeList = ['低', '较低', '中', '较高', '高']

  const value = ref(0)

  const pending = ref(false)

  const canUpdate = computed(() => {
    return (
      ($bluetooth.currentLockSetting.lockSettingInfo.lockSound === 1) !== check.value ||
      value.value !== $bluetooth.currentLockSetting.lockSettingInfo.lockSoundVolume
    )
  })

  onMounted(() => {
    check.value = $bluetooth.currentLockSetting.lockSettingInfo.lockSound === 1
    value.value = $bluetooth.currentLockSetting.lockSettingInfo.lockSoundVolume
  })

  const update = async () => {
    if (!canUpdate.value) return
    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }
    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '保存中'
    })
    const featureBit = 33
    const { code } = await $bluetooth.updateSetting({
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      featureBit,
      params: [value.value],
      withParams: true
    })
    $bluetooth.closeBluetoothConnection()
    if (code === 0) {
      const { code, message } = await updateLockSettingRequest({
        lockId: $bluetooth.currentLockInfo.lockId,
        lockSound: check.value ? 1 : 0,
        lockSoundVolume: value.value
      })
      pending.value = false
      uni.hideLoading()
      if (code === 0) {
        $bluetooth.updateCurrentLockSetting({
          ...$bluetooth.currentLockSetting,
          lockSettingInfo: {
            ...$bluetooth.currentLockSetting.lockSettingInfo,
            lockSound: check.value ? 1 : 0,
            lockSoundVolume: value.value
          }
        })
        $basic.backAndToast('更新成功')
      } 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'
      })
    }
  }

  const changeCheck = () => {
    check.value = !check.value
    if (!check.value) {
      value.value = 0
    } else {
      value.value = 3
    }
  }
</script>

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