123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 |
- <template>
- <view class="page-yy-form">
- <uni-nav-bar :fixed="true" height="200rpx" title="课程预约" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
-
- <view class="date-list">
- <block v-for="(it,index) in dateList">
- <view class="date-item" :class="activeIndex==index?'active':''" @click="onSetDate(it,index)">
- <view class="week">
- <view class="text">{{it.week}}</view>
- </view>
- <view class="day">{{it.day}}</view>
- </view>
- </block>
- </view>
- <view class="time-list">
- <scroll-view>
- <view class="times" >
- <block v-for="(it,index) in timeList">
- <block v-for="(item,itemIndex) in it">
- <view class="item" :class="item.status.className" @click="onSetStatus(index,itemIndex,item)" >
- <view class="time"><text class="text">{{item.time}}</text></view>
- <view class="status">
- <text class="text">{{item.status.statusText}}</text>
- </view>
- </view>
- </block>
- </block>
- </view>
- </scroll-view>
- </view>
-
- <view class="footer">
- <button class="btn" @click="onConfirm">立即预约</button>
- </view>
- <uni-popup ref="popPackage">
- <FitPackageForm :courseInfo="courseInfo" @onCloseRenew="onCloseRenew" :packageList="packageList"></FitPackageForm>
- </uni-popup>
-
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations
- } from 'vuex'
- import FitPackageForm from '@/components/FitPackageForm/FitPackageForm.vue'
- export default {
- components:{
- FitPackageForm
- },
- data() {
- return {
- dateList:[],
- activeIndex:0,
- timeList:[],
- planList:[],
- queryForm:{
- courseId:0,
- teacherId:0,
- startTime:'',
- endTime:'',
- },
- courseInfo:null,
- selectedItem:[],
- packageList:[],//套餐列表
- };
- },
- async onLoad(option){
- this.queryForm.courseId=option.courseId||0;
- this.queryForm.teacherId=option.teacherId||0;
- await this.loadCourseInfo();
- },
- onShow() {
-
- this.initDate();
- },
- computed: {
- ...mapState(['systemInfo', 'store_id', 'userInfo']),
- },
- methods:{
-
- onConfirm(e){
- let _this=this;
-
- if(_this.ticketList.length>0){
- //已有优惠券
- _this.onAddYY();
- }else{
- //没有优惠券
- _this.$refs.popPackage.open("bottom");
- }
- },
-
- onCloseRenew(e){
- let _this=this;
- _this.loadCourseInfo();
- _this.$refs.popPackage.close();
- },
-
- async onAddYY(){
- let _this=this;
- let par={
- courseId:_this.courseInfo.id,
- teacherId:_this.queryForm.teacherId,
- startTime:_this.selectedItem[0].fullTime,
- endTime:_this.selectedItem[_this.selectedItem.length-1].fullTime,
- ticketId:_this.ticketList[0].id,
- planId:_this.selectedItem[0].status.planId,
- };
- let res=await _this.$http.request('fitness/addYY',par, "", "", true);
- if(res.code==200){
- uni.showToast({
- title:"您的预约已成功提交",
- icon:"success"
- })
- this.loadCourseInfo();
- this.initDate();
- }else{
- uni.showToast({
- title:res.message,
- icon:"error"
- })
- }
- },
-
- onBack(e){
- uni.navigateBack(-1);
- },
- //先择状态
- onSetStatus(index,itemIndex,item){
- let _this=this;
- let timeLen=_this.courseInfo.timeLen;
- var j=itemIndex;
- var i=index;
- if(item.status.className!='active'){
- return;
- }
- _this.resetSelected();
- _this.selectedItem=[];
-
- for(;i<_this.timeList.length;i++){
- for(;j<4;j++){
-
- if(_this.timeList[i][j].status.className!='active'){
- uni.showToast({
- title:"请选择开放的时间预约",
- icon:"none"
- })
- break;
- }
-
- _this.timeList[i][j].status.className="selected";
- _this.selectedItem.push(_this.timeList[i][j]);
- timeLen--;
- if(timeLen<=0)break;
- }
- j=0;
- if(timeLen<=0)break;
- }
-
- },
- //重置选项
- resetSelected(){
- let _this=this;
- let i=0,j=0;
- for(i=0;i<_this.timeList.length;i++){
- for(j=0;j<4;j++){
- if(_this.timeList[i][j].status.className=='selected'){
- _this.timeList[i][j].status.className='active';
- }
- }
- }
- },
- //加载课程信息
- async loadCourseInfo(){
- let _this=this;
- let res=await _this.$http.request('course/getCourseInfo',{id:_this.queryForm.courseId,userId:_this.userInfo.id}, "", "", true);
- _this.courseInfo=res.data.info;
- _this.ticketList=res.data.ticketList;
- _this.packageList=res.data.packageList;
- },
-
-
- initTime(){
- let _this=this;
- let data=[];
- let step=['00','15','30','45'];
- let d=new Date();
- var i=0;
- if(_this.activeIndex==0){
- i=d.getHours();
- }
- for(;i<=23;i++){
- let subData=[];
- for(var j=0;j<step.length;j++){
- let FullTime=_this.dateList[_this.activeIndex].date+" "+i+":"+step[j]+":00";
- subData.push({
- time:(i<10?"0"+i:i)+":"+step[j],
- fullDate:_this.dateList[_this.activeIndex].date,
- fullTime:FullTime,
- timeInt:Date.parse(FullTime),
- status:_this.checkTime(FullTime),
- })
- }
- data.push(subData);
- }
- this.timeList=data;
- },
- //搜索已预约人数
- findReqQty(yyList,time){
- let qty=0;
- for(var i=0;i<yyList.length;i++){
- if(yyList[i].time==time/1000){
- qty=yyList[i].qty;
- break;
- }
- }
- return qty;
- },
- //检测日期状态
- checkTime(dateTime){
- let _this=this;
- let status="active";
- let statusText="可预约";
- let timeInt=Date.parse(dateTime);
- let planId=0;
- let haveStatus =false;
- for(var i=0;i<_this.planList.length;i++){
- let item=_this.planList[i];
- if(timeInt>item.startTimeInt*1000 && timeInt<=item.endTimeInt*1000){
- let reqQty=_this.findReqQty(item.yyList,timeInt);
- if(reqQty<item.allowQty){
- statusText="可预约 "+reqQty+"/"+item.allowQty;
- planId=item.id;
- status="active";//可以预约
- }else{
- statusText="已约满";//+item.reqQty+"/"+item.allowQty;
- status="Full";//可以预约
- }
- haveStatus=true;
- break;
- }
- }
-
- if(!haveStatus){
- status="disabled";
- statusText="--";
- }
-
-
- return {
- planId:planId,
- statusText:statusText,
- className:status,
- };
- },
-
- //获取计划数据
- async getPlanData(){
- let _this=this;
- let query={}
- let res=await _this.$http.request('course/plan', _this.queryForm, "", "", true);
- _this.planList=[];
- if(res.code==200){
- _this.planList.push(res.data);
- }
- },
- //设置数据
- async onSetDate(e,index){
- this.activeIndex=index;
- this.queryForm.startTime=this.dateList[index].date +" 00:00:00";
- this.queryForm.endTime=this.dateList[index].date +" 23:59:59";
- await this.getPlanData();
- this.initTime();
- },
- //初始化数据
- async initDate(){
- let _this=this;
- let d=new Date();
- let weeks=['日','一','二','三','四','五','六'];
- _this.dataList=[];
- for(var i=0;i<7; i++){
- let temp={
- 'date':d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(),
- 'week':weeks[d.getDay()],
- 'day':d.getDate()<10?'0'+d.getDate():d.getDate(),
- }
- _this.dateList.push(temp);
- d.setDate(d.getDate() + 1);
- }
- _this.queryForm.startTime=_this.dateList[0].date +" 00:00:00";
- _this.queryForm.endTime=_this.dateList[0].date +" 23:59:59";
- await _this.getPlanData();
- _this.initTime();
- },
- }
- }
- </script>
- <style lang="scss">
- @import './Reserve.scss'
- </style>
|