wangxiaowei/chazhi_h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善时间预定功能

Browse Source
This commit is contained in:
wangxiaowei
2025-11-24 16:31:46 +08:00
parent 89fcea5bb9
commit e81704d812
1 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/BookingTime.vue
View File

@ -8,7 +8,7 @@
<view class=""> <view class="">
<view class="booking-time"> <view class="booking-time">
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="bookingTime.handleChangeTimeTab"> <wd-tabs v-model="selectedDay" color="#4C9F44" @click="BookingTime.handleChangeTimeTab">
<block v-for="item in day.time" :key="item"> <block v-for="item in day.time" :key="item">
<scroll-view scroll-y> <scroll-view scroll-y>
<wd-tab :title="`${item.display}`" :name="item.display"> <wd-tab :title="`${item.display}`" :name="item.display">
@ -23,7 +23,7 @@
: selectedTime.includes(item2.start_time) : selectedTime.includes(item2.start_time)
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮 ? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮 : '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 }} {{ item2.start_time }}
</view> </view>
</view> </view>
@ -35,8 +35,8 @@
</view> </view>
<view class=""> <view class="">
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center"> <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="bookingTime.resetSelectedTime">重置</view> <view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="BookingTime.handleResetSelectedTime">重置</view>
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="bookingTime.handleConfirmSelectedTime"> <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="BookingTime.handleConfirmSelectedTime">
<text>确定</text> <text>确定</text>
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text> <text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
</view> </view>
@ -73,13 +73,11 @@
type: Object, type: Object,
default: {} default: {}
}, },
// ...其它props
}) })
// 初始化时间 // 初始化时间
onMounted(() => { onMounted(() => {
// bookingTime.handleInitTime()
}) })
/** 日期相关 **/ /** 日期相关 **/
@ -90,42 +88,68 @@
const selectedTimeStamp = ref<number[]>([]) const selectedTimeStamp = ref<number[]>([])
const countSelectedTime = ref<number>(0) const countSelectedTime = ref<number>(0)
const bookingTime = { 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 { } 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 = BookingTime.handleCalcContinuousHours(selectedTime.value)
countSelectedTime.value = selectedTime.value.length * 1
}, },
// 确认选择的时间 // 确认选择的时间
handleConfirmSelectedTime: () => { handleConfirmSelectedTime: () => {
console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
if (selectedTime.value.length === 0) { if (selectedTime.value.length === 0) {
toast.info('请选择时间') toast.info('请选择时间')
return return
} }
if (selectedTime.value.length < props.day.minimum_time) { if (countSelectedTime.value < props.day.minimum_time) {
toast.info(props.day.minimum_time + '小时起订') toast.info(props.day.minimum_time + '小时起订')
return return
} }
const data = [ const data = [
selectedDay.value, selectedDay.value,
selectedTime.value, selectedTime.value.sort(),
selectedTimeStamp.value.sort(), selectedTimeStamp.value.sort(),
] ]
emit('selectedTime', data) emit('selectedTime', data)
@ -139,8 +163,25 @@
countSelectedTime.value = 0 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 = [] selectedTime.value = []
selectedTimeStamp.value = [] selectedTimeStamp.value = []
}, },
@ -162,7 +203,7 @@
.booking-time { .booking-time {
:deep() { :deep() {
.wd-tabs__line { .wd-tabs__line {
background-color: #4C9F44; background-color: #4C9F44 !important;
} }
} }
} }