预约记录页面数据分页处理

 <!--
  * @Date: 2024-01-16 11:37:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-19 21:55:03
+ * @LastEditTime: 2024-01-22 17:45:57
  * @FilePath: /xysBooking/src/views/bookingList.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="booking-list-page">
-    <div @click="() => { go('/bookingDetail', { pay_id: item.pay_id }) }" v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
-      <div class="booking-list-item-header">
-        <div>{{ item.booking_time }}</div>
-        <div :class="[formatStatus(item.status)?.key, 'status']">{{ formatStatus(item.status)?.value }}</div>
-      </div>
-      <div class="booking-list-item-body">
-        <div class="booking-num">
-          <div class="num-body">预约人数：<span>{{ item.total_qty }} 人</span></div>
-          <div><van-icon name="arrow" /></div>
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      :finished-text="finishedTextStatus ? '没有更多了' : ''"
+      @load="onLoad"
+    >
+      <div @click="() => { go('/bookingDetail', { pay_id: item.pay_id }) }" v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
+        <div class="booking-list-item-header">
+          <div>{{ item.booking_time }}</div>
+          <div :class="[formatStatus(item.status)?.key, 'status']">{{ formatStatus(item.status)?.value }}</div>
+        </div>
+        <div class="booking-list-item-body">
+          <div class="booking-num">
+            <div class="num-body">预约人数：<span>{{ item.total_qty }} 人</span></div>
+            <div><van-icon name="arrow" /></div>
+          </div>
+          <div class="booking-price">支付金额：<span>¥ {{ item.total_amt }}</span></div>
+          <div class="booking-time">下单时间：<span>{{ item.order_time }}</span></div>
         </div>
-        <div class="booking-price">支付金额：<span>¥ {{ item.total_amt }}</span></div>
-        <div class="booking-time">下单时间：<span>{{ item.order_time }}</span></div>
       </div>
-    </div>
+    </van-list>
     <div v-if="!bookingList.length" 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>
@@ -43,8 +50,6 @@ useTitle($route.meta.title);
 
 const go = useGo();
 
-const bookingList = ref([]);
-
 /**
  * 1=待支付（下单就立即支付，所以理论上不存在待支付的数据），
  * 2=支付中（支付前先把状态打成2；支付回调后应立即变更状态，支付中的状态不会持续很久），
@@ -95,8 +100,15 @@ const formatStatus = (status) => {
   }
 }
 
+const page = ref(1);
+const limit = ref(5);
+const bookingList = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+const finishedTextStatus = ref(false);
+
 onMounted(async () => {
-  const { code, data } = await billListAPI();
+  const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
   if (code) {
     //
     data.forEach(item => {
@@ -108,7 +120,31 @@ onMounted(async () => {
     });
     bookingList.value = data;
   }
-})
+});
+
+const onLoad = async () => {
+  page.value++;
+  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);
+      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);
+    loading.value = false;
+    // 数据全部加载完成
+    if (!data.length) {
+      // 加载状态结束
+      finished.value = true;
+      if (!bookingList.value.length) {
+        finishedTextStatus.value = false;
+      }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>