230 lines
10 KiB
Vue
230 lines
10 KiB
Vue
<template>
|
||
<wd-popup v-model="showPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pb-78rpx">
|
||
<view class="absolute top-18rpx right-30rpx" @click="showPopup = false">
|
||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||
</view>
|
||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||
|
||
<view class="">
|
||
<view class="booking-time">
|
||
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="BookingTime.handleChangeTimeTab">
|
||
<scroll-view scroll-y class="!h-500rpx pb-100rpx">
|
||
<block v-for="(item, index) in day.time" :key="index">
|
||
<wd-tab :title="`${item.display}`" :name="item.display">
|
||
<view class="">
|
||
<view class=" mt-30rpx">
|
||
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
|
||
<view v-for="item2 in item.time_slots" :key="item2.start_time"
|
||
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
|
||
:class="[
|
||
item2.disabled == 1
|
||
? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
|
||
: selectedTime.some(t => t.date === item.date && t.time === item2.start_time)
|
||
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
|
||
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
|
||
]" @click="item2.disabled == 0 && BookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots, item.date, item.display)">
|
||
{{ item2.start_time }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-tab>
|
||
</block>
|
||
</scroll-view>
|
||
</wd-tabs>
|
||
<view class="">
|
||
<view>
|
||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||
</view>
|
||
<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-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">
|
||
<text>确定</text>
|
||
<text v-if="countSelectedTime">（{{countSelectedTime}}小时）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="BookingTime">
|
||
import {toast} from '@/utils/toast'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
/**
|
||
* BookingTime 预约时间
|
||
* @description 茶室预约时间选择组件
|
||
*/
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
|
||
day: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
})
|
||
|
||
// 初始化时间
|
||
onMounted(() => {
|
||
console.log("🚀 ~ day:", props.day)
|
||
})
|
||
|
||
/** 日期相关 **/
|
||
|
||
const days = ref<string[]>([])
|
||
const selectedDay = ref<number>(0)
|
||
// 支持跨天选择，结构为 { date, time, timestamp }
|
||
const selectedTime = ref<Array<{ date: string, time: string, timestamp: number }>>([])
|
||
const countSelectedTime = ref<number>(0)
|
||
const selectTimeIndex = ref<number>(0) // 选择的时间tab索引
|
||
|
||
const BookingTime = {
|
||
/**
|
||
* 选择时间段逻辑，支持跨天
|
||
* @param time 选择的时间字符串 "HH:MM"
|
||
* @param timestamp 选择的时间戳
|
||
* @param timeSlots 当前日期的所有时间段
|
||
* @param date 当前选择的日期 "2025-12-20"
|
||
* @param display 当前选择的日期展示 "12/20周六"
|
||
*/
|
||
handleSelectTime: (time: string, timestamp: number, timeSlots: any[], date: string, display: string) => {
|
||
// 获取当前tab的日期
|
||
const currentDate = props.day.time[selectTimeIndex.value].date
|
||
const idx = selectedTime.value.findIndex(t => t.date === currentDate && t.time === time)
|
||
if (selectedTime.value.length === 0 || selectedTime.value.length > 1) {
|
||
// 第一次点击或已选2个及以上，重置为只选当前
|
||
selectedTime.value = [{ date: currentDate, time, timestamp }]
|
||
} else if (selectedTime.value.length === 1) {
|
||
// 第二次点击，做范围选择
|
||
const first = selectedTime.value[0]
|
||
const second = { date: currentDate, time, timestamp }
|
||
// 获取所有可选时间段（含跨天）
|
||
let allSlots = []
|
||
props.day.time.forEach(dayItem => {
|
||
dayItem.time_slots.forEach(slot => {
|
||
if (slot.disabled == 0) {
|
||
allSlots.push({ date: dayItem.date, time: slot.start_time, timestamp: slot.timestamp })
|
||
}
|
||
})
|
||
})
|
||
// 按 timestamp 排序
|
||
allSlots = allSlots.sort((a, b) => a.timestamp - b.timestamp)
|
||
// 找到 first 和 second 的索引
|
||
const idx1 = allSlots.findIndex(t => t.date === first.date && t.time === first.time)
|
||
const idx2 = allSlots.findIndex(t => t.date === second.date && t.time === second.time)
|
||
if (idx1 > -1 && idx2 > -1) {
|
||
const [start, end] = idx1 < idx2 ? [idx1, idx2] : [idx2, idx1]
|
||
selectedTime.value = allSlots.slice(start, end + 1)
|
||
} else {
|
||
// 找不到则只选当前
|
||
selectedTime.value = [second]
|
||
}
|
||
}
|
||
countSelectedTime.value = BookingTime.handleCalcContinuousHours(selectedTime.value.map(t => t.timestamp))
|
||
},
|
||
|
||
// 确认选择的时间
|
||
handleConfirmSelectedTime: () => {
|
||
if (selectedTime.value.length === 0) {
|
||
toast.info('请选择时间')
|
||
return
|
||
}
|
||
|
||
if (countSelectedTime.value < props.day.minimum_time) {
|
||
toast.info(props.day.minimum_time + '小时起订')
|
||
return
|
||
}
|
||
|
||
// 返回所有已选的时间段（含日期、时间、timestamp）及所有timestamp数组
|
||
const sortedSelected = selectedTime.value.slice().sort((a, b) => a.timestamp - b.timestamp)
|
||
const timestamps = sortedSelected.map(t => t.timestamp)
|
||
|
||
// 格式化时间戳为 2025-12-18 和 周三03/18
|
||
function formatDate(ts: number) {
|
||
const d = new Date(ts * 1000)
|
||
const y = d.getFullYear()
|
||
const m = (d.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = d.getDate().toString().padStart(2, '0')
|
||
return `${y}-${m}-${day}`
|
||
}
|
||
function formatWeek(ts: number) {
|
||
const d = new Date(ts * 1000)
|
||
const weekArr = ['周日','周一','周二','周三','周四','周五','周六']
|
||
const week = weekArr[d.getDay()]
|
||
const m = (d.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = d.getDate().toString().padStart(2, '0')
|
||
return `${week}${m}/${day}`
|
||
}
|
||
const dayTime = formatDate(timestamps[0])
|
||
const dayTitle = formatWeek(timestamps[0])
|
||
|
||
const data = {
|
||
selectedDay: dayTime,
|
||
selectedTime: sortedSelected,
|
||
selectedTimestamps: timestamps,
|
||
dayTitle,
|
||
dayTime,
|
||
countSelectedTime: countSelectedTime.value
|
||
}
|
||
|
||
emit('selectedTime', data)
|
||
showPopup.value = false
|
||
},
|
||
|
||
// 切换时间tab的时候不重置已选，实现跨天选择
|
||
handleChangeTimeTab: (e: any) => {
|
||
selectTimeIndex.value = e.index
|
||
// 不重置 selectedTime
|
||
},
|
||
|
||
// 计算所有连续区间的小时数总和，timestamps 为时间戳数组
|
||
handleCalcContinuousHours(timestamps: number[]): number {
|
||
if (timestamps.length < 1) return 0
|
||
const sorted = timestamps.slice().sort((a, b) => a - b)
|
||
let count = 0
|
||
let segment = 1
|
||
for (let i = 1; i < sorted.length; i++) {
|
||
if (sorted[i] - sorted[i - 1] === 1800) {
|
||
segment++
|
||
} else {
|
||
count += (segment - 1) * 0.5
|
||
segment = 1
|
||
}
|
||
}
|
||
count += (segment - 1) * 0.5
|
||
return count
|
||
},
|
||
|
||
// 重置选择的时间
|
||
handleResetSelectedTime: () => {
|
||
selectedTime.value = []
|
||
countSelectedTime.value = 0
|
||
},
|
||
}
|
||
|
||
const showPopup = computed({
|
||
get: () => props.modelValue,
|
||
set: (val: boolean) => emit('update:modelValue', val)
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'selectedTime'])
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style> |