修复数据刷新后数据没有渲染问题

hookehuyr
Commit bfaf57a40cee3c722e13beac71f7c1eb002dc004 bfaf57a4 1 parent d499de63
Showing 1 changed file with 55 additions and 42 deletions
src/components/reserveCard.vue
--- a/src/components/reserveCard.vue
View file @bfaf57a
+++ b/src/components/reserveCard.vue
View file @bfaf57a
 <!--
  * @Date: 2024-01-24 16:38:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-25 16:08:56
+ * @LastEditTime: 2024-01-27 11:42:42
  * @FilePath: /xysBooking/src/components/reserveCard.vue
  * @Description: 预约记录卡组件
 -->
 <template>
-  <div class="booking-list-item" @click="goToDetail(props.data)">
+  <div class="booking-list-item" @click="goToDetail(reserve_info)">
     <div class="booking-list-item-header">
-      <div>{{ props.data.booking_time }}</div>
+      <div>{{ reserve_info.booking_time }}</div>
-      <div :class="[formatStatus(props.data.status)?.key, 'status']">{{ formatStatus(props.data.status)?.value }}</div>
+      <div :class="[formatStatus(reserve_info.status)?.key, 'status']">{{ formatStatus(reserve_info.status)?.value }}</div>
     </div>
     <div class="booking-list-item-body">
       <div class="booking-num">
-        <div class="num-body van-ellipsis">预约人数：<span>{{ props.data.total_qty }} 人</span>&nbsp;<span>({{ props.data.person_name }})</span></div>
+        <div class="num-body van-ellipsis">预约人数：<span>{{ reserve_info.total_qty }} 人</span>&nbsp;<span>({{ reserve_info.person_name }})</span></div>
-        <div v-if="(props.data.status === CodeStatus.SUCCESS || props.data.status === CodeStatus.USED || props.data.status === CodeStatus.CANCEL)">
+        <div v-if="(reserve_info.status === CodeStatus.SUCCESS || reserve_info.status === CodeStatus.USED || reserve_info.status === CodeStatus.CANCEL)">
           <van-icon name="arrow" />
         </div>
       </div>
-      <div class="booking-price">支付金额：<span>¥ {{ props.data.total_amt }}</span></div>
+      <div class="booking-price">支付金额：<span>¥ {{ reserve_info.total_amt }}</span></div>
-      <div class="booking-time">下单时间：<span>{{ props.data.order_time }}</span></div>
+      <div class="booking-time">下单时间：<span>{{ reserve_info.order_time }}</span></div>
     </div>
     <div class="booking-list-item-footer">
       <div v-if="pay_show" class="pay-time">
         <span>支付剩余时间&nbsp;</span>
         <span>{{ formatTime(remain_time) }}</span>
       </div>
-      <div v-if="showBtn">
+      <div v-if="showPayControl">
         <van-button v-if="pay_show" @click="payOrder()" type="primary" color="#A67939" size="small">重新支付</van-button>
         <div v-if="delay_pay_show" class="delay-pay">支付超时，请重新下单！</div>
       </div>
@@ -114,13 +114,6 @@ const formatStatus = (status) => {
   }
 }
-
-const goToDetail = (item) => {
-  if (item.status === CodeStatus.SUCCESS || item.status === CodeStatus.USED || item.status === CodeStatus.CANCEL) {
-    go('/bookingDetail', { pay_id: item.pay_id })
-  }
-}
-
 /**
  * 格式化时间
  * @param {*} seconds
@@ -137,24 +130,15 @@ function formatTime(seconds) {
   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
 }
-// 显示操作按钮的条件判断
+let timeId = null;
-const showBtn = computed(() => {
-  return props.data.status === CodeStatus.APPLY;
-});
-
 const remain_time = ref(0); // 剩余时间秒数
-
+const reserve_info = ref({
-// 控制待支付状态下的显示
+  booking_time: '',
-const pay_show = computed(() => {
+  status: '',
-  let flag = false;
+  total_qty: '',
-  if (props.data.status === CodeStatus.APPLY && remain_time.value) {
+  total_amt: '',
-    // 倒计时进行时
+  order_time: '',
-    flag = true;
+  rest_second: 0,
-  } else if (props.data.status === CodeStatus.APPLY && !remain_time.value) {
-    // 倒计时结束
-    flag = false;
-  }
-  return flag;
 });
 watch(
@@ -162,6 +146,13 @@ watch(
   (val) => {
     if (val) {
       remain_time.value = val.rest_second > 0 ? val.rest_second : 0;
+      reserve_info.value.booking_time = val.booking_time;
+      reserve_info.value.rest_second = val.rest_second;
+      reserve_info.value.status = val.status;
+      reserve_info.value.person_name = val.person_name;
+      reserve_info.value.total_qty = val.total_qty;
+      reserve_info.value.total_amt = val.total_amt;
+      reserve_info.value.order_time = val.order_time;
     }
   },
   {
@@ -170,15 +161,7 @@ watch(
   }
 );
-// 支付超时显示
-const delay_pay_show = computed(() => {
-  return props.data.status === CodeStatus.APPLY && !remain_time.value;
-});
-
-let timeId = null;
-
 onMounted(() => {
-  remain_time.value = props.data.rest_second > 0 ? props.data.rest_second : 0;
   // 进入页面后，开始倒计时
   timeId = setInterval(() => {
     remain_time.value ? (remain_time.value -= 1) : 0;
@@ -188,8 +171,38 @@ onMounted(() => {
   });
 });
+const goToDetail = (item) => {
+  if (item.status === CodeStatus.SUCCESS || item.status === CodeStatus.USED || item.status === CodeStatus.CANCEL) {
+    go('/bookingDetail', { pay_id: item.pay_id })
+  }
+}
+
+// 显示操作按钮
+const showPayControl = computed(() => {
+  return reserve_info.value.status === CodeStatus.APPLY;
+});
+
+// 支付超时显示
+const delay_pay_show = computed(() => {
+  return showPayControl.value && !remain_time.value;
+});
+
+// 控制待支付状态下的显示
+const pay_show = computed(() => {
+  let flag = false;
+  if (showPayControl.value) {
+    if (remain_time.value) { // 倒计时进行时
+      flag = true;
+    } else if (!remain_time.value) { // 倒计时结束
+      flag = false;
+    }
+  }
+
+  return flag;
+});
+
 const payOrder = () => {
-  const pay_url = `/srv/?f=reserve&a=icbc_pay&pay_id=${props.data.pay_id}`;
+  const pay_url = `/srv/?f=reserve&a=icbc_pay&pay_id=${reserve_info.value.pay_id}`;
   location.href = pay_url; // 跳转支付页面
 }
 </script>