完成循环组件封装

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>

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,

pages.json

@@ -323,6 +323,13 @@
         "navigationBarTitleText": "操作记录",
         "disableScroll": true
       }
+    },
+    {
+      "path": "pages/cycleDate/cycleDate",
+      "style": {
+        "navigationBarTitleText": "有效期",
+        "disableScroll": true
+      }
     }
   ],
   "globalStyle": {

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
           })

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
     }
   }
 

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>

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
   }
 ]
 

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)