完善页面
This commit is contained in:
@ -8,7 +8,7 @@
|
||||
|
||||
<view class="">
|
||||
<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">
|
||||
<scroll-view scroll-y>
|
||||
<wd-tab :title="`${item.display}`" :name="item.display">
|
||||
@ -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, item.time_slots)">
|
||||
]" @click="item2.disabled == 1 && BookingTime.handleSelectTime(item2.start_time, item2.timestamp, item.time_slots)">
|
||||
{{ item2.start_time }}
|
||||
</view>
|
||||
</view>
|
||||
@ -35,8 +35,8 @@
|
||||
</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.resetSelectedTime">重置</view>
|
||||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="bookingTime.handleConfirmSelectedTime">
|
||||
<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>
|
||||
@ -69,13 +69,13 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
day: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
// 初始化时间
|
||||
onMounted(() => {
|
||||
})
|
||||
@ -88,7 +88,7 @@
|
||||
const selectedTimeStamp = ref<number[]>([])
|
||||
const countSelectedTime = ref<number>(0)
|
||||
|
||||
const bookingTime = {
|
||||
const BookingTime = {
|
||||
/**
|
||||
* 选择时间段逻辑
|
||||
*/
|
||||
@ -131,7 +131,8 @@
|
||||
selectedTime.value = times.slice(minIdx, maxIdx + 1)
|
||||
selectedTimeStamp.value = timestamps.slice(minIdx, maxIdx + 1)
|
||||
}
|
||||
countSelectedTime.value = selectedTime.value.length
|
||||
|
||||
countSelectedTime.value = BookingTime.handleCalcContinuousHours(selectedTime.value)
|
||||
},
|
||||
|
||||
// 确认选择的时间
|
||||
@ -141,7 +142,7 @@
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedTime.value.length < props.day.minimum_time) {
|
||||
if (countSelectedTime.value < props.day.minimum_time) {
|
||||
toast.info(props.day.minimum_time + '小时起订')
|
||||
return
|
||||
}
|
||||
@ -150,6 +151,7 @@
|
||||
selectedDay.value,
|
||||
selectedTime.value.sort(),
|
||||
selectedTimeStamp.value.sort(),
|
||||
countSelectedTime.value
|
||||
]
|
||||
emit('selectedTime', data)
|
||||
showPopup.value = false
|
||||
@ -162,8 +164,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 = []
|
||||
},
|
||||
@ -185,7 +204,7 @@
|
||||
.booking-time {
|
||||
:deep() {
|
||||
.wd-tabs__line {
|
||||
background-color: #4C9F44;
|
||||
background-color: #4C9F44 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user