From e2f7bfb3c7c16dd91c3188939ab1c3e2aac418c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 9 Feb 2026 21:44:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E6=9B=B4=E6=96=B0=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E5=92=8C=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=A1=B5=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除订单类型和付款状态下拉选择框
- 添加订单状态下拉选择框并配置相关选项
- 调整搜索区域布局和样式微调
- 重新排序标签页顺序将全部标签页移至首位
- 注释掉开发环境API地址配置
---
 .env.development                              |   2 +-
 .../shop/shopOrder/components/search.vue      | 394 +++++++++---------
 src/views/shop/shopOrder/index.vue            |   2 +-
 3 files changed, 200 insertions(+), 198 deletions(-)

diff --git a/.env.development b/.env.development
index fbcc74b..b8ccd8b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 VITE_APP_NAME=后台管理(开发环境)
-VITE_API_URL=http://127.0.0.1:9200/api
+#VITE_API_URL=http://127.0.0.1:9200/api
 #VITE_SERVER_API_URL=http://127.0.0.1:8000/api
 
 
diff --git a/src/views/shop/shopOrder/components/search.vue b/src/views/shop/shopOrder/components/search.vue
index d6c416c..3d031ae 100644
--- a/src/views/shop/shopOrder/components/search.vue
+++ b/src/views/shop/shopOrder/components/search.vue
@@ -21,49 +21,49 @@
       @search="reload"
       @pressEnter="reload"
     />
+<!--    <a-select-->
+<!--      v-model:value="where.type"-->
+<!--      style="width: 150px"-->
+<!--      placeholder="订单类型"-->
+<!--      @change="search"-->
+<!--    >-->
+<!--      <a-select-option value="">全部</a-select-option>-->
+<!--      <a-select-option :value="1">普通订单</a-select-option>-->
+<!--      <a-select-option :value="2">秒杀订单</a-select-option>-->
+<!--      <a-select-option :value="3">拼团订单</a-select-option>-->
+<!--    </a-select>-->
+<!--    <a-select-->
+<!--      v-model:value="where.payStatus"-->
+<!--      style="width: 150px"-->
+<!--      placeholder="付款状态"-->
+<!--      @change="search"-->
+<!--    >-->
+<!--      <a-select-option value="">全部</a-select-option>-->
+<!--      <a-select-option :value="1">已付款</a-select-option>-->
+<!--      <a-select-option :value="0">未付款</a-select-option>-->
+<!--    </a-select>-->
     <a-select
-      v-model:value="where.type"
+      v-model:value="where.orderStatus"
       style="width: 150px"
-      placeholder="订单类型"
+      placeholder="订单状态"
       @change="search"
     >
       <a-select-option value="">全部</a-select-option>
-      <a-select-option :value="1">普通订单</a-select-option>
-      <a-select-option :value="2">秒杀订单</a-select-option>
-      <a-select-option :value="3">拼团订单</a-select-option>
+      <a-select-option :value="1">已完成</a-select-option>
+<!--      <a-select-option :value="0">未完成</a-select-option>-->
+<!--      <a-select-option :value="2">未使用</a-select-option>-->
+      <a-select-option :value="3">已取消</a-select-option>
+      <a-select-option :value="4">退款中</a-select-option>
+      <a-select-option :value="5">退款被拒</a-select-option>
+      <a-select-option :value="6">退款成功</a-select-option>
     </a-select>
-    <a-select
-      v-model:value="where.payStatus"
-      style="width: 150px"
-      placeholder="付款状态"
-      @change="search"
-    >
-      <a-select-option value="">全部</a-select-option>
-      <a-select-option :value="1">已付款</a-select-option>
-      <a-select-option :value="0">未付款</a-select-option>
-    </a-select>
-    <!--    <a-select-->
-    <!--      v-model:value="where.orderStatus"-->
-    <!--      style="width: 150px"-->
-    <!--      placeholder="订单状态"-->
-    <!--      @change="search"-->
-    <!--    >-->
-    <!--      <a-select-option value="">全部</a-select-option>-->
-    <!--      <a-select-option :value="1">已完成</a-select-option>-->
-    <!--      <a-select-option :value="0">未完成</a-select-option>-->
-    <!--      <a-select-option :value="2">未使用</a-select-option>-->
-    <!--      <a-select-option :value="3">已取消</a-select-option>-->
-    <!--      <a-select-option :value="4">退款中</a-select-option>-->
-    <!--      <a-select-option :value="5">退款被拒</a-select-option>-->
-    <!--      <a-select-option :value="6">退款成功</a-select-option>-->
-    <!--    </a-select>-->
-    <a-select
-      :options="getPayType()"
-      v-model:value="where.payType"
-      style="width: 150px"
-      placeholder="付款方式"
-      @change="search"
-    />
+<!--    <a-select-->
+<!--      :options="getPayType()"-->
+<!--      v-model:value="where.payType"-->
+<!--      style="width: 150px"-->
+<!--      placeholder="付款方式"-->
+<!--      @change="search"-->
+<!--    />-->
 
     <a-range-picker
       v-model:value="dateRange"
@@ -80,9 +80,9 @@
       <template #addonBefore>
         <a-select v-model:value="type" style="width: 88px" @change="onType">
           <a-select-option value="">不限</a-select-option>
-          <a-select-option value="userId"> 用户ID </a-select-option>
-          <a-select-option value="phone"> 手机号 </a-select-option>
-          <a-select-option value="nickname"> 昵称 </a-select-option>
+          <a-select-option value="userId"> 用户ID</a-select-option>
+          <a-select-option value="phone"> 手机号</a-select-option>
+          <a-select-option value="nickname"> 昵称</a-select-option>
         </a-select>
       </template>
     </a-input-search>
@@ -92,174 +92,176 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { utils, writeFile } from 'xlsx';
-  import { message } from 'ant-design-vue';
-  import useSearch from '@/utils/use-search';
-  import { ShopOrder, ShopOrderParam } from '@/api/shop/shopOrder/model';
-  import { listShopOrder } from '@/api/shop/shopOrder';
-  import { getPayType } from '@/utils/shop';
+import {ref, watch} from 'vue';
+import {utils, writeFile} from 'xlsx';
+import {message} from 'ant-design-vue';
+import useSearch from '@/utils/use-search';
+import {ShopOrder, ShopOrderParam} from '@/api/shop/shopOrder/model';
+import {listShopOrder} from '@/api/shop/shopOrder';
+import {getPayType} from '@/utils/shop';
 
-  const props = withDefaults(
-    defineProps<{
-      // 选中的订单
-      selection?: ShopOrder[];
-    }>(),
-    {}
-  );
+const props = withDefaults(
+  defineProps<{
+    // 选中的订单
+    selection?: ShopOrder[];
+  }>(),
+  {}
+);
 
-  const emit = defineEmits<{
-    (e: 'search', where?: ShopOrderParam): void;
-    (e: 'add'): void;
-    (e: 'remove'): void;
-    (e: 'batchMove'): void;
-  }>();
+const emit = defineEmits<{
+  (e: 'search', where?: ShopOrderParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+}>();
 
-  // 表单数据
-  const { where, resetFields } = useSearch<ShopOrderParam>({
-    keywords: '',
-    orderId: undefined,
-    orderNo: undefined,
-    createTimeStart: undefined,
-    createTimeEnd: undefined,
-    userId: undefined,
-    payUserId: undefined,
-    nickname: undefined,
-    phone: undefined,
-    payStatus: undefined,
-    orderStatus: undefined,
-    payType: undefined
+// 表单数据
+const {where, resetFields} = useSearch<ShopOrderParam>({
+  keywords: '',
+  orderId: undefined,
+  orderNo: undefined,
+  createTimeStart: undefined,
+  createTimeEnd: undefined,
+  userId: undefined,
+  payUserId: undefined,
+  nickname: undefined,
+  phone: undefined,
+  payStatus: undefined,
+  orderStatus: undefined,
+  payType: undefined
+});
+
+const reload = () => {
+  emit('search', {
+    ...where,
+    keywords: type.value == '' ? where.keywords : undefined
   });
+};
 
-  const reload = () => {
-    emit('search', {
-      ...where,
-      keywords: type.value == '' ? where.keywords : undefined
-    });
-  };
+// 批量删除
+// const removeBatch = () => {
+//   emit('remove');
+// };
 
-  // 批量删除
-  // const removeBatch = () => {
-  //   emit('remove');
-  // };
+const onType = () => {
+  resetFields();
+};
 
-  const onType = () => {
-    resetFields();
-  };
+// 获取搜索框placeholder
+const getSearchPlaceholder = () => {
+  switch (type.value) {
+    case 'userId':
+      where.userId = Number(where.keywords);
+      return '请输入用户ID';
+    case 'phone':
+      where.phone = where.keywords;
+      return '请输入手机号';
+    case 'nickname':
+      where.nickname = where.keywords;
+      return '请输入用户昵称';
+    default:
+      return '请输入搜索内容';
+  }
+};
 
-  // 获取搜索框placeholder
-  const getSearchPlaceholder = () => {
-    switch (type.value) {
-      case 'userId':
-        where.userId = Number(where.keywords);
-        return '请输入用户ID';
-      case 'phone':
-        where.phone = where.keywords;
-        return '请输入手机号';
-      case 'nickname':
-        where.nickname = where.keywords;
-        return '请输入用户昵称';
-      default:
-        return '请输入搜索内容';
-    }
-  };
+/* 搜索 */
+const search = () => {
+  const [d1, d2] = dateRange.value ?? [];
+  xlsFileName.value = `${d1}至${d2}`;
+  where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+  where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
+  emit('search', {
+    ...where
+  });
+};
 
-  /* 搜索 */
-  const search = () => {
-    const [d1, d2] = dateRange.value ?? [];
-    xlsFileName.value = `${d1}至${d2}`;
-    where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
-    where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
-    emit('search', {
-      ...where
-    });
-  };
+/*  重置 */
+const reset = () => {
+  resetFields();
+  search();
+};
 
-  /*  重置 */
-  const reset = () => {
-    resetFields();
-    search();
-  };
+const dateRange = ref<[string, string]>(['', '']);
+// 变量
+const loading = ref(false);
+const orders = ref<ShopOrder[]>([]);
+const xlsFileName = ref<string>();
+const type = ref('');
 
-  const dateRange = ref<[string, string]>(['', '']);
-  // 变量
-  const loading = ref(false);
-  const orders = ref<ShopOrder[]>([]);
-  const xlsFileName = ref<string>();
-  const type = ref('');
+// 导出
+const handleExport = async () => {
+  loading.value = true;
+  const array: (string | number)[][] = [
+    [
+      '订单编号',
+      '订单标题',
+      '买家姓名',
+      '手机号码',
+      '实付金额(元)',
+      '支付方式',
+      '付款时间',
+      '下单时间'
+    ]
+  ];
 
-  // 导出
-  const handleExport = async () => {
-    loading.value = true;
-    const array: (string | number)[][] = [
-      [
-        '订单编号',
-        '订单标题',
-        '买家姓名',
-        '手机号码',
-        '实付金额(元)',
-        '支付方式',
-        '付款时间',
-        '下单时间'
-      ]
-    ];
-
-    await listShopOrder(where)
-      .then((list) => {
-        orders.value = list;
-        list?.forEach((d: ShopOrder) => {
-          array.push([
-            `${d.orderNo}`,
-            `${d.comments}`,
-            `${d.realName}`,
-            `${d.phone}`,
-            `${d.payPrice}`,
-            `${getPayType(d.payType)}`,
-            `${d.payTime || ''}`,
-            `${d.createTime}`
-          ]);
-        });
-        const sheetName = `订单数据`;
-        const workbook = {
-          SheetNames: [sheetName],
-          Sheets: {}
-        };
-        const sheet = utils.aoa_to_sheet(array);
-        workbook.Sheets[sheetName] = sheet;
-        // 设置列宽
-        sheet['!cols'] = [
-          { wch: 10 },
-          { wch: 40 },
-          { wch: 20 },
-          { wch: 20 },
-          { wch: 60 },
-          { wch: 15 },
-          { wch: 10 },
-          { wch: 10 },
-          { wch: 20 },
-          { wch: 10 },
-          { wch: 20 }
-        ];
-        message.loading('正在导出...');
-        setTimeout(() => {
-          writeFile(
-            workbook,
-            `${
-              where.createTimeEnd ? xlsFileName.value + '_' : ''
-            }${sheetName}.xlsx`
-          );
-          loading.value = false;
-        }, 1000);
-      })
-      .catch((msg) => {
-        message.error(msg);
+  await listShopOrder(where)
+    .then((list) => {
+      orders.value = list;
+      list?.forEach((d: ShopOrder) => {
+        array.push([
+          `${d.orderNo}`,
+          `${d.comments}`,
+          `${d.realName}`,
+          `${d.phone}`,
+          `${d.payPrice}`,
+          `${getPayType(d.payType)}`,
+          `${d.payTime || ''}`,
+          `${d.createTime}`
+        ]);
+      });
+      const sheetName = `订单数据`;
+      const workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      };
+      const sheet = utils.aoa_to_sheet(array);
+      workbook.Sheets[sheetName] = sheet;
+      // 设置列宽
+      sheet['!cols'] = [
+        {wch: 10},
+        {wch: 40},
+        {wch: 20},
+        {wch: 20},
+        {wch: 60},
+        {wch: 15},
+        {wch: 10},
+        {wch: 10},
+        {wch: 20},
+        {wch: 10},
+        {wch: 20}
+      ];
+      message.loading('正在导出...');
+      setTimeout(() => {
+        writeFile(
+          workbook,
+          `${
+            where.createTimeEnd ? xlsFileName.value + '_' : ''
+          }${sheetName}.xlsx`
+        );
         loading.value = false;
-      })
-      .finally(() => {});
-  };
+      }, 1000);
+    })
+    .catch((msg) => {
+      message.error(msg);
+      loading.value = false;
+    })
+    .finally(() => {
+    });
+};
 
-  watch(
-    () => props.selection,
-    () => {}
-  );
+watch(
+  () => props.selection,
+  () => {
+  }
+);
 </script>
diff --git a/src/views/shop/shopOrder/index.vue b/src/views/shop/shopOrder/index.vue
index f1dda8f..825ec21 100644
--- a/src/views/shop/shopOrder/index.vue
+++ b/src/views/shop/shopOrder/index.vue
@@ -11,13 +11,13 @@
     </a-card>
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
       <a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
+        <a-tab-pane key="all" tab="全部" />
         <a-tab-pane key="undelivered" tab="待发货" />
         <a-tab-pane key="unreceived" tab="待收货" />
         <a-tab-pane key="completed" tab="已完成" />
 <!--        <a-tab-pane key="unpaid" tab="待付款" />-->
         <a-tab-pane key="refunded" tab="退货/售后" />
         <a-tab-pane key="cancelled" tab="已关闭" />
-        <a-tab-pane key="all" tab="全部" />
       </a-tabs>
       <ele-pro-table
         ref="tableRef"