feat: 完成物流列表

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

@@ -11,27 +11,29 @@
     <div class="home-logisitcs-label">我的物流</div>
     <!-- 无物流信息 -->
     <div
-      v-if="loadFinish && total === 0"
+      v-if="loadFinish && list.length === 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 v-infinite-scroll="handleListload" class="home-logisitcs-content">
+      <div class="home-logisitcs-content">
         <div
           v-for="item in list"
-          :key="item.orderNo"
+          :key="item.orderId"
           class="home-logisitcs-content__item flex flex-middle flex-between"
         >
           <div class="logisitcs-content-item__info flex flex-start">
-            <img :src="item.img" />
+            <img :src="item.cover" />
             <div class="content-item-info__wrap flex-1">
               <p class="item-info-wrap__title">
-                {{ item.title }}
+                {{ item.logisticsContext }}
               </p>
               <div class="item-info-wrap__orderNo">
-                <span>{{ `${item.companyName}: ${item.orderNo}` }}</span>
+                <span>{{
+                  `${item.logistics.companyName}: ${item.logistics.trackingNo}`
+                }}</span>
                 <span class="item-info-wrap__orderNo--light">查看详情</span>
               </div>
             </div>
@@ -39,7 +41,7 @@
           <UiButton
             type="yellow_line"
             :radius="true"
-            @click="onOrderEnsure(item)"
+            @click="onOrderConfirm(item)"
             >确认收货</UiButton
           >
         </div>
@@ -47,27 +49,26 @@
     </div>
     <UiConfirm
       title="确认收到货了吗？"
-      :visible.sync="ensureOrderVisible"
+      :visible.sync="confirmOrderVisible"
       @confirm="handleOrderEnsure"
     />
   </div>
 </template>
 <script>
+import { Message } from "element-ui";
 import UiButton from "@/components/UiButton.vue";
 import UiConfirm from "@/components/UiConfirm.vue";
-import { ApiGetOrderLogisticsList } from "@/plugins/api/order";
+import {
+  ApiGetOrderLogisticsList,
+  ApiPutOrderReceive,
+} from "@/plugins/api/order";
 
 export default {
   components: { UiButton, UiConfirm },
   data() {
     return {
-      total: 0,
-      query: {
-        pageIndex: 1,
-        length: 10,
-      },
       selectOrderId: 0,
-      ensureOrderVisible: false,
+      confirmOrderVisible: false,
       list: [],
       loading: false,
       loadFinish: false,
@@ -80,31 +81,36 @@ export default {
     // 获取待收货物流信息
     async getLogisticsList() {
       this.loading = true;
-      const { result } = await ApiGetOrderLogisticsList({ ...this.query });
+      const { result } = await ApiGetOrderLogisticsList();
       this.loading = false;
       this.loadFinish = true;
       if (result) {
-        const { total, list } = result;
-        this.total = total;
-        if (list && list.length > 0) {
-          this.list = this.list.concat(list);
-        }
+        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, // 物流详细信息
+          };
+        });
       }
     },
-    onOrderEnsure({ orderNo }) {
-      this.selectOrderId = orderNo;
-      this.ensureOrderVisible = true;
+    onOrderConfirm({ orderId }) {
+      this.selectOrderId = orderId;
+      this.confirmOrderVisible = true;
     },
 
     // 确认收货
-    handleOrderEnsure() {},
-
-    // 上拉加载
-    handleListload() {
-      console.log("enter");
-      if (this.total > 0 && this.list.length < this.total) {
-        // 执行接口请求
-        this.query.pageIndex += 1;
+    async handleOrderEnsure() {
+      const { result } = await ApiPutOrderReceive({
+        orderId: this.selectOrderId,
+      });
+      this.confirmOrderVisible = false;
+      if (result) {
+        Message.success("收货成功");
         this.getLogisticsList();
       }
     },
@@ -164,6 +170,7 @@ export default {
             font-size: 14px;
             color: #666666;
             margin-bottom: 8px;
+            @include ellipses(2);
           }
           .item-info-wrap__orderNo {
             display: inline-block;

plugins/api/order.js

@@ -68,15 +68,15 @@ export const  ApiGetOrderLogistics = ({orderId}) =>
  * 获取物流列表
  * @param {*} params
  */
-export const  ApiGetOrderLogisticsList = (params) =>
-	ToAsyncAwait(axiosTk.get('http://yapi.smart-xwork.cn/mock/148902/logisitcs/list'), { params });	
+export const ApiGetOrderLogisticsList = () =>
+  ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/tradeOrder/listReceiveOrder`));
 
 /**
  * 确认收货
  * @param {*} orderId 
  */
-export const  ApiPutOrderReceive = (params) =>
-	ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/tradeOrder/receive`, params));	
+export const ApiPutOrderReceive = (data) =>
+  ToAsyncAwait(axiosTk.put(`${BASE_URL}/app/tradeOrder/receive`, data));	
 /**
  * 提交订单
  * @param {*} data