update: 订单列表

src/components/allCustomers/order-list/order-table.vue

@@ -28,6 +28,14 @@
       <el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
       <el-table-column label="收货/导购信息" min-width="244px"></el-table-column>
     </el-table>
+    <el-table v-if="tableData.length == 0" :show-header="false">
+      <el-table-column label="商品信息" min-width="350px"></el-table-column>
+      <el-table-column label="吊牌价/应收(元)" min-width="130px"></el-table-column>
+      <el-table-column label="数量" min-width="70px"></el-table-column>
+      <el-table-column label="小计金额(元)" min-width="120px"></el-table-column>
+      <el-table-column label="订单金额(元)" min-width="210px"></el-table-column>
+      <el-table-column label="收货/导购信息" min-width="244px"></el-table-column>
+    </el-table>
     <div class="order-list" v-for="el in tableData" :key="el">
       <div class="order-info-box">
         <div class="order-info">
@@ -57,7 +65,7 @@
           <div class="store-name">{{ el.storeName }}</div>
         </div>
       </div>
-      <el-table :data="el.orderItems" :show-header="false" :span-method="spanMethod" class="order-detail">
+      <el-table :data="el.orderItems" :show-header="false" :span-method="({ rowIndex, columnIndex }) => spanMethod(el, rowIndex, columnIndex)" class="order-detail">
         <el-table-column label="商品信息" min-width="350px" show-overflow-tooltip>
           <div class="goods-info-box" slot-scope="{ row }">
             <div class="goods-logo">
@@ -69,7 +77,7 @@
             <div class="goods-info">
               <p class="goods-name">{{ row.productName }}</p>
               <p class="goods-num">{{ row.productCode }}</p>
-              <p class="goods-sku">{{ row.skuValue }}</p>
+              <p class="goods-sku">{{ getSKU(row.skuValue) }}</p>
             </div>
           </div>
         </el-table-column>
@@ -162,6 +170,7 @@
       </el-table>
     </div>
     <el-pagination
+      v-if="params.total > 0"
       :page-sizes="[20, 40, 60, 80]"
       :total="params.total"
       :page-size="params.pageSize"
@@ -195,7 +204,7 @@ export default {
         // endTime: '', // 2022-01-01 结束时间
         orderNumber: '', // 单号
         dateRange: [],
-        total: 105
+        total: 0
       },
       tableData: [
         // {
@@ -250,10 +259,10 @@ export default {
     this.getTableData();
   },
   methods: {
-    spanMethod({ rowIndex, columnIndex }) {
+    spanMethod(data, rowIndex, columnIndex) {
       if (columnIndex == 4 || columnIndex == 5) {
         if (rowIndex == 0) {
-          return [this.tableData.length, 1];
+          return [data.orderItems.length, 1];
         } else {
           return [0, 0];
         }
@@ -267,6 +276,11 @@ export default {
       const typeList = { 3: '门店', 8: '天猫', 9: '微盟', 11: '抖音' };
       return typeList[type];
     },
+    getSKU(data) {
+      if (typeof data != 'string') return '';
+      const sku = JSON.parse(data);
+      return sku.map(el => el.value).join('；')
+    },
     getTableData() {
       const { memberId, pageSize, currentPage, orderType, channelType, dateRange, orderNumber } = this.params;
       const params = { memberId, pageSize, currentPage, orderType, channelType, orderNumber };
@@ -275,9 +289,12 @@ export default {
         params.endTime = dateRange[1];
       }
       doFetch(url.getOrderList, params).then(res => {
-        const { result } = res.data;
-        this.tableData = result.result;
-        this.params.total = result.total;
+        let { page } = res.data.result || {};
+        if (Object.prototype.toString.call(page) != '[object Object]') {
+          page = {};
+        }
+        this.tableData = page.result;
+        this.params.total = page.totalCount;
       });
     },
     onSearch() {