二维码页面删除刷新按钮，底部名称分组显示

hookehuyr
Commit 2da22ff509cb9e65a9a34f1eaff44cc653bac809 2da22ff5 1 parent ac662b9e
Showing 1 changed file with 48 additions and 14 deletions
src/components/qrCode.vue
--- a/src/components/qrCode.vue
View file @2da22ff
+++ b/src/components/qrCode.vue
View file @2da22ff
 <!--
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-25 16:26:37
+ * @LastEditTime: 2024-01-25 18:43:51
  * @FilePath: /xysBooking/src/components/qrCode.vue
  * @Description: 预约码卡组件
 -->
@@ -13,7 +13,6 @@
           <div :class="[formatStatus(props.status).key, 'status']">{{ formatStatus(props.status).value }}</div>
         </div>
         <div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
-        <div style="color: red; margin-bottom: 0.5rem;">{{ userinfo.datetime }}</div>
         <div class="user-qrcode">
           <div class="left" @click="prevCode">
             <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%B7%A6@2x.png">
@@ -28,23 +27,28 @@
             <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png">
           </div>
         </div>
-        <div class="refresh" @click="refreshBtn">
+        <!-- <div class="refresh" @click="refreshBtn">
           <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%B7%E6%96%B0@2x.png">&nbsp;<div>刷新</div>
-        </div>
+        </div> -->
+        <div style="color: red; margin-top: 1rem;">{{ userinfo.datetime }}</div>
       </div>
       <div class="user-list">
         <div
           @click="selectUser(index)"
           v-for="(item, index) in userList"
           :key="index"
-          :class="['user-item', select_index === index ? 'checked' : '']">
+          :class="[
+            'user-item',
+            select_index === index ? 'checked' : '',
+            userList.length > 1 && item.sort ? 'border' : '',
+          ]">
           {{ item.name }}
         </div>
       </div>
     </div>
     <div v-else class="no-qrcode">
       <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
-      <div class="no-qrcode-title">您还没有预约过参观</div>
+      <div class="no-qrcode-title">您还没有预约过今天参观</div>
     </div>
   </div>
 </template>
@@ -143,12 +147,12 @@ const STATUS_CODE = {
   USED: '7'
 };
-const refreshBtn = async () => {
+// const refreshBtn = async () => {
-  const { code, data } = await qrcodeStatusAPI({ qr_code: userList.value[select_index.value].qr_code });
+//   const { code, data } = await qrcodeStatusAPI({ qr_code: userList.value[select_index.value].qr_code });
-  if (code) {
+//   if (code) {
-    useStatus.value = data.status;
+//     useStatus.value = data.status;
-  }
+//   }
-}
+// }
 const formatStatus = (status) => {
   switch (status) {
@@ -176,6 +180,20 @@ const selectUser = (index) => {
 const pay_id = $route.query.pay_id;
+const formatGroup = (data) => {
+  // 在每个相同 pay_id 组的最后一个数据项中添加字段
+  let lastPayId = null;
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].pay_id !== lastPayId) {
+      data[i].sort = 1;
+      lastPayId = data[i].pay_id;
+    } else {
+      data[i].sort = 0;
+    }
+  }
+  return data;
+}
+
 onMounted(async () => {
   if (!props.type) {
     const { code, data } = await qrcodeListAPI();
@@ -188,13 +206,16 @@ onMounted(async () => {
         let end_time = item.end_time.slice(0, -3);
         let str = begin_time + ' ' + end_time;
         //
-        item.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`
+        item.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
+        item.sort = 0;
       });
       const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: data[select_index.value]?.qr_code });
       if (status_code) {
         useStatus.value = status_data.status;
         // 剔除qr_code为空的二维码
         userList.value = data.filter(item => item.qr_code !== '');
+        // TAG: 预约码入口的才需要分组
+        userList.value = formatGroup(userList.value);
       }
     }
   } else {
@@ -203,6 +224,7 @@ onMounted(async () => {
       data.forEach(item => {
         // 生成二维码地址
         item.qr_code_url = 'http://oa.onwall.cn/admin?m=srv&a=get_qrcode&key=' + item.qr_code;
+        item.sort = 0;
       });
       const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: data[select_index.value]?.qr_code });
       if (status_code) {
@@ -217,7 +239,7 @@ onMounted(async () => {
 // 定义轮询函数
 const poll = async () => {
   // 二维码未使用不停轮询接口
-  if (userList.value.length && (useStatus.value !== STATUS_CODE.CANCELED || useStatus === STATUS_CODE.USED)) {
+  if (userList.value.length && useStatus.value === STATUS_CODE.SUCCESS) {
     const { code, data } = await qrcodeStatusAPI({ qr_code: userList.value[select_index.value].qr_code });
     if (code) {
       useStatus.value = data.status;
@@ -334,6 +356,7 @@ onUnmounted(() => {
     align-items: center;
     flex-wrap: wrap;
     .user-item {
+      position: relative;
       padding: 0.25rem 0.5rem;
       border: 1px solid #A67939;
       margin: 0.25rem;
@@ -343,6 +366,17 @@ onUnmounted(() => {
         color: #FFF;
         background-color: #A67939;
       }
+      &.border {
+        margin-right: 0.5rem;
+        &::after {
+          position: absolute;
+          right: -0.5rem;
+          top: calc(50% - 0.5rem);
+          content: '';
+          height: 1rem;
+          border-right: 1px solid #A67939;
+        }
+      }
     }
   }