wx-starlock/pages/setting/passageMode.vue

<template>
  <view>
    <view class="py-3 px-4 bg-white !py-2 flex items-center justify-between text-base">
      <view>常开模式</view>
      <switch
        @click="changeSwitch"
        :checked="check"
        class="transform-scale-90"
        :disabled="true"
        color="#002ce5"
      />
    </view>
    <view class="py-3 px-4 bg-white text-sm mt-4rpx">
      你可以设置多个常开时间段，在设置的时间段内，锁被打开后一直处于打开状态。
    </view>
    <view class="font-bold text-base bg-white mt-2" v-if="check">
      <view class="border-b-solid border-b-1 border-b-gray-200">
        <view class="mx-3">
          <view class="pt-2">常开日期</view>
          <view class="mr-2 flex items-center justify-around py-2">
            <view
              v-for="(item, index) in list"
              :key="index"
              :class="[weekDays.includes(index + 1) ? 'bg-#5eb7ac text-white' : '']"
              @click="changeSelect(index)"
              class="rounded-50% border-solid border-3 border-gray-400 flex items-center justify-center w-70 h-70"
              >{{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="font-bold text-base bg-white mt-2" v-if="check">
      <view class="border-b-solid border-b-1 border-b-gray-200">
        <view class="mx-3 flex items-center h-100">
          <view class="w-168">常开时间</view>
          <view class="ml-a">
            <view class="flex items-center" @click="isAllDay = isAllDay === 1 ? 0 : 1">
              <view class="mr-2">全天</view>
              <image
                class="w-40 h-40"
                v-if="isAllDay"
                src="https://oss-lock.xhjcn.ltd/mp/icon_select.png"
              ></image>
              <image
                v-else
                class="w-40 h-40"
                src="https://oss-lock.xhjcn.ltd/mp/icon_not_select.png"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="border-b-solid border-b-1 border-b-gray-200" @click="showStartTime = true">
        <view class="mx-3 flex items-center h-100">
          <view class="w-168">开始时间</view>
          <view class="ml-a flex items-center">
            <view v-if="startTimeText" class="mr-2">
              <view>{{ startTimeText }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
      <view>
        <view class="mx-3 flex items-center h-100" @click="showEndTime = true">
          <view class="w-168">结束时间</view>
          <view class="ml-a flex items-center">
            <view v-if="endTimeText" class="mr-2">
              <view>{{ endTimeText }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view
      @click="confirm"
      :class="[canUpdate ? 'bg-#63b8af' : 'bg-#a3a3a3']"
      class="pos-fixed bottom-[calc(env(safe-area-inset-bottom)+48rpx)] w-686 mx-4 h-88 line-height-88rpx text-center text-white rounded-3xl"
      >保存
    </view>
    <up-datetime-picker
      :hasInput="false"
      :show="showStartTime"
      :itemHeight="70"
      :visibleItemCount="5"
      v-model="defaultStartTime"
      mode="time"
      closeOnClickOverlay
      @close="showStartTime = false"
      @confirm="confirmTime('start', $event)"
      @cancel="showStartTime = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showEndTime"
      :itemHeight="70"
      :visibleItemCount="5"
      v-model="defaultEndTime"
      mode="time"
      closeOnClickOverlay
      @close="showEndTime = false"
      @confirm="confirmTime('end', $event)"
      @cancel="showEndTime = false"
    ></up-datetime-picker>
  </view>
</template>

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

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

  const showStartTime = ref(false)
  const showEndTime = ref(false)

  const defaultStartTime = ref('')
  const defaultEndTime = ref('')

  const startTimeText = ref('00:00')
  const endTimeText = ref('00:00')

  const check = ref(false)
  const weekDays = ref([])
  const isAllDay = ref(0)

  const list = ['一', '二', '三', '四', '五', '六', '日']

  const autoUnlock = ref(0)

  const pending = ref(false)

  const canUpdate = computed(() => {
    return (
      !check.value ||
      (check.value && weekDays.value.length > 0 && startTimeText.value && endTimeText.value)
    )
  })

  onMounted(() => {
    check.value = $bluetooth.currentLockSetting.lockSettingInfo.passageMode
    if ($bluetooth.currentLockSetting.lockSettingInfo.passageModeConfig.length > 0) {
      const {
        weekDays: weekDaysResult,
        isAllDay: isAllDayResult,
        startDate,
        endDate
      } = $bluetooth.currentLockSetting.lockSettingInfo.passageModeConfig[0]
      weekDays.value = weekDaysResult
      isAllDay.value = isAllDayResult
      startTimeText.value = `${
        Math.floor(startDate / 60) < 10
          ? '0' + Math.floor(startDate / 60)
          : Math.floor(startDate / 60)
      }:${Math.floor(startDate % 60) < 10 ? '0' + Math.floor(startDate % 60) : Math.floor(startDate % 60)}`
      endTimeText.value = `${Math.floor(endDate / 60) < 10 ? '0' + Math.floor(endDate / 60) : Math.floor(endDate / 60)}:${Math.floor(endDate % 60) < 10 ? '0' + Math.floor(endDate % 60) : Math.floor(endDate % 60)}`
      defaultStartTime.value = `${
        Math.floor(startDate / 60) < 10
          ? '0' + Math.floor(startDate / 60)
          : Math.floor(startDate / 60)
      }:${Math.floor(startDate % 60) < 10 ? '0' + Math.floor(startDate % 60) : Math.floor(startDate % 60)}`
      defaultEndTime.value = `${Math.floor(endDate / 60) < 10 ? '0' + Math.floor(endDate / 60) : Math.floor(endDate / 60)}:${Math.floor(endDate % 60) < 10 ? '0' + Math.floor(endDate % 60) : Math.floor(endDate % 60)}`
    } else {
      startTimeText.value = '00:00'
      endTimeText.value = '00:00'
      defaultStartTime.value = '00:00'
      defaultEndTime.value = '00:00'
    }
  })

  const changeSelect = index => {
    if (weekDays.value.includes(index + 1)) {
      weekDays.value.splice(weekDays.value.indexOf(index + 1), 1)
    } else {
      weekDays.value.push(index + 1)
      weekDays.value.sort()
    }
  }

  const convertWeekdaysToNumber = weekDay => {
    let weekStr = '0000000'.split('')

    for (let i = 0; i < 7; i++) {
      const index = weekDay[i] % 7
      weekStr[index] = '1'
    }

    return parseInt(weekStr.reverse().join(''), 2)
  }

  const confirm = async () => {
    if (!canUpdate.value) return
    const data = {
      weekDays: weekDays.value,
      isAllDay: isAllDay.value,
      startDate:
        parseInt(startTimeText.value.split(':')[0], 10) * 60 +
        parseInt(startTimeText.value.split(':')[1], 10),
      endDate:
        parseInt(endTimeText.value.split(':')[0], 10) * 60 +
        parseInt(endTimeText.value.split(':')[1], 10),
      autoUnlock: autoUnlock.value
    }

    if (check.value && data.startDate > data.endDate) {
      uni.showToast({
        title: '开始时间不能大于结束时间',
        icon: 'none'
      })
      return
    }

    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
    }
    if (pending.value) return
    pending.value = true
    uni.showLoading({
      title: '保存中'
    })

    const listData = [
      check.value ? 1 : 0,
      Math.floor(data.startDate / 256),
      data.startDate % 256,
      Math.floor(data.endDate / 256),
      data.endDate % 256,
      data.isAllDay,
      convertWeekdaysToNumber(data.weekDays),
      data.autoUnlock
    ]
    const featureBit = 50
    const { code } = await $bluetooth.updateSetting({
      keyId: $bluetooth.keyId.toString(),
      uid: $user.userInfo.uid.toString(),
      featureBit,
      params: listData,
      withParams: true
    })
    $bluetooth.closeBluetoothConnection()
    if (code === 0) {
      const { code, message } = await updateLockSettingRequest({
        lockId: $bluetooth.currentLockInfo.lockId,
        passageMode: check.value ? 1 : 0,
        passageModeConfig: [data]
      })
      pending.value = false
      uni.hideLoading()
      if (code === 0) {
        $bluetooth.updateCurrentLockSetting({
          ...$bluetooth.currentLockSetting,
          lockSettingInfo: {
            ...$bluetooth.currentLockSetting.lockSettingInfo,
            passageMode: check.value ? 1 : 0,
            passageModeConfig: [data]
          }
        })
        $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 changeSwitch = () => {
    check.value = !check.value
  }

  const confirmTime = (type, date) => {
    if (type === 'start') {
      startTimeText.value = date.value
      showStartTime.value = false
    } else {
      endTimeText.value = date.value
      showEndTime.value = false
    }
  }
</script>

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