feat: 物流列表添加分页

components/UiButton.vue

@@ -10,7 +10,7 @@
  disabled 是否禁用 true false
 -->
 <template>
-	<button :class="`ui-button ${myClass}`" @click="click">
+	<button :class="`ui-button ${myClass}`" @click.stop="click">
 		<slot></slot>
 	</button>
 </template>

components/UiConfirm.vue

@@ -45,7 +45,7 @@ export default {
   methods: {
     onConfirm() {
       this.$emit("confirm");
-      this.visible = false;
+      this.dialogVisible = false;
     },
   },
 };

pages/account/index/home/module/LogisitcsInfo.vue

@@ -11,17 +11,18 @@
     <div class="home-logisitcs-label">我的物流</div>
     <!-- 无物流信息 -->
     <div
-      v-if="loadFinish && list.length === 0"
+      v-if="loadFinish && total === 0"
       class="home-logisitcs-empty flex flex-center flex-middle"
     >
       <img src="~/assets/img/account/home/logisitcs-empty.png" />
     </div>
     <!-- 有物流信息 -->
     <div v-else v-loading="loading">
-      <div class="home-logisitcs-content">
+      <div v-infinite-scroll="handleListload" class="home-logisitcs-content">
         <div
           v-for="item in list"
           :key="item.orderId"
+          @click="onJumpOrderDetail(item.orderId)"
           class="home-logisitcs-content__item flex flex-middle flex-between"
         >
           <div class="logisitcs-content-item__info flex flex-start">
@@ -68,6 +69,11 @@ export default {
   data() {
     return {
       selectOrderId: 0,
+      query: {
+        pageIndex: 1,
+        length: 15,
+      },
+      total: 0,
       confirmOrderVisible: false,
       list: [],
       loading: false,
@@ -81,27 +87,43 @@ export default {
     // 获取待收货物流信息
     async getLogisticsList() {
       this.loading = true;
-      const { result } = await ApiGetOrderLogisticsList();
+      const { result } = await ApiGetOrderLogisticsList({ ...this.query });
       this.loading = false;
       this.loadFinish = true;
       if (result) {
-        this.list = result.map((item) => {
-          const goods = item.products || [{ productImageUrl: "" }];
-          const logisticsList = item.logistics.logisticsDataList || [
-            { context: "暂无物流信息" },
-          ];
-          return {
-            ...item,
-            cover: goods[0].productImageUrl, // 订单封面
-            logisticsContext: logisticsList[0].context, // 物流详细信息
-          };
-        });
+        const { total, records } = result;
+        this.total = total;
+        if (records && records.length > 0) {
+          const formatRecords = records.map((item) => {
+            const goods = item.products || [{ productImageUrl: "" }];
+            const logisticsList = item.logistics.logisticsDataList || [
+              { context: "暂无物流信息" },
+            ];
+            return {
+              ...item,
+              cover: goods[0].productImageUrl, // 订单封面
+              logisticsContext: logisticsList[0].context, // 物流详细信息
+            };
+          });
+          this.list = this.list.concat(formatRecords);
+        }
       }
     },
     onOrderConfirm({ orderId }) {
       this.selectOrderId = orderId;
       this.confirmOrderVisible = true;
     },
+    // 上拉加载
+    handleListload() {
+      if (this.total > 0 && this.list.length < this.total) {
+        // 执行接口请求
+        this.query.pageIndex += 1;
+        this.getLogisticsList();
+      }
+    },
+    onJumpOrderDetail(id) {
+      this.$router.push(`/account/order/detail?id=${id}`);
+    },
 
     // 确认收货
     async handleOrderEnsure() {
@@ -110,7 +132,9 @@ export default {
       });
       this.confirmOrderVisible = false;
       if (result) {
-        Message.success("收货成功");
+        Message.success("确认收货成功");
+        this.list = [];
+        this.query.pageIndex = 1;
         this.getLogisticsList();
       }
     },
@@ -154,6 +178,7 @@ export default {
     }
     .home-logisitcs-content__item {
       margin-bottom: 30px;
+      cursor: pointer;
       &:last-child {
         margin-bottom: 0;
       }

plugins/api/order.js

@@ -68,8 +68,8 @@ export const  ApiGetOrderLogistics = ({orderId}) =>
  * 获取物流列表
  * @param {*} params
  */
-export const ApiGetOrderLogisticsList = () =>
-  ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/listReceiveOrder`));
+export const ApiGetOrderLogisticsList = (params) =>
+  ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/listReceiveOrder`, { params }));
 
 /**
  * 确认收货