<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="Author" content="zhengyao">
<meta name="Description" content="weimendian">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>
<link rel="stylesheet" type="text/css" href="../base.css" />
<link rel="stylesheet" type="text/css" href="../icon.css" />
<link rel="stylesheet" href="css/order.css"/>
<link rel="stylesheet" href="css/LArea.css">
<body class="mag-t-2 mag-b-3d5">
<div id="app" >
<div @click="timeCheck">
<input type="text" placeholder="请选择服务时间" v-model="weekSet"/>
<h1>{{serviceTimes json}}</h1>
</div>
<div class="pop" v-if="isChoose">
<div class="page time" style="margin-top: 2em;" v-if="isChoose">
<header class="pad-v-0d5 fixed pos-h-0 pos-t-0" style="border-bottom: 1px solid #E4E4E4;z-index:1;">
<p class="mag-0 center-child rela">
<i class="icon-arrow-left abs pos-l-0 pos-t-0 mag-l-0d5" style="color: #aaa;" @click="close"><span></span></i>
<span class="d-page-title">选择服务时间</span>
</p>
</header>
<div class="scroll-wrapper">
<div class="d-date-list float-wrapper" id="head-box">
<div class="d-date-item center-child pad-v-1" v-for="dw in dateWeek" :class="{'active': dw.isCur}" id="p{{dw.date}}" @click="changePan($event, $index)">
<p class="mag-0"><span class="d-month">{{dw.month}}</span>月<span class="d-date">{{dw.day}}</span>日</p>
<p class="mag-0">周<span class="d-day">{{dw.week}}</span></p>
</div>
</div>
</div>
<div class="d-period-list float-wrapper">
<div class="width-div3 line-height-3" v-for="item in list">
<div class="d-period center-child" :class="{'invalid': item.isForbid, 'active': item.isActive}" @click="chooseHour($event)">{{item.time}}</div>
</div>
</div>
</div>
<div class="photo" style="width:2rem;height:1rem;" @click="changeCheckAll">
<span class="allCheck"><img :src="imgUrl" style="width:100%;height:100%;"/></span>
<span style="margin-top:0.4rem;margin-left:2.5rem;position:absolute;width:3rem;height:1rem;font-size:1.3rem;">全选</span>
</div>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/vue.js"></script>
<!--<script src="js/orderEdit.js"></script>-->
<script>
function transformDate(n) {
var n = n ? n : 1;
var t = (new Date((new Date).getTime() + (n - 1) * 1000 * 24 * 60 * 60));
var y = t.getFullYear();
var m = t.getMonth() + 1;
var d = t.getDate();
if (m < 10) m = '0' +m;
if (d < 10) d = '0' +d;
return y + '-' + m + '-' + d;
}
function nextDay(option, n) {
var n = n ? n : 1;
var ret;
if (option == 'month') {
ret = new Date((new Date).getTime() +(n - 1) * 1000 * 24 * 60 * 60).getMonth() + 1;
if (ret < 10) ret = '0' + ret;
} else if (option == 'day') {
ret = new Date((new Date).getTime() +(n - 1) * 1000 * 24 * 60 * 60).getDate();
if (ret < 10) ret = '0' + ret;
} else if (option == 'week') {
ret = new Date((new Date).getTime() +(n - 1) * 1000 * 24 * 60 * 60).getDay();
}
return ret;
}
var nowDate1 = transformDate(1);
var nowDate2 = transformDate(2);
var nowDate3 = transformDate(3);
var nowDate4 = transformDate(4);
var nowDate5 = transformDate(5);
var nowDate6 = transformDate(6);
var nowDate7 = transformDate(7);
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
var dateSet = [
{date: nowDate1, month: nextDay('month', 1), day: nextDay('day', 1), week: weeks[nextDay('week', 1)], isCur: true},
{date: nowDate2, month: nextDay('month', 2), day: nextDay('day', 2), week: weeks[nextDay('week', 2)], isCur: false},
{date: nowDate3, month: nextDay('month', 3), day: nextDay('day', 3), week: weeks[nextDay('week', 3)], isCur: false},
{date: nowDate4, month: nextDay('month', 4), day: nextDay('day', 4), week: weeks[nextDay('week', 4)], isCur: false},
{date: nowDate5, month: nextDay('month', 5), day: nextDay('day', 5), week: weeks[nextDay('week', 5)], isCur: false},
{date: nowDate6, month: nextDay('month', 6), day: nextDay('day', 6), week: weeks[nextDay('week', 6)], isCur: false},
{date: nowDate7, month: nextDay('month', 7), day: nextDay('day', 7), week: weeks[nextDay('week', 7)], isCur: false},
]
var timeSet = [new Date()]
var timeArr =[
{"date": nowDate1, list:[{time: "09:00-09:30", index: 0, isOder: false}, {time: "09:30-10:00", index: 1, isOder: false}, {time: "10:00-10:30", index: 2, isOder: false}, {time: "10:30-11:00", index: 3, isOder: false}, {time: "11:00-11:30", index: 4, isOder: false}, {time: "11:30-12:00", index: 5, isOder: false}, {time: "12:00-12:30", index: 6, isOder: false}, {time: "12:30-13:00", index: 7, isOder: false}, {time: "13:00-13:30", index: 8, isOder: false}, {time: "13:30-14:00", index: 9, isOder: false}, {time: "14:00-14:30", index: 10, isOder: false}, {time: "14:30-15:00", index: 11, isOder: false}, {time: "15:00-15:30", index: 12, isOder: false}, {time: "15:30-16:00", index: 13, isOder: false}, {time: "16:00-16:30", index: 14, isOder: false}, {time: "16:30-17:00", index: 15, isOder: false}, {time: "17:00-17:30", index: 16, isOder: false}, {time: "17:30-18:00", index: 17, isOder: false}, {time: "18:00-18:30", index: 18, isOder: false}, {time: "18:30-19:00", index: 19, isOder: false}, {time: "19:00-19:30", index: 20, isOder: false}, {time: "19:30-20:00", index: 21, isOder: false}, {time: "20:00-20:30", index: 22, isOder: false}, {time: "20:30-21:00", index: 13, isOder: false}]},
];
function validTime(arr) {
var d = new Date();
if (d.getHours() <= 9) return arr;
if (d.getHours() >= 21) {
for (var i = 0; i < arr.length; i ++) {
arr[i].isForbid = true;
}
return arr;
}
for (var j = 0; j < arr.length; j ++) {
if (d.getHours() != arr[j].time.split('-')[0].slice(0, 2)) {
arr[j].isForbid = true;
} else {
arr[j].isForbid = d.getMinutes() > '30' ? true : false;
return arr;
}
}
}
validTime(timeArr[0].list);
for (var i = 0; i < timeArr[0].list.length; i ++) {
timeArr[0].list[i].isActive = false;
}
var vm = new Vue({
el: '#app',
data: {
isChoose: false,
isActive: false,
timesSet: '',
list: timeArr[0].list,
dateWeek: dateSet,
serviceTimes: [],
times: timeArr,
chooseDate: nowDate1,
chooseH: '',
refresh: true,
imgUrl: '',
checked: false,
weekSet: ''
},
methods: {
timeCheck: function() {
var self = this;
this.isChoose = true;
for (var i = 0; i < this.list.length; i ++) {
this.list[i].isActive = false;
}
self.serviceTimes.forEach(function(e, i) {
if (e.dateStr == nowDate1) {
e.dateList.forEach(function(ele, ind) {
self.times[0].list.forEach(function(element, index) {
if (ele.time == element.time) {
element.isActive = true;
}
});
});
}
});
},
changePan: function(e, index) {
this.checked = false;
this.imgUrl = 'img/1.png';
if (index == '0') {
validTime(this.times[0].list);
} else {
for (var i = 0; i < this.times[0].list.length; i ++) {
this.times[0].list[i].isForbid = false;
}
}
var self = this;
var target = e.target.nodeName == 'DIV' ? $(e.target) : $(e.target).closest('.d-date-item');
if ($(target).hasClass('active')) return;
$('.d-period').removeClass('active');
$('.d-date-item').removeClass('active');
$(target).addClass('active');
var matchStr = target.attr('id').split('')[1];
this.chooseDate = matchStr;
this.times[0].list.forEach(function(ele, ind) {
ele.isActive = false;
});
self.serviceTimes.forEach(function(e, i) {
if (e.dateStr == self.chooseDate) {
e.dateList.forEach(function(ele, ind) {
self.times[0].list.forEach(function(element, index) {
if (ele.time == element.time) {
element.isActive = true;
}
});
});
}
});
},
changeColor: function(event) {
var target = event.target;
if (!$(target).hasClass('d-period') $(target).hasClass('invalid')) return;
if ($(target).hasClass('active')){
$(target).removeClass('active')
} else {
$(target).addClass('active');
}
},
chooseHour: function(event) {
var target = event.target;
this.changeColor(event);
var h = $(target).html();
var self = this;
for (var i = 0; i < self.serviceTimes.length; i ++) {
if (self.serviceTimes[i].dateStr == self.chooseDate) {
for (var j = self.serviceTimes[i].dateList.length - 1; j >=0; j --) {
if ( self.serviceTimes[i].dateList[j].time === h) {
self.serviceTimes[i].dateList.splice(j, 1);
return;
}
}
self.serviceTimes[i].dateList.push({'time': h, isActive: 'true'});
return;
}
}
this.serviceTimes.push({'dateStr': this.chooseDate, 'dateList': [{'time': h, isActive: 'true'}]});
},
close: function() {
var ret = [];
var self = this;
for(var i=self.serviceTimes.length-1;i>=0;i--){
if(0 == self.serviceTimes[i].dateList.length){
self.serviceTimes.splice(i, 1);
}
}
this.serviceTimes.sort(function(a, b) {
return (new Date(a.dateStr).getDate() - new Date(b.dateStr).getDate());
});
if (this.serviceTimes.length >= 2) {
for (var i = 0; i < 2; i ++) {
if (this.serviceTimes[i].dateList.length) {
ret.push('周' + weeks[new Date(this.serviceTimes[i].dateStr).getDay()]);
}
}
} else if (this.serviceTimes.length == 1){
if (this.serviceTimes[0].dateList.length) {
ret.push('周' + weeks[new Date(this.serviceTimes[0].dateStr).getDay()]);
}
}
if(ret!=this.weekSetret==""){
this.timeMark=false;
}
this.weekSet = ret.join(';');
if(2 < this.serviceTimes.length){
this.weekSet = this.weekSet + "...";
}
this.isChoose = false;
},
changeCheckAll: function() {
if (this.checked) {
this.imgUrl = 'img/1.png';
this.checked = false;
for (var i = 0; i < this.list.length; i++) {
this.list[i].isActive = false;
}
for (var j = this.serviceTimes.length - 1; j >= 0; j --) {
if (this.serviceTimes[j].dateStr === this.chooseDate) {
this.serviceTimes.splice(j, 1);
}
}
} else {
this.imgUrl = 'img/2.png';
this.checked = true;
if (this.chooseDate === nowDate1) {
for (var i = 0; i < this.list.length; i++) {
if (!this.list[i].isForbid) {
this.list[i].isActive = true;
if (this.serviceTimes[0] && this.serviceTimes[0].dateStr) {
this.serviceTimes[0].dateList.push({'time': this.list[i].time, isActive: true});
} else {
this.serviceTimes.push({
'dateStr': this.chooseDate,
'dateList': [{'time': this.list[i].time, isActive: true}]
});
}
} else {
this.list[i].isActive = false;
}
}
} else {
if (!this.serviceTimes.length) {
this.serviceTimes.push({
'dateStr': this.chooseDate,
'dateList': []
});
for (var i = 0; i < this.list.length; i++) {
if (!this.list[i].isForbid) {
this.list[i].isActive = true;
this.serviceTimes[0].dateList.push({'time': this.list[i].time, isActive: true});
}
}
} else {
for (var j = 0; j < this.serviceTimes.length; j ++) {
if (this.serviceTimes[j].dateStr === this.chooseDate) {
this.hasChecked = true;
this.serviceTimes.splice(j, 1);
this.serviceTimes.push({
'dateStr': this.chooseDate,
'dateList': []
})
for (var t = 0; t < this.list.length; t ++) {
if (!this.list[t].isForbid) {
this.list[t].isActive = true;
this.serviceTimes[this.serviceTimes.length -1].dateList.push({'time': this.list[t].time, isActive: true});
}
}
}
}
if (!this.hasChecked) {
this.serviceTimes.push({
'dateStr': this.chooseDate,
'dateList': []
});
for (var s = 0; s < this.list.length; s++) {
if (!this.list[s].isForbid) {
this.list[s].isActive = true;
this.serviceTimes[this.serviceTimes.length - 1].dateList.push({'time': this.list[s].time, isActive: true});
}
}
}
}
}
}
}
}
});
</script>
</body>
</html>继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付
一个时间插件分享下。
2016-07-22 23:11:40
浏览 3028
- 相关标签
- Html5
- JQuery
- JavaScript
随时随地看视频慕课网APP
相关课程
