gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 调整按钮布局，使用 a-space 组件- 优化图标使用，去除多余空格
- 注释代码功能，提高可读性
- 修改 API_URL 环境变量，启用服务器 API
This commit is contained in:
赵忠林
2025-08-14 19:57:38 +08:00
parent 24e1958bcd
commit 9ba07e6c0d
2 changed files with 372 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -1,5 +1,5 @@
VITE_APP_NAME=后台管理(开发环境) 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 #VITE_SERVER_API_URL=http://127.0.0.1:8000/api

183
src/views/shop/shopCoupon/index.vue
View File

@@ -1,23 +1,21 @@
<template> <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' }"> <a-card :bordered="false" :body-style="{ padding: '16px' }">
<!-- 搜索区域 --> <!-- 搜索区域 -->
@@ -69,13 +67,13 @@
<a-space> <a-space>
<a-button type="primary" @click="handleSearch"> <a-button type="primary" @click="handleSearch">
<template #icon> <template #icon>
<SearchOutlined /> <SearchOutlined/>
</template> </template>
搜索 搜索
</a-button> </a-button>
<a-button @click="handleReset"> <a-button @click="handleReset">
<template #icon> <template #icon>
<ClearOutlined /> <ClearOutlined/>
</template> </template>
重置 重置
</a-button> </a-button>
@@ -201,14 +199,14 @@
<a-tooltip title="编辑"> <a-tooltip title="编辑">
<a-button type="link" size="small" @click="openEdit(record)"> <a-button type="link" size="small" @click="openEdit(record)">
<template #icon> <template #icon>
<EditOutlined /> <EditOutlined/>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-tooltip title="复制"> <a-tooltip title="复制">
<a-button type="link" size="small" @click="copyRecord(record)"> <a-button type="link" size="small" @click="copyRecord(record)">
<template #icon> <template #icon>
<CopyOutlined /> <CopyOutlined/>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@@ -219,7 +217,7 @@
<a-tooltip title="删除"> <a-tooltip title="删除">
<a-button type="link" size="small" danger> <a-button type="link" size="small" danger>
<template #icon> <template #icon>
<DeleteOutlined /> <DeleteOutlined/>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
@@ -231,14 +229,15 @@
</a-card> </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> </template>
<script lang="ts" setup> <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,
@@ -247,40 +246,40 @@
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: '', name: '',
type: undefined, type: undefined,
expireType: undefined, expireType: undefined,
isExpire: undefined isExpire: undefined
}); });
// 表格数据源 // 表格数据源
const datasource: DatasourceFunction = ({ const datasource: DatasourceFunction = ({
page, page,
limit, limit,
where, where,
@@ -300,10 +299,10 @@
} }
return pageShopCoupon(params); return pageShopCoupon(params);
}; };
// 行选择配置 // 行选择配置
const rowSelection = computed(() => ({ const rowSelection = computed(() => ({
selectedRowKeys: selection.value.map(item => item.id), selectedRowKeys: selection.value.map(item => item.id),
onChange: (selectedRowKeys: (string | number)[], selectedRows: ShopCoupon[]) => { onChange: (selectedRowKeys: (string | number)[], selectedRows: ShopCoupon[]) => {
selection.value = selectedRows; selection.value = selectedRows;
@@ -334,10 +333,10 @@
}); });
} }
} }
})); }));
// 表格列配置 // 表格列配置
const columns = ref<ColumnItem[]>([ const columns = ref<ColumnItem[]>([
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
@@ -396,7 +395,7 @@
key: 'limitPerUser', key: 'limitPerUser',
align: 'center', align: 'center',
width: 100, width: 100,
customRender: ({ text }) => text === -1 ? '无限制' : text customRender: ({text}) => text === -1 ? '无限制' : text
}, },
{ {
title: '状态', title: '状态',
@@ -413,7 +412,7 @@
width: 120, width: 120,
sorter: true, sorter: true,
ellipsis: true, ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd') customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
}, },
{ {
title: '操作', title: '操作',
@@ -423,74 +422,74 @@
align: 'center', align: 'center',
hideInSetting: true hideInSetting: true
} }
]); ]);
// 工具方法 // 工具方法
const getCouponTypeText = (type: number) => { const getCouponTypeText = (type: number) => {
const typeMap = { const typeMap = {
10: '满减券', 10: '满减券',
20: '折扣券', 20: '折扣券',
30: '免费券' 30: '免费券'
}; };
return typeMap[type as keyof typeof typeMap] || '未知'; return typeMap[type as keyof typeof typeMap] || '未知';
}; };
const getCouponTypeColor = (type: number) => { const getCouponTypeColor = (type: number) => {
const colorMap = { const colorMap = {
10: 'red', 10: 'red',
20: 'orange', 20: 'orange',
30: 'green' 30: 'green'
}; };
return colorMap[type as keyof typeof colorMap] || 'default'; return colorMap[type as keyof typeof colorMap] || 'default';
}; };
const getApplyRangeText = (range: number) => { const getApplyRangeText = (range: number) => {
const rangeMap = { const rangeMap = {
10: '全部商品', 10: '全部商品',
20: '指定商品', 20: '指定商品',
30: '指定分类' 30: '指定分类'
}; };
return rangeMap[range as keyof typeof rangeMap] || '未知'; return rangeMap[range as keyof typeof rangeMap] || '未知';
}; };
const getApplyRangeColor = (range: number) => { const getApplyRangeColor = (range: number) => {
const colorMap = { const colorMap = {
10: 'blue', 10: 'blue',
20: 'purple', 20: 'purple',
30: 'cyan' 30: 'cyan'
}; };
return colorMap[range as keyof typeof colorMap] || 'default'; return colorMap[range as keyof typeof colorMap] || 'default';
}; };
const formatDate = (dateStr: string) => { const formatDate = (dateStr: string) => {
return dateStr ? toDateString(dateStr, 'yyyy-MM-dd') : '-'; return dateStr ? toDateString(dateStr, 'yyyy-MM-dd') : '-';
}; };
const getUsagePercent = (record: ShopCoupon) => { const getUsagePercent = (record: ShopCoupon) => {
if (record.totalCount === -1) return 0; if (record.totalCount === -1) return 0;
return Math.round(((record.issuedCount || 0) / record.totalCount) * 100); return Math.round(((record.issuedCount || 0) / record.totalCount) * 100);
}; };
const getUsageColor = (record: ShopCoupon) => { const getUsageColor = (record: ShopCoupon) => {
const percent = getUsagePercent(record); const percent = getUsagePercent(record);
if (percent >= 90) return '#ff4d4f'; if (percent >= 90) return '#ff4d4f';
if (percent >= 70) return '#faad14'; if (percent >= 70) return '#faad14';
return '#52c41a'; return '#52c41a';
}; };
/* 搜索 */ /* 搜索 */
const reload = (where?: ShopCouponParam) => { const reload = (where?: ShopCouponParam) => {
selection.value = []; selection.value = [];
tableRef?.value?.reload({ where: where }); tableRef?.value?.reload({where: where});
}; };
/* 处理搜索 */ /* 处理搜索 */
const handleSearch = () => { const handleSearch = () => {
reload(); reload();
}; };
/* 重置搜索 */ /* 重置搜索 */
const handleReset = () => { const handleReset = () => {
Object.assign(searchForm, { Object.assign(searchForm, {
name: '', name: '',
type: undefined, type: undefined,
@@ -498,21 +497,21 @@
isExpire: undefined isExpire: undefined
}); });
reload(); reload();
}; };
/* 清除选择 */ /* 清除选择 */
const clearSelection = () => { const clearSelection = () => {
selection.value = []; selection.value = [];
}; };
/* 打开编辑弹窗 */ /* 打开编辑弹窗 */
const openEdit = (row?: ShopCoupon) => { const openEdit = (row?: ShopCoupon) => {
current.value = row ?? null; current.value = row ?? null;
showEdit.value = true; showEdit.value = true;
}; };
/* 复制记录 */ /* 复制记录 */
const copyRecord = (record: ShopCoupon) => { const copyRecord = (record: ShopCoupon) => {
const copyData = { const copyData = {
...record, ...record,
id: undefined, id: undefined,
@@ -524,10 +523,10 @@
current.value = copyData; current.value = copyData;
showEdit.value = true; showEdit.value = true;
message.success('已复制优惠券信息，请修改后保存'); message.success('已复制优惠券信息，请修改后保存');
}; };
/* 删除单个 */ /* 删除单个 */
const remove = (row: ShopCoupon) => { const remove = (row: ShopCoupon) => {
if (row.issuedCount && row.issuedCount > 0) { if (row.issuedCount && row.issuedCount > 0) {
message.warning('该优惠券已有用户领取，无法删除'); message.warning('该优惠券已有用户领取，无法删除');
return; return;
@@ -544,10 +543,10 @@
hide(); hide();
message.error(e.message); message.error(e.message);
}); });
}; };
/* 批量删除 */ /* 批量删除 */
const removeBatch = () => { const removeBatch = () => {
if (!selection.value.length) { if (!selection.value.length) {
message.error('请至少选择一条数据'); message.error('请至少选择一条数据');
return; return;
@@ -583,10 +582,10 @@
}); });
} }
}); });
}; };
/* 自定义行属性 */ /* 自定义行属性 */
const customRow = (record: ShopCoupon) => { const customRow = (record: ShopCoupon) => {
return { return {
// 行点击事件 // 行点击事件
onClick: () => { onClick: () => {
@@ -599,13 +598,13 @@
// 行样式 // 行样式
class: record.isExpire === 1 ? 'expired-row' : '' class: record.isExpire === 1 ? 'expired-row' : ''
}; };
}; };
</script> </script>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'ShopCoupon' name: 'ShopCoupon'
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>