uniapp 自定义日期选择器

<template>
<view class="pick-component" :class="{active: show}">
	<view class="conver-bg" />
	<view class="footer-modal">
		<view class="z-flex">
			<text @click="handleCancel">取消</text>
			<text @click="handleSure" class="sure-txt">确定</text>
		</view>
		<picker-view class="picker-view-main" :indicator-style="indicatorStyle" 
			:value="sureValue"
			@change="handleValueChange"
		>
			<picker-view-column>
				<view class="item" v-for="(item,index) in dateList" :key="index">{{item.text}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in showHoursList" :key="index">{{item}}{{sureValue[0] === 0 ? '' : '时'}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in showMinuteList" :key="index">{{item}}{{sureValue[0] === 0 ? '' : '分'}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</view>
</template>

<script>
	function addZ (v) {
		return v < 10 ? ('0' + v ) : v;
	}
	export default {
		name:"date-pick", 
		data() {
			const startDate = new Date(new Date() - 0);
			const month = startDate.getMonth();
			const dateList = [{
				text: '立即送达',
				date: `${startDate.getFullYear()}/${month+1}/${startDate.getDate()}`
			}];
			const hoursList = [];
			const minuteList = ['00', '30'];
			for (let i = 0; i < 24; i++) {
				const d = new Date(startDate.getTime() + 86400000 * i);
				if (i < 15) {
					dateList.push({
						text: `${d.getMonth() !== month ? (addZ(d.getMonth()+1) + '月') : ''}${addZ(d.getDate())}日`,
						date: `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()}`
					});
				}
				hoursList.push(`${addZ(i)}`);
			}
			return {
				indicatorStyle: `height: 50px;`,
				dateList,
				hoursList,
				minuteList,
				showHoursList: ['- -'],
				showMinuteList: ['- -'],
				sureValue: [0, 0, 0]
			};
		},
		props:{
			show: Boolean
		},
		mounted() {
			
		},
		methods:{
			handleValueChange(e) {
				const value = e.detail.value;
				console.log(this.hoursList)
				if (value[0] === 0) {
					this.showHoursList = ['- -'];
					this.showMinuteList = ['- -'];
				} else {
					this.showHoursList = this.hoursList;
					this.showMinuteList = this.minuteList;
				}
				this.sureValue = value;
			},
			handleCancel() {
				this.$emit('callback', { sure: false });
			},
			handleSure() {
				const d = this.sureValue;
				let value = '';
				if (d[0] === 0) {
					value = '立即配送'
				} else {
					value = `${this.dateList[d[0]].date} ${this.showHoursList[d[1]]}:${this.showMinuteList[d[2]]}:00`
				}
				this.$emit('callback', { sure: true, value});
			}
			
		}
	}
</script>

<style lang="scss">
.pick-component {
	&.active{
		.conver-bg{
			display: block;
		}
		.footer-modal{
			transform: translate(0, 0);
		}
	}
	.conver-bg {
		position: fixed;
		z-index: 998;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,.2);
		display: none;
	}
	.footer-modal{
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 500rpx;
		box-sizing: border-box;
		padding-top: 90rpx;
		left: 0;
		bottom: 0;
		background-color: #fff;
		border-top-right-radius: 15rpx;
		border-top-left-radius: 15rpx;
		transform: translate(0, 100%);
		transition: all .3s ease-in-out 0s;
		.z-flex{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 90rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
			justify-content: space-between;
			font-size: 32rpx;
			color: #666;
			border-bottom: 1px solid #E6E6E6;
			.sure-txt{
				color: #3387FF;
			}
		}
	}
	.picker-view-main{
		width: 100%;
		height: 600rpx;
		margin-top:20rpx;
	}
	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	
	.item {
	    line-height: 100rpx;
	    text-align: center;
	}
}
</style>