From e81704d812439e552928f64004b1b5a635521398 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Mon, 24 Nov 2025 16:31:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=97=B6=E9=97=B4=E9=A2=84?=
=?UTF-8?q?=E5=AE=9A=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/BookingTime.vue | 93 ++++++++++++++++++++++++----------
1 file changed, 67 insertions(+), 26 deletions(-)
diff --git a/src/components/BookingTime.vue b/src/components/BookingTime.vue
index 7e57535..1b86df3 100644
--- a/src/components/BookingTime.vue
+++ b/src/components/BookingTime.vue
@@ -8,7 +8,7 @@
-
+
@@ -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 }}
@@ -35,8 +35,8 @@
- 重置
-
+ 重置
+
确定
（{{countSelectedTime}}小时）
@@ -73,13 +73,11 @@
type: Object,
default: {}
},
- // ...其它props
})
// 初始化时间
onMounted(() => {
- // bookingTime.handleInitTime()
})
/** 日期相关 **/
@@ -90,42 +88,68 @@
const selectedTimeStamp = ref([])
const countSelectedTime = ref(0)
- const bookingTime = {
- // 初始化时间逻辑
- handleInitTime: () => {
- },
+ const BookingTime = {
+ /**
+ * 选择时间段逻辑
+ */
+ 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 = BookingTime.handleCalcContinuousHours(selectedTime.value)
},
// 确认选择的时间
handleConfirmSelectedTime: () => {
- console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
if (selectedTime.value.length === 0) {
toast.info('请选择时间')
return
}
- if (selectedTime.value.length < props.day.minimum_time) {
+ if (countSelectedTime.value < props.day.minimum_time) {
toast.info(props.day.minimum_time + '小时起订')
return
}
-
+
const data = [
selectedDay.value,
- selectedTime.value,
+ selectedTime.value.sort(),
selectedTimeStamp.value.sort(),
]
emit('selectedTime', data)
@@ -139,8 +163,25 @@
countSelectedTime.value = 0
},
+ handleCalcContinuousHours(times: string[]): number {
+ if (times.length < 2) return 0
+ // 排序
+ const sorted = times.slice().sort()
+ let count = 0
+ for (let i = 1; i < sorted.length; i++) {
+ // 取前后时间的小时数
+ const [h1, m1] = sorted[i - 1].split(':').map(Number)
+ const [h2, m2] = sorted[i].split(':').map(Number)
+ // 如果是连续的1小时（分钟相同且小时差1），则+1
+ if (m1 === m2 && h2 - h1 === 1) {
+ count++
+ }
+ }
+ return count
+ },
+
// 重置选择的时间
- resetSelectedTime: () => {
+ handleResetSelectedTime: () => {
selectedTime.value = []
selectedTimeStamp.value = []
},
@@ -162,7 +203,7 @@
.booking-time {
:deep() {
.wd-tabs__line {
- background-color: #4C9F44;
+ background-color: #4C9F44 !important;
}
}
}