BD-LDBD-UNI/pages/preCarWash/chooseTime/index.vue

<template>
	<view class="">
		<view class="classWeeks">
			<view class="weeks" v-for="(itemList, index) in check" :key="index" @click="chooseDatas(itemList,index)"
				:style="chooseData==index?'background: linear-gradient(-35deg, #005AFF 0%, #0078FF 100%);box-shadow: 0px 5rpx 8rpx 0px rgba(0, 92, 255, 0.25);':'background: #FFFFFF;'">
				<view class="week" :style="chooseData==index?'color: #FFFFFF;':'color: #333333;'">
					{{itemList.week}}
				</view>
				<view class="weekData" :style="chooseData==index?'color: #FFFFFF;':'color: #333333;'">
					{{itemList.date}}
				</view>
			</view>
		</view>
		<view class="classChooseTime">
			<view v-for="(item, index) in dataTimeList" :key="index" :class="[item.prohibit?'timeBody':'timeBodyNo']"
				:style="sectionTime == item.time?'border: 1px solid #005AFF;color: #005AFF;':item.type?'background: #FFFFFF;color: #C3C3C3;border: 1px solid #EEEEEE;':''"
				@click="chooseTimes(item)" style="text-align: center;position: relative;margin-left: 20rpx;">
				<span
					:style="sectionTime == item.time || item.type?'position: relative;z-index: 1;':''">{{item.time}}</span>
				<image v-if="sectionTime == item.time" class="chooseImg" :src="require('../../../static/select.png')">
				<image v-if="item.type" class="chooseImg" :src="require('../../../static/mang.png')">
			</view>
		</view>
		<view class="classBottom">
			<view class="dataView">
				{{chooseWeeks}} {{sectionTime}}
			</view>
			<view @tap="goBack()" class="classbtn">确定预约</view>
		</view>
	</view>

</template>

<script>
	import {
		getTimeList
	} from "@/api/shop.js"
	export default {
		data: function() {
			return {
				shopId: "",
				chooseWeeks: "今天",
				chooseData: null,
				sectionTime: "",
				dataTimeList: [],
				list: [],
				check: [],
				startTime:""
			}
		},
		watch: {
			chooseData(val) {
				this.dataTimeList = []
				for (let subIndex in this.list[this.check[val].intTime]) {
					let startTime = this.dataTime(this.list[this.check[val].intTime][subIndex].startTime);
					let endTime = this.dataTime(this.list[this.check[val].intTime][subIndex].endTime);
					console.log(this.list[this.check[val].intTime][subIndex].prohibit,'prohibit');
					this.dataTimeList.push({
						time: startTime + "-" + endTime,
						startTime:this.list[this.check[val].intTime][subIndex].startTime,
						type: this.list[this.check[val].intTime][subIndex].isBusy,
						prohibit:this.list[this.check[val].intTime][subIndex].prohibit
					})
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.shopId = option.shopId;
			let i = 0;
			this.list = JSON.parse(option.dataTimeList);
			for (let index in this.list) {
				i = i + 1;
				let date = new Date(parseInt(index));
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let dt2 = new Date(parseInt(index));
				let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				// console.log(duty);
				//把七天的时间和星期添加到数组中

				this.check.push({
					intTime: index,
					date: month + "." + day,
					day: day,
					weekday: weekDays[dt2.getDay()],
					week: i === 1 ? "今天" : weekDay[dt2.getDay()],
					sectionTime: "",
				});
			}
			this.chooseData = 0;
			let listKey = Object.keys(this.list);
			this.check.forEach((res,index)=>{
				if(res.date == option.dataTime.substring(0, option.dataTime.lastIndexOf("日")).replace(/月/g, ".")){
					this.chooseData = index;
				}
			})
			this.sectionTime = option.dataTime.substring(option.dataTime.lastIndexOf(" ") + 1, option.dataTime.length);
			console.log(option.dataTime); //打印出上个页面传递的参数。
			// this.chooseTime(option)
		},
		methods: {
			dataTime(val) {
				let date = new Date(parseInt(val));
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				return h + ":" + m
			},
			goBack() {
				uni.$emit('chooseData', {data:this.check[this.chooseData].date.replace(".", "月") + "日 " + this.sectionTime,startTime:this.startTime})
				uni.navigateBack({
					delta: 1
				})
			},
			chooseTimes(data) {
				if (data.type) return;
				if(!data.prohibit) return;
				this.startTime = data.startTime;
				this.sectionTime = data.time;
			},
			chooseDatas(data, index) {
				this.chooseData = index;
				this.sectionTime = data.sectionTime;
				this.chooseWeeks = data.week;
			},
			// chooseTime(option) {
			// 	this.check = [];
			// 	for (let i = 0; i < 5; i++) {
			// 		//24 * 3600 * 1000 就是计算一天的时间  
			// 		var date = new Date(new Date().getTime() + i * 24 * 3600 * 1000);
			// 		var year = date.getFullYear();
			// 		var month = date.getMonth() + 1;
			// 		var day = date.getDate();
			// 		var dt2 = new Date(new Date().getTime() + i * 24 * 3600 * 1000);
			// 		var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			// 		var weekDays = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
			// 		if (month < 10) {
			// 			month = "0" + month;
			// 		}
			// 		if (day < 10) {
			// 			day = "0" + day;
			// 		}
			// 		// console.log(duty);
			// 		//把七天的时间和星期添加到数组中

			// 		this.check.push({
			// 			date: month + "." + day,
			// 			day: day,
			// 			weekday: weekDays[dt2.getDay()],
			// 			week: i === 0 ? "今天" : weekDay[dt2.getDay()],
			// 			sectionTime: "",
			// 		});
			// 		for (let item in this.check) {
			// 			if (this.check[item].date == option.dataTime.substring(0, option.dataTime.lastIndexOf("日"))
			// 				.replace(/月/g, ".")) {
			// 				this.check[item].sectionTime = option.dataTime.substring(option.dataTime.lastIndexOf(" ") + 1,
			// 					option.dataTime.length);
			// 				this.chooseWeeks = this.check[item].week;
			// 			}
			// 		}
			// 	}
			// }
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.classWeeks {
		display: flex;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 16rpx 16rpx;
		justify-content: space-around;
		align-items: center;
		padding: 8rpx 14rpx;
	}

	.weeks {
		width: 100rpx;
		height: 99rpx;
		border-radius: 6rpx;
	}

	.week {
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		text-align: center;
		padding-top: 24rpx;
	}

	.weekData {
		height: 19rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 41rpx;
		text-align: center;
		padding-top: 12rpx;
	}

	.timeBody {
		width: 216rpx;
		height: 90rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 7rpx 12rpx 0px rgba(167, 167, 167, 0.1);
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 90rpx;
		margin-top: 10rpx;
		text-align: center;
	}
	
	.timeBodyNo {
		width: 216rpx;
		height: 90rpx;
		background: #999999;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 7rpx 12rpx 0px rgba(167, 167, 167, 0.1);
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #eeeeee;
		line-height: 90rpx;
		margin-top: 10rpx;
		text-align: center;
	}

	.classChooseTime {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		padding: 0 13rpx;
	}

	.chooseImg {
		width: 47rpx;
		height: 47rpx;
		/* position: relative;
		top: 36rpx;
		left: 10rpx; */
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
	}

	.classBottom {
		width: 690rpx;
		height: 110rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 0px 8rpx 17rpx 0px rgba(168, 165, 165, 0.09);
		border-radius: 55rpx;
		margin-left: 28rpx;
		position: absolute;
		bottom: 77rpx;
	}

	.dataView {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #005DFF;
		line-height: 110rpx;
		float: left;
		padding-left: 28rpx;
	}

	.classbtn {
		width: 240rpx;
		height: 110rpx;
		background: linear-gradient(0deg, #005AFF 0%, #0078FF 100%);
		border-radius: 0 55rpx 55rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FEFEFE;
		text-align: center;
		line-height: 110rpx;
		float: right;
	}
</style>