代码优化

hookehuyr
Commit 3bd9ed14da05d3efa121fdd1e41e9738ddef2d14 3bd9ed14 1 parent 821cc121
Showing 5 changed files with 120 additions and 64 deletions
src/views/booking.vue
src/views/bookingDetail.vue
src/views/bookingList.vue
src/views/submit.vue
src/views/success.vue
--- a/src/views/booking.vue
View file @3bd9ed1
+++ b/src/views/booking.vue
View file @3bd9ed1
 <!--
  * @Date: 2024-01-15 13:35:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-23 10:34:08
+ * @LastEditTime: 2024-01-24 10:26:55
  * @FilePath: /xysBooking/src/views/booking.vue
  * @Description: 预约页面
 -->
@@ -19,19 +19,22 @@
         <div v-for="(week, index) in weeks" :key="week" class="weeks">
           <div v-for="date in week" :key="date"
             @click="chooseDay(date)"
-            :class="['item', checked_day === findDatesInfo(date).date ? 'checked' : '',  findDatesInfo(date).reserve_full === 0 || findDatesInfo(date).reserve_full === 'overdue' ? 'disabled' : '']"
+            :class="[ 'item',
+              checked_day === findDatesInfo(date).date ? 'checked' : '',
+              findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
+            ]"
           >
             <div v-if="findDatesInfo(date).date">
               <p class="day-text">{{ findDatesInfo(date).text }}</p>
-              <p v-if="findDatesInfo(date).reserve_full === 1" class="day-price">¥{{ findDatesInfo(date).price }}</p>
+              <p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p>
-              <p v-else-if="findDatesInfo(date).reserve_full === -1 || findDatesInfo(date).reserve_full === 'overdue'" class="day-price"></p>
+              <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
-              <p v-else-if="findDatesInfo(date).reserve_full === 0" class="day-no-booking">约满</p>
+              <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
               <!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
             </div>
           </div>
         </div>
       </div>
-      <div v-if="checked_day && checked_day_reserve_full === 1" class="choose-time">
+      <div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="choose-time">
         <div class="title">
           <div class="text">选择参访时间段</div>
         </div>
@@ -40,7 +43,7 @@
             @click="chooseTime(item, index)"
             v-for="(item, index) in timePeriod"
             :key="index"
-            :class="['time', item.rest_qty === 0 ? 'disabled' : '']"
+            :class="['time', item.rest_qty === QtyStatus.FULL ? 'disabled' : '']"
           >
             <div class="left">
               <van-icon v-if="checked_time !== index" :name="icon_select1" />&nbsp;
@@ -48,14 +51,14 @@
               {{ item.begin_time }}-{{ item.end_time }}
             </div>
             <div class="right">
-              <span v-if="item.rest_qty > 0">余量：{{ item.rest_qty }}</span>
+              <span v-if="item.rest_qty">余量：{{ item.rest_qty }}</span>
-              <span v-else-if="item.rest_qty === -1">可约</span>
+              <span v-else-if="item.rest_qty === QtyStatus.INFINITY">可约</span>
               <span v-else>已约满</span>
             </div>
           </div>
         </div>
       </div>
-      <div v-if="checked_day_reserve_full === -1" class="choose-time">
+      <div v-if="checked_day_reserve_full === ReserveStatus.INFINITY" class="choose-time">
         <div class="title">
           <div class="text">选择参访时间段</div>
         </div>
@@ -65,7 +68,7 @@
       </div>
     </div>
     <div style="height: 5rem;"></div>
-    <div v-if="checked_day && checked_day_reserve_full === 1" class="next">
+    <div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="next">
       <div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
     </div>
@@ -81,7 +84,7 @@
       />
     </van-popup>
-    <van-toast v-model:show="show_error" style="">
+    <van-toast v-model:show="show_error">
       <template #message>
         {{ error_message }}
       </template>
@@ -122,7 +125,7 @@ onMounted(async () => {
     // 今日之前都不可约
     dates_list.value.forEach((date) => {
       if (dayjs(date.month_date).isBefore(dayjs())) {
-        date.reserve_full = 'overdue';
+        date.reserve_full = ReserveStatus.OVERDUE;
       }
     });
     dates.value = dates_list.value.map(item => item.month_date);
@@ -145,6 +148,17 @@ const findDatesInfo = (date) => {
   };
 };
+/**
+ * @description: 预约状态
+ * @return {object} {INFINITY: -1, FULL: 0, AVAILABLE: 1, OVERDUE: 'overdue' }
+ */
+const ReserveStatus = {
+  INFINITY: -1, // 无需预约
+  FULL: 0, // 约满
+  AVAILABLE: 1, // 可约
+  OVERDUE: 'overdue', // 过期日期
+}
+
 const daysOfWeek = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
 /**
@@ -194,17 +208,26 @@ const checked_time = ref(-1);
 const timePeriod = ref([]); // 当前时间段信息
 const chooseTime = (item, index) => { // 选择时间段回调
-  if (item.rest_qty > 0 || item.rest_qty === -1) { // 余量等于-1为不限制数量
+  if (item.rest_qty || item.rest_qty === QtyStatus.INFINITY) { // 余量等于-1为不限制数量
     checked_time.value = index;
   }
 };
+/**
+ * @description: 数量状态
+ * @return {object} {FULL: 0, INFINITY: -1 }
+ */
+const QtyStatus = {
+  FULL: 0, // 无余量
+  INFINITY: -1, // 无限制
+}
+
 const chooseDay = async (date) => { // 点击日期回调
-  if (findDatesInfo(date).reserve_full === 1 || findDatesInfo(date).reserve_full === -1) { // 状态 1可约 || -1不限制
+  if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE || findDatesInfo(date).reserve_full === ReserveStatus.INFINITY) { // 状态 1可约 || -1不限制
     checked_day.value = date; // 当前日期
     checked_day_price.value = findDatesInfo(date).price; // 当前价格
     checked_day_reserve_full.value = findDatesInfo(date).reserve_full; // 当前状态
-    if (findDatesInfo(date).reserve_full === 1) {
+    if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE) {
       // 选择日期后，查询时间段信息
       const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
       if (code) {
@@ -243,7 +266,7 @@ const onConfirm = async ({ selectedValues, selectedOptions }) => { // 
     // 今日之前都不可约
     dates_list.value.forEach((date) => {
       if (dayjs(date.month_date).isBefore(dayjs())) {
-        date.reserve_full = 'overdue';
+        date.reserve_full = ReserveStatus.OVERDUE;
       }
     });
     dates.value = dates_list.value.map(item => item.month_date);
--- a/src/views/bookingDetail.vue
View file @3bd9ed1
+++ b/src/views/bookingDetail.vue
View file @3bd9ed1
 <!--
  * @Date: 2024-01-16 13:19:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-19 21:53:06
+ * @LastEditTime: 2024-01-24 10:45:32
  * @FilePath: /xysBooking/src/views/bookingDetail.vue
- * @Description: 文件描述
+ * @Description: 预约记录详情
 -->
 <template>
   <div class="booking-detail-page">
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div style="height: 5rem;"></div>
-    <div v-if="billInfo.status === '3'" class="cancel-wrapper">
+    <div v-if="billInfo.status === CodeStatus.SUCCESS" class="cancel-wrapper">
       <div @click="cancelBooking" class="cancel-btn ">取消预约</div>
     </div>
   </div>
@@ -54,8 +54,8 @@ const $router = useRouter();
 useTitle($route.meta.title);
 const go = useGo();
+
 const pay_id = $route.query.pay_id;
-const status = ref('预约成功');
 const qrCodeStatus = ref('');
 const cancelBooking = (item) => {
@@ -66,12 +66,12 @@ const cancelBooking = (item) => {
     width: '80vw'
   })
   .then(async () => {
-    // on confirm
+      // on confirm
-    const { code, data } = await cancelPrepareAPI({ bill_id: billInfo.value.bill_id });
+      const { code, data } = await cancelPrepareAPI({ bill_id: billInfo.value.bill_id });
-    if (code) {
+      if (code) {
-      showSuccessToast('取消成功');
+        showSuccessToast('取消成功');
-      $router.go(-1);
+        $router.go(-1);
-    }
+      }
     })
     .catch(() => {
       // on cancel
@@ -89,26 +89,42 @@ const billInfo = ref({});
  * 9=已使用（明细里有一个码被使用），
  * 11=退款中（取消预约时先把状态打成11）
  */
+const CodeStatus = {
+  APPLY: 1,
+  PAYING: 2,
+  SUCCESS: 3,
+  CANCEL: 5,
+  CANCELED: 7,
+  USED: 9,
+  REFUNDING: 11
+}
+
+const formatDatetime = (data) => { // 格式化日期
+  let begin_time = data.begin_time.slice(0, -3);
+  let end_time = data.end_time.slice(0, -3);
+  let str = begin_time + ' ' + end_time;
+  return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
+}
 onMounted(async () => {
   const { code, data } = await billInfoAPI({ pay_id });
   if (code) {
-    let begin_time = data.begin_time.slice(0, -3);
-    let end_time = data.end_time.slice(0, -3);
-    let str = begin_time + ' ' + end_time;
     //
-    data.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
+    data.datetime = data && formatDatetime(data);
     data.order_time = data.created_time.slice(0, -3);
+    //
     billInfo.value = data;
     // 显示二维码状态
-    if (billInfo.value.status === '3') {
+    switch (billInfo.value.status) {
-      qrCodeStatus.value = 'success';
+      case CodeStatus.SUCCESS:
-    }
+        qrCodeStatus.value = 'success';
-    if (billInfo.value.status === '7') {
+        break;
-      qrCodeStatus.value = 'cancel';
+      case CodeStatus.CANCELED:
-    }
+        qrCodeStatus.value = 'cancel';
-    if (billInfo.value.status === '9') {
+        break;
-      qrCodeStatus.value = 'used';
+      case CodeStatus.USED:
+        qrCodeStatus.value = 'used';
+        break;
     }
   }
 })
--- a/src/views/bookingList.vue
View file @3bd9ed1
+++ b/src/views/bookingList.vue
View file @3bd9ed1
 <!--
  * @Date: 2024-01-16 11:37:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-22 17:45:57
+ * @LastEditTime: 2024-01-24 10:44:23
  * @FilePath: /xysBooking/src/views/bookingList.vue
  * @Description: 文件描述
 -->
@@ -59,40 +59,49 @@ const go = useGo();
  * 9=已使用（明细里有一个码被使用），
  * 11=退款中（取消预约时先把状态打成11）
  */
+const CodeStatus = {
+  APPLY: '1',
+  PAYING: '2',
+  SUCCESS: '3',
+  CANCEL: '5',
+  CANCELED: '7',
+  USED: '9',
+  REFUNDING: '11'
+}
 const formatStatus = (status) => {
   switch (status) {
-    case '1':
+    case CodeStatus.APPLY:
       return {
         key: 'cancel',
         value: '待支付'
       }
-    case '2':
+    case CodeStatus.PAYING:
       return {
         key: 'success',
         value: '支付中'
       }
-    case '3':
+    case CodeStatus.SUCCESS:
       return {
         key: 'success',
         value: '预约成功'
       }
-    case '5':
+    case CodeStatus.CANCEL:
       return {
         key: 'cancel',
         value: '已取消'
       }
-    case '7':
+    case CodeStatus.CANCELED:
       return {
         key: 'cancel',
         value: '已取消'
       }
-    case '9':
+    case CodeStatus.USED:
       return {
         key: 'used',
         value: '已使用'
       }
-    case '11':
+    case CodeStatus.REFUNDING:
       return {
         key: 'cancel',
         value: '退款中'
@@ -100,22 +109,26 @@ const formatStatus = (status) => {
   }
 }
-const page = ref(1);
+const page = ref(1); // 页码默认为1
-const limit = ref(5);
+const limit = ref(5); // 每页默认显示5条
 const bookingList = ref([]);
 const loading = ref(false);
 const finished = ref(false);
 const finishedTextStatus = ref(false);
+const formatDatetime = (data) => { // 格式化日期
+  let begin_time = data.begin_time.slice(0, -3);
+  let end_time = data.end_time.slice(0, -3);
+  let str = begin_time + ' ' + end_time;
+  return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
+}
+
 onMounted(async () => {
   const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
   if (code) {
     //
     data.forEach(item => {
-      let begin_time = item.begin_time?.slice(0, -3);
+      item.booking_time = item && formatDatetime(item);
-      let end_time = item.end_time?.slice(0, -3);
-      let str = begin_time + ' ' + end_time;
-      item.booking_time = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
       item.order_time = item.created_time.slice(0, -3);
     });
     bookingList.value = data;
@@ -127,10 +140,7 @@ const onLoad = async () => {
   const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
   if (code) {
     data.forEach(item => {
-      let begin_time = item.begin_time?.slice(0, -3);
+      item.booking_time = item && formatDatetime(item);
-      let end_time = item.end_time?.slice(0, -3);
-      let str = begin_time + ' ' + end_time;
-      item.booking_time = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
       item.order_time = item.created_time.slice(0, -3);
     });
     bookingList.value = bookingList.value.concat(data);
--- a/src/views/submit.vue
View file @3bd9ed1
+++ b/src/views/submit.vue
View file @3bd9ed1
 <!--
  * @Date: 2024-01-15 16:25:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-19 18:57:26
+ * @LastEditTime: 2024-01-22 18:21:18
  * @FilePath: /xysBooking/src/views/submit.vue
  * @Description: 预约人员信息
 -->
@@ -124,7 +124,9 @@ const submitBtn = async () => {
       if (prepare_code) {
         const { code: callback_code, data: callback_data } = await payCallbackAPI({ pay_id: prepare_data.pay_id, pay_status: 1 });
         if (callback_code) {
+          // TODO：看需求，把跳转页换成等待页面
           go('/success', { pay_id: prepare_data.pay_id });
+          // go('/waiting', { pay_id: prepare_data.pay_id });
         }
       }
     }
--- a/src/views/success.vue
View file @3bd9ed1
+++ b/src/views/success.vue
View file @3bd9ed1
 <!--
  * @Date: 2024-01-15 18:28:25
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-19 17:27:20
+ * @LastEditTime: 2024-01-24 10:45:51
  * @FilePath: /xysBooking/src/views/success.vue
  * @Description: 预约成功提示页面
 -->
@@ -55,17 +55,22 @@ const goToDetail = () => {
 const billInfo = ref({});
+const formatDatetime = (data) => { // 格式化日期
+  let begin_time = data.begin_time.slice(0, -3);
+  let end_time = data.end_time.slice(0, -3);
+  let str = begin_time + ' ' + end_time;
+  return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
+}
+
 onMounted(async () => {
+  // 获取订单详情
   const { code, data } = await billInfoAPI({ pay_id: $route.query.pay_id });
   if (code) {
-    let begin_time = data.begin_time.slice(0, -3);
-    let end_time = data.end_time.slice(0, -3);
-    let str = begin_time + ' ' + end_time;
     //
-    data.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`
+    data.datetime = data && formatDatetime(data);
     billInfo.value = data;
     // TAG：支付翻状态
-    const { code: prepare_code, data: prepare_data } = await payPrepareAPI({ pay_id: $route.query.pay_id });
+    // const { code: prepare_code, data: prepare_data } = await payPrepareAPI({ pay_id: $route.query.pay_id });
   }
 })
 </script>