基于vue.js手機端30天內選擇預約時間代碼



84 334 112



特效描述:基于vue.js手機端 選擇預約時間,可以選擇小時和分鐘預約時間代碼

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>

3. HTML代碼

	<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="static/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="static/images/[email protected]" 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="static/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="static/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="static/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 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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 表單 表單美化 表單插件 表單美化插件 日歷選擇器 時間選擇器 時間日期插件 時間日期 文字切換 文字選項卡 單選框 單選按鈕
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子