优化预约记录列表和二维码的显示

hookehuyr
Commit 08c1a57bf9c1e67eda552e5ab2db1589da7774d6 08c1a57b 1 parent fe181c6e
Showing 3 changed files with 37 additions and 14 deletions
.env.development
src/components/qrCode.vue
src/components/reserveCard.vue
--- a/.env.development
View file @08c1a57
+++ b/.env.development
View file @08c1a57
@@ -2,10 +2,11 @@
 VITE_BASE = /
 # 测试open-id
-VITE_OPENID = api-test-openid
+# VITE_OPENID = api-test-openid
 # VITE_OPENID = o8BRf1gLDWieH3Y3JvbrI_4IjaME
 # VITE_OPENID = oJLZq5t9PIKLW9tm1oSUNAuPwssA
 # VITE_OPENID = oJLZq5uT_6GwIh2tQWh1F9IoHZ3U
+VITE_OPENID = o5CsxuF5AfUirRn4VUwaCSNZrUoM
 # VITE_OPENID =
 # B端账号
@@ -15,8 +16,8 @@ VITE_ID = 13761653761
 VITE_PIN =
 # 反向代理服务器地址
-VITE_PROXY_TARGET = https://oa-dev.onwall.cn
+# VITE_PROXY_TARGET = https://oa-dev.onwall.cn
-# VITE_PROXY_TARGET = http://oa.onwall.cn
+VITE_PROXY_TARGET = http://oa.onwall.cn
 # PC端地址
 VITE_MOBILE_URL = http://localhost:5173/
--- a/src/components/qrCode.vue
View file @08c1a57
+++ b/src/components/qrCode.vue
View file @08c1a57
 <!--
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-24 17:44:15
+ * @LastEditTime: 2024-01-25 16:10:17
  * @FilePath: /xysBooking/src/components/qrCode.vue
- * @Description: 文件描述
+ * @Description: 预约码卡组件
 -->
 <template>
   <div class="qr-code-page">
@@ -20,7 +20,9 @@
           </div>
           <div class="center">
             <img :src="userList[select_index].qr_code_url ">
-            <div v-if="useStatus === '7'" class="qrcode-used"><p>二维码{{ qr_code_status[useStatus] }}</p></div>
+            <div v-if="useStatus === STATUS_CODE.CANCELED || useStatus === STATUS_CODE.USED" class="qrcode-used">
+              <p>二维码{{ qr_code_status[useStatus] }}</p>
+            </div>
           </div>
           <div class="right" @click="nextCode">
             <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png">
@@ -134,6 +136,13 @@ const qr_code_status = {
   '7': '已使用'
 };
+const STATUS_CODE = {
+  APPLY: '1',
+  SUCCESS: '3',
+  CANCELED: '5',
+  USED: '7'
+};
+
 const refreshBtn = async () => {
   const { code, data } = await qrcodeStatusAPI({ qr_code: userList.value[select_index.value].qr_code });
   if (code) {
@@ -200,7 +209,7 @@ onMounted(async () => {
 // 定义轮询函数
 const poll = async () => {
   // 二维码未使用不停轮询接口
-  if (userList.value.length && useStatus.value !== '7') {
+  if (userList.value.length && (useStatus.value !== STATUS_CODE.CANCELED || useStatus === STATUS_CODE.USED)) {
     const { code, data } = await qrcodeStatusAPI({ qr_code: userList.value[select_index.value].qr_code });
     if (code) {
       useStatus.value = data.status;
--- a/src/components/reserveCard.vue
View file @08c1a57
+++ b/src/components/reserveCard.vue
View file @08c1a57
 <!--
  * @Date: 2024-01-24 16:38:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-25 15:13:04
+ * @LastEditTime: 2024-01-25 16:08:56
  * @FilePath: /xysBooking/src/components/reserveCard.vue
- * @Description: 文件描述
+ * @Description: 预约记录卡组件
 -->
 <template>
   <div class="booking-list-item" @click="goToDetail(props.data)">
@@ -13,7 +13,7 @@
     </div>
     <div class="booking-list-item-body">
       <div class="booking-num">
-        <div class="num-body">预约人数：<span>{{ props.data.total_qty }} 人</span></div>
+        <div class="num-body van-ellipsis">预约人数：<span>{{ props.data.total_qty }} 人</span>&nbsp;<span>({{ props.data.person_name }})</span></div>
         <div v-if="(props.data.status === CodeStatus.SUCCESS || props.data.status === CodeStatus.USED || props.data.status === CodeStatus.CANCEL)">
           <van-icon name="arrow" />
         </div>
@@ -22,15 +22,13 @@
       <div class="booking-time">下单时间：<span>{{ props.data.order_time }}</span></div>
     </div>
     <div class="booking-list-item-footer">
-      <div style="display: flex; justify-content: space-between; padding: 0 1rem 1rem 1rem; align-items: center;">
+      <div v-if="pay_show" class="pay-time">
-        <div v-if="pay_show" style="font-size: 0.85rem; color: red;">
         <span>支付剩余时间&nbsp;</span>
         <span>{{ formatTime(remain_time) }}</span>
       </div>
       <div v-if="showBtn">
         <van-button v-if="pay_show" @click="payOrder()" type="primary" color="#A67939" size="small">重新支付</van-button>
-          <div v-if="delay_pay_show" style="font-size: 23rpx; color: red; font-size: 0.85rem;">支付超时，请重新下单！</div>
+        <div v-if="delay_pay_show" class="delay-pay">支付超时，请重新下单！</div>
-        </div>
       </div>
     </div>
   </div>
@@ -251,6 +249,21 @@ const payOrder = () => {
         }
       }
     }
+    .booking-list-item-footer {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 1rem 1rem 1rem;
+      align-items: center;
+      .pay-time {
+        font-size: 0.85rem;
+        color: red;
+      }
+      .delay-pay {
+        font-size: 23rpx;
+        color: red;
+        font-size: 0.85rem;
+      }
+    }
   }