订单列表

src/views/commodityManage/orderList.vue

@@ -2,21 +2,23 @@
   <div class="app-container">
     <div v-show="!commodityManageFormState.show">
       <div class="status-filter" style="display: flex; justify-content: space-between">
-        <div>
-          <button
-            v-for="item in filterItems"
-            :key="item.value"
-            class="filter-btn"
-            :class="{ active: activeFilter === item.value }"
-            @click="handleFilterChange(item.value)"
-            style="margin-right: 10px"
-          >
-            {{ item.label }} ({{ item.sum }})
-          </button>
+        <div class="status-filter" style="display: flex; justify-content: space-between">
+          <div>
+            <button
+              v-for="item in filterItems"
+              :key="item.value"
+              class="filter-btn"
+              :class="{ active: activeFilter === item.value }"
+              @click="handleFilterChange(item.value)"
+              style="margin-right: 10px"
+            >
+              {{ item.label }} ({{ item.sum }})
+            </button>
+          </div>
+          <el-button type="primary" @click="resetQuery">
+            <el-icon><Refresh /></el-icon>&nbsp;&nbsp;刷新
+          </el-button>
         </div>
-        <el-button type="primary" @click="resetQuery"
-        ><el-icon><Refresh /></el-icon>&nbsp;&nbsp;刷新</el-button
-        >
       </div>
       <transition name="fade">
         <div>
@@ -126,7 +128,7 @@ const queryParams = reactive({
   page_size: 10
 });
 // 表格数据
-const dataList = ref([
+const originalData = [
   {
     id: 'DD20230515001',
     submissionTime: '2023-05-15 09:30:45',
@@ -134,7 +136,7 @@ const dataList = ref([
     orderAmount: '¥258.00',
     paymentMethod: '微信支付',
     category: '电子产品',
-    orderStatus: '待签署', // 改为中文状态值
+    orderStatus: '待签署',
     status: '正常'
   },
   {
@@ -144,7 +146,7 @@ const dataList = ref([
     orderAmount: '¥599.00',
     paymentMethod: '支付宝',
     category: '家居用品',
-    orderStatus: '待付款', // 改为中文状态值
+    orderStatus: '待付款',
     status: '正常'
   },
   {
@@ -154,7 +156,7 @@ const dataList = ref([
     orderAmount: '¥1299.00',
     paymentMethod: '银联云闪付',
     category: '家用电器',
-    orderStatus: '已取消', // 改为中文状态值
+    orderStatus: '已取消',
     status: '正常'
   },
   {
@@ -164,7 +166,7 @@ const dataList = ref([
     orderAmount: '¥89.00',
     paymentMethod: '微信支付',
     category: '食品饮料',
-    orderStatus: '已完成', // 改为中文状态值
+    orderStatus: '已完成',
     status: '已关闭'
   },
   {
@@ -174,10 +176,10 @@ const dataList = ref([
     orderAmount: '¥1999.00',
     paymentMethod: '支付宝',
     category: '数码产品',
-    orderStatus: '已退款', // 改为中文状态值
+    orderStatus: '已退款',
     status: '异常'
   }
-]);
+];
 // 加载中
 const loading = ref(false);
 // 总数
@@ -250,13 +252,27 @@ const handleSelectionChange = (selection) => {
 const activeFilter = ref('all');
 
 const filterItems = [
-  { label: '全部订单', value: 'all', sum: 1000 },
-  { label: '待签署', value: 'pending_sign', sum: 1000 },
-  { label: '待付款', value: 'pending_payment', sum: 1000 },
-  { label: '已取消', value: 'cancelled', sum: 1000 },
-  { label: '已完成', value: 'completed', sum: 1000 },
-  { label: '已退款', value: 'refunded', sum: 1000 }
-]
+  { label: '全部订单', value: 'all', sum: originalData.length },
+  { label: '待签署', value: 'pending_sign', sum: originalData.filter(item => item.orderStatus === '待签署').length },
+  { label: '待付款', value: 'pending_payment', sum: originalData.filter(item => item.orderStatus === '待付款').length },
+  { label: '已取消', value: 'cancelled', sum: originalData.filter(item => item.orderStatus === '已取消').length },
+  { label: '已完成', value: 'completed', sum: originalData.filter(item => item.orderStatus === '已完成').length },
+  { label: '已退款', value: 'refunded', sum: originalData.filter(item => item.orderStatus === '已退款').length }
+];
+
+const dataList = computed(() => {
+  if (activeFilter.value === 'all') {
+    return originalData;
+  }
+  const statusMap = {
+    'pending_sign': '待签署',
+    'pending_payment': '待付款',
+    'cancelled': '已取消',
+    'completed': '已完成',
+    'refunded': '已退款'
+  };
+  return originalData.filter(item => item.orderStatus === statusMap[activeFilter.value]);
+});
 
 const handleFilterChange = (value) => {
   activeFilter.value = value;