uniapp 小程序H5实现选择时间段组件

 

<style lang="scss" scoped>
.flex{ display: flex; align-items: center;}
.center{ display: flex; align-items: center; justify-content: center;}
.between{ display: flex; align-items:center; justify-content: space-between;}

.syui-anim{ -webkit-animation-duration: .35s; animation-duration: .35s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
/**向上二**/
.syui-enter-up2 {-webkit-animation-name:syui-enter-up2; animation-name: syui-enter-up2;}	
@-webkit-keyframes syui-enter-up2 { from {	transform: translateY(100%);	opacity:0} to { transform: translateY(0); opacity: 1 }  }

.syui-leave-up2 {-webkit-animation-name:syui-leave-up2; animation-name:syui-leave-up2;}	
@-webkit-keyframes syui-leave-up2 { from {	transform: translateY(0);	opacity:1} to { transform: translateY(100%); opacity: 0 }  }

.selecttime{ width:100%; height:100%; position:relative; z-index:333;
	.smask{ position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); }
	.box{ background:#fff; border-radius:24rpx 24rpx 0 0; position: fixed; bottom:0; left:0; width:100%; padding:0 40rpx; padding-bottom:40rpx;
		.ht{ padding:45rpx 30rpx; font-weight: bold; padding-bottom:20rpx;
			.fl{ font-size:32rpx; }
			.tit{ font-size:32rpx; color:#000;}
			.ok{font-size:32rpx; color:$main-color;}
		}
		.sm{text-align: center; color:#A5A5A5; font-size:24rpx;}
		.pickerday{ height:250rpx;
			.item{ font-weight: bold; font-size:32rpx;}
		}
		.hm{ margin-top:30rpx;
			.t1{ font-size:32rpx; font-weight: bold;}
			.week{ display:flex; flex-wrap:wrap; margin-left:-24rpx;
				.item{ width:calc(100% / 4 - 24rpx); position: relative; overflow: hidden; height:72rpx; font-size:32rpx; margin-left:24rpx; margin-top:40rpx; border-radius:16rpx; background:#F4F5F6;
					&.on{ border:1px solid red; color:red; .g{display:block;} }
					.g{width:40rpx; height:40rpx; position: absolute; right:0; bottom:0; display:none;}
				}
			}
		}
	}
}	
</style>
<template>
	 <view class="selecttime" v-show="showani">
		 <view class="smask" v-if="show"></view>
		 <view class="box syui-anim" :class="classs" v-if="showani">
			 <view class="ht between">
				 <view class="fl" @tap="open">取消</view>
				 <view class="tit">选择时间段</view>
				 <view class="ok" @tap="ok">确定</view>
			 </view>
			 <picker-view class="pickerday" :value="dateValue" @change="changeDate">
				 <picker-view-column>
					 <view class="item center" v-for="(item,index) in timeCn" :key="index">{{item}}</view>
				 </picker-view-column>			 
				 <picker-view-column>
				 	 <view class="item center" v-for="(item,index) in timeArr" :key="index">{{item}}</view>
				 </picker-view-column>
				 <picker-view-column>
				 	 <view class="item center" >至</view>
				 </picker-view-column>
				 <picker-view-column>
				 	 <view class="item center" v-for="(item,index) in timeCn" :key="index">{{item}}</view>
				 </picker-view-column>
				 <picker-view-column>
				 	 <view class="item center" v-for="(item,index) in timeArr" :key="index">{{item}}</view>
				 </picker-view-column>
			 </picker-view>
			 <view class="hm">
				 <view class="t1">选择周期</view>
				 <view class="week">
					<view class="item center" @tap="selectWeek(index)" v-for="(item,index) in weekArr" :key="index" :class="{on:weekCur.includes(index)}">
					{{item}} 
					</view>
				 </view>
			 </view>
		 </view>
	 </view>
</template>

<script>
//项目设置选择约会时间
export default{
	data(){
		return{
			showani:false,
			classs:'',
			show:false,
			value:[],
			timeCn:['早上','上午','下午','晚上','凌晨'], //时间段
			timeArr:[], //时间0点到24点
			weekArr:['周一','周二','周三','周四','周五','周六','周日'],
			dateValue:[1,9,0,2,13], //约会时间
			timeUp:'',
			weekCur:[0,1,2,3,4,5,6], //约会时长
		}
	},
	
	watch:{
		dateValue:{
			handler:function (newVal, oldVal) {
				const val = newVal
				let arr = [6,9,13,19,0];
				for(let i = 0; i < arr.length; i++){
					if(newVal[0]==i && newVal[0]!=oldVal[0]){ this.dateValue[1] = arr[i]}
					if(newVal[3]==i && newVal[3]!=oldVal[3]){ this.dateValue[4] = arr[i]}
				}
				//第一段时间选择
				if(val[1] < 6){ this.dateValue[0] = 4 }
				if(val[1] >= 6 && val[1] <= 8){ this.dateValue[0] = 0 }
				if(val[1] >= 9 && val[1] <= 12){ this.dateValue[0] = 1 }
				if(val[1] >= 13 && val[1] <= 18){ this.dateValue[0] = 2 }
				if(val[1] >= 19 && val[1] <= 23){ this.dateValue[0] = 3 }
				//第二段时间选择
				if(val[4] < 6){ this.dateValue[3] = 4 }
				if(val[4] >= 6 && val[4] <= 8){ this.dateValue[3] = 0 }
				if(val[4] >= 9 && val[4] <= 12){ this.dateValue[3] = 1 }
				if(val[4] >= 13 && val[4] <= 18){ this.dateValue[3] = 2 }
				if(val[4] >= 19 && val[4] <= 23){ this.dateValue[3] = 3 }				
			},
			deep:true
		}
	},
	
	mounted(){
		
	},
		
	methods:{
		
		open(){
			if(!this.showani){
				this.classs = 'syui-enter-up2'
				this.showani = true
				this.show = true
				this.initTime()
			}else{
				this.classs = 'syui-leave-up2'
				this.show = false
				setTimeout(res=>{							
					this.showani = false
				},200)
			}		
		},
		
		//初始倾听时间段
		initTime(){
			this.timeArr = []
			for(let i = 0; i < 24; i++){
				this.timeArr.push(`${i<10 ? '0'+ i : i}:00`)
			}
		},
		
		//选择周期
		selectWeek(index){
			let flag = this.weekCur.indexOf(index)			
			if(flag!=-1){
				this.weekCur.splice(flag,1)
			}else{
				this.weekCur.push(index)
			}
		},
		
		changeDate(e){
			this.dateValue = e.detail.value
		},
		
		ok(){
			if(this.weekCur.length==0){
				this.api.toast("请选择约会周期");
				return;
			}
			let week = []
			this.weekCur.forEach((res,index)=>{
				 week.push(this.weekArr[index])
			})
			let result = {
				startTime: this.timeArr[this.dateValue[1]],
				endTime: this.timeArr[this.dateValue[4]],
				week:week.join(',')
			}
			console.log(result)
		}
		
	}
	
}
</script>

<style>
</style>

使用的时候直接引入组件，然后调用组件 open方法弹窗

例如 <SelectTime ref="time" @confirm="okTime"></SelectTime>   

<view @tap="$refs.time.open">打开时间选择<.view>