前端JS特效第10集：HTML5+vue-js手机端30天内选择预约时间系统代码

本文链接：https://blog.csdn.net/2401_85903333/article/details/139999013

HTML5+vue-js手机端30天内选择预约时间系统代码，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>vue.js手机端30天内选择预约时间系统代码</title>

<link rel="stylesheet" href="css/style.css" />

</head>
<body><script src="/demos/googlegg.js"></script>

<div v-cloak id="popup" @click="popupHide">
	<div class="overlay"></div>
	<div class="content">
		<section class="srv-time-selector" v-show="switchShow">
			<div class="bar bar-1">
				<h1>选择服务时间</h1>
				<img width="14" src="css/images/delete_weici2_icon.png" />
			</div>
			<div class="bd">
				<div class="header">
					<div class="data-picker">
						<div class="wrapper">
							<button v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
								{{date.week}} {{date.month}}/{{date.day}}
								<span>{{date.appointment ? '可预约' : '暂不可约'}}</span>
							</button>
							<button v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
								{{date.week}} {{date.month}}/{{date.day}}
								<span>{{date.appointment ? '可预约' : '暂不可约'}}</span>
							</button>
						</div>
					</div>
					<button class="cal" @click="tableShow">
						<img width="16" src="css/images/rili_weici2_icon@2x.png" alt="" />
						<span>30天</span>
					</button>						
				</div>
				<div :class="['no-sel', {'not-chose-time': isChoseTime}]" @click="notChoseTime" v-show="isChoseTimeShow">
					<p>暂不选择服务时间</p>
					<p>之后可以在我的订单页面选择</p>
				</div>
				<div class="hours">
					<div class="wrapper" v-for="date in dates.nowMonth" v-if="date.current && date.appointment">
						<div :class="{'chose-time': !isChoseTime}" v-if="isFirstDay === 0">
							<button  :class="['hour-this', {'not-can-use': (key + 20)/2 <= currentHours + 0.5}]" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
						</div>
						<div :class="{'chose-time': !isChoseTime}" v-else>
							<button class="hour-this" v-for="(hour, key) in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
						</div>
					</div>
					<div class="wrapper" v-else-if="date.current && !date.appointment">
						<div class="tips">
							<img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" />
							<p>抱歉，今天的服务暂时不能预约哦~</p>
						</div>
					</div>
					<div class="wrapper"  v-for="date in dates.nextMonth" v-if="date.current && date.appointment">
						<div :class="{'chose-time': !isChoseTime}">
							<button class="hour-this" v-for="hour in date.hours" @click="timeChose(key, $event)">{{hour.hour}}</button>
						</div>
					</div>
					<div class="wrapper" v-else-if="date.current && !date.appointment">
						<div class="tips">
							<img class="null-tips" src="css/images/baoqian_weici2_icon.png" alt="" />
							<p>抱歉，今天的服务暂时不能预约哦~</p>
						</div>
					</div>
				</div>
				<div class="out">
					<button class="submit" @click="submitFunc">确定</button>
				</div>
			</div>
		</section>
		
		<section class="srv-time-selector" v-show="!switchShow">
			<div class="bar">
				<img width="8" src="css/images/fanhui_weici2_icon.png" @click="tableHide">
				<h1>选择服务时间</h1>
			</div>
			<div class="bd">
				<section class="days-component">
					<div class="weekdays">
						<div class="weekday">日</div>
						<div class="weekday">一</div>
						<div class="weekday">二</div>
						<div class="weekday">三</div>
						<div class="weekday">四</div>
						<div class="weekday">五</div>
						<div class="weekday">六</div>
					</div>
					<div class="days-body">
						<div>
							<div class="month">{{currentYears}}年{{currentMonth}}月</div>
							<div class="days">
								<div class="day" v-for="day in nullDay">{{day}}</div>
								<div class="day" v-for="(date, index) in dates.nowMonth" :id="'scroll-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNow(index, $event)">
									<font v-show="index == 0">今天</font>
									<span>{{date.appointment ? '' : '暂不可约'}}</span>
									<a  :href="'#scroll-' + index">{{date.day}}</a>
								</div>
							</div>
							<div class="month">{{currentYears}}年{{currentMonth + 1}}月</div>
							<div class="days">
								<div class="day" v-for="day in nextNullDay">{{day}}</div>
								<div class="day" v-for="(date, index) in dates.nextMonth" :id="'scroll-next-' + index" :class="[{current: date.current}, {'appointment': !date.appointment}]" @click="selectedNext(index, $event)">
									<span>{{date.appointment ? '' : '暂不可约'}}</span>
									<a  :href="'#scroll-next-' + index">{{date.day}}</a>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</section>
	</div>
</div>

<script src="js/jquery.min.js"></script>	
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#popup',
		
		data: {
			switchShow: true,
			currentMonth: null,
			currentHours: null,
			isFirstDay: 0,
			popupShow: false,
			isChoseTime: true,
			isChoseTimeShow: true,
			nextProtoWeek: null,
			nullDay: [],
			nextNullDay: [],
			dates: {
				nowMonth: [],
				nextMonth: []
			}
		},
		
		methods: {
			selectedNow: function(index, event) {
				
				for (date in this.dates.nowMonth){
					this.dates.nowMonth[date].current = false;
					
				}
				for (date in this.dates.nextMonth){
					this.dates.nextMonth[date].current = false;
					
				};
				
				if (!this.dates.nowMonth[index].appointment) {
					this.isChoseTimeShow = false;
				} else {
					this.isChoseTimeShow = true;
					this.isChoseTime = true;
				}
				
				this.isFirstDay = index;
				console.log(this.isFirstDay);
				this.tableHide();
				this.dates.nowMonth[index].current = true;
				
			},
			selectedNext: function(index, event) {
				
				for (date in this.dates.nextMonth){
					this.dates.nextMonth[date].current = false;
					
				}
				for (date in this.dates.nowMonth){
					this.dates.nowMonth[date].current = false;
					
				};
				
				if (!this.dates.nextMonth[index].appointment) {
					this.isChoseTimeShow = false;
				} else {
					this.isChoseTimeShow = true;
					this.isChoseTime = true;
				}					
				
				this.isChoseTime = true;
				this.tableHide();

				this.dates.nextMonth[index].current = true;
				
			},
			
			tableShow: function() {
			
				this.switchShow = false;
				
			},
			
			tableHide: function() {
			
				this.switchShow = true;
				
			},
			
			timeChose: function(key, event) {
				this.isChoseTime = false;
				$(event.target).siblings().removeClass('chosed');
				$(event.target).addClass('chosed'); 
				
			},
			
			notChoseTime: function() {
				this.isChoseTime = true;
			},
			
			popupHide: function() {
				popupShow = false;
			},
			
			// submit
			submitFunc: function() {
				var time, choseH, subInfo;
				
				for (ts in this.dates.nowMonth) {
					if (this.dates.nowMonth[ts].current == true) {
						time = this.dates.nowMonth[ts];
					}
				}
				for (tc in this.dates.nextMonth) {
					if (this.dates.nextMonth[tc].current == true) {
						time = this.dates.nextMonth[tc];
					}
				}
				
				var choseHours = $('.hour-this');
				var noSel = $('.no-sel');
				
				if(noSel.hasClass('not-chose-time')) {
					choseH = null;
				} else {
				
					for (var h = 0; h < choseHours.length; h++) {
						if(choseHours.eq(h).hasClass('chosed')) {
							choseH = choseHours.eq(h).text();
						}
					}	
					
				}
			
				
				subInfo = {
					"day": time,
					"hour": choseH 
				}
				console.log(subInfo);
			}
		},
		
		created: function() {
		
			var totalDays = 30,
					date = new Date(),
					currentYears = date.getFullYear(),
					week = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六'),
					currentMonth = date.getMonth() + 1,
					currentDay = date.getDate(),
					protoWeek = date.getDay(),
					currentHours = date.getHours(),
					hours = [
						{'hour': '10:00'}, {'hour': '10:30'}, {'hour': '11:00'}, {'hour': '11:30'},
						{'hour': '12:00'}, {'hour': '12:30'}, {'hour': '13:00'}, {'hour': '13:30'},
						{'hour': '14:00'}, {'hour': '14:30'}, {'hour': '15:00'}, {'hour': '15:30'},
						{'hour': '16:00'}, {'hour': '16:30'}, {'hour': '17:00'}, {'hour': '17:30'},
						{'hour': '18:00'}, {'hour': '18:30'}
					];
					
			this.currentYears =	currentYears;	
			this.currentMonth =	currentMonth;	
			this.currentDay =	currentDay;
			this.currentHours = currentHours;
			console.log(this.currentDay);
			
			for (var i = 0; i < totalDays; i++) {
			
				var month = date.getMonth() + 1,
						day = date.getDate(),
						proteWeek = date.getDay(),
						timestamp = date.getTime(),
						appointment = true;
						
						if(proteWeek == 0 || proteWeek == 6) {
							appointment = false;
						}
						
				var	d = {
							'timestamp': timestamp,
							'appointment': appointment,
							'month': month,
							'day': day,
							'proteWeek': proteWeek,
							'week': week[proteWeek], 
							'hours': hours,
							'current': false
						};
				
				if (month == currentMonth) {
					this.dates.nowMonth.push(d);
				} else {
					this.dates.nextMonth.push(d);
				}
				
				date.setDate(date.getDate() + 1);
			}
			
			
			this.dates.nowMonth[0].current = true;
			this.nextProtoWeek = this.dates.nextMonth[0].proteWeek;
			console.log(this.nextProtoWeek);
			console.log(this.dates);
								
			for(var j = 0; j < protoWeek; j++) {
			
				this.nullDay.push("");
				
			}
			
			for(var k = 0; k < this.nextProtoWeek; k++) {
			
				this.nextNullDay.push("");
				
			}
		} 
	})
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
 </div>
</body>
</html>

全部代码：HTML5+vue-js手机端30天内选择预约时间系统代码