前端预约选择时间包含日期与时间

 

<template>
	<view class="pages">
		<view class="top">
			<scroll-view  class="tab" scroll-x="true"  style="width: 100%">
				 <block v-for="(item, i) in dayArr" :key="i" style="display: flex;">
					<view @click="topChange(item)"  :class="day.days==item.days ? 'active tabitem' : 'tabitem'">
						<view :class="day.days==item.days ? 'activetxt tab-weeks' : 'tab-weeks'">{{item.weeks}}</view>
						<view :class="day.days==item.days ? 'activetxt tab-weeks' : 'tab-days'">{{item.days}}</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view style="height: 30rpx;background-color: #F4F6FA;"></view>
		<view class="timebox">
			<view class="timetitile">
				上午（08:00~11:59）
			</view>
			<view class="time">
				<view v-for="(item,index) in amlist" :key="index" :class="time==item ? 'activetime' : ''" 
				@click="changetime(item)">
					{{item}}
				</view>
			</view>
			<view class="timetitile">
				下午（11:59~18:59）
			</view>
			<view class="time">
				<view v-for="(item,index) in pmlist" :key="index" :style="time==item ? 'activetime' : ''" 
				@click="changetime(item)">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="chosetime">
			<view class="tleft">
				已选择：<text>今天11:59</text>
			</view>
			<view class="tright">
				确认时间
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topSign:1,
				toplist:[],
				dayArr: [],
				hostArr: [],
				day_index: 0,
				host_index: '',
				host_All: [],
				nowTimes: '',
				amlist:["08:59","09:59","10:59","11:59"],
				pmlist:["12:59","13:59","14:59","15:59"],
				day:{
					days: "",
					weeks: "",
					year: '',
					day:''
				},
				time:""
			}
		},
		created() {
			this.setdayarr()
		},
		
		methods: {
			ischeck(time){
				let hour = (new Date()).getHours();
				let day = (new Date()).getDate();
				let chosehour=time.split(":")[0]
				
				// 先判断是否小于今天的某时刻
				if (hour<chosehour && day==this.day.day) {
					return activeforbid
				} 
				if(this.time==time){
					return activetime
				}
				return ""
			},
			topChange(item){
				this.day=item
				 
			},
			changetime(item){
				this.time=item	 
			},
			setdayarr(){
				let dateArr = []
				let today = new Date();
				let nowTime = today.getTime() // 当前时间戳
				this.nowTimes = parseInt(nowTime / 1000)
				for (let i = 0; i < 7; 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 year=newDate.getFullYear()
					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 ass = {
						year,
						weeks: week,
						days: fullDate
						 
					}
					dateArr.push(ass)
				}
				this.dayArr = dateArr
				console.log(this.dayArr)
			}
		}
	}
</script>

<style scoped lang="scss">
.pages{
	 
}
.top{
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx 0;
	overflow: hidden;
	.tab{
		overflow: hidden;
		white-space: nowrap; // 滚动必须加的属性
		block{
			display: flex;
			align-items: center;
		}
		.tabitem{
			width: 260rpx;
			// height: 160rpx;
			line-height: 50rpx;
			display: inline-block;
			margin:0 10rpx;
			overflow: hidden;
			padding: 20rpx;
			border-radius: 20rpx;
			color: #fff;
			background-color: #F4F6FA;
			text-align: center;
		}
		.tab-weeks{
			color: #1D2541;
			font-weight: bold;
		}
		.tab-days{
			color: #7C8191;
		}
		.activetxt{
			color: #fff;
		}
		
	}
	.active{
		background: linear-gradient(126deg,#ff7134, #ff3a3e 100%);
		border-radius: 20rpx;
		
	}
	
	 
}

.timebox{
	padding: 30rpx 0;
	.timetitile{
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 30rpx;
	}
	.time{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
		>view{
			// width: 120rpx;
			padding:20rpx 35rpx;
			margin: 15rpx;
			// height: 60rpx;
			border: 1px solid #000;
			border-radius: 20rpx;
		}
		.activetime{
			border: 1px solid #FF523B;
			color: #FF523B;
		}
	}
}
.chosetime{
	position: fixed;
	left: 5%;
	bottom: 80rpx;
	width: 90%;
	background: linear-gradient(#FF7134,#FF3A3E);
	border-radius:20rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.tleft{
		color: #fff;
		text{
			font-size: 36rpx;
			color: #fff;
		}
	}
	.tright{
		width: 200rpx;
		height:80rpx;
		background: #ffc368;
		border-radius: 12rpx;
		text-align: center;
		line-height: 80rpx;
		color: #594423;
	}
}
</style>