fix: 积分订单样式改造

src/views/modules/marketing/points-order/index.vue

@@ -28,92 +28,166 @@
           placeholder="商品名称"
         ></el-input>
       </el-form-item>
-      <!-- <el-form-item label="预售时间"> -->
-      <!--   <el-date-picker -->
-      <!--     @change="changeValueOne" -->
-      <!--     value-format="yyyy-MM-dd HH:mm:ss" -->
-      <!--     v-model="valueOne" -->
-      <!--     type="datetimerange" -->
-      <!--     start-placeholder="开始日期" -->
-      <!--     end-placeholder="结束日期" -->
-      <!--   > -->
-      <!--   </el-date-picker> -->
-      <!-- </el-form-item> -->
+      <el-form-item label="订单状态">
+        <el-select
+          v-model="formInline.orderStatus"
+          placeholder="请选择订单状态"
+          clearable
+          style="width: 150px"
+        >
+          <el-option label="待备货" value="1"></el-option>
+          <el-option label="待取货" value="2"></el-option>
+          <el-option label="待收货" value="3"></el-option>
+          <el-option label="已完成" value="4"></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary" @click="Reset">重置</el-button>
-        <el-button
-          type="success"
-          @click="
-            $router.push({ name: 'operation-management-total-order/index' })
-          "
-          >菜市场总订单</el-button
-        >
       </el-form-item>
     </el-form>
-    <el-tabs v-model="formInline.group" @tab-click="handleClick">
+    <!-- <el-tabs v-model="formInline.group" @tab-click="handleClick">
       <el-tab-pane
         v-for="item in statusList"
         :key="item.value"
         :label="item.label"
         :name="item.value"
       ></el-tab-pane>
-    </el-tabs>
+    </el-tabs> -->
     <el-table :data="tableData" height="70vh" border style="width: 100%">
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <div style="padding-left: 20px" m="4">
-            <el-table :data="props.row.productOrders" :border="true">
-              <el-table-column type="index" width="50" label="序号">
-              </el-table-column>
-              <el-table-column label="商品订单号" prop="productOrderNo" />
-              <el-table-column label="商品名称" prop="productName" />
-              <el-table-column label="商品原价" prop="originPrice" />
-              <el-table-column label="商品终价" prop="finalPrice" />
-              <el-table-column label="商品订单金额" prop="productOrderMoney" />
-              <el-table-column label="商品数量" prop="productCount" />
-              <el-table-column label="商品单价" prop="productFinalPrice" />
-              <el-table-column label="商品图片" prop="productImg">
-                <template slot-scope="scope">
-                  <el-image
-                    style="width: 60px; height: 60px"
-                    :src="scope.row.productImg"
-                    :preview-src-list="[scope.row.productImg]"
-                  >
-                  </el-image>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
+      <el-table-column
+        label="商品单号"
+        prop="productOrderNo"
+        width="150"
+        align="center"
+      />
+      <el-table-column
+        label="结算单位订单号"
+        prop="unitOrderNo"
+        width="150"
+        align="center"
+      />
+      <el-table-column
+        label="总订单号"
+        prop="totalOrderNo"
+        width="120"
+        align="center"
+      />
+      <el-table-column
+        label="总商品数量"
+        prop="productCount"
+        width="100"
+        align="center"
+      />
+      <el-table-column
+        label="商品原价"
+        prop="originPrice"
+        width="100"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.originPrice || "0.00" }}
         </template>
       </el-table-column>
-      <el-table-column label="总订单号" prop="orderNo" />
-      <el-table-column label="结算单位订单号" prop="unitOrderNo" />
-      <el-table-column label="总商品数量" prop="productCount" />
-      <el-table-column label="订单状态" prop="preSaleStage">
+      <el-table-column
+        label="商品终价"
+        prop="finalPrice"
+        width="100"
+        align="center"
+      >
         <template slot-scope="scope">
-          {{
-            scope.row.preSaleStage === 1
-              ? '已付定金'
-              : scope.row.preSaleStage === 2
-              ? '已付尾款'
-              : '待付定金'
-          }}
+          ¥{{ scope.row.finalPrice || "0.00" }}
         </template>
       </el-table-column>
-      <el-table-column label="顾客实际支付" prop="totalPayMoney" />
-      <el-table-column label="商品总价" prop="productMoney" />
-      <el-table-column label="配送费" prop="deliveryMoney" />
-      <el-table-column label="优惠券减免" prop="couponMoney" />
-      <el-table-column label="支付时间" prop="payTime" />
-      <el-table-column label="预计送达时间" prop="predictDeliveryTime" />
-      <el-table-column label="预计收入" prop="predictIncome" />
-      <el-table-column label="距离" prop="distance" />
-      <el-table-column label="备注" prop="remark" />
-      <el-table-column fixed="right" width="100px" label="操作" align="center">
+      <el-table-column
+        label="商品数量"
+        prop="productQuantity"
+        width="100"
+        align="center"
+      />
+
+      <el-table-column
+        label="消耗积分"
+        prop="pointsUsed"
+        width="100"
+        align="center"
+      />
+      <el-table-column
+        label="订单状态"
+        prop="orderStatus"
+        width="100"
+        align="center"
+      >
         <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="view(scope.row)">
-            查看
+          <el-tag :type="getStatusTagType(scope.row.orderStatus)">
+            {{ getStatusText(scope.row.orderStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="顾客实际支付"
+        prop="totalPayMoney"
+        width="120"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.totalPayMoney || "0.00" }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="商品总价"
+        prop="productMoney"
+        width="100"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.productMoney || "0.00" }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="配送费"
+        prop="deliveryMoney"
+        width="80"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.deliveryMoney || "0.00" }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="优惠券减免"
+        prop="couponMoney"
+        width="100"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.couponMoney || "0.00" }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="支付时间"
+        prop="payTime"
+        width="150"
+        align="center"
+      />
+      <el-table-column
+        label="预计收入"
+        prop="predictIncome"
+        width="100"
+        align="center"
+      >
+        <template slot-scope="scope">
+          ¥{{ scope.row.predictIncome || "0.00" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="关联总订单链接" width="120" align="center">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="viewTotalOrder(scope.row)"
+          >
+            查看总订单
           </el-button>
         </template>
       </el-table-column>
@@ -137,69 +211,71 @@
 </template>
 
 <script>
-import viewDetails from './popup/view-details.vue'
-import { mapState } from 'vuex'
+import viewDetails from "./popup/view-details.vue";
+import { mapState } from "vuex";
 export default {
   components: { viewDetails },
   data() {
     return {
       valueOne: [],
       formInline: {
-        group: '',
-        shopId: '',
+        group: "",
+        shopId: "",
         pageNumber: 1,
         pageSize: 10,
-        productName: '',
-        startTime: '',
-        endTime: ''
+        productName: "",
+        orderStatus: "",
+        startTime: "",
+        endTime: ""
       },
       statusList: [
         {
-          label: '全部订单',
-          value: '0'
+          label: "全部订单",
+          value: "0"
         },
         {
-          label: '待备货',
-          value: '1'
+          label: "待备货",
+          value: "1"
         },
         {
-          label: '待取货',
-          value: '2'
+          label: "待取货",
+          value: "2"
         },
         {
-          label: '待收货',
-          value: '3'
+          label: "待收货",
+          value: "3"
         },
         {
-          label: '已完成',
-          value: '4'
+          label: "已完成",
+          value: "4"
         }
       ],
       tableData: [],
       total: 0
-    }
+    };
   },
   created() {
     this.formInline = {
-      group: '0',
+      group: "0",
       // marketId: this.marketId,
       shopId: this.shopId,
-      productName: '',
-      startTime: '',
-      endTime: ''
-    }
-    this.valueOne = []
-    this.getList()
+      productName: "",
+      orderStatus: "",
+      startTime: "",
+      endTime: ""
+    };
+    this.valueOne = [];
+    this.getList();
   },
   methods: {
     changeValueOne(e) {
-      console.log(e)
+      console.log(e);
       if (e) {
-        this.formInline.startTime = e[0]
-        this.formInline.endTime = e[1]
+        this.formInline.startTime = e[0];
+        this.formInline.endTime = e[1];
       } else {
-        this.formInline.startTime = ''
-        this.formInline.endTime = ''
+        this.formInline.startTime = "";
+        this.formInline.endTime = "";
       }
     },
     getList() {
@@ -210,48 +286,75 @@ export default {
           orderCategory: 2
         })
         .then(res => {
-          console.log(res)
-          this.tableData = res.data.data.data
-          this.total = Number(res.data.data.total)
-        })
+          console.log(res);
+          this.tableData = res.data.data.data;
+          this.total = Number(res.data.data.total);
+        });
     },
     Reset() {
       this.formInline = {
-        group: '0',
+        group: "0",
         shopId: this.shopId,
-        productName: '',
-        startTime: '',
-        endTime: ''
-      }
-      this.valueOne = []
-      this.getList()
+        productName: "",
+        orderStatus: "",
+        startTime: "",
+        endTime: ""
+      };
+      this.valueOne = [];
+      this.getList();
     },
     handleClick(e) {
-      this.advanceSellStatus = e.name
-      this.getList()
+      this.advanceSellStatus = e.name;
+      this.getList();
     },
     view(row) {
-      this.$refs.viewDetails.toggle(row).update()
+      this.$refs.viewDetails.toggle(row).update();
+    },
+    viewOrderDetail(row) {
+      // 查看订单明细的逻辑
+      this.$message.info("查看订单明细功能待实现");
+    },
+    viewTotalOrder(row) {
+      // 查看总订单的逻辑
+      this.$message.info("查看总订单功能待实现");
+    },
+    getStatusText(status) {
+      const statusMap = {
+        1: "待备货",
+        2: "待取货",
+        3: "待收货",
+        4: "已完成"
+      };
+      return statusMap[status] || "未知状态";
+    },
+    getStatusTagType(status) {
+      const typeMap = {
+        1: "warning",
+        2: "primary",
+        3: "info",
+        4: "success"
+      };
+      return typeMap[status] || "";
     },
     handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getList()
+      this.formInline.pageSize = val;
+      this.getList();
     },
     handleCurrentChange(val) {
-      this.formInline.pageNumber = val
-      this.getList()
+      this.formInline.pageNumber = val;
+      this.getList();
     }
   },
   computed: {
-    ...mapState('userData', [
-      'isMerchant',
-      'marketList',
-      'storeList',
-      'marketId',
-      'shopId'
+    ...mapState("userData", [
+      "isMerchant",
+      "marketList",
+      "storeList",
+      "marketId",
+      "shopId"
     ])
   }
-}
+};
 </script>
 
 <style lang="scss" scoped></style>