Reserve.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. <template>
  2. <view class="page-yy-form">
  3. <uni-nav-bar :fixed="true" height="200rpx" title="课程预约" color="#FFF" left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
  4. <view class="date-list">
  5. <block v-for="(it,index) in dateList">
  6. <view class="date-item" :class="activeIndex==index?'active':''" @click="onSetDate(it,index)">
  7. <view class="week">
  8. <view class="text">{{it.week}}</view>
  9. </view>
  10. <view class="day">{{it.day}}</view>
  11. </view>
  12. </block>
  13. </view>
  14. <view class="time-list">
  15. <scroll-view>
  16. <view class="times" >
  17. <block v-for="(it,index) in timeList">
  18. <block v-for="(item,itemIndex) in it">
  19. <view class="item" :class="item.status.className" @click="onSetStatus(index,itemIndex,item)" >
  20. <view class="time"><text class="text">{{item.time}}</text></view>
  21. <view class="status">
  22. <text class="text">{{item.status.statusText}}</text>
  23. </view>
  24. </view>
  25. </block>
  26. </block>
  27. </view>
  28. </scroll-view>
  29. </view>
  30. <view class="footer">
  31. <button class="btn" @click="onConfirm">立即预约</button>
  32. </view>
  33. <uni-popup ref="popPackage">
  34. <FitPackageForm :courseInfo="courseInfo" @onCloseRenew="onCloseRenew" :packageList="packageList"></FitPackageForm>
  35. </uni-popup>
  36. </view>
  37. </template>
  38. <script>
  39. import {
  40. mapState,
  41. mapMutations
  42. } from 'vuex'
  43. import FitPackageForm from '@/components/FitPackageForm/FitPackageForm.vue'
  44. export default {
  45. components:{
  46. FitPackageForm
  47. },
  48. data() {
  49. return {
  50. dateList:[],
  51. activeIndex:0,
  52. timeList:[],
  53. planList:[],
  54. queryForm:{
  55. courseId:0,
  56. teacherId:0,
  57. startTime:'',
  58. endTime:'',
  59. },
  60. courseInfo:null,
  61. selectedItem:[],
  62. packageList:[],//套餐列表
  63. };
  64. },
  65. async onLoad(option){
  66. this.queryForm.courseId=option.courseId||0;
  67. this.queryForm.teacherId=option.teacherId||0;
  68. await this.loadCourseInfo();
  69. },
  70. onShow() {
  71. this.initDate();
  72. },
  73. computed: {
  74. ...mapState(['systemInfo', 'store_id', 'userInfo']),
  75. },
  76. methods:{
  77. onConfirm(e){
  78. let _this=this;
  79. if(_this.ticketList.length>0){
  80. //已有优惠券
  81. _this.onAddYY();
  82. }else{
  83. //没有优惠券
  84. _this.$refs.popPackage.open("bottom");
  85. }
  86. },
  87. onCloseRenew(e){
  88. let _this=this;
  89. _this.loadCourseInfo();
  90. _this.$refs.popPackage.close();
  91. },
  92. async onAddYY(){
  93. let _this=this;
  94. let par={
  95. courseId:_this.courseInfo.id,
  96. teacherId:_this.queryForm.teacherId,
  97. startTime:_this.selectedItem[0].fullTime,
  98. endTime:_this.selectedItem[_this.selectedItem.length-1].fullTime,
  99. ticketId:_this.ticketList[0].id,
  100. planId:_this.selectedItem[0].status.planId,
  101. };
  102. let res=await _this.$http.request('fitness/addYY',par, "", "", true);
  103. if(res.code==200){
  104. uni.showToast({
  105. title:"您的预约已成功提交",
  106. icon:"success"
  107. })
  108. this.loadCourseInfo();
  109. this.initDate();
  110. }else{
  111. uni.showToast({
  112. title:res.message,
  113. icon:"error"
  114. })
  115. }
  116. },
  117. onBack(e){
  118. uni.navigateBack(-1);
  119. },
  120. //先择状态
  121. onSetStatus(index,itemIndex,item){
  122. let _this=this;
  123. let timeLen=_this.courseInfo.timeLen;
  124. var j=itemIndex;
  125. var i=index;
  126. if(item.status.className!='active'){
  127. return;
  128. }
  129. _this.resetSelected();
  130. _this.selectedItem=[];
  131. for(;i<_this.timeList.length;i++){
  132. for(;j<4;j++){
  133. if(_this.timeList[i][j].status.className!='active'){
  134. uni.showToast({
  135. title:"请选择开放的时间预约",
  136. icon:"none"
  137. })
  138. break;
  139. }
  140. _this.timeList[i][j].status.className="selected";
  141. _this.selectedItem.push(_this.timeList[i][j]);
  142. timeLen--;
  143. if(timeLen<=0)break;
  144. }
  145. j=0;
  146. if(timeLen<=0)break;
  147. }
  148. },
  149. //重置选项
  150. resetSelected(){
  151. let _this=this;
  152. let i=0,j=0;
  153. for(i=0;i<_this.timeList.length;i++){
  154. for(j=0;j<4;j++){
  155. if(_this.timeList[i][j].status.className=='selected'){
  156. _this.timeList[i][j].status.className='active';
  157. }
  158. }
  159. }
  160. },
  161. //加载课程信息
  162. async loadCourseInfo(){
  163. let _this=this;
  164. let res=await _this.$http.request('course/getCourseInfo',{id:_this.queryForm.courseId,userId:_this.userInfo.id}, "", "", true);
  165. _this.courseInfo=res.data.info;
  166. _this.ticketList=res.data.ticketList;
  167. _this.packageList=res.data.packageList;
  168. },
  169. initTime(){
  170. let _this=this;
  171. let data=[];
  172. let step=['00','15','30','45'];
  173. let d=new Date();
  174. var i=0;
  175. if(_this.activeIndex==0){
  176. i=d.getHours();
  177. }
  178. for(;i<=23;i++){
  179. let subData=[];
  180. for(var j=0;j<step.length;j++){
  181. let FullTime=_this.dateList[_this.activeIndex].date+" "+i+":"+step[j]+":00";
  182. subData.push({
  183. time:(i<10?"0"+i:i)+":"+step[j],
  184. fullDate:_this.dateList[_this.activeIndex].date,
  185. fullTime:FullTime,
  186. timeInt:Date.parse(FullTime),
  187. status:_this.checkTime(FullTime),
  188. })
  189. }
  190. data.push(subData);
  191. }
  192. this.timeList=data;
  193. },
  194. //搜索已预约人数
  195. findReqQty(yyList,time){
  196. let qty=0;
  197. for(var i=0;i<yyList.length;i++){
  198. if(yyList[i].time==time/1000){
  199. qty=yyList[i].qty;
  200. break;
  201. }
  202. }
  203. return qty;
  204. },
  205. //检测日期状态
  206. checkTime(dateTime){
  207. let _this=this;
  208. let status="active";
  209. let statusText="可预约";
  210. let timeInt=Date.parse(dateTime);
  211. let planId=0;
  212. let haveStatus =false;
  213. for(var i=0;i<_this.planList.length;i++){
  214. let item=_this.planList[i];
  215. if(timeInt>item.startTimeInt*1000 && timeInt<=item.endTimeInt*1000){
  216. let reqQty=_this.findReqQty(item.yyList,timeInt);
  217. if(reqQty<item.allowQty){
  218. statusText="可预约 "+reqQty+"/"+item.allowQty;
  219. planId=item.id;
  220. status="active";//可以预约
  221. }else{
  222. statusText="已约满";//+item.reqQty+"/"+item.allowQty;
  223. status="Full";//可以预约
  224. }
  225. haveStatus=true;
  226. break;
  227. }
  228. }
  229. if(!haveStatus){
  230. status="disabled";
  231. statusText="--";
  232. }
  233. return {
  234. planId:planId,
  235. statusText:statusText,
  236. className:status,
  237. };
  238. },
  239. //获取计划数据
  240. async getPlanData(){
  241. let _this=this;
  242. let query={}
  243. let res=await _this.$http.request('course/plan', _this.queryForm, "", "", true);
  244. _this.planList=[];
  245. if(res.code==200){
  246. _this.planList.push(res.data);
  247. }
  248. },
  249. //设置数据
  250. async onSetDate(e,index){
  251. this.activeIndex=index;
  252. this.queryForm.startTime=this.dateList[index].date +" 00:00:00";
  253. this.queryForm.endTime=this.dateList[index].date +" 23:59:59";
  254. await this.getPlanData();
  255. this.initTime();
  256. },
  257. //初始化数据
  258. async initDate(){
  259. let _this=this;
  260. let d=new Date();
  261. let weeks=['日','一','二','三','四','五','六'];
  262. _this.dataList=[];
  263. for(var i=0;i<7; i++){
  264. let temp={
  265. 'date':d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(),
  266. 'week':weeks[d.getDay()],
  267. 'day':d.getDate()<10?'0'+d.getDate():d.getDate(),
  268. }
  269. _this.dateList.push(temp);
  270. d.setDate(d.getDate() + 1);
  271. }
  272. _this.queryForm.startTime=_this.dateList[0].date +" 00:00:00";
  273. _this.queryForm.endTime=_this.dateList[0].date +" 23:59:59";
  274. await _this.getPlanData();
  275. _this.initTime();
  276. },
  277. }
  278. }
  279. </script>
  280. <style lang="scss">
  281. @import './Reserve.scss'
  282. </style>