完善时间选择

src/components/BookingTime.vue

@@ -23,7 +23,7 @@
                                                             : selectedTime.includes(item2.start_time)
                                                                 ? 'bg-[#F1F8F0] text-[#4C9F44]'   // 选中高亮
                                                                 : 'bg-[#F7F7F7] text-[#303133]',  // 可选高亮
-                                                    ]" @click="item2.disabled == 1 && bookingTime.handleSelectTime(item2.start_time, item2.timestamp)">
+                                                    ]" @click="item2.disabled == 1 && bookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots)">
                                                     {{ item2.start_time }}
                                                 </view>
                                             </view>
@@ -73,13 +73,11 @@
             type: Object,
             default: {}
         },
-        // ...其它props
     })
 
 
     // 初始化时间
     onMounted(() => {
-        // bookingTime.handleInitTime()
     })
 
     /** 日期相关 **/
@@ -91,23 +89,49 @@
     const countSelectedTime = ref<number>(0)
 
     const bookingTime = {
-        // 初始化时间逻辑
+        /**
-        handleInitTime: () => {
+         * 选择时间段逻辑
-        },
+         */
+        handleSelectTime: (time: string, timestamp: number, timeSlots: any[]) => {
+            // 获取当前tab下所有可选时间段（未禁用）
+            const availableSlots = timeSlots.filter(slot => slot.disabled == 1)
+            const times = availableSlots.map(slot => slot.start_time)
+            const timestamps = availableSlots.map(slot => slot.timestamp)
+            const idx = times.indexOf(time)
 
-        // 选择的时间高亮显示
+            // 当前已选的索引
-        handleSelectTime: (time: string, timestamp: number) => {
+            const selectedIdxArr = selectedTime.value.map(t => times.indexOf(t)).sort((a, b) => a - b)
-            const idx = selectedTime.value.indexOf(time)
+
-            if (idx > -1) {
+            if (selectedTime.value.length === 0) {
-                selectedTime.value.splice(idx, 1) // 取消选中
+                // 没有已选，直接选中
-                selectedTimeStamp.value.splice(idx, 1)
+                selectedTime.value = [time]
+                selectedTimeStamp.value = [timestamp]
+            } else if (selectedTime.value.includes(time)) {
+                // 如果点击的是已选的端点，则取消该端及之后/之前的所有时间
+                const minIdx = selectedIdxArr[0]
+                const maxIdx = selectedIdxArr[selectedIdxArr.length - 1]
+                if (idx === minIdx) {
+                    // 取消左端
+                    selectedTime.value = times.slice(idx + 1, maxIdx + 1)
+                    selectedTimeStamp.value = timestamps.slice(idx + 1, maxIdx + 1)
+                } else if (idx === maxIdx) {
+                    // 取消右端
+                    selectedTime.value = times.slice(minIdx, idx)
+                    selectedTimeStamp.value = timestamps.slice(minIdx, idx)
+                } else {
+                    // 如果点的是中间的，直接只保留左侧
+                    selectedTime.value = times.slice(minIdx, idx)
+                    selectedTimeStamp.value = timestamps.slice(minIdx, idx)
+                }
             } else {
-                selectedTime.value.push(time) // 选中
+                // 新选，补全区间
-                selectedTimeStamp.value.push(timestamp)
+                const allIdx = selectedIdxArr.concat(idx)
+                const minIdx = Math.min(...allIdx)
+                const maxIdx = Math.max(...allIdx)
+                selectedTime.value = times.slice(minIdx, maxIdx + 1)
+                selectedTimeStamp.value = timestamps.slice(minIdx, maxIdx + 1)
             }
-
+            countSelectedTime.value = selectedTime.value.length
-            // 计算时长
-            countSelectedTime.value = selectedTime.value.length * 1
         },
 
         // 确认选择的时间