xiuhuwangqiu/components/reserve-time.vue

<template>
    <view style="position: relative;">
        <view class="uni-padding-wrap">
            <view class="" style="font-size: 36rpx; line-height: 50rpx; color: #121212; text-align: center;width: 100%;margin-top: 52rpx;">选择时间</view>
            <image src="@/static/icon/close2.png" style="width: 60rpx;height: 60rpx; position: absolute; top: 30rpx; right: 30rpx;" @click="closePopup"/>
        </view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in dateList" :key="index">{{item.label}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in hourList" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in minuteList" :key="index">{{item}}</view>
            </picker-view-column>
        </picker-view>
        <view class="line"></view>
        <view class="btn">
            <view class="btn1" @click="reset">重置</view>
            <view class="btn2" @click="confirm">确定</view>
        </view>
    </view>
</template>


<script>
    export default {
        data: function () {
            const date = new Date();
            const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
            // 生成前天、昨天、今天、明天、后天
            const dateList = [];
            for (let i = -2; i <= 2; i++) {
                const d = new Date(date.getFullYear(), date.getMonth(), date.getDate() + i);
                const mm = (d.getMonth() + 1).toString().padStart(2, '0');
                const dd = d.getDate().toString().padStart(2, '0');
                const week = weekMap[d.getDay()];
                dateList.push({
                    label: `${mm}月${dd}日周${week}`,
                    date: d
                });
            }
            // 小时 6-22
            const hourList = [];
            for (let i = 6; i <= 22; i++) {
                hourList.push(i < 10 ? `0${i}` : `${i}`);
            }
            // 分钟 00\10\20\30\40\50
            const minuteList = [];
            for (let i = 0; i < 60; i += 10) {
                minuteList.push(i < 10 ? `0${i}` : `${i}`);
            }
            // 默认选中今天
            let dateIndex = 2;
            // 当前小时和分钟
            const now = new Date();
            let hourIndex = hourList.findIndex(h => parseInt(h) === now.getHours());
            if (hourIndex === -1) hourIndex = 0;
            let minuteIndex = minuteList.findIndex(m => parseInt(m) === now.getMinutes());
            if (minuteIndex === -1) minuteIndex = 0;
            return {
                title: 'picker-view',
                dateList,
                hourList,
                minuteList,
                value: [dateIndex, hourIndex, minuteIndex], // 默认选中今天、当前小时、当前分钟
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },

        mounted() {
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value;
                // 选中项索引分别为dateList、hourList、minuteList
                this.value = val;
            },

            // 重置
            reset: function () {
                const now = new Date();
                // 日期始终选中“今天”
                let dateIndex = 2;
                // 重新生成小时列表，确保与当前小时对齐
                const hourList = [];
                for (let i = 6; i <= 21; i++) {
                    hourList.push(i < 10 ? `0${i}` : `${i}`);
                }
                let hourIndex = hourList.findIndex(h => parseInt(h) === now.getHours());
                if (hourIndex === -1) hourIndex = 0;
                // 重新生成分钟列表，确保与当前分钟对齐
                const minuteList = [];
                for (let i = 0; i < 60; i += 10) {
                    minuteList.push(i < 10 ? `0${i}` : `${i}`);
                }
                let minuteIndex = minuteList.findIndex(m => parseInt(m) === now.getMinutes());
                if (minuteIndex === -1) minuteIndex = 0;
                this.value = [dateIndex, hourIndex, minuteIndex];
            },

            // 确认
            confirm() {
                // 获取选中索引
                const [dateIdx, hourIdx, minuteIdx] = this.value;
                const dateObj = this.dateList[dateIdx];
                const hour = this.hourList[hourIdx];
                const minute = this.minuteList[minuteIdx];
                // 传递给父组件
                this.$emit('confirm', {
                    date: dateObj.date,
                    dateLabel: dateObj.label,
                    hour,
                    minute,
                    value: `${dateObj.label} ${hour}:${minute}`
                });
                this.$emit('close');
            },

            closePopup() {
                this.$emit('close');
            }
        }
    }
</script>


<style>
    .uni-padding-wrap {
        display: flex;
    }

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

    .line {
        margin-top: 62rpx;
        height: 2rpx;
        background: #E5E5E5;
    }
    
    .btn {
        margin-top: 44rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
    }

    .btn1, .btn2 {
        width: 335rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        font-size: 32rpx;
        border-radius: 8rpx;
        margin-bottom: 60rpx;
    }

    .btn1 {
        background: #F6F7F8;
        color: #303133;
    }

    .btn2 {
        background: #365A9A;
        color: #fff;
    }
</style>