wx-starlock/pages/others/cycleDate.vue

<template>
  <view>
    <view class="font-bold text-base bg-white">
      <view class="border-b-solid border-b-1 border-b-gray-200" @click="showStartDate = 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="startDate" class="mr-2">
              <view>{{ timeFormat(startDate, 'yyyy-mm-dd') }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
      <view>
        <view class="mx-3 flex items-center h-100" @click="showEndDate = true">
          <view class="w-168">失效日期</view>
          <view class="ml-a flex items-center">
            <view v-if="endDate" class="mr-2">
              <view>{{ timeFormat(endDate, 'yyyy-mm-dd') }}</view>
            </view>
            <up-icon name="arrow-right"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="font-bold text-base bg-white mt-2">
      <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-#4777ee text-white' : '']"
              @click="
                weekDays.includes(index + 1)
                  ? weekDays.splice(weekDays.indexOf(index + 1), 1)
                  : weekDays.push(index + 1)
              "
              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">
      <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
      :class="[
        canSubmit ? 'bg-[#5eb7ac]' : 'bg-[#9d9da3]',
        'mx-4',
        'h-100',
        'text-white',
        'text-center',
        'font-bold',
        'mt-4',
        'flex',
        'items-center',
        'justify-center'
      ]"
      style="border-radius: 50rpx"
      @click="save"
      >保存</view
    >
    <up-datetime-picker
      :hasInput="false"
      :visibleItemCount="5"
      :show="showStartDate"
      v-model="defaultStartDate"
      mode="date"
      closeOnClickOverlay
      @close="showStartDate = false"
      @confirm="confirmDate('start', $event)"
      @cancel="showStartDate = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showEndDate"
      :visibleItemCount="5"
      v-model="defaultEndDate"
      mode="date"
      closeOnClickOverlay
      @close="showEndDate = false"
      @confirm="confirmDate('end', $event)"
      @cancel="showEndDate = false"
    ></up-datetime-picker>
    <up-datetime-picker
      :hasInput="false"
      :show="showStartTime"
      :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"
      :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 { timeFormat } from 'uview-plus'
  import { computed, getCurrentInstance, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { updateCardRequest } from '@/api/card'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useUserStore } from '@/stores/user'
  import { useBasicStore } from '@/stores/basic'
  import { updateFingerprintRequest } from '@/api/fingerprint'
  import { updateRemoteRequest } from '@/api/remote'
  import { updatePalmVeinRequest } from '@/api/palmVein'
  import { updateFaceRequest } from '@/api/face'
  import { updateKeyDateRequest } from '@/api/key'

  const instance = getCurrentInstance().proxy
  const eventChannel = instance.getOpenerEventChannel()

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

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

  const startDate = ref(null)
  const endDate = ref(null)
  const weekDays = ref([])

  const info = ref(null)

  const startTimeText = ref(null)
  const endTimeText = ref(null)

  const defaultStartTime = ref('')
  const defaultEndTime = ref('')
  const defaultStartDate = ref(0)
  const defaultEndDate = ref(0)

  const pending = ref(false)

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

  const canSubmit = computed(() => {
    return (
      startDate.value &&
      endDate.value &&
      weekDays.value.length > 0 &&
      startTimeText.value &&
      endTimeText.value
    )
  })

  onLoad(options => {
    if (options.info) {
      const data = JSON.parse(options.info)
      info.value = data
      if (info.value.type) {
        uni.setNavigationBarTitle({
          title: '修改有效期'
        })
      }
      if (data.startDate) {
        weekDays.value = data.weekDays || data.weekDay
        startDate.value = data.startDate
        endDate.value = data.endDate

        defaultStartDate.value = data.startDate
        defaultEndDate.value = data.endDate
        startTimeText.value = timeFormat(data.startDate, 'h:M')
        endTimeText.value = timeFormat(data.endDate, 'h:M')
        defaultStartTime.value = timeFormat(data.startDate, 'h:M')
        defaultEndTime.value = timeFormat(data.endDate, 'h:M')
      } else {
        defaultStartTime.value = timeFormat(new Date(), 'h:M')
        defaultEndTime.value = timeFormat(new Date(), 'h:M')
        defaultStartDate.value = new Date().getTime()
        defaultEndDate.value = new Date().getTime()
      }
    }
  })

  const compareTime = (time1, time2) => {
    const [h1, m1] = time1.split(':').map(Number)
    const [h2, m2] = time2.split(':').map(Number)

    const date1 = new Date()
    date1.setHours(h1, m1, 0, 0)

    const date2 = new Date()
    date2.setHours(h2, m2, 0, 0)

    return date1 - date2
  }

  const save = async () => {
    if (!canSubmit.value) {
      return
    }
    if (startDate.value > endDate.value) {
      uni.showToast({
        title: '失效日期需晚于生效日期',
        icon: 'none'
      })
      return
    }
    if (compareTime(startTimeText.value, endTimeText.value) >= 0) {
      uni.showToast({
        title: '失效时间需晚于生效时间',
        icon: 'none'
      })
      return
    }

    if (!info.value.type) {
      const data = {
        startDate: updateTime(startDate.value, startTimeText.value),
        endDate: updateTime(endDate.value, endTimeText.value),
        weekDays: weekDays.value.sort()
      }
      uni.navigateBack({
        success() {
          eventChannel.emit('change', data)
        }
      })
    } else {
      const netWork = await $basic.getNetworkType()
      if (!netWork) {
        return
      }

      if (pending.value) {
        return
      }
      pending.value = true
      uni.showLoading({
        title: '更新中'
      })
      if (info.value.type === 'key') {
        const data = await updateKeyDateRequest({
          lockId: $bluetooth.currentLockInfo.lockId,
          keyId: info.value.keyId,
          keyType: 4,
          weekDays: weekDays.value.sort(),
          startDate: updateTime(startDate.value, startTimeText.value),
          endDate: updateTime(endDate.value, endTimeText.value),
          startTime: updateTime(startDate.value, startTimeText.value),
          endTime: updateTime(endDate.value, endTimeText.value)
        })
        uni.hideLoading()
        pending.value = false
        if (data.code === 0) {
          eventChannel.emit('refresh', {})
          $basic.backAndToast('更新成功')
          uni.showToast({
            title: '更新成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: data.message,
            icon: 'none'
          })
        }
      } else {
        const { code } = await $bluetooth.registerAuthentication({
          type: info.value.type,
          operate: 1,
          isAdmin: info.value.type,
          isForce: info.value.isForce,
          isRound: 1,
          weekDays: weekDays.value.sort(),
          no: info.value[`${info.value.type}Number`],
          userCountLimit: 0xffff,
          keyId: $bluetooth.keyId.toString(),
          uid: $user.userInfo.uid.toString(),
          startDate: updateTime(startDate.value, startTimeText.value),
          endDate: updateTime(endDate.value, endTimeText.value),
          startTime: startTimeText.value,
          endTime: endTimeText.value
        })
        if (code === 0) {
          let data
          if (info.value.type === 'card') {
            data = await updateCardRequest({
              lockId: $bluetooth.currentLockInfo.lockId,
              cardId: info.value.cardId,
              cardType: 4,
              weekDay: weekDays.value.sort(),
              startDate: updateTime(startDate.value, startTimeText.value),
              endDate: updateTime(endDate.value, endTimeText.value),
              startTime: updateTime(startDate.value, startTimeText.value),
              endTime: updateTime(endDate.value, endTimeText.value),
              changeType: 1
            })
          } else if (info.value.type === 'fingerprint') {
            data = await updateFingerprintRequest({
              lockId: $bluetooth.currentLockInfo.lockId,
              fingerprintId: info.value.fingerprintId,
              fingerprintType: 4,
              weekDay: weekDays.value.sort(),
              startDate: updateTime(startDate.value, startTimeText.value),
              endDate: updateTime(endDate.value, endTimeText.value),
              startTime: updateTime(startDate.value, startTimeText.value),
              endTime: updateTime(endDate.value, endTimeText.value),
              changeType: 1
            })
          } else if (info.value.type === 'remote') {
            data = await updateRemoteRequest({
              lockId: $bluetooth.currentLockInfo.lockId,
              remoteId: info.value.remoteId,
              remoteType: 4,
              weekDay: weekDays.value.sort(),
              startDate: updateTime(startDate.value, startTimeText.value),
              endDate: updateTime(endDate.value, endTimeText.value),
              startTime: updateTime(startDate.value, startTimeText.value),
              endTime: updateTime(endDate.value, endTimeText.value),
              changeType: 1
            })
          } else if (info.value.type === 'face') {
            data = await updateFaceRequest({
              lockId: $bluetooth.currentLockInfo.lockId,
              faceId: info.value.faceId,
              faceType: 4,
              weekDay: weekDays.value.sort(),
              startDate: updateTime(startDate.value, startTimeText.value),
              endDate: updateTime(endDate.value, endTimeText.value),
              startTime: updateTime(startDate.value, startTimeText.value),
              endTime: updateTime(endDate.value, endTimeText.value),
              changeType: 1
            })
          } else if (info.value.type === 'palmVein') {
            data = await updatePalmVeinRequest({
              lockId: $bluetooth.currentLockInfo.lockId,
              palmVeinId: info.value.palmVeinId,
              palmVeinType: 4,
              weekDay: weekDays.value.sort(),
              startDate: updateTime(startDate.value, startTimeText.value),
              endDate: updateTime(endDate.value, endTimeText.value),
              startTime: updateTime(startDate.value, startTimeText.value),
              endTime: updateTime(endDate.value, endTimeText.value),
              changeType: 1
            })
          }
          pending.value = false
          uni.hideLoading()
          if (data.code === 0) {
            eventChannel.emit('refresh', {})
            $basic.backAndToast('更新成功')
            uni.showToast({
              title: '更新成功',
              icon: 'none'
            })
          } else {
            uni.showToast({
              title: data.message,
              icon: 'none'
            })
          }
        } else {
          pending.value = false
          uni.hideLoading()
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          })
        }
      }
    }
  }

  const updateTime = (datetime, timeStr) => {
    const date = new Date(datetime)
    const [hours, minutes] = timeStr.split(':').map(Number)
    date.setHours(hours, minutes, 0, 0) // 设置小时、分钟，秒和毫秒归零
    return date.getTime()
  }

  const confirmDate = (type, date) => {
    if (type === 'start') {
      startDate.value = date.value
      showStartDate.value = false
    } else {
      endDate.value = date.value
      showEndDate.value = false
    }
  }

  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>