CommunityApp/comps/mp-time/index.vue

<template>
	<view class="container">
			<view class="flex justify-center " style="padding: 20rpx 0 50rpx 0;">
				<text class="text-center text-lg text-bold">请选择预约时间</text>
			</view>
			<!-- tab栏 -->
			<scroll-view class="scroll-view_H b-t b-b" scroll-x>
				<block v-for="(item, index) in dateArr" :key="index">
					<div class="flex-box" @click="selectDateEvent(index, item)" :style="{ 'box-shadow': index == dateActive ? 'inset 0 -2px 0 0 ' + selectedTabColor : '' }">
						<view class="date-box">
							<text class="days" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.week }}</text>
							<text class="date" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.date }}</text>
						</view>
					</div>
				</block>
			</scroll-view>
			<!-- 时间选项 -->
			<view class="time-box" style="margin-top: 20rpx;">
				<view v-if="mode==0" class="flex justify-center">
					<view  class="box margin-right-20" @click="changeActive(0)" :class="active==0?'active':'unactive'">
						<text class="text-center">{{firstTime}}-{{centerTime}}</text>
					</view>
					<view class="box margin-left-20" @click="changeActive(1)" :class="active==1?'active':'unactive'">
						<text class="text-center">{{centerTime}}-{{lastTime}}</text>
					</view>
				</view>
				<block v-else v-for="(item, _index) in timeArr" :key="_index">
					<view class="item">
						<view
							class="item-box line-blue"
							:class="{ disable: item.disable, 
							active: timeActive.indexOf(_index) >= 0 }"
							:style="{
								filter: _index < timeActive[1] && _index > timeActive[0] ? 'opacity(0.6)' : ''
							}"
							@click="selectTimeEvent(_index, item)"
						>
							<text>{{ item.time }}</text>
							<text class="all" v-if="item.disable">{{ disableText }}</text>
							<text class="all" v-if="_index == timeActive[0] && !item.disable" style="font-size: 20upx;">开始时间</text>
							<text class="all" v-if="_index == timeActive[1] && !item.disable" style="font-size: 20upx;">结束时间</text>
						</view>
					</view>
				</block>
				<view v-if="mode==0" class="flex justify-center margin-top-50">
					<view class="">
						{{dateTime.beginTime}}
						<text style="padding: 0 20rpx;">至</text>
						{{dateTime.endTime}}
					</view>
				</view>
			</view>
			<view @click="confirm" class="cu-btn bg-red-btn round flex footer-fixed" style="margin:10rpx 0;padding: 40rpx;">
				确认
			</view>
	</view>
</template>

<script>
import { dateData, timeData, timeStamp } from './date.js';
let maxIndex;
export default {
	props: {
		//0 双项模式 1 多项模式
		mode:{
			type:Number,
			default:0
		},
		//开始时间选项
		startTime: {
			type: String,
			default: '09:00'
		},
		//结束时间选项
		endTime: {
			type: String,
			default: '18:00'
		},
		// 提前预约的时间
		advanceTime: {
			type: Number,
			default: 1
		},
		// 默认选择的时间段间隔
		timeSlot: {
			type: Number,
			default: 2
		},
		//时间间隔
		timeInterval: {
			type: [Number, String],
			default: 1 //半小时
		},
		//选中的tab颜色
		selectedTabColor: {
			type: String,
			default: '#59a5f0'
		},
		//选中的时间颜色
		selectedItemColor: {
			type: String,
			default: '#59a5f0'
		},

		//禁用显示的文本
		disableText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			firstTime:'9:00',
			centerTime:'13:00',
			lastTime:'19:00',
			active:0,
			dateTime:{},
			
			dateArr: [], //日期数据
			timeArr: [], //时间数据
			dateActive: 0, //选中的日期索引
			timeActive: [], //选中的时间索引
			oldTimeActive: [], //保存用户筛选的时间
			selectDate: '', //选择的日期数据
			selectTime: [], //选择的时间
			oldSelectTime: '',
			currentTimeStamp: '',
			currentTime: '',
			tabs: 0
		};
	},
	created() {
		//获取日期tab数据
		this.dateArr = dateData();
		//获取时间数据
		this.timeArr = timeData(this.startTime, this.endTime, this.timeInterval);
		maxIndex = this.timeArr[this.timeArr.length - 1]['index'];
		//当前时间戳
		this.currentTimeStamp = Date.now() + this.advanceTime * 3600 * 1000;
		this.currentTime = timeStamp(this.currentTimeStamp).hour;
		this.timeArr.map(item => {
			if (item.time > this.currentTime) {
				return (item.disable = 0); //判断当前时间大于时间选项则禁用
			} else {
				return (item.disable = 1);
			}
		});
		//默认选中的日期
		// this.selectDate = `${this.dateArr[0]['date']}(${this.dateArr[0]['week']})`;
		this.selectDate=new Date().getFullYear()+'-'+this.dateArr[0]['date']
		if (this.active==0) {
			let beginTime=this.selectDate+" "+this.firstTime+':00'
			let endTime=this.selectDate+" "+this.centerTime+':00'
			this.dateTime.beginTime=beginTime
			this.dateTime.endTime=endTime
		}else{
			let beginTime=this.selectDate+" "+this.centerTime+':00'
			let endTime=this.selectDate+" "+this.lastTime+':00'
			this.dateTime.beginTime=beginTime
			this.dateTime.endTime=endTime
		}
		
		this.timeArr.some((item, index) => {
			// 默认选中的时间段
			const endIndex = this.timeSlot / this.timeInterval + index > maxIndex ? maxIndex : this.timeSlot / this.timeInterval + index;
			this.selectTime = [this.timeArr[index]['time'], this.timeArr[endIndex]['time']]; //默认选中的时间
			this.oldSelectTime = this.selectTime; //存储选中的时间
			this.timeActive = [index, endIndex]; //选中的时间索引
			this.oldTimeActive = [index, endIndex];
			return !item.disable;
		});
	},
	methods: {
		confirm(){
			if (this.mode!=0) {
				if (this.dateTime.beginTime==undefined||this.dateTime.endTime==undefined) {
					this.dateTime.beginTime=this.selectDate+" "+this.selectTime[0]+":00"
					this.dateTime.endTime=this.selectDate+" "+this.selectTime[1]+":00"
				}
				this.$emit('getDateTime',this.dateTime)
				return	
			}
			if (this.selectDate==''||this.selectDate.length==0) {
				let now=new Date().toLocaleDateString().replace(new RegExp('/','g'),'-')
				this.selectDate=now
			}
			this.$emit('getDateTime',this.dateTime)
			
		},
		changeActive(active){
			this.active=active
			this.getModeZeroDateTime()
		},
		getModeZeroDateTime(){
			if (this.active==0) {
				let beginTime=this.selectDate+" "+this.firstTime+':00'
				let endTime=this.selectDate+" "+this.centerTime+':00'
				this.dateTime.beginTime=beginTime
				this.dateTime.endTime=endTime
			}else{
				let beginTime=this.selectDate+" "+this.centerTime+':00'
				let endTime=this.selectDate+" "+this.lastTime+':00'
				this.dateTime.beginTime=beginTime
				this.dateTime.endTime=endTime
			}
		},
		selectDateEvent(index, item) {
			this.tabs = 0;
			if (this.currentTimeStamp < item.timeStamp) {
				const endIndex = this.timeSlot / this.timeInterval;
				this.timeActive = [0, endIndex];
				this.selectTime = [this.timeArr[0]['time'], this.timeArr[endIndex]['time']];
				this.timeArr.map(item => {
					return (item.disable = 0);
				});
			} else {
				this.timeActive = this.oldTimeActive;
				this.selectTime = this.oldSelectTime;
				this.timeArr.map(item => {
					if (item.time > this.currentTime) {
						return (item.disable = 0);
					} else {
						return (item.disable = 1);
					}
				});
			}
			this.dateActive = index;
			// this.selectDate = `${this.dateArr[index]['date']}(${this.dateArr[index]['week']})`;
			let tmp=this.dateArr[index]['date']
			this.selectDate=new Date().getFullYear()+'-'+this.dateArr[index]['date']
			if (this.mode==0) {
				this.getModeZeroDateTime()
			}else{
				let beginTime=new Date().getFullYear()+'-'+tmp+" "+this.selectTime[0]+':00'
				let endTime=new Date().getFullYear()+'-'+tmp+" "+this.selectTime[1]+':00'
				this.dateTime.beginTime=beginTime
				this.dateTime.endTime=endTime
			}
			// this.$emit('selectTime', `${this.selectDate}${this.selectTime.join('-')}`);
		},
		selectTimeEvent(index, item) {
			if (item.disable || this.timeActive.indexOf(index) > -1) return;
			this.tabs++;
			if (this.tabs % 2 == 0) {
				this.$set(this.timeActive, 1, index);
				this.selectTime[1] = this.timeArr[index]['time'];
			} else {
				this.$set(this.timeActive, 0, index);
				this.selectTime[0] = this.timeArr[index]['time'];
			}
			// 判断用户选择的时间是否大于第一次选择的时间
			if (this.timeActive[0] > this.timeActive[1]) {
				const tempTime = this.selectTime[0];
				const tempIndex = this.timeActive[0];
				this.selectTime[0] = this.selectTime[1];
				this.selectTime[1] = tempTime;
				this.$set(this.timeActive, 0, this.timeActive[1]);
				this.$set(this.timeActive, 1, tempIndex);
			}
			let beginTime=this.selectDate+" "+this.selectTime[0]+':00'
			let endTime=this.selectDate+" "+this.selectTime[1]+':00'
			this.dateTime.beginTime=beginTime
			this.dateTime.endTime=endTime
			// this.$emit('selectTime', `${this.selectDate}${this.selectTime.join('-')}`);
		}
	}
};
</script>

<style lang="scss" scoped>

.box{
	
	margin-top: 20rpx;
	font-size: 30rpx;
	padding: 50rpx 80rpx;
	border-radius: 12rpx;
}
.unactive{
	color: #8a8a8a;
	background-color: #ecedf0;
}
.active{
	border: 1rpx solid #5ca6ef;
	background-color: rgba(92, 166, 239,.3);
	color: #5ca6ef;
}

	
.container{
	view,text,image{
		box-sizing: border-box;
	}
	scroll-view{
		width: 100%;
		white-space: nowrap;
		height: 104upx;
		position: relative;
		&::after{
			background: #e5e5e5;
			content: '';
			display:block;
			width: 100%;
			height: 1px;
			position: absolute;
			bottom: 0;
			left: 0;
			transform:scaleY(0.5) 
		}
		.flex-box{
			display: inline-block;
			height: 100%;
			padding:0 30upx;
			box-sizing: border-box;
			&.active{
				.date-box{
					.days{
						color: #0092D5;
					}
					.date{
						color: #0092D5;
					}
				}
			}
			.date-box{	
				display: flex;
				height: 100%;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				font-size: 30upx;
				color: #333333;
				.date{
					color: #999;
					font-size: 24upx;
					// margin-top: 10upx;
				}
			}
		}
		
	}
	.time-box{
		padding:28upx 12upx 26upx;
		display: flex;
		flex-wrap: wrap;
		.item{
			width: 25%;
			padding: 0 9upx;
			margin-bottom: 18upx;
			&-box{
				width: 100%;
				height: 80upx;
				background: #F1F3F6;
				color: #333;
				font-size: 28upx;
				border-radius: 10upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				&.disable{
					background: #F1F3F6 !important;
					color: #999 !important;
				}
				&.active{
					border: 1rpx solid #5ca6ef;
					background-color: rgba(92, 166, 239,.1);
					color: #5ca6ef;
					font-weight: bold;
				}
				.all{
					font-size: 22upx;
				}
			}
		}
	}
	
}
</style>