mycajt/components/its-calendar/its-calendar.vue

<template>
	<view>
		<view class="calendar">
			<scroll-view scroll-x="true" class="top-wrap">
				<view class="time-wrap" v-for="(dayitem,dayindex) in dayArr" :key="dayindex"
					:class="{'action':day_index ==dayindex }" @click.stop="dayList(dayitem,dayindex)">
					<view class="time-xq">{{dayitem.weeks}}</view>
					<view class="time-val">{{dayitem.days}}</view>
				</view>
			</scroll-view>
			<view scroll-y class="calendar_time">
				<view class="time_x" :class="host_index == item.timeStamp ? 'time_x_sty' : ''"
					v-for="(item, index) in hostArr[day_index]" :key="index"
					@click="nowTimes < item.timeStamp ? hosts(item) : ''"
					:style="{'color': (nowTimes > item.timeStamp ? '#999999' : '')}">{{item.hours}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sta_num: {
				type: Number | String,
				default: 8
			},
			end_num: {
				type: Number | String,
				default: 23
			},
			int_num: {
				type: Number | String,
				default: 30
			},
		},
		watch: {
			sta_num(xin, low) {
				console.log('改变了')
				this.sxym()
			}
		},
		data() {
			return {
				dayArr: [],
				hostArr: [],
				day_index: 0,
				host_index: '',
				host_All: [],
				nowTimes: '',
			}
		},
		mounted() {
			this.sxym()
		},
		methods: {
			sxym() {
				console.log('执行获取', this.sta_num, this.end_num)
				try {
					let dateArr = [];
					let today = new Date();
					let nowTime = today.getTime() // 当前时间戳
					this.nowTimes = parseInt(nowTime / 1000)
					for (let i = 0; i < 6; i++) {
						let newDate = new Date(today.getTime() + i * 1000 * 60 * 60 * 24);
						let month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (
							parseInt(
								newDate.getMonth()) + 1); // 当前月份
						let day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate(); //当前日期
						let backTime = newDate.getTime(); // 几天后时间戳
						let backDays = newDate.getDay(); // 几天后周几
						let remTime = (backTime - nowTime) / 1000; // 距离今天几天
						let week = '';
						// if (remTime == 0) {
						// 	week = "今天"
						// } else if (remTime == 86400) {
						// 	week = "明天"
						// } else if (remTime == 172800) {
						// 	week = "后天"
						// } else {
						if (backDays == 0) {
							week = "周日";
						} else if (backDays == 1) {
							week = "周一";
						} else if (backDays == 2) {
							week = "周二";
						} else if (backDays == 3) {
							week = "周三";
						} else if (backDays == 4) {
							week = "周四";
						} else if (backDays == 5) {
							week = "周五";
						} else if (backDays == 6) {
							week = "周六";
						}
						// }
						// let fullDate = `${month}-${day}`;
						let fullDate = `${day}`;
						let ass = {
							weeks: week,
							days: fullDate
						};
						dateArr.push(ass);
					}
					this.dayArr = dateArr;

					let timeArr = [];
					for (let i = 0; i < 6; i++) {
						// let as = new Date(new Date().toLocaleDateString()).getTime() / 1000
						let as = new Date(new Date().toLocaleDateString()).getTime() / 1000 + i * 60 * 60 * 24;
						let staTime = this.sta_num * 60 * 60 + as;
						let endTime = this.end_num * 60 * 60 + as;
						let int = this.int_num * 60;
						let timeArr_s = [];
						for (staTime; staTime < endTime - int; staTime + int) {
							staTime = staTime + int;
							let hours = this.times(staTime);
							let asb = {
								hours,
								timeStamp: staTime
							};
							timeArr_s.push(asb);
						}
						timeArr.push(timeArr_s);
					}
					this.hostArr = timeArr;
					console.log(this.hostArr, 'hostArr')
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}

			},
			// 点击日期
			dayList(e, index) {
				this.day_index = index;
			},
			// 点击时间
			hosts(e) {
				this.host_All = e;
				this.host_index = e.timeStamp;
				this.sub()
			},
			// 点击立即预约
			sub() {
				if (this.host_index == '') {
					this.$tool.toast('请选择时间');
				} else {
					let day = this.dayArr[this.day_index];
					let time = this.time(this.host_index);
					let comTime = {
						days: day.days,
						weeks: day.weeks,
						hours: this.host_All.hours,
						timeStamp: this.host_All.timeStamp,
						time: time
					};
					this.$emit('getTime', comTime);
				}
			},
			// 格式化时间
			times(data) {
				let date = new Date(data * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				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;
			},
			time(data, type) {
				let date = new Date(data * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				if (type == 'yymmdd') {
					return y + '-' + MM + '-' + d;
				} else if (type == 'hhmmss') {
					return h + ':' + m + ':' + s;
				} else {
					return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.calendar {
		width: 710rpx;
		height: 590rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto 10rpx;
		border-radius: 8rpx;
	}

	.calendar_day {
		display: flex;
		width: 100%;
		height: 120rpx;

		.day_x {
			display: flex;
			// flex-flow: column nowrap;
			flex-flow: nowrap;
			justify-content: center;
			align-items: center;
			width: 20%;
			height: 100%;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.calendar_time {
		display: flex;
		width: 88%;
		height: 448rpx;
		flex-flow: row wrap;
		align-content: flex-start;
		margin: 20rpx auto;
		overflow-y: auto;

		.time_x {
			display: flex;
			flex-flow: row;
			justify-content: center;
			align-items: center;
			width: 138rpx;
			height: 119rpx;
			border-radius: 20rpx;
			border: 1px solid #D1D1D1;
			margin: 10rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.time_x_sty {
			background-color: #52c696;
			border: none;
			color: #fff !important;
		}
	}

	.sub {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 710rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 30rpx auto;
		color: #FFFFFF;
		font-size: 36rpx;
		// background-color: #FE3B3C;
	}

	.top-wrap {

		white-space: nowrap;
		width: 700rpx;
		// height: 100rpx;
		padding: 20rpx 0;

		.time-wrap {
			margin: auto 50rpx;
			display: inline-block;
			text-align: center;
			padding-bottom: 10rpx;

			.time-xq {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.time-val {
				margin-top: 16rpx;
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.action {
			border-bottom: 2px solid #52C696;

			.time-xq {
				color: #52C696;
			}

			.time-val {
				color: #52C696;
			}
		}
	}
</style>