|
@@ -1,43 +1,50 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="pages">
|
|
|
<img src="../static/images/main/banner.png" height="121" width="414"/>
|
|
<img src="../static/images/main/banner.png" height="121" width="414"/>
|
|
|
- <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" center>
|
|
|
|
|
- <mu-tab v-for="item in 5">8月5日 <br> <em>星期二</em></mu-tab>
|
|
|
|
|
|
|
+ <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" >
|
|
|
|
|
+ <mu-tab v-for="(day,i) in weeks">{{day.name}} <br> <em>{{day.data}}</em></mu-tab>
|
|
|
</mu-tabs>
|
|
</mu-tabs>
|
|
|
<div class="context">
|
|
<div class="context">
|
|
|
<span class="sum">
|
|
<span class="sum">
|
|
|
- 今日预约名额剩余
|
|
|
|
|
|
|
+ 当日预约名额剩余
|
|
|
<em class="green" v-if="num > 0">{{num}}</em>
|
|
<em class="green" v-if="num > 0">{{num}}</em>
|
|
|
<em class="red" v-else>{{num}}</em>
|
|
<em class="red" v-else>{{num}}</em>
|
|
|
人
|
|
人
|
|
|
</span>
|
|
</span>
|
|
|
<ul class="list">
|
|
<ul class="list">
|
|
|
<li v-for="l in list"
|
|
<li v-for="l in list"
|
|
|
- :class="[{'greenLi':l.Status == 0},{'redLi':l.Status == 1},{'yellowLi':l.Status == 2},{'whiteLi':l.Status == 3}]">
|
|
|
|
|
|
|
+ :class="[{'greenLi':l.remain > 0},{'redLi':l.Status == 1},{'yellowLi':l.remain == 0},{'whiteLi':l.WxOrder == 0}]">
|
|
|
<div class="dotContainer">
|
|
<div class="dotContainer">
|
|
|
- <i class="dot" v-if="l.Status==0"></i>
|
|
|
|
|
|
|
+ <!-- 正常-->
|
|
|
|
|
+ <i class="dot" v-if="l.remain>0"></i>
|
|
|
|
|
+
|
|
|
<i class="cubes" v-if="l.Status==1"></i>
|
|
<i class="cubes" v-if="l.Status==1"></i>
|
|
|
- <i class="tri" v-if="l.Status==2"></i>
|
|
|
|
|
- <i class="x" v-if="l.Status==3"></i>
|
|
|
|
|
|
|
+<!-- 已满-->
|
|
|
|
|
+ <i class="tri" v-if="l.remain==0"></i>
|
|
|
|
|
+ <!-- 不可约-->
|
|
|
|
|
+ <i class="x" v-if="l.WxOrder==0"></i>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="title">
|
|
<div class="title">
|
|
|
- <h5>{{l.name}}</h5>
|
|
|
|
|
- <span>{{l.timeLong}}</span>
|
|
|
|
|
|
|
+ <h5>{{l.ClassName}}</h5>
|
|
|
|
|
+ <span>{{l.BeginStr}} - {{l.EndStr}}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="current">
|
|
<div class="current">
|
|
|
<h5>剩余
|
|
<h5>剩余
|
|
|
- <em class="green" v-if="l.kick > 0">{{l.kick}}</em>
|
|
|
|
|
- <em class="red" v-else>{{l.kick}}</em>
|
|
|
|
|
|
|
+ <em class="green" v-if="l.remain > 0">{{l.remain}}</em>
|
|
|
|
|
+ <em class="red" v-else>{{l.remain}}</em>
|
|
|
人</h5>
|
|
人</h5>
|
|
|
- <span>总名额 {{l.kick}} 人</span>
|
|
|
|
|
|
|
+ <span>总名额 {{l.OrderToplimit}} 人</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <mu-button class="appointBtn greenBtn" v-if="l.Status == 0" @click="appointNow(l)">预约
|
|
|
|
|
- </mu-button>
|
|
|
|
|
- <mu-button class="appointBtn redBtn" v-if="l.Status == 1" @click="isFulled">已满</mu-button>
|
|
|
|
|
- <mu-button class="appointBtn yellowBtn" v-if="l.Status == 2" @click="isAppointed(l)">已约
|
|
|
|
|
- </mu-button>
|
|
|
|
|
- <mu-button class="appointBtn disableBtn" v-if="l.Status == 3" @click="isDisable">不可约</mu-button>
|
|
|
|
|
|
|
+ <mu-button class="appointBtn greenBtn" v-if="l.remain > 0 && l.OrderId == 0" @click="appointNow(l)">预约</mu-button>
|
|
|
|
|
+ <mu-button class="appointBtn redBtn" v-if="l.remain == 0" @click="isFulled">已满</mu-button>
|
|
|
|
|
+ <mu-button class="appointBtn yellowBtn" v-if="l.OrderId != 0" @click="isAppointed(l)">已约</mu-button>
|
|
|
|
|
+ <mu-button class="appointBtn disableBtn" v-if="l.WxOrder == 0" @click="isDisable">不可约</mu-button>
|
|
|
</li>
|
|
</li>
|
|
|
|
|
+ <div class="tips" v-if="list == ''">
|
|
|
|
|
+ <p style="text-align: center">
|
|
|
|
|
+ 暂无可预约的课程
|
|
|
|
|
+ </p>
|
|
|
|
|
+ </div>
|
|
|
</ul>
|
|
</ul>
|
|
|
</div>
|
|
</div>
|
|
|
<bottomTab :curTab="thisTab"></bottomTab>
|
|
<bottomTab :curTab="thisTab"></bottomTab>
|
|
@@ -45,7 +52,7 @@
|
|
|
<mu-dialog title="预约课程" width="600" max-width="80%" :esc-press-close="false"
|
|
<mu-dialog title="预约课程" width="600" max-width="80%" :esc-press-close="false"
|
|
|
:overlay-close="false" :open.sync="openAlert">
|
|
:overlay-close="false" :open.sync="openAlert">
|
|
|
<p>
|
|
<p>
|
|
|
- 是否预约 课程:{{dialog.name}} ,时间:{{dialog.timeLong}}
|
|
|
|
|
|
|
+ 是否预约 课程:{{dialog.ClassName}} ,时间:{{dialog.BeginStr}} - {{dialog.EndStr}}
|
|
|
<br>
|
|
<br>
|
|
|
</p>
|
|
</p>
|
|
|
<mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
|
|
<mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
|
|
@@ -59,6 +66,9 @@
|
|
|
import axios from 'axios';
|
|
import axios from 'axios';
|
|
|
import bottomTab from '../components/bottomTab'
|
|
import bottomTab from '../components/bottomTab'
|
|
|
import {
|
|
import {
|
|
|
|
|
+ SchoolTimeTableListQuery,
|
|
|
|
|
+ OderAddByVipUser,
|
|
|
|
|
+ OderCancelByVipUser,
|
|
|
testSelect,
|
|
testSelect,
|
|
|
testTable,
|
|
testTable,
|
|
|
} from '../api/getApiRes.js'
|
|
} from '../api/getApiRes.js'
|
|
@@ -75,6 +85,7 @@
|
|
|
sum: 0,
|
|
sum: 0,
|
|
|
openAlert: false,
|
|
openAlert: false,
|
|
|
list: [],
|
|
list: [],
|
|
|
|
|
+ weeks: [],
|
|
|
dialog: {
|
|
dialog: {
|
|
|
id: '',
|
|
id: '',
|
|
|
name: '',
|
|
name: '',
|
|
@@ -83,17 +94,77 @@
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
- this.getList();
|
|
|
|
|
|
|
+ this.getFurtherDays();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // 获取未来7天的
|
|
|
|
|
+ getFurtherDays() {
|
|
|
|
|
+ let now = new Date();
|
|
|
|
|
+ let nowTime = now.getTime();
|
|
|
|
|
+ let oneDayTime = 24 * 60 * 60 * 1000;
|
|
|
|
|
+ let days = '';
|
|
|
|
|
+ let item = [];
|
|
|
|
|
+ let month = 0;
|
|
|
|
|
+ let day = 0;
|
|
|
|
|
+ for (let i = 0; i < 7; i++) {
|
|
|
|
|
+ days = new Date(nowTime + (i) * oneDayTime);//显示周日
|
|
|
|
|
+ month = days.getMonth() + 1;
|
|
|
|
|
+ day = days.getDate();
|
|
|
|
|
+ month = month < 10 ? '0' + month : month;
|
|
|
|
|
+ day = day < 10 ? '0' + day : day;
|
|
|
|
|
+ item = {
|
|
|
|
|
+ name: this.numberToWeek(days.getDay()),
|
|
|
|
|
+ data: days.getMonth() + 1 + '月' + days.getDate() + '日',
|
|
|
|
|
+ orderDate: new Date().getFullYear() + '-' + month + '-' + day
|
|
|
|
|
+ }
|
|
|
|
|
+ this.weeks.push(item);
|
|
|
|
|
+ }
|
|
|
|
|
+ console.log( this.weeks);
|
|
|
|
|
+ // let todaymonth = new Date.getMonth() + 1;
|
|
|
|
|
+ // let todayday = new Date.getDate();
|
|
|
|
|
+ // todaymonth = todaymonth < 10 ? '0' + todaymonth : todaymonth;
|
|
|
|
|
+ // todayday = todayday < 10 ? '0' + todayday : todayday;
|
|
|
|
|
+ // let today = {
|
|
|
|
|
+ // name:this.numberToWeek(new Date.getDay()),
|
|
|
|
|
+ // data: new Date.getMonth() + 1 + '月' + new Date.getDate() + '日',
|
|
|
|
|
+ // orderDate: new Date().getFullYear() + '-' + month + '-' + day
|
|
|
|
|
+ // }
|
|
|
|
|
+ // this.weeks.push(today);
|
|
|
|
|
+ this.getList();
|
|
|
|
|
+ },
|
|
|
|
|
+ numberToWeek(val) {
|
|
|
|
|
+ switch (parseInt(val)) {
|
|
|
|
|
+ case 1:
|
|
|
|
|
+ return '星期一'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 2:
|
|
|
|
|
+ return '星期二'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 3:
|
|
|
|
|
+ return '星期三'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 4:
|
|
|
|
|
+ return '星期四'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 5:
|
|
|
|
|
+ return '星期五'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 6:
|
|
|
|
|
+ return '星期六'
|
|
|
|
|
+ break;
|
|
|
|
|
+ case 0:
|
|
|
|
|
+ return '星期天'
|
|
|
|
|
+ break;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
confirmAppoint() {
|
|
confirmAppoint() {
|
|
|
let that = this;
|
|
let that = this;
|
|
|
let param = {
|
|
let param = {
|
|
|
token: localStorage.token,
|
|
token: localStorage.token,
|
|
|
- id: that.dialog.id
|
|
|
|
|
|
|
+ stdId : that.dialog.StdId
|
|
|
};
|
|
};
|
|
|
let postdata = qs.stringify(param);
|
|
let postdata = qs.stringify(param);
|
|
|
- testSelect(postdata).then(res => {
|
|
|
|
|
|
|
+ OderAddByVipUser(postdata).then(res => {
|
|
|
let json = res;
|
|
let json = res;
|
|
|
if (json.Code == 0) {
|
|
if (json.Code == 0) {
|
|
|
that.Toast('已成功预约', 'success');
|
|
that.Toast('已成功预约', 'success');
|
|
@@ -128,9 +199,10 @@
|
|
|
if (result) {
|
|
if (result) {
|
|
|
let param = {
|
|
let param = {
|
|
|
token: localStorage.token,
|
|
token: localStorage.token,
|
|
|
|
|
+ orderId : row.OrderId,
|
|
|
};
|
|
};
|
|
|
let postdata = qs.stringify(param);
|
|
let postdata = qs.stringify(param);
|
|
|
- testTable(postdata).then(res => {
|
|
|
|
|
|
|
+ OderCancelByVipUser(postdata).then(res => {
|
|
|
let json = res;
|
|
let json = res;
|
|
|
if (json.Code == 0) {
|
|
if (json.Code == 0) {
|
|
|
that.Toast('当前课程已取消预约', 'success');
|
|
that.Toast('当前课程已取消预约', 'success');
|
|
@@ -149,24 +221,40 @@
|
|
|
},
|
|
},
|
|
|
getList() {
|
|
getList() {
|
|
|
let that = this;
|
|
let that = this;
|
|
|
|
|
+ let curDay = this.weeks[this.active].orderDate;
|
|
|
let param = {
|
|
let param = {
|
|
|
token: localStorage.token,
|
|
token: localStorage.token,
|
|
|
- active: this.active
|
|
|
|
|
|
|
+ orderDate: curDay,
|
|
|
};
|
|
};
|
|
|
let postdata = qs.stringify(param);
|
|
let postdata = qs.stringify(param);
|
|
|
- testTable(postdata).then(res => {
|
|
|
|
|
|
|
+ SchoolTimeTableListQuery(postdata).then(res => {
|
|
|
let json = res;
|
|
let json = res;
|
|
|
if (json.Code == 0) {
|
|
if (json.Code == 0) {
|
|
|
that.list = json.Rs;
|
|
that.list = json.Rs;
|
|
|
|
|
+ that.num = 0;
|
|
|
if (that.list) {
|
|
if (that.list) {
|
|
|
- that.num = json.Rs.length;
|
|
|
|
|
|
|
+ // 计算剩余
|
|
|
|
|
+ that.list.map(function (item) {
|
|
|
|
|
+ item.remain = parseInt(item.OrderToplimit) - parseInt(item.OrderCount);
|
|
|
|
|
+ that.num = that.num + item.remain
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+ console.log(that.num);
|
|
|
} else {
|
|
} else {
|
|
|
- that.$message.error(json.Memo);
|
|
|
|
|
|
|
+ that.Toast(json.Memo + ',错误码:' + json.Code);
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
|
|
+ beforeRouteEnter(to, from, next) {
|
|
|
|
|
+ next(vm => {
|
|
|
|
|
+ //因为当钩子执行前,组件实例还没被创建
|
|
|
|
|
+ // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
|
|
|
|
|
+ if (to.name == 'appoint') {
|
|
|
|
|
+ vm.getList();
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
watch: {
|
|
watch: {
|
|
|
'active'() {
|
|
'active'() {
|
|
|
this.getList();
|
|
this.getList();
|
|
@@ -179,6 +267,11 @@
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+ .pages {
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
/*mu-header*/
|
|
/*mu-header*/
|
|
|
.mu-primary-color {
|
|
.mu-primary-color {
|
|
|
line-height: 60px;
|
|
line-height: 60px;
|
|
@@ -198,14 +291,20 @@
|
|
|
/deep/ .mu-appbar-title {
|
|
/deep/ .mu-appbar-title {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+ /deep/ .mu-tabs {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ overflow-x: scroll;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ }
|
|
|
/deep/ .mu-tab {
|
|
/deep/ .mu-tab {
|
|
|
|
|
+ float: left;
|
|
|
height: 51px;
|
|
height: 51px;
|
|
|
margin-right: 6px;
|
|
margin-right: 6px;
|
|
|
}
|
|
}
|
|
|
- /deep/ .mu-tab:nth-child(5) {
|
|
|
|
|
- margin-right: 0px;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /*/deep/ .mu-tab:nth-child(5) {*/
|
|
|
|
|
+ /* margin-right: 0px;*/
|
|
|
|
|
+ /*}*/
|
|
|
|
|
|
|
|
/deep/ .mu-tab-wrapper {
|
|
/deep/ .mu-tab-wrapper {
|
|
|
height: 51px;
|
|
height: 51px;
|
|
@@ -424,6 +523,7 @@
|
|
|
overflow-y: hidden;
|
|
overflow-y: hidden;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/deep/ .mu-tabs-center::-webkit-scrollbar {
|
|
/deep/ .mu-tabs-center::-webkit-scrollbar {
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|