Ci2Order.vue/App/components/z-time-select/z-time-select.vue

<template>
	<view class="mask" @touchmove.stop.prevent="moveHandle" v-if="visible">
		<view class="picker-view shadow-2" :animation="animation">
			<view class="flex-n fac fjb plr-40 ptb-20">
				<view class="cancel" @click="cancel">取消</view>
				<view class="ok" @click="ok">确定</view>
			</view>
			<picker-view class="picker-view-content" :value="timevalue" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in timeList" :key="index">{{item.hourstext}}</view>
				</picker-view-column>
				<picker-view-column v-if="timeList&&timeList[oneId]&&timeList[oneId].minutesList">
					<view class="item" v-for="(item,index) in timeList[oneId].minutesList" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'z-time-select',
		props: {
			value: String|Number,
			visible: Boolean,
			step: {
				type: Number,
				default: 1
			}, //步长
			start: {
				type: String,
				default: '00:00'
			}, //开始时间
			end: {
				type: String,
				default: '24:00'
			}, //结束时间
			minTime: {
				type: String,
				default: ''
			}, //最小时间，大于不包含
			maxTime: {
				type: String,
				default: ''
			}, //最大时间，小于不包含
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				timeList: [],
				oneId: 0,
				secondId: 0,
				timevalue: [0, 0],
				animation: {},
				animate: '',
			}
		},
		watch: {
			visible(newval, oldval) {
				if (newval) {
					this.getTimeList();
					this.getChecked();
					this.animation = this.animate.translateY(500).step({
						duration: 0
					}).translateY(0).step().export();
				}
			}
		},
		mounted() {
			this.animate = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
		},
		methods: {
			moveHandle() {},
			getChecked(){
				if(this.value){
					var value=this.value.split(':');
					for(var i in this.timeList){
						if(this.timeList[i].hours==value[0]){
							this.timevalue.splice(0,1,Number(i));
							this.oneId=i;
							for(var j in this.timeList[i].minutesList){
								if(this.timeList[i].minutesList[j]==value[1]){
									this.timevalue.splice(1,1,Number(j));
									this.secondId=j;
									break;
								}
							}
							break;
						}
					}
				}
			},
			getTimeList() {
				//有最大最小时间 就执行最大最小时间加减步长，没有就是默认开始结束
				var start = this.minTime ? this.minTime.split(':') : this.start.split(':'),
					end = this.maxTime ? this.maxTime.split(':') : this.end.split(':'),
					step = this.step;
				var timeList = [];
				var hours = '',
					minutes = '';
				for (var i = start[0] * 60 + Number(start[1]) + (this.minTime ? this.step : 0); i <= end[0] * 60 + Number(end[1]) -
					(this.maxTime ? this.step : 0); i = i + step) {
					minutes = i % 60 > 9 ? (i % 60) : ('0' + i % 60);
					hours = (i - i % 60) / 60 > 9 ? ((i - i % 60) / 60) : ('0' + ((i - i % 60) / 60));
					if (timeList.length > 0 && hours == timeList[timeList.length - 1].hours) {
						timeList[timeList.length - 1].minutesList.push(minutes)
					} else {
						var minutesList = [];
						minutesList.push(minutes)
						timeList.push({
							hours: hours,
							hourstext:hours>=24?('次日'+((hours-24)>9?(hours-24):('0'+(hours-24)))):hours,
							minutesList: minutesList
						})
					}
				}
				console.log(timeList)
				this.timeList = timeList;
			},
			bindChange(e) {
				console.log(e.detail.value)
				if (this.oneId != e.detail.value[0]) {
					this.secondId = 0;
					this.oneId = e.detail.value[0];
				} else {
					this.secondId = e.detail.value[1];
				}

				this.timevalue = [this.oneId, this.secondId];
			},
			ok() {
				let time=this.timeList[this.oneId].hours+':'+this.timeList[this.oneId].minutesList[this.secondId];
				this.$emit('input',time)
				this.$emit('update:visible', false);
				this.$emit('ok',{
					time:time,
					text:this.$Date.getFormatTimeText(time)
				});	
			},
			cancel() {
				this.$emit('cancel');
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba($color: #000000, $alpha: 0.3);
	}
	
	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 476rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		background-color: white;
		z-index: 666;
	
		.cancel {
			font-size: 38rpx;
			color: #ccc;
		}
	
		.ok {
			font-size: 38rpx;
			color: #F0AD4E;
		}
	
		.picker-view-content {
			height: 350rpx;
		}
	
		.disabled {
			background: #eeeeee;
			color: white;
		}
	
		.item {
			text-align: center;
			font-size: 32rpx;
			line-height: 64rpx;
		}
	}
</style>