tourism/uni_merchants_enter/uni_modules/smh-time-range/components/smh-time-range/smh-time-range.vue

<template >
	<view v-if="isUnder">
		<view class='shade'>
		
		</view>
		<view  class="time1">
			<view class="top flex justify-between align-center">
				<text  @tap="cancel">取消</text>
				<text @tap="confirm">确定</text>
			</view>
			<view style='display: flex;justify-content: space-between;margin:0 38px;'>
				<view>开始时间</view>
				<view>结束时间</view>
			</view>
			<picker-view class="picker" :value="value" @change="getime" indicator-style="height:30px;">
				<picker-view-column>
					<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view style="line-height:30px; text-align: center;">-</view>
				</picker-view-column>
				<picker-view-column>
					<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
<script>
	let minutes=['00','30']
	// for (let i = 0; i <= 59; i++) {
	// 	if(i<10){
	// 		i="0"+i
	// 	}
	//   minutes.push(i)
	// }
	export default{
		props:{
			time:{
				type: Array,
				default() {
					return ['15','0','0'];
				}
			},
			isUnder: {
			    type: Boolean,
			    default: false
			}
		},
		watch:{
			time:function(){
				this.value=this.time
			},
			
		},
		created(){
			console.log(this.isUnder)
		},
		data(){
			return{
				value:this.time,//默认结束开始时间
				hoursList:[
					'00:00',
					'00:30',
					'01:00',
					'01:30',
					'02:00',
					'02:30',
					'03:00',
					'03:30',
					'04:00',
					'04:30',
					'05:00',
					'05:30',
					'06:00',
					'06:30',
					'07:00',
					'07:30',
					'08:00',
					'08:30',
					'09:00',
					'09:30',
					'10:00',
					'10:00',
					'11:00',
					'11:30',
					'12:00',
					'12:30',
					'13:00',
					'13:30',
					'14:00',
					'14:30',
					'15:00',
					'15:30',
					'16:00',
					'16:30',
					'17:00',
					'17:30',
					'18:00',
					'18:30',
					'19:00',
					'19:30',
					'20:00',
					'20:30',
					'21:00',
					'21:30',
					'22:00',
					'22:30',
					'23:00',
					'23:30',
					'24:00'],
				minutes,
			}
		},
		methods:{
			confirm(){
				setTimeout(()=>{
					console.log(this.value)
					let time = this.value[0]+"~"+this.value[1]
					this.$emit("confrim",{time:time,start:this.value[0],end:this.value[1]})
				},100)
				
			},
			cancel(){
				let time = this.value[0]+"~"+this.value[1]
				this.$emit("cancel",{time:time,start:this.value[0],end:this.value[1]})
			},
			getime(e){
				let val = e.detail.value
				console.log(val,val[0],val[1],val[2])
				this.value[0] = this.hoursList[val[0]] 
				this.value[1] = this.hoursList[val[2]] 
			},
		}
	}
</script>
<style lang="scss" scoped>
.shade{
	position: fixed;
	    bottom: 0;
	    top: 0;
	    left: 0;
	    right: 0;
	    background-color: rgba(0, 0, 0, 0.4);
	    transition-property: opacity;
	    transition-duration: 0.3s;
	    opacity: 1;
	    z-index: 99;
}
.time1{
	    position: fixed;
	    left: 0;
	    right: 0;
	    transition-property: -webkit-transform;
	    transition-property: transform;
	    transition-property: transform, -webkit-transform;
	    transition-duration: 0.3s;
	    bottom: calc(0px);
	    z-index: 99;
	width:100%;
	margin: 0 auto;
	background-color:#FFFFFF;
	color: #000;
	height: 450rpx;
	.top{
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		text{
			font-weight: bold;
			&:nth-child(1){
				font-size: 28rpx;
				color: #999;
			}
			&:nth-child(2){
				font-size: 28rpx;
				color: #0A84FF;
			}
		}
	}
	.tip12{
		width: 100%;
		height: 100rpx;
		view{
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #000000;
		}
	}
	.hours{
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}
	.minutes{
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}
}
.picker{
	width: 100%;
	height: 300rpx;
}
</style>