完成循环组件封装

2025-02-12 17:26:21 +08:00 · 2025-02-12 17:26:21 +08:00 · 83de6dc898
commit 83de6dc898
parent 9a274a77c2
8 changed files with 434 additions and 18 deletions
--- a/components/LockCycle/LockCycle.vue
+++ b/components/LockCycle/LockCycle.vue
@ -0,0 +1,69 @@
+<template>
+  <view class="font-bold text-base bg-white" @click="toChange">
+    <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 flex items-center">
+          <view v-if="startDate && endDate" class="mr-2">
+            <view>{{ timeFormat(startDate, 'yyyy-mm-dd') }}</view>
+            <view>{{ timeFormat(endDate, 'yyyy-mm-dd') }}</view>
+          </view>
+          <up-icon name="arrow-right"></up-icon>
+        </view>
+      </view>
+    </view>
+    <view v-if="weekDays" 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 mr-2">{{ $lock.convertWeekDaysToChineseString(weekDays) }}</view>
+        <up-icon name="arrow-right"></up-icon>
+      </view>
+    </view>
+    <view v-if="startDate && endDate">
+      <view class="mx-3 flex items-center h-100">
+        <view class="w-168">有效时间</view>
+        <view class="ml-a mr-2"
+          >{{ timeFormat(startDate, 'h:M') }}-{{ timeFormat(endDate, 'h:M') }}</view
+        >
+        <up-icon name="arrow-right"></up-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import { timeFormat } from 'uview-plus'
+  import { useBasicStore } from '@/stores/basic'
+  import { useLockStore } from '@/stores/lock'
+
+  const $basic = useBasicStore()
+  const $lock = useLockStore()
+
+  const startDate = ref(null)
+  const endDate = ref(null)
+  const weekDays = ref(null)
+
+  const emits = defineEmits(['change'])
+
+  const toChange = () => {
+    $basic.routeJump({
+      name: 'cycleDate',
+      params: {
+        info: JSON.stringify({
+          startDate: startDate.value,
+          endDate: endDate.value,
+          weekDays: weekDays.value
+        })
+      },
+      events: {
+        change(data) {
+          startDate.value = data.startDate
+          endDate.value = data.endDate
+          weekDays.value = data.weekDays
+          emits('change', data)
+        }
+      }
+    })
+  }
+</script>
--- a/components/LockDateHourPicker/LockDateHourPicker.vue
+++ b/components/LockDateHourPicker/LockDateHourPicker.vue
@ -190,15 +190,6 @@
      selectedHour = Math.max(selectedHour, minDateParsed.value.hour)
    }

-    console.log(1111, selectedYear, selectedMonth, selectedDay, selectedHour)
-    console.log(
-      1111,
-      yearIndex,
-      updatedMonths.indexOf(selectedMonth),
-      updatedDays.indexOf(selectedDay),
-      updatedHours.indexOf(selectedHour)
-    )
-
    tempPickerValue.value = {
      year: selectedYear,
      month: selectedMonth,
--- a/pages.json
+++ b/pages.json
@ -323,6 +323,13 @@
        "navigationBarTitleText": "操作记录",
        "disableScroll": true
      }
+    },
+    {
+      "path": "pages/cycleDate/cycleDate",
+      "style": {
+        "navigationBarTitleText": "有效期",
+        "disableScroll": true
+      }
    }
  ],
  "globalStyle": {
--- a/pages/bindCard/bindCard.vue
+++ b/pages/bindCard/bindCard.vue
@ -58,6 +58,7 @@
            cardNumber: String(data.cardNumber),
            cardType: params.cardType,
            addType: 1,
+            weekDay: params.weekDays,
            cardRight: params.isAdmin,
            isCoerced: params.isForce === 1 ? 2 : 1
          })
--- a/pages/createCard/createCard.vue
+++ b/pages/createCard/createCard.vue
@ -46,7 +46,7 @@
        </view>
        <view class="button" @click="create('permanent')">下一步</view>
      </swiper-item>
-      <swiper-item :style="{ height: deviceInfo.windowHeight - 44 + 'px' }">
+      <swiper-item>
        <LockInput
          :value="temporaryName"
          title="姓名"
@ -59,7 +59,6 @@
            :value="temporaryStartTime"
            :minDate="minDate"
            :maxDate="maxDate"
-            type="datehour"
            @change-time="changeDate('temporaryStartTime', $event)"
          ></LockDatetimePicker>
        </view>
@ -69,7 +68,6 @@
            :value="temporaryEndTime"
            :minDate="minDate"
            :maxDate="maxDate"
-            type="datehour"
            @change-time="changeDate('temporaryEndTime', $event)"
          ></LockDatetimePicker>
        </view>
@ -90,6 +88,33 @@
        </view>
        <view class="button" @click="create('temporary')">下一步</view>
      </swiper-item>
+      <swiper-item>
+        <LockInput
+          :value="cycleName"
+          title="姓名"
+          placeholder="请输入"
+          @change-input="changeName('cycle', $event)"
+        ></LockInput>
+        <view class="mt-3">
+          <LockCycle @change="changeCycle"></LockCycle>
+        </view>
+        <view class="mt-3">
+          <LockSwitch
+            :value="cycleAdmin"
+            title="是否为管理员"
+            @change="changeAdmin('cycle', $event)"
+          ></LockSwitch>
+        </view>
+        <view class="mt-3 mb-3">
+          <LockSwitch
+            :value="cycleCoerced"
+            title="胁迫卡"
+            @change="changeCoerced('cycle', $event)"
+            :placeholder="placeholder"
+          ></LockSwitch>
+        </view>
+        <view class="button" @click="create('cycle')">下一步</view>
+      </swiper-item>
    </swiper>
  </view>
 </template>
@ -97,6 +122,7 @@
 <script setup>
  import { getCurrentInstance, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
+  import { timeFormat } from 'uview-plus'
  import { useBasicStore } from '@/stores/basic'
  import { useUserStore } from '@/stores/user'
  import { useBluetoothStore } from '@/stores/bluetooth'
@ -115,6 +141,9 @@
    },
    {
      name: '限时'
+    },
+    {
+      name: '循环'
    }
  ]

@ -128,6 +157,13 @@
  const temporaryAdmin = ref(false)
  const temporaryCoerced = ref(false)

+  const cycleName = ref('')
+  const cycleStartTime = ref(null)
+  const cycleEndTime = ref(null)
+  const weekDays = ref([])
+  const cycleAdmin = ref(false)
+  const cycleCoerced = ref(false)
+
  const minDate = ref(Number(new Date()))
  const maxDate = ref(Number(4133951940000))
  const currentIndex = ref(0)
@ -143,6 +179,12 @@
    maxDate.value = Number(getFutureTimestamp())
  })

+  const changeCycle = data => {
+    cycleStartTime.value = data.startDate
+    cycleEndTime.value = data.endDate
+    weekDays.value = data.weekDays
+  }
+
  const getNextFullHour = () => {
    const now = new Date()
    const currentHour = now.getHours()
@ -176,7 +218,8 @@
  const create = async type => {
    if (
      (type === 'temporary' && temporaryName.value === '') ||
-      (type === 'permanent' && permanentName.value === '')
+      (type === 'permanent' && permanentName.value === '') ||
+      (type === 'cycle' && cycleName.value === '')
    ) {
      uni.showToast({
        title: '名称不能为空',
@ -193,6 +236,14 @@
      return
    }

+    if (type === 'cycle' && weekDays.value.length === 0) {
+      uni.showToast({
+        title: '请选择有效期',
+        icon: 'none'
+      })
+      return
+    }
+
    const netWork = await $basic.getNetworkType()
    if (!netWork) {
      return
@ -221,7 +272,7 @@
        startTime: '00:00',
        endTime: '00:00'
      }
-    } else {
+    } else if (type === 'temporary') {
      params = {
        ...params,
        cardName: temporaryName.value,
@ -235,6 +286,20 @@
        startTime: '00:00',
        endTime: '00:00'
      }
+    } else {
+      params = {
+        ...params,
+        cardName: cycleName.value,
+        isAdmin: cycleAdmin.value ? 1 : 0,
+        isForce: cycleCoerced.value ? 1 : 0,
+        weekDays: weekDays.value,
+        cardType: 4,
+        isRound: 1,
+        startDate: cycleStartTime.value,
+        endDate: cycleEndTime.value,
+        startTime: timeFormat(new Date(cycleStartTime.value), 'h:M'),
+        endTime: timeFormat(new Date(cycleEndTime.value), 'h:M')
+      }
    }

    const { code, message } = await checkCardNameRequest({
@ -264,8 +329,10 @@
  const changeName = (type, event) => {
    if (type === 'permanent') {
      permanentName.value = event
-    } else {
+    } else if (type === 'temporary') {
      temporaryName.value = event
+    } else {
+      cycleName.value = event
    }
  }

@ -280,16 +347,20 @@
  const changeAdmin = (type, event) => {
    if (type === 'permanent') {
      permanentAdmin.value = event.detail.value
-    } else {
+    } else if (type === 'temporary') {
      temporaryAdmin.value = event.detail.value
+    } else {
+      cycleAdmin.value = event.detail.value
    }
  }

  const changeCoerced = (type, event) => {
    if (type === 'permanent') {
      permanentCoerced.value = event.detail.value
-    } else {
+    } else if (type === 'temporary') {
      temporaryCoerced.value = event.detail.value
+    } else {
+      cycleCoerced.value = event.detail.value
    }
  }

--- a/pages/cycleDate/cycleDate.vue
+++ b/pages/cycleDate/cycleDate.vue
@ -0,0 +1,269 @@
+<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-#5eb7ac 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"
+      :show="showStartDate"
+      v-model="defaultStartDate"
+      mode="date"
+      closeOnClickOverlay
+      :visibleItemCount="5"
+      @close="showStartDate = false"
+      @confirm="confirmDate('start', $event)"
+      @cancel="showStartDate = false"
+    ></up-datetime-picker>
+    <up-datetime-picker
+      :hasInput="false"
+      :show="showEndDate"
+      v-model="defaultEndDate"
+      mode="date"
+      closeOnClickOverlay
+      :visibleItemCount="5"
+      @close="showEndDate = false"
+      @confirm="confirmDate('end', $event)"
+      @cancel="showEndDate = false"
+    ></up-datetime-picker>
+    <up-datetime-picker
+      :hasInput="false"
+      :show="showStartTime"
+      v-model="defaultStartTime"
+      mode="time"
+      closeOnClickOverlay
+      :visibleItemCount="5"
+      @close="showStartTime = false"
+      @confirm="confirmTime('start', $event)"
+      @cancel="showStartTime = false"
+    ></up-datetime-picker>
+    <up-datetime-picker
+      :hasInput="false"
+      :show="showEndTime"
+      v-model="defaultEndTime"
+      mode="time"
+      closeOnClickOverlay
+      :visibleItemCount="5"
+      @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'
+
+  const instance = getCurrentInstance().proxy
+  const eventChannel = instance.getOpenerEventChannel()
+
+  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 startTimeText = ref(null)
+  const endTimeText = ref(null)
+
+  const defaultStartTime = ref('')
+  const defaultEndTime = ref('')
+  const defaultStartDate = ref(0)
+  const defaultEndDate = ref(0)
+
+  const list = ['一', '二', '三', '四', '五', '六', '日']
+
+  const canSubmit = computed(() => {
+    return (
+      startDate.value &&
+      endDate.value &&
+      weekDays.value.length > 0 &&
+      startTimeText.value &&
+      endTimeText.value
+    )
+  })
+
+  onLoad(options => {
+    if (options.info) {
+      const info = JSON.parse(options.info)
+      if (info.startDate) {
+        weekDays.value = info.weekDays
+        startDate.value = info.startDate
+        endDate.value = info.endDate
+
+        defaultStartDate.value = info.startDate
+        defaultEndDate.value = info.endDate
+        startTimeText.value = timeFormat(info.startDate, 'h:M')
+        endTimeText.value = timeFormat(info.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 = () => {
+    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
+    }
+    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)
+      }
+    })
+  }
+
+  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>
--- a/stores/basic.js
+++ b/stores/basic.js
@ -241,6 +241,11 @@ const pages = [
    name: 'typeRecordList',
    path: '/pages/typeRecordList/typeRecordList',
    tabBar: false
+  },
+  {
+    name: 'cycleDate',
+    path: '/pages/cycleDate/cycleDate',
+    tabBar: false
  }
 ]

--- a/stores/bluetooth.js
+++ b/stores/bluetooth.js
@ -2337,7 +2337,7 @@ export const useBluetoothStore = defineStore('ble', {
        }
      }

-      const {
+      let {
        type,
        keyId,
        uid,
@ -2354,6 +2354,9 @@ export const useBluetoothStore = defineStore('ble', {
        endTime
      } = data

+      startDate = Math.floor(startDate / 1000)
+      endDate = Math.floor(endDate / 1000)
+
      const length = 2 + 1 + 1 + 40 + 20 + 2 + 2 + 1 + 1 + 1 + 4 + 1 + 1 + 4 + 4 + 4 + 4 + 1 + 16
      const headArray = this.createPackageHeader(3, length)
      const contentArray = new Uint8Array(length)