book-hi/pages-home/components/PickupTimePicker.vue

<template>
    <u-popup mode="bottom" v-model="show" @close="close" border-radius="40">
        <view class="pickup-time-picker">
            <view class="picker-header">
                <text class="title">期望快递上门时间</text>
                <view class="close-icon" @click="close">
                    <u-icon name="close" size="24"></u-icon>
                </view>
            </view>

            <view class="picker-content">
                <!-- 左侧日期列表 -->
                <view class="date-list">
                    <view v-for="(day, index) in weekDays" :key="index" class="date-item" :class="{
                        'active': selectedDayIndex === index,
                    }" @click="selectDay(index)">
                        <text>{{ day.text }}</text>
                    </view>
                </view>

                <!-- 右侧时间列表 -->
                <view class="time-list">
                    <view v-for="(time, index) in availableTimes" :key="index" class="time-item" :class="{
                        'disabled': isTimeDisabled(time),
                        'selected': selectedTimeIndex === index
                    }" @click="selectTime(index, time)">
                        <text>{{ time }}</text>
                        <u-icon name="checkbox-mark" v-if="selectedTimeIndex === index" color="#07c160"></u-icon>
                    </view>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectedDayIndex: 0,
            selectedTimeIndex: -1,
            currentDayIndex: 0,
            weekDays: [],
            availableTimes: [
                '09:00-10:00',
                '10:00-11:00',
                '11:00-12:00',
                '12:00-13:00',
                '13:00-14:00',
                '14:00-15:00',
                '15:00-16:00',
                '16:00-17:00',
                '17:00-18:00'
            ]
        }
    },
    created() {
        this.initializeWeekDays()
    },
    methods: {
        initializeWeekDays() {
            const today = new Date()
            const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

            for (let i = 0; i < 5; i++) {
                const date = new Date(today)
                date.setDate(today.getDate() + i)

                let text = ''
                if (i === 0) {
                    text = '今天'
                } else if (i === 1) {
                    text = '明天'
                } else {
                    text = weekdays[date.getDay()]
                }

                text += `(${date.getMonth() + 1}月${date.getDate()}日)`

                this.weekDays.push({
                    text,
                    date,
                    isWeekend: date.getDay() === 0 || date.getDay() === 6
                })
            }
        },

        selectDay(index) {
            this.selectedDayIndex = index
            this.selectedTimeIndex = -1 // 切换日期时重置时间选择
        },

        selectTime(index, time) {
            if (this.isTimeDisabled(time)) return

            this.selectedTimeIndex = index
            const selectedDay = this.weekDays[this.selectedDayIndex]

            this.$emit('confirm', {
                date: selectedDay.date,
                day: selectedDay.text,
                time: time
            })
            this.close()
        },

        isTimeDisabled(time) {
            if (this.selectedDayIndex !== 0) return false

            const now = new Date()
            const [startTime] = time.split('-')
            const [hours, minutes] = startTime.split(':').map(Number)

            const timeDate = new Date()
            timeDate.setHours(hours, minutes, 0)

            return timeDate <= now
        },

        close() {
            this.$emit('update:show', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.pickup-time-picker {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;

    .picker-header {
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;

        .title {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
        }
    }

    .picker-content {
        display: flex;
        height: 760rpx;

        .date-list {
            width: 45%;
            background-color: #f8f8f8;

            .date-item {
                padding: 30rpx 20rpx;
                text-align: center;
                font-size: 28rpx;
                color: #333;

                &.active {
                    background-color: #FFFFFF;
                    color: #07c160;
                }

                &.weekend {
                    color: #4099ef;
                }
            }
        }

        .time-list {
            flex: 1;
            padding: 0 20rpx;

            .time-item {
                padding: 20rpx 60rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28rpx;
                color: #333;

                &.disabled {
                    color: #999;
                }

                &.selected {
                    color: #07c160;
                }

                .check-icon {
                    color: #07c160;
                }
            }
        }
    }
}
</style>