预约相关接口功能（使用mock数据）

yfyc/src/api/interact.js

@@ -62,12 +62,3 @@ export const getInfoAPI = (id) => {
   })
 }
 
-// 提交预约
-export function submitBooking(data) {
-  return axios({
-    method: 'post',
-    url: 'http://192.168.20.55:8037/api/cms/book/save',
-    // url: 'api/cms/book/save',
-    data,
-  })
-}

yfyc/src/api/serveAndMy.js

@@ -0,0 +1,137 @@
+import axios from '../utils/request'
+
+// 提交预约
+export function submitBooking(data) {
+  // return axios({
+  //   method: 'post',
+  //   url: 'http://192.168.20.55:8037/api/cms/book/save',
+  //   // url: 'api/cms/book/save',
+  //   data,
+  // })
+  return Promise.resolve({
+    data: {
+      code: 0,
+      data: {
+        "buildId": 1,
+        "createTime": "2022-11-28 16:59:06",
+        "creatorId": 1,
+        "creatorName": "",
+        "day": "2022-11-29",
+        "id": 1,
+        "identity": "111",
+        "name": "1",
+        "num": 10,
+        "phone": "123",
+        "status": 1,
+        "timeStr": "AM",
+        "updateTime": "2022-11-28 17:39:28"
+      }
+    }
+  })
+}
+
+// 取消预约
+export function cancelBooking(id) {
+  return axios({
+    method: 'get',
+    url: `api/cms/book/cancel/${id}`,
+  })
+}
+
+// 预约列表
+export function getBookingList() {
+  // return axios({
+  //   method: 'post',
+  //   url: 'api/cms/book/listPage',
+  //   data: {
+  //     pageNum: 1,
+  //     pageSize: 200
+  //   }
+  // })
+  return Promise.resolve({
+    data: {
+      code: 0,
+      data: {
+        "countId": "",
+        "current": 1,
+        "maxLimit": null,
+        "optimizeCountSql": true,
+        "orders": [],
+        "pages": 1,
+        "records": [
+          {
+            "buildId": 1,
+            "createTime": "2022-11-28 21:01:35",
+            "creatorId": 22,
+            "creatorName": "",
+            "day": "2022-11-29",
+            "id": 7,
+            "identity": "2122",
+            "name": "1",
+            "num": 5,
+            "phone": "123",
+            "status": 0,
+            "timeStr": "AM",
+            "updateTime": "2022-11-28 21:01:35"
+          },
+          {
+            "buildId": 1,
+            "createTime": "2022-11-28 20:42:14",
+            "creatorId": 22,
+            "creatorName": "",
+            "day": "2022-11-28",
+            "id": 6,
+            "identity": "444",
+            "name": ",lk.lk",
+            "num": 2,
+            "phone": "233",
+            "status": 0,
+            "timeStr": "AM",
+            "updateTime": "2022-11-28 20:42:14"
+          },
+          {
+            "buildId": 1,
+            "createTime": "2022-11-28 20:39:10",
+            "creatorId": 22,
+            "creatorName": "",
+            "day": "2022-11-28",
+            "id": 5,
+            "identity": "333",
+            "name": ",双方的",
+            "num": 1,
+            "phone": "17767746248",
+            "status": 0,
+            "timeStr": "AM",
+            "updateTime": "2022-11-28 20:39:10"
+          },
+          {
+            "buildId": 1,
+            "createTime": "2022-11-28 20:26:54",
+            "creatorId": 22,
+            "creatorName": "",
+            "day": "2022-11-29",
+            "id": 4,
+            "identity": "222",
+            "name": "1",
+            "num": 5,
+            "phone": "123",
+            "status": 0,
+            "timeStr": "AM",
+            "updateTime": "2022-11-28 20:26:54"
+          }
+        ],
+        "searchCount": true,
+        "size": 100,
+        "total": 4
+      }
+    }
+  })
+}
+
+// 预约详情
+export function getBookingDetail(id) {
+  return axios({
+    method: 'get',
+    url: `api/cms/book/detail/${id}`
+  })
+}

yfyc/src/components/BookingSuccess.vue

@@ -5,28 +5,27 @@
       <div class="tip-1">预约成功</div>
       <div class="time-summary">
         <span class="key">预约时间：</span>
-        <span class="value">{{`${year}-${month}-${day} ${tiem}`}}</span>
-        <span class="value">{{`${bookingYear}-${bookingMonth}-${bookingDay} ${bookingHour}:${bookingMinute}:${bookingSecond}`}}</span>
+        <span class="value">{{bookingInfo.createTime}}</span>
       </div>
       <div class="line">
         <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
         <div class="text">
           <span class="key">预约日期：</span>
-          <span class="value">{{`${year}-${month}-${day} ${weekDay}`}}</span>
+          <span class="value">{{`${bookingInfo.day} ${bookingInfo.weekDay}`}}</span>
           </div>
       </div>
       <div class="line">
         <img class="icon" src="@/assets/img/service/time.png" alt="" draggable="false">
         <div class="text">
           <span class="key">预约时段：</span>
-          <span class="value">{{`${time}`}}</span>
+          <span class="value">{{bookingInfo.timeStr === 'AM' ? '8:30-12:00' : `12:00-18:30`}}</span>
         </div>
       </div>
       <div class="line">
         <img class="icon" src="@/assets/img/service/people.png" alt="" draggable="false">
         <div class="text">
           <span class="key">参观人数：</span>
-          <span class="value">{{number}}人</span>
+          <span class="value">{{bookingInfo.num}}人</span>
         </div>
       </div>
       <div class="tip-2">
@@ -39,13 +38,8 @@
 <script>
 export default {
   props: [
-    'bookingYear',
-    'bookingMonth',
-    'bookingDay',
-    'bookingHour',
-    'bookingMinute',
-    'bookingSecond',
-    'year', 'month', 'day', 'weekDay', 'time', 'number'
+    // 'year', 'month', 'day', 'weekDay', 'time', 'number',
+    'bookingInfo',
   ],
 }
 </script>

yfyc/src/views/My/MyBookings.vue

@@ -3,19 +3,23 @@
     <TabbarSmall :tabList="['全部', '活动中', '未开始', '已结束']" @change="onTabbarChange"></TabbarSmall>
     <div class="booking-list">
       <article
-        v-for="(item, index) in bookingList"
-        :key="index"
+        v-for="(item, index) in bookingListShow"
+        :key="item.id"
         :class="{
-          disabled: !item.isActive,
+          disabled: item.status === 2,
         }"
       >
         <div class="top-bar">
           <div class="first-line">
             <h2>{{item.name}}</h2>
-            <button><span>查看</span><span>→</span></button>
+            <button
+              @click="onClickDetail(item)"
+            >
+              <span>查看</span><span>→</span>
+            </button>
           </div>
           <div class="time-line">
-            申请时间：{{item.date}} {{item.time}}
+            申请时间：{{item.createTime}}
           </div>
         </div>
         <div class="rest">
@@ -23,71 +27,116 @@
             <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
             <div class="text">
               <span class="key">参观日期：</span>
-              <span class="value">{{item.date}}</span>
+              <span class="value">{{item.day}}</span>
             </div>
           </div>
           <div class="line">
             <img class="icon" src="@/assets/img/service/time.png" alt="" draggable="false">
             <div class="text">
               <span class="key">参观时段：</span>
-              <span class="value">{{item.time}}</span>
+              <span class="value">{{item.timeStr === 'AM' ? '8:30-12:00' : `12:00-18:30`}}</span>
             </div>
           </div>
           <div class="line">
             <img class="icon" src="@/assets/img/service/people.png" alt="" draggable="false">
             <div class="text">
               <span class="key">参观人数：</span>
-              <span class="value">{{item.peopleNum}}人</span>
+              <span class="value">{{item.num}}人</span>
             </div>
           </div>
-          <button class="submit">
-            {{item.isActive ? '取消预约' : '已结束'}}
+          <button class="cancel" @click="onClickCancel(item.id)">
+            {{item.status !== 2 ? '取消预约' : '已结束'}}
           </button>
         </div>
       </article>
     </div>
+
+    <BookingSuccess
+      v-if="isShowSuccess"
+      :bookingInfo="successDetail"
+      @close="isShowSuccess = false"
+    ></BookingSuccess>
   </div>
 </template>
 
 <script>
 import TabbarSmall from "@/components/TabbarSmall.vue";
+import { getBookingList, cancelBooking } from "@/api/serveAndMy.js";
+import {
+  Toast
+} from "vant";
+import BookingSuccess from "@/components/BookingSuccess.vue";
 
 export default {
   components: {
     TabbarSmall,
+    BookingSuccess,
   },
   data() {
     return {
       activeTabbarIdx: 0,
-      bookingList: [
-        {
-          name: '赭山风景区',
-          date: '2022-05-04 周六',
-          time: '10:00-11:00',
-          peopleNum: 1,
-          isActive: true,
-        },
-        {
-          name: '赭山风景区',
-          date: '2022-05-04 周六',
-          time: '10:00-11:00',
-          peopleNum: 1,
-          isActive: false,
-        },
-        {
-          name: '赭山风景区',
-          date: '2022-05-04 周六',
-          time: '10:00-11:00',
-          peopleNum: 1,
-          isActive: true,
-        },
-      ],
+      bookingListRaw: [],
+      isShowSuccess: false,
+      successDetail: null,
+    }
+  },
+  computed: {
+    bookingListActive() {
+      return this.bookingListRaw.filter((item) => {
+        return item.status === 0
+      })
+    },
+    bookingListFuture() {
+      return this.bookingListRaw.filter((item) => {
+        return item.status === 1
+      })
+    },
+    bookingListOver() {
+      return this.bookingListRaw.filter((item) => {
+        return item.status === 2
+      })
+    },
+    bookingListShow() {
+      switch (this.activeTabbarIdx) {
+        case 0:
+          return this.bookingListRaw
+          break;
+        case 1:
+          return this.bookingListActive
+          break;
+        case 2:
+          return this.bookingListFuture
+          break;
+        case 3:
+          return this.bookingListOver
+          break;
+        default:
+          break;
+      }
     }
   },
   methods: {
     onTabbarChange(idx) {
       this.activeTabbarIdx = idx
+    },
+    onClickDetail(item) {
+      this.successDetail = item
+      this.isShowSuccess = true
+    },
+    onClickCancel(id) {
+      cancelBooking(id).then(() => {
+        Toast('操作成功')
+        getBookingList().then((res) => {
+          this.bookingListRaw = res.data.data.records
+        })
+      })
     }
+  },
+  mounted() {
+    globalUtils.loginOnNeed()
+    getBookingList().then((res) => {
+      this.bookingListRaw = res.data.data.records
+    })
   }
 }
 </script>
@@ -111,7 +160,7 @@ export default {
         background: #8E8E8E;
       }
       > .rest {
-        > button.submit {
+        > button.cancel {
           background: #8E8E8E;
         }
       }
@@ -190,7 +239,7 @@ export default {
             }
           }
         }
-        > button.submit {
+        > button.cancel {
           position: absolute;
           width: 21.6vw;
           height: 6.4vw;

yfyc/src/views/My/index.vue

@@ -92,7 +92,14 @@ methods: {
     this.$router.push({name: 'Feedback'})
   },
   onClickMyBookings() {
-    this.$router.push({name: 'MyBookings'})
+    const loginStatus = globalUtils.checkLoginStatus()
+    // const loginStatus = false
+    // const loginStatus = true
+    if (loginStatus) {
+      this.$router.push({name: 'MyBookings'})
+    } else {
+      globalUtils.getUserCode('https://yifangyice.4dage.com/web/index.html#/layout/my/my-bookings')
+    }
   },
   pleaseWait() {
     globalToast("敬请期待!")

yfyc/src/views/Serve/Booking.vue

@@ -78,18 +78,7 @@
 
     <BookingSuccess
       v-if="isShowSuccess"
-      :bookingYear="bookingYear"
-      :bookingMonth="bookingMonth"
-      :bookingDay="bookingDay"
-      :bookingHour="bookingHour"
-      :bookingMinute="bookingMinute"
-      :bookingSecond="bookingSecond"
-      :year="year"
-      :month="month"
-      :day="day"
-      :weekDay="weekDay"
-      :time="timeList[timeIdx]?.time"
-      :number="number"
+      :bookingInfo="bookingRes"
       @close="$router.go(-1)"
     ></BookingSuccess>
   </div>
@@ -98,7 +87,7 @@
 <script>
 import Swiper from "../../assets/libs/swiper.js";
 import BookingSuccess from "@/components/BookingSuccess.vue";
-import { submitBooking } from "@/api/interact.js";
+import { submitBooking } from "@/api/serveAndMy.js";
 
 const weekDayList = [
   '周一',
@@ -117,12 +106,6 @@ export default {
   data() {
     return {
       attractionId: 1,
-      bookingYear: null,
-      bookingMonth: null,
-      bookingDay: null,
-      bookingHour: null,
-      bookingMinute: null,
-      bookingSecond: null,
       year: null,
       month: null,
       day: null,
@@ -144,6 +127,7 @@ export default {
       age: '',
       number: '',
 
+      bookingRes: null,
       isShowSuccess: false,
     }
   },
@@ -194,13 +178,7 @@ export default {
         "timeStr": this.timeIdx === 0 ? 'AM' : this.timeIdx === 1 ? 'PM' : undefined,
       }).then((res) => {
         if (res.data.code === 0) {
-          const now = new Date()
-          this.bookingYear = now.getFullYear()
-          this.bookingMonth = (now.getMonth() + 1).toString().padStart(2, '0')
-          this.bookingDay = now.getDate().toString().padStart(2, '0')
-          this.bookingHour = (now.getHours()).toString().padStart(2, '0')
-          this.bookingMinute = (now.getMinutes()).toString().padStart(2, '0')
-          this.bookingSecond = (now.getSeconds()).toString().padStart(2, '0')
+          this.bookingRes = res.data.data
           this.isShowSuccess = true
         }
       })