refactor(shop): 优化店铺优惠券页面布局和代码结构- 移除 shop-coupon-container div，直接使用 a-page-header组件

- 调整按钮布局，使用 a-space 组件- 优化图标使用，去除多余空格
- 注释代码功能，提高可读性
- 修改 API_URL 环境变量，启用服务器 API

.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
 
 

src/views/shop/shopCoupon/index.vue

@@ -1,23 +1,21 @@
 <template>
-  <div class="shop-coupon-container">
+  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
-    <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <template #extra>
-      <template #extra>
+      <a-space>
-        <a-space>
+        <a-button type="primary" @click="openEdit()">
-          <a-button type="primary" @click="openEdit()">
+          <template #icon>
-            <template #icon>
+            <PlusOutlined/>
-              <PlusOutlined />
+          </template>
-            </template>
+          新增优惠券
-            新增优惠券
+        </a-button>
-          </a-button>
+        <a-button @click="reload()">
-          <a-button @click="reload()">
+          <template #icon>
-            <template #icon>
+            <ReloadOutlined/>
-              <ReloadOutlined />
+          </template>
-            </template>
+          刷新
-            刷新
+        </a-button>
-          </a-button>
+      </a-space>
-        </a-space>
+    </template>
-      </template>
-    </a-page-header>
 
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
       <!-- 搜索区域 -->
@@ -69,13 +67,13 @@
             <a-space>
               <a-button type="primary" @click="handleSearch">
                 <template #icon>
-                  <SearchOutlined />
+                  <SearchOutlined/>
                 </template>
                 搜索
               </a-button>
               <a-button @click="handleReset">
                 <template #icon>
-                  <ClearOutlined />
+                  <ClearOutlined/>
                 </template>
                 重置
               </a-button>
@@ -201,14 +199,14 @@
               <a-tooltip title="编辑">
                 <a-button type="link" size="small" @click="openEdit(record)">
                   <template #icon>
-                    <EditOutlined />
+                    <EditOutlined/>
                   </template>
                 </a-button>
               </a-tooltip>
               <a-tooltip title="复制">
                 <a-button type="link" size="small" @click="copyRecord(record)">
                   <template #icon>
-                    <CopyOutlined />
+                    <CopyOutlined/>
                   </template>
                 </a-button>
               </a-tooltip>
@@ -219,7 +217,7 @@
                 <a-tooltip title="删除">
                   <a-button type="link" size="small" danger>
                     <template #icon>
-                      <DeleteOutlined />
+                      <DeleteOutlined/>
                     </template>
                   </a-button>
                 </a-tooltip>
@@ -231,381 +229,382 @@
     </a-card>
 
     <!-- 编辑弹窗 -->
-    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload"/>
-  </div>
+
+  </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref, reactive, computed } from 'vue';
+import {createVNode, ref, reactive, computed} from 'vue';
-  import { message, Modal } from 'ant-design-vue';
+import {message, Modal} from 'ant-design-vue';
-  import {
+import {
-    ExclamationCircleOutlined,
+  ExclamationCircleOutlined,
-    PlusOutlined,
+  PlusOutlined,
-    ReloadOutlined,
+  ReloadOutlined,
-    SearchOutlined,
+  SearchOutlined,
-    ClearOutlined,
+  ClearOutlined,
-    EditOutlined,
+  EditOutlined,
-    DeleteOutlined,
+  DeleteOutlined,
-    CopyOutlined
+  CopyOutlined
-  } from '@ant-design/icons-vue';
+} from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
+import type {EleProTable} from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
-  import type {
+import type {
-    DatasourceFunction,
+  DatasourceFunction,
-    ColumnItem
+  ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
+} from 'ele-admin-pro/es/ele-pro-table/types';
-  import { getPageTitle } from '@/utils/common';
+import {getPageTitle} from '@/utils/common';
-  import ShopCouponEdit from './components/shopCouponEdit.vue';
+import ShopCouponEdit from './components/shopCouponEdit.vue';
-  import { pageShopCoupon, removeShopCoupon, removeBatchShopCoupon } from '@/api/shop/shopCoupon';
+import {pageShopCoupon, removeShopCoupon, removeBatchShopCoupon} from '@/api/shop/shopCoupon';
-  import type { ShopCoupon, ShopCouponParam } from '@/api/shop/shopCoupon/model';
+import type {ShopCoupon, ShopCouponParam} from '@/api/shop/shopCoupon/model';
 
-  // 表格实例
+// 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
-  // 表格选中数据
+// 表格选中数据
-  const selection = ref<ShopCoupon[]>([]);
+const selection = ref<ShopCoupon[]>([]);
-  // 当前编辑数据
+// 当前编辑数据
-  const current = ref<ShopCoupon | null>(null);
+const current = ref<ShopCoupon | null>(null);
-  // 是否显示编辑弹窗
+// 是否显示编辑弹窗
-  const showEdit = ref(false);
+const showEdit = ref(false);
-  // 加载状态
+// 加载状态
-  const loading = ref(false);
+const loading = ref(false);
 
-  // 搜索表单
+// 搜索表单
-  const searchForm = reactive<ShopCouponParam>({
+const searchForm = reactive<ShopCouponParam>({
+  name: '',
+  type: undefined,
+  expireType: undefined,
+  isExpire: undefined
+});
+
+// 表格数据源
+const datasource: DatasourceFunction = ({
+                                          page,
+                                          limit,
+                                          where,
+                                          orders,
+                                          filters
+                                        }) => {
+  const params = {
+    ...where,
+    ...searchForm,
+    ...orders,
+    page,
+    limit
+  };
+
+  if (filters) {
+    Object.assign(params, filters);
+  }
+
+  return pageShopCoupon(params);
+};
+
+// 行选择配置
+const rowSelection = computed(() => ({
+  selectedRowKeys: selection.value.map(item => item.id),
+  onChange: (selectedRowKeys: (string | number)[], selectedRows: ShopCoupon[]) => {
+    selection.value = selectedRows;
+  },
+  onSelect: (record: ShopCoupon, selected: boolean) => {
+    if (selected) {
+      selection.value.push(record);
+    } else {
+      const index = selection.value.findIndex(item => item.id === record.id);
+      if (index > -1) {
+        selection.value.splice(index, 1);
+      }
+    }
+  },
+  onSelectAll: (selected: boolean, selectedRows: ShopCoupon[], changeRows: ShopCoupon[]) => {
+    if (selected) {
+      changeRows.forEach(row => {
+        if (!selection.value.find(item => item.id === row.id)) {
+          selection.value.push(row);
+        }
+      });
+    } else {
+      changeRows.forEach(row => {
+        const index = selection.value.findIndex(item => item.id === row.id);
+        if (index > -1) {
+          selection.value.splice(index, 1);
+        }
+      });
+    }
+  }
+}));
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    align: 'center',
+    width: 80,
+    fixed: 'left'
+  },
+  {
+    title: '优惠券信息',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'left',
+    width: 250,
+    fixed: 'left',
+    ellipsis: true
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '优惠价值',
+    dataIndex: 'value',
+    key: 'value',
+    align: 'center',
+    width: 150
+  },
+  {
+    title: '有效期信息',
+    dataIndex: 'expireInfo',
+    key: 'expireInfo',
+    align: 'center',
+    width: 180
+  },
+  {
+    title: '适用范围',
+    dataIndex: 'applyRange',
+    key: 'applyRange',
+    align: 'center',
+    width: 120
+  },
+  {
+    title: '使用情况',
+    dataIndex: 'usage',
+    key: 'usage',
+    align: 'center',
+    width: 150
+  },
+  {
+    title: '每人限领',
+    dataIndex: 'limitPerUser',
+    key: 'limitPerUser',
+    align: 'center',
+    width: 100,
+    customRender: ({text}) => text === -1 ? '无限制' : text
+  },
+  {
+    title: '状态',
+    dataIndex: 'isExpire',
+    key: 'isExpire',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    width: 120,
+    sorter: true,
+    ellipsis: true,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 150,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
+
+// 工具方法
+const getCouponTypeText = (type: number) => {
+  const typeMap = {
+    10: '满减券',
+    20: '折扣券',
+    30: '免费券'
+  };
+  return typeMap[type as keyof typeof typeMap] || '未知';
+};
+
+const getCouponTypeColor = (type: number) => {
+  const colorMap = {
+    10: 'red',
+    20: 'orange',
+    30: 'green'
+  };
+  return colorMap[type as keyof typeof colorMap] || 'default';
+};
+
+const getApplyRangeText = (range: number) => {
+  const rangeMap = {
+    10: '全部商品',
+    20: '指定商品',
+    30: '指定分类'
+  };
+  return rangeMap[range as keyof typeof rangeMap] || '未知';
+};
+
+const getApplyRangeColor = (range: number) => {
+  const colorMap = {
+    10: 'blue',
+    20: 'purple',
+    30: 'cyan'
+  };
+  return colorMap[range as keyof typeof colorMap] || 'default';
+};
+
+const formatDate = (dateStr: string) => {
+  return dateStr ? toDateString(dateStr, 'yyyy-MM-dd') : '-';
+};
+
+const getUsagePercent = (record: ShopCoupon) => {
+  if (record.totalCount === -1) return 0;
+  return Math.round(((record.issuedCount || 0) / record.totalCount) * 100);
+};
+
+const getUsageColor = (record: ShopCoupon) => {
+  const percent = getUsagePercent(record);
+  if (percent >= 90) return '#ff4d4f';
+  if (percent >= 70) return '#faad14';
+  return '#52c41a';
+};
+
+/* 搜索 */
+const reload = (where?: ShopCouponParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 处理搜索 */
+const handleSearch = () => {
+  reload();
+};
+
+/* 重置搜索 */
+const handleReset = () => {
+  Object.assign(searchForm, {
     name: '',
     type: undefined,
     expireType: undefined,
     isExpire: undefined
   });
+  reload();
+};
 
-  // 表格数据源
+/* 清除选择 */
-  const datasource: DatasourceFunction = ({
+const clearSelection = () => {
-    page,
+  selection.value = [];
-    limit,
+};
-    where,
-    orders,
-    filters
-  }) => {
-    const params = {
-      ...where,
-      ...searchForm,
-      ...orders,
-      page,
-      limit
-    };
 
-    if (filters) {
+/* 打开编辑弹窗 */
-      Object.assign(params, filters);
+const openEdit = (row?: ShopCoupon) => {
-    }
+  current.value = row ?? null;
+  showEdit.value = true;
+};
 
-    return pageShopCoupon(params);
+/* 复制记录 */
+const copyRecord = (record: ShopCoupon) => {
+  const copyData = {
+    ...record,
+    id: undefined,
+    name: `${record.name}_副本`,
+    createTime: undefined,
+    updateTime: undefined,
+    issuedCount: 0
   };
+  current.value = copyData;
+  showEdit.value = true;
+  message.success('已复制优惠券信息，请修改后保存');
+};
 
-  // 行选择配置
+/* 删除单个 */
-  const rowSelection = computed(() => ({
+const remove = (row: ShopCoupon) => {
-    selectedRowKeys: selection.value.map(item => item.id),
+  if (row.issuedCount && row.issuedCount > 0) {
-    onChange: (selectedRowKeys: (string | number)[], selectedRows: ShopCoupon[]) => {
+    message.warning('该优惠券已有用户领取，无法删除');
-      selection.value = selectedRows;
+    return;
-    },
+  }
-    onSelect: (record: ShopCoupon, selected: boolean) => {
-      if (selected) {
-        selection.value.push(record);
-      } else {
-        const index = selection.value.findIndex(item => item.id === record.id);
-        if (index > -1) {
-          selection.value.splice(index, 1);
-        }
-      }
-    },
-    onSelectAll: (selected: boolean, selectedRows: ShopCoupon[], changeRows: ShopCoupon[]) => {
-      if (selected) {
-        changeRows.forEach(row => {
-          if (!selection.value.find(item => item.id === row.id)) {
-            selection.value.push(row);
-          }
-        });
-      } else {
-        changeRows.forEach(row => {
-          const index = selection.value.findIndex(item => item.id === row.id);
-          if (index > -1) {
-            selection.value.splice(index, 1);
-          }
-        });
-      }
-    }
-  }));
 
-  // 表格列配置
+  const hide = message.loading('删除中...', 0);
-  const columns = ref<ColumnItem[]>([
+  removeShopCoupon(row.id)
-    {
+    .then((msg) => {
-      title: 'ID',
+      hide();
-      dataIndex: 'id',
+      message.success(msg);
-      key: 'id',
+      reload();
-      align: 'center',
+    })
-      width: 80,
+    .catch((e) => {
-      fixed: 'left'
+      hide();
-    },
+      message.error(e.message);
-    {
-      title: '优惠券信息',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'left',
-      width: 250,
-      fixed: 'left',
-      ellipsis: true
-    },
-    {
-      title: '类型',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '优惠价值',
-      dataIndex: 'value',
-      key: 'value',
-      align: 'center',
-      width: 150
-    },
-    {
-      title: '有效期信息',
-      dataIndex: 'expireInfo',
-      key: 'expireInfo',
-      align: 'center',
-      width: 180
-    },
-    {
-      title: '适用范围',
-      dataIndex: 'applyRange',
-      key: 'applyRange',
-      align: 'center',
-      width: 120
-    },
-    {
-      title: '使用情况',
-      dataIndex: 'usage',
-      key: 'usage',
-      align: 'center',
-      width: 150
-    },
-    {
-      title: '每人限领',
-      dataIndex: 'limitPerUser',
-      key: 'limitPerUser',
-      align: 'center',
-      width: 100,
-      customRender: ({ text }) => text === -1 ? '无限制' : text
-    },
-    {
-      title: '状态',
-      dataIndex: 'isExpire',
-      key: 'isExpire',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      align: 'center',
-      width: 120,
-      sorter: true,
-      ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 150,
-      fixed: 'right',
-      align: 'center',
-      hideInSetting: true
-    }
-  ]);
-
-  // 工具方法
-  const getCouponTypeText = (type: number) => {
-    const typeMap = {
-      10: '满减券',
-      20: '折扣券',
-      30: '免费券'
-    };
-    return typeMap[type as keyof typeof typeMap] || '未知';
-  };
-
-  const getCouponTypeColor = (type: number) => {
-    const colorMap = {
-      10: 'red',
-      20: 'orange',
-      30: 'green'
-    };
-    return colorMap[type as keyof typeof colorMap] || 'default';
-  };
-
-  const getApplyRangeText = (range: number) => {
-    const rangeMap = {
-      10: '全部商品',
-      20: '指定商品',
-      30: '指定分类'
-    };
-    return rangeMap[range as keyof typeof rangeMap] || '未知';
-  };
-
-  const getApplyRangeColor = (range: number) => {
-    const colorMap = {
-      10: 'blue',
-      20: 'purple',
-      30: 'cyan'
-    };
-    return colorMap[range as keyof typeof colorMap] || 'default';
-  };
-
-  const formatDate = (dateStr: string) => {
-    return dateStr ? toDateString(dateStr, 'yyyy-MM-dd') : '-';
-  };
-
-  const getUsagePercent = (record: ShopCoupon) => {
-    if (record.totalCount === -1) return 0;
-    return Math.round(((record.issuedCount || 0) / record.totalCount) * 100);
-  };
-
-  const getUsageColor = (record: ShopCoupon) => {
-    const percent = getUsagePercent(record);
-    if (percent >= 90) return '#ff4d4f';
-    if (percent >= 70) return '#faad14';
-    return '#52c41a';
-  };
-
-  /* 搜索 */
-  const reload = (where?: ShopCouponParam) => {
-    selection.value = [];
-    tableRef?.value?.reload({ where: where });
-  };
-
-  /* 处理搜索 */
-  const handleSearch = () => {
-    reload();
-  };
-
-  /* 重置搜索 */
-  const handleReset = () => {
-    Object.assign(searchForm, {
-      name: '',
-      type: undefined,
-      expireType: undefined,
-      isExpire: undefined
     });
-    reload();
+};
-  };
 
-  /* 清除选择 */
+/* 批量删除 */
-  const clearSelection = () => {
+const removeBatch = () => {
-    selection.value = [];
+  if (!selection.value.length) {
-  };
+    message.error('请至少选择一条数据');
+    return;
+  }
 
-  /* 打开编辑弹窗 */
+  // 检查是否有已发放的优惠券
-  const openEdit = (row?: ShopCoupon) => {
+  const issuedCoupons = selection.value.filter(item => item.issuedCount && item.issuedCount > 0);
-    current.value = row ?? null;
+  if (issuedCoupons.length > 0) {
-    showEdit.value = true;
+    message.warning(`选中的优惠券中有 ${issuedCoupons.length} 个已被用户领取，无法删除`);
-  };
+    return;
+  }
 
-  /* 复制记录 */
+  Modal.confirm({
-  const copyRecord = (record: ShopCoupon) => {
+    title: '批量删除确认',
-    const copyData = {
+    content: `确定要删除选中的 ${selection.value.length} 个优惠券吗？此操作不可恢复。`,
-      ...record,
+    icon: createVNode(ExclamationCircleOutlined),
-      id: undefined,
+    maskClosable: true,
-      name: `${record.name}_副本`,
+    okText: '确定删除',
-      createTime: undefined,
+    okType: 'danger',
-      updateTime: undefined,
+    cancelText: '取消',
-      issuedCount: 0
+    onOk: () => {
-    };
+      const hide = message.loading('批量删除中...', 0);
-    current.value = copyData;
+      removeBatchShopCoupon(selection.value.map((d) => d.id))
-    showEdit.value = true;
+        .then((msg) => {
-    message.success('已复制优惠券信息，请修改后保存');
+          hide();
-  };
+          message.success(msg);
-
+          selection.value = [];
-  /* 删除单个 */
+          reload();
-  const remove = (row: ShopCoupon) => {
+        })
-    if (row.issuedCount && row.issuedCount > 0) {
+        .catch((e) => {
-      message.warning('该优惠券已有用户领取，无法删除');
+          hide();
-      return;
+          message.error(e.message);
+        });
     }
+  });
+};
 
-    const hide = message.loading('删除中...', 0);
+/* 自定义行属性 */
-    removeShopCoupon(row.id)
+const customRow = (record: ShopCoupon) => {
-      .then((msg) => {
+  return {
-        hide();
+    // 行点击事件
-        message.success(msg);
+    onClick: () => {
-        reload();
+      // console.log(record);
-      })
+    },
-      .catch((e) => {
+    // 行双击事件
-        hide();
+    onDblclick: () => {
-        message.error(e.message);
+      openEdit(record);
-      });
+    },
-  };
+    // 行样式
-
+    class: record.isExpire === 1 ? 'expired-row' : ''
-  /* 批量删除 */
-  const removeBatch = () => {
-    if (!selection.value.length) {
-      message.error('请至少选择一条数据');
-      return;
-    }
-
-    // 检查是否有已发放的优惠券
-    const issuedCoupons = selection.value.filter(item => item.issuedCount && item.issuedCount > 0);
-    if (issuedCoupons.length > 0) {
-      message.warning(`选中的优惠券中有 ${issuedCoupons.length} 个已被用户领取，无法删除`);
-      return;
-    }
-
-    Modal.confirm({
-      title: '批量删除确认',
-      content: `确定要删除选中的 ${selection.value.length} 个优惠券吗？此操作不可恢复。`,
-      icon: createVNode(ExclamationCircleOutlined),
-      maskClosable: true,
-      okText: '确定删除',
-      okType: 'danger',
-      cancelText: '取消',
-      onOk: () => {
-        const hide = message.loading('批量删除中...', 0);
-        removeBatchShopCoupon(selection.value.map((d) => d.id))
-          .then((msg) => {
-            hide();
-            message.success(msg);
-            selection.value = [];
-            reload();
-          })
-          .catch((e) => {
-            hide();
-            message.error(e.message);
-          });
-      }
-    });
-  };
-
-  /* 自定义行属性 */
-  const customRow = (record: ShopCoupon) => {
-    return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
-      onDblclick: () => {
-        openEdit(record);
-      },
-      // 行样式
-      class: record.isExpire === 1 ? 'expired-row' : ''
-    };
   };
+};
 </script>
 
 <script lang="ts">
-  export default {
+export default {
-    name: 'ShopCoupon'
+  name: 'ShopCoupon'
-  };
+};
 </script>
 
 <style lang="less" scoped>