完善功能
This commit is contained in:
wangxiaowei
326
components/booking-time.vue
Normal file
326
components/booking-time.vue
Normal file
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<view class="time-block">
|
||||
<view class="time-block-close" @click="showPopup = false">
|
||||
<image class="" src="@/static/icon_close.png" style="width: 60rpx;height: 60rpx;"> </image>
|
||||
</view>
|
||||
<view class="time-title">选择时间</view>
|
||||
<view class="time-yellow">
|
||||
示例：07:00代表07:01-07:59
|
||||
</view>
|
||||
<view>
|
||||
<view class="booking-time">
|
||||
<!-- 顶部日期tab -->
|
||||
<view class="tab-bar-scroll">
|
||||
<view class="tab-bar">
|
||||
<view v-for="(item, idx) in day.time" :key="item.display"
|
||||
class="tab-bar-item"
|
||||
:class="{active: idx === selectedDay}"
|
||||
@click="handleTabClick(idx)">
|
||||
{{ item.display }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 时间格子 -->
|
||||
<view v-if="day.time && day.time[selectedDay]">
|
||||
<view class="time-grid-wrap">
|
||||
<view class="time-grid">
|
||||
<view v-for="item2 in day.time[selectedDay].time_slots" :key="item2.start_time"
|
||||
class="time-cell"
|
||||
:class="[
|
||||
item2.disabled == 0
|
||||
? 'cell-disabled'
|
||||
: selectedTime.includes(item2.start_time)
|
||||
? 'cell-selected'
|
||||
: 'cell-normal'
|
||||
]"
|
||||
@click="item2.disabled == 1 && handleSelectTime(item2.start_time, item2.timestamp, day.time[selectedDay].time_slots)">
|
||||
{{ item2.start_time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
<!-- 底部按钮 -->
|
||||
<view class="time-footer">
|
||||
<view class="btn-reset" @click="handleResetSelectedTime">重置</view>
|
||||
<view class="btn-confirm" @click="handleConfirmSelectedTime">
|
||||
<text>确定</text>
|
||||
<text v-if="countSelectedTime">（{{ countSelectedTime }}小时）</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BookingTime',
|
||||
props: {
|
||||
value: { // v-model
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
day: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
OSS: this.$root.OSS || '', // 或 inject 方式
|
||||
showPopup: this.value,
|
||||
selectedDay: 0,
|
||||
selectedTime: [],
|
||||
selectedTimeStamp: [],
|
||||
countSelectedTime: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.showPopup = val
|
||||
},
|
||||
showPopup(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(idx) {
|
||||
if (this.selectedDay !== idx) {
|
||||
this.selectedDay = idx;
|
||||
this.handleChangeTimeTab();
|
||||
}
|
||||
},
|
||||
handleSelectTime(time, timestamp, timeSlots) {
|
||||
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)
|
||||
const selectedIdxArr = this.selectedTime.map(t => times.indexOf(t)).sort((a, b) => a - b)
|
||||
|
||||
if (this.selectedTime.length === 0) {
|
||||
this.selectedTime = [time]
|
||||
this.selectedTimeStamp = [timestamp]
|
||||
} else if (this.selectedTime.includes(time)) {
|
||||
const minIdx = selectedIdxArr[0]
|
||||
const maxIdx = selectedIdxArr[selectedIdxArr.length - 1]
|
||||
if (idx === minIdx) {
|
||||
this.selectedTime = times.slice(idx + 1, maxIdx + 1)
|
||||
this.selectedTimeStamp = timestamps.slice(idx + 1, maxIdx + 1)
|
||||
} else if (idx === maxIdx) {
|
||||
this.selectedTime = times.slice(minIdx, idx)
|
||||
this.selectedTimeStamp = timestamps.slice(minIdx, idx)
|
||||
} else {
|
||||
this.selectedTime = times.slice(minIdx, idx)
|
||||
this.selectedTimeStamp = timestamps.slice(minIdx, idx)
|
||||
}
|
||||
} else {
|
||||
const allIdx = selectedIdxArr.concat(idx)
|
||||
const minIdx = Math.min(...allIdx)
|
||||
const maxIdx = Math.max(...allIdx)
|
||||
this.selectedTime = times.slice(minIdx, maxIdx + 1)
|
||||
this.selectedTimeStamp = timestamps.slice(minIdx, maxIdx + 1)
|
||||
}
|
||||
this.countSelectedTime = this.handleCalcContinuousHours(this.selectedTime)
|
||||
},
|
||||
handleConfirmSelectedTime() {
|
||||
if (this.selectedTime.length === 0) {
|
||||
uni.showToast({
|
||||
title: '请选择时间',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
if (this.countSelectedTime < this.day.minimum_time) {
|
||||
uni.showToast({
|
||||
title: this.day.minimum_time + '小时起订',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
const data = [
|
||||
this.day.time[this.selectedDay].display,
|
||||
this.selectedTime.sort(),
|
||||
this.selectedTimeStamp.sort(),
|
||||
this.countSelectedTime,
|
||||
this.day.time[this.selectedDay].date,
|
||||
]
|
||||
this.$emit('selectedTime', data)
|
||||
this.showPopup = false
|
||||
},
|
||||
handleChangeTimeTab() {
|
||||
this.selectedTime = []
|
||||
this.selectedTimeStamp = []
|
||||
this.countSelectedTime = 0
|
||||
},
|
||||
handleCalcContinuousHours(times) {
|
||||
// 新逻辑：选中多少时间块就是多少小时
|
||||
return times.length;
|
||||
},
|
||||
handleResetSelectedTime() {
|
||||
this.selectedTime = []
|
||||
this.selectedTimeStamp = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.booking-time {
|
||||
/deep/ .wd-tabs__line {
|
||||
background-color: #4C9F44 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-scroll {
|
||||
overflow-x: auto;
|
||||
background: #fff;
|
||||
}
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 30rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.tab-bar-item {
|
||||
flex-shrink: 0;
|
||||
padding: 0 32rpx;
|
||||
height: 62rpx;
|
||||
line-height: 62rpx;
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
margin: 10rpx 16rpx 10rpx 0;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab-bar-item.active {
|
||||
color: #365A9A;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
.tab-bar-item.active::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60rpx;
|
||||
height: 10rpx;
|
||||
background: #365A9A;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -10rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: #E5E5E5;
|
||||
margin: 32rpx 0 0 0;
|
||||
}
|
||||
|
||||
.time-title {
|
||||
font-size: 36rpx;
|
||||
color: #121212;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
padding-top: 50rpx;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.time-grid-wrap {
|
||||
height: 500rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.time-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx 20rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.time-cell {
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
box-sizing: border-box;
|
||||
background: #F7F7F7;
|
||||
color: #303133;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.cell-disabled {
|
||||
background: #F7F7F7 !important;
|
||||
color: #C9C9C9 !important;
|
||||
}
|
||||
.cell-selected {
|
||||
background: #E6EFFF !important;
|
||||
color: #365A9A !important;
|
||||
}
|
||||
.cell-normal {
|
||||
background: #F7F7F7 !important;
|
||||
color: #303133 !important;
|
||||
}
|
||||
.time-footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
height: 152rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.btn-reset {
|
||||
width: 330rpx;
|
||||
height: 90rpx;
|
||||
background: #F6F7F8;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
margin-right: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.btn-confirm {
|
||||
width: 330rpx;
|
||||
height: 90rpx;
|
||||
background: #365A9A;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
position: relative;
|
||||
padding-bottom: 78rpx;
|
||||
}
|
||||
|
||||
.time-block-close {
|
||||
position: absolute;
|
||||
top: 18rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
|
||||
.time-yellow {
|
||||
width: 100%;
|
||||
background: #FFFBE5;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #E2950F;
|
||||
line-height: 56rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user