预约功能提测

yfyc/src/components/BookingSuccess.vue

@@ -11,7 +11,7 @@
         <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
         <div class="text">
           <span class="key">预约日期：</span>
-          <span class="value">{{`${bookingInfo.day} ${globalUtils.dateToWeekday(bookingInfo.day)}`}}</span>
+          <span class="value">{{`${bookingInfo.day} ${weekDay}`}}</span>
           </div>
       </div>
       <div class="line">
@@ -41,6 +41,11 @@ export default {
     // 'year', 'month', 'day', 'weekDay', 'time', 'number',
     'bookingInfo',
   ],
+  computed: {
+    weekDay() {
+      return globalUtils.dateToWeekday(this.bookingInfo.day)
+    }
+  }
 }
 </script>
 

yfyc/src/views/My/MyBookings.vue

@@ -6,7 +6,7 @@
         v-for="(item, index) in bookingListShow"
         :key="item.id"
         :class="{
-          disabled: item.status === 2,
+          disabled: item.status !== 0,
         }"
       >
         <div class="top-bar">
@@ -27,7 +27,7 @@
             <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
             <div class="text">
               <span class="key">参观日期：</span>
-              <span class="value">{{`${item.day} ${globalUtils.dateToWeekday(item.day)}`}}</span>
+              <span class="value">{{`${item.day} ${item.weekDay}`}}</span>
             </div>
           </div>
           <div class="line">
@@ -44,8 +44,8 @@
               <span class="value">{{item.num}}人</span>
             </div>
           </div>
-          <button class="cancel" @click="onClickCancel(item.id)">
-            {{item.status !== 2 ? '取消预约' : '已结束'}}
+          <button class="cancel" @click="onClickCancel(item.id)" v-show="item.proceedStatus === 0">
+            {{item.status === 0 ? '取消预约' : '已取消'}}
           </button>
         </div>
       </article>
@@ -78,22 +78,23 @@ export default {
       bookingListRaw: [],
       isShowSuccess: false,
       successDetail: null,
+      now: null,
     }
   },
   computed: {
     bookingListActive() {
       return this.bookingListRaw.filter((item) => {
-        return item.status === 0
+        return item.proceedStatus === 0
       })
     },
     bookingListFuture() {
       return this.bookingListRaw.filter((item) => {
-        return item.status === 1
+        return item.proceedStatus === 1
       })
     },
     bookingListOver() {
       return this.bookingListRaw.filter((item) => {
-        return item.status === 2
+        return item.proceedStatus === 2
       })
     },
     bookingListShow() {
@@ -127,7 +128,25 @@ export default {
       cancelBooking(id).then(() => {
         Toast('操作成功')
         getBookingList().then((res) => {
-          this.bookingListRaw = res.data.records
+          this.bookingListRaw = res.data.records.map((item) => {
+            item.weekDay = globalUtils.dateToWeekday(item.day)
+            let targetTime
+            if (item.timeStr === 'AM') {
+              targetTime = new Date(`${item.day} 10:00`)
+            } else {
+              targetTime = new Date(`${item.day} 12:00`)
+            }
+            if (this.now.getTime() - targetTime.getTime() < 0) {
+              item.proceedStatus = 0 // 未开始
+            } else if (item.timeStr === 'AM' && (this.now.getTime() - targetTime.getTime() >= 0) && (this.now.getTime() - targetTime.getTime() < 2 * 60 * 60 *1000)) {
+              item.proceedStatus = 1 // 进行中
+            } else if (item.timeStr === 'PM' && (this.now.getTime() - targetTime.getTime() >= 0) && (this.now.getTime() - targetTime.getTime() < 6.5 * 60 * 60 *1000)) {
+              item.proceedStatus = 1 // 进行中
+            } else {
+              item.proceedStatus = 2 // 已结束
+            }
+            return item
+          })
         })
       })
     }
@@ -135,8 +154,27 @@ export default {
   mounted() {
     globalUtils.loginOnNeed()
     getBookingList().then((res) => {
-      this.bookingListRaw = res.data.records
+      this.bookingListRaw = res.data.records.map((item) => {
+        item.weekDay = globalUtils.dateToWeekday(item.day)
+        let targetTime
+        if (item.timeStr === 'AM') {
+          targetTime = new Date(`${item.day} 10:00`)
+        } else {
+          targetTime = new Date(`${item.day} 12:00`)
+        }
+        if (this.now.getTime() - targetTime.getTime() < 0) {
+          item.proceedStatus = 0 // 未开始
+        } else if (item.timeStr === 'AM' && (this.now.getTime() - targetTime.getTime() >= 0) && (this.now.getTime() - targetTime.getTime() < 2 * 60 * 60 *1000)) {
+          item.proceedStatus = 1 // 进行中
+        } else if (item.timeStr === 'PM' && (this.now.getTime() - targetTime.getTime() >= 0) && (this.now.getTime() - targetTime.getTime() < 6.5 * 60 * 60 *1000)) {
+          item.proceedStatus = 1 // 进行中
+        } else {
+          item.proceedStatus = 2 // 已结束
+        }
+        return item
+      })
     })
+    this.now = new Date()
   }
 }
 </script>

yfyc/src/views/Serve/Booking.vue

@@ -194,10 +194,8 @@ export default {
         "phone": this.phone,
         "timeStr": this.timeIdx === 0 ? 'AM' : this.timeIdx === 1 ? 'PM' : undefined,
       }).then((res) => {
-        if (res.code === 0) {
-          this.bookingRes = res.data
-          this.isShowSuccess = true
-        }
+        this.bookingRes = res.data
+        this.isShowSuccess = true
       })
     },
   }