diff --git a/src/components/BookingTime.vue b/src/components/BookingTime.vue index 4c08d6f..4ab2f64 100644 --- a/src/components/BookingTime.vue +++ b/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 }} @@ -73,13 +73,11 @@ type: Object, default: {} }, - // ...其它props }) // 初始化时间 onMounted(() => { - // bookingTime.handleInitTime() }) /** 日期相关 **/ @@ -91,23 +89,49 @@ const countSelectedTime = ref(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 idx = selectedTime.value.indexOf(time) - if (idx > -1) { - selectedTime.value.splice(idx, 1) // 取消选中 - selectedTimeStamp.value.splice(idx, 1) + // 当前已选的索引 + const selectedIdxArr = selectedTime.value.map(t => times.indexOf(t)).sort((a, b) => a - b) + + if (selectedTime.value.length === 0) { + // 没有已选,直接选中 + 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 * 1 + countSelectedTime.value = selectedTime.value.length }, // 确认选择的时间