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

refactor(shopCoupon): 重构优惠券页面

Browse Source 
- 优化表格展示，增加状态标签和操作按钮
- 重新设计编辑弹窗，分为多个步骤展示
- 添加数据验证和错误提示
-优化删除操作提示信息
-调整表格样式，增加分页功能
This commit is contained in:
赵忠林
2025-08-11 12:33:29 +08:00
parent 32fe74c71f
commit d0000fb391
5 changed files with 661 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/shop/shopCoupon/index.ts
View File

@@ -41,7 +41,12 @@ export async function listShopCoupon(params?: ShopCouponParam) {
export async function addShopCoupon(data: ShopCoupon) {
const res = await request.post<ApiResult<unknown>>(
MODULES_API_URL + '/shop/shop-coupon',
data
data,
{
headers: {
'Content-Type': 'application/json'
}
}
);
if (res.data.code === 0) {
return res.data.message;
@@ -55,7 +60,12 @@ export async function addShopCoupon(data: ShopCoupon) {
export async function updateShopCoupon(data: ShopCoupon) {
const res = await request.put<ApiResult<unknown>>(
MODULES_API_URL + '/shop/shop-coupon',
data
data,
{
headers: {
'Content-Type': 'application/json'
}
}
);
if (res.data.code === 0) {
return res.data.message;

2
src/api/shop/shopCoupon/model/index.ts
View File

@@ -53,7 +53,7 @@ export interface ShopCoupon {
// 每人限领数量(-1表示无限制)
limitPerUser?: number;
// 是否启用(0禁用 1启用)
enabled?: string;
enabled?: boolean;
}
/**

52
src/views/shop/shopAdmin/index.vue
View File

@@ -18,6 +18,7 @@
row-key="userId"
:columns="columns"
:datasource="datasource"
class="sys-org-table"
:scroll="{ x: 1300 }"
:where="defaultWhere"
:customRow="customRow"
@@ -386,7 +387,7 @@ const resetPsw = (row: User) => {
/* 修改用户状态 */
const updateIsAdmin = (row: User) => {
row.isAdmin = row.isAdmin ? 0 : 1;
row.isAdmin = !row.isAdmin;
updateUser(row)
.then((msg) => {
message.success(msg);
@@ -432,15 +433,48 @@ export default {
};
</script>
<style lang="less" scoped>
.user-box {
display: flex;
align-items: center;
.user-info {
display: flex;
flex-direction: column;
align-items: start;
<style lang="less" scoped>
.sys-org-table {
:deep(.ant-table) {
.ant-table-thead > tr > th {
background: #fafafa;
font-weight: 600;
color: #262626;
border-bottom: 2px solid #f0f0f0;
}
.ant-table-tbody > tr > td {
padding: 12px 8px;
border-bottom: 1px solid #f5f5f5;
}
.ant-table-tbody > tr:hover > td {
background: #f8f9ff;
}
.ant-tag {
margin: 0;
border-radius: 4px;
font-size: 12px;
padding: 2px 8px;
}
}
}
.ele-text-primary {
color: #1890ff;
&:hover {
color: #40a9ff;
}
}
.ele-text-danger {
color: #ff4d4f;
&:hover {
color: #ff7875;
}
}
</style>

595
src/views/shop/shopCoupon/components/shopCouponEdit.vue
View File

@@ -1,12 +1,12 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="800"
:width="700"
:visible="visible"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑优惠券' : '添加优惠券'"
:body-style="{ paddingBottom: '28px' }"
:body-style="{ paddingBottom: '28px', maxHeight: '70vh', overflowY: 'auto' }"
@update:visible="updateVisible"
@ok="save"
>
@@ -19,273 +19,438 @@
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="优惠券名称" name="name">
<!-- 基本信息 -->
<a-divider orientation="left">基本信息</a-divider>
<a-form-item
label="优惠券名称"
name="name"
>
<a-input
allow-clear
placeholder="请输入优惠券名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item
label="优惠券类型"
name="type"
>
<a-select
placeholder="请选择优惠券类型"
v-model:value="form.type"
@change="onTypeChange"
>
<a-select-option :value="10">满减券</a-select-option>
<a-select-option :value="20">折扣券</a-select-option>
<a-select-option :value="30">免费券</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="优惠券描述" name="description">
<a-input
allow-clear
<a-textarea
:rows="3"
placeholder="请输入优惠券描述"
v-model:value="form.description"
/>
</a-form-item>
<a-form-item label="优惠券类型(10满减券 20折扣券 30免费劵)" name="type">
<a-input
allow-clear
placeholder="请输入优惠券类型(10满减券 20折扣券 30免费劵)"
v-model:value="form.type"
/>
</a-form-item>
<a-form-item label="满减券-减免金额" name="reducePrice">
<a-input
allow-clear
placeholder="请输入满减券-减免金额"
<!-- 优惠设置 -->
<a-divider orientation="left">优惠设置</a-divider>
<a-form-item
v-if="form.type === 10"
label="减免金额"
name="reducePrice"
>
<a-input-number
:min="0"
:precision="2"
placeholder="请输入减免金额"
v-model:value="form.reducePrice"
/>
style="width: 100%"
>
<template #addonAfter>元</template>
</a-input-number>
</a-form-item>
<a-form-item label="折扣券-折扣率(0-100)" name="discount">
<a-input
allow-clear
placeholder="请输入折扣券-折扣率(0-100)"
<a-form-item
v-if="form.type === 20"
label="折扣率"
name="discount"
>
<a-input-number
:min="1"
:max="99"
:precision="1"
placeholder="请输入折扣率"
v-model:value="form.discount"
/>
style="width: 100%"
>
<template #addonAfter>折</template>
</a-input-number>
</a-form-item>
<a-form-item label="最低消费金额" name="minPrice">
<a-input
allow-clear
placeholder="请输入最低消费金额"
<a-form-item
label="最低消费金额"
name="minPrice"
>
<a-input-number
:min="0"
:precision="2"
placeholder="0表示无门槛"
v-model:value="form.minPrice"
/>
style="width: 100%"
>
<template #addonAfter>元</template>
</a-input-number>
</a-form-item>
<a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
<a-input
allow-clear
placeholder="请输入到期类型(10领取后生效 20固定时间)"
v-model:value="form.expireType"
/>
<!-- 有效期设置 -->
<a-divider orientation="left">有效期设置</a-divider>
<a-form-item label="到期类型" name="expireType">
<a-radio-group v-model:value="form.expireType" @change="onExpireTypeChange">
<a-radio :value="10">领取后生效</a-radio>
<a-radio :value="20">固定时间</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="领取后生效-有效天数" name="expireDay">
<a-input
allow-clear
placeholder="请输入领取后生效-有效天数"
<div :gutter="16" v-if="form.expireType === 10">
<a-form-item
label="有效天数"
name="expireDay"
>
<a-input-number
:min="1"
placeholder="请输入有效天数"
v-model:value="form.expireDay"
/>
style="width: 100%"
>
<template #addonAfter>天</template>
</a-input-number>
</a-form-item>
<a-form-item label="有效期开始时间" name="startTime">
<a-input
allow-clear
placeholder="请输入有效期开始时间"
</div>
<div :gutter="16" v-if="form.expireType === 20">
<a-form-item
label="开始时间"
name="startTime"
>
<a-date-picker
placeholder="请选择开始时间"
v-model:value="form.startTime"
style="width: 100%"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
/>
</a-form-item>
<a-form-item label="有效期结束时间" name="endTime">
<a-input
allow-clear
placeholder="请输入有效期结束时间"
<a-form-item
label="结束时间"
name="endTime"
>
<a-date-picker
placeholder="请选择结束时间"
v-model:value="form.endTime"
style="width: 100%"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
/>
</a-form-item>
<a-form-item label="适用范围(10全部商品 20指定商品 30指定分类)" name="applyRange">
<a-input
allow-clear
placeholder="请输入适用范围(10全部商品 20指定商品 30指定分类)"
</div>
<!-- 适用范围 -->
<a-divider orientation="left">适用范围</a-divider>
<a-form-item label="适用范围" name="applyRange">
<a-select
placeholder="请选择适用范围"
v-model:value="form.applyRange"
/>
>
<a-select-option :value="10">全部商品</a-select-option>
<a-select-option :value="20">指定商品</a-select-option>
<a-select-option :value="30">指定分类</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
<a-input
allow-clear
placeholder="请输入适用范围配置(json格式)"
<a-form-item
v-if="form.applyRange === 20 || form.applyRange === 30"
label="范围配置"
name="applyRangeConfig"
>
<a-textarea
:rows="3"
placeholder="请输入JSON格式的配置，如：[1,2,3]"
v-model:value="form.applyRangeConfig"
/>
</a-form-item>
<a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
<a-input
allow-clear
placeholder="请输入是否过期(0未过期 1已过期)"
v-model:value="form.isExpire"
/>
<!-- 发放设置 -->
<a-divider orientation="left">发放设置</a-divider>
<a-form-item
label="发放总数量"
name="totalCount"
>
<a-input-number
:min="-1"
placeholder="-1表示无限制"
v-model:value="form.totalCount"
style="width: 100%"
>
<template #addonAfter>张</template>
</a-input-number>
</a-form-item>
<a-form-item label="排序(数字越小越靠前)" name="sortNumber">
<a-form-item
label="每人限领"
name="limitPerUser"
>
<a-input-number
:min="-1"
placeholder="-1表示无限制"
v-model:value="form.limitPerUser"
style="width: 100%"
>
<template #addonAfter>张</template>
</a-input-number>
</a-form-item>
<a-form-item
label="排序"
name="sortNumber"
>
<a-input-number
:min="0"
:max="9999"
class="ele-fluid"
placeholder="请输入排序号"
placeholder="数字越小越靠前"
v-model:value="form.sortNumber"
style="width: 100%"
/>
</a-form-item>
<a-form-item label="状态, 0正常, 1禁用" name="status">
<!-- 状态设置 -->
<a-divider orientation="left">状态设置</a-divider>
<a-form-item
label="显示状态"
name="status"
>
<a-radio-group v-model:value="form.status">
<a-radio :value="0">显示</a-radio>
<a-radio :value="1">隐藏</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="是否删除, 0否, 1是" name="deleted">
<a-input
allow-clear
placeholder="请输入是否删除, 0否, 1是"
v-model:value="form.deleted"
/>
</a-form-item>
<a-form-item label="创建用户ID" name="userId">
<a-input
allow-clear
placeholder="请输入创建用户ID"
v-model:value="form.userId"
/>
</a-form-item>
<a-form-item label="修改时间" name="updateTime">
<a-input
allow-clear
placeholder="请输入修改时间"
v-model:value="form.updateTime"
/>
</a-form-item>
<a-form-item label="发放总数量(-1表示无限制)" name="totalCount">
<a-input
allow-clear
placeholder="请输入发放总数量(-1表示无限制)"
v-model:value="form.totalCount"
/>
</a-form-item>
<a-form-item label="已发放数量" name="issuedCount">
<a-input
allow-clear
placeholder="请输入已发放数量"
v-model:value="form.issuedCount"
/>
</a-form-item>
<a-form-item label="每人限领数量(-1表示无限制)" name="limitPerUser">
<a-input
allow-clear
placeholder="请输入每人限领数量(-1表示无限制)"
v-model:value="form.limitPerUser"
/>
</a-form-item>
<a-form-item label="是否启用(0禁用 1启用)" name="enabled">
<a-input
allow-clear
placeholder="请输入是否启用(0禁用 1启用)"
v-model:value="form.enabled"
/>
<a-form-item
label="启用状态"
name="enabled"
>
<a-radio-group v-model:value="form.enabled">
<a-radio :value="true">启用</a-radio>
<a-radio :value="false">禁用</a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject, uuid } from 'ele-admin-pro';
import { addShopCoupon, updateShopCoupon } from '@/api/shop/shopCoupon';
import { ShopCoupon } from '@/api/shop/shopCoupon/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FormInstance } from 'ant-design-vue/es/form';
import { FileRecord } from '@/api/system/file/model';
import {ref, reactive, watch} from 'vue';
import {Form, message} from 'ant-design-vue';
import {assignObject} from 'ele-admin-pro';
import {addShopCoupon, updateShopCoupon} from '@/api/shop/shopCoupon';
import {ShopCoupon} from '@/api/shop/shopCoupon/model';
import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
import {FormInstance} from 'ant-design-vue/es/form';
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const props = defineProps<{
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const {styleResponsive} = storeToRefs(themeStore);
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: ShopCoupon | null;
}>();
}>();
const emit = defineEmits<{
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
// 用户信息
const form = reactive<ShopCoupon>({
// 表单数据
const form = reactive<ShopCoupon>({
id: undefined,
name: undefined,
description: undefined,
type: undefined,
name: '',
description: '',
type: 10, // 默认满减券
reducePrice: undefined,
discount: undefined,
minPrice: undefined,
expireType: undefined,
expireDay: undefined,
minPrice: '', // 默认无门槛
expireType: 10, // 默认领取后生效
expireDay: 30, // 默认30天
startTime: undefined,
endTime: undefined,
applyRange: undefined,
applyRangeConfig: undefined,
isExpire: undefined,
sortNumber: undefined,
status: undefined,
deleted: undefined,
applyRange: 10, // 默认全部商品
applyRangeConfig: '',
isExpire: 0,
sortNumber: 100,
status: 0, // 默认显示
deleted: 0,
userId: undefined,
tenantId: undefined,
createTime: undefined,
updateTime: undefined,
totalCount: undefined,
issuedCount: undefined,
limitPerUser: undefined,
enabled: undefined,
shopCouponId: undefined,
shopCouponName: '',
status: 0,
comments: '',
sortNumber: 100
});
totalCount: -1, // 默认无限制
issuedCount: 0,
limitPerUser: -1, // 默认无限制
enabled: true, // 默认启用
});
/* 更新visible */
const updateVisible = (value: boolean) => {
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
};
// 表单验证规则
const rules = reactive({
shopCouponName: [
// 表单验证规则
const rules = reactive({
name: [
{
required: true,
type: 'string',
message: '请填写优惠券名称',
message: '请输入优惠券名称',
trigger: 'blur'
}
],
type: [
{
required: true,
message: '请选择优惠券类型',
trigger: 'change'
}
],
reducePrice: [
{
required: true,
message: '请输入减免金额',
trigger: 'blur',
validator: (rule: any, value: any) => {
if (form.type === 10 && (!value || value <= 0)) {
return Promise.reject('减免金额必须大于0');
}
return Promise.resolve();
}
}
],
discount: [
{
required: true,
message: '请输入折扣率',
trigger: 'blur',
validator: (rule: any, value: any) => {
if (form.type === 20 && (!value || value <= 0 || value >= 100)) {
return Promise.reject('折扣率必须在1-99之间');
}
return Promise.resolve();
}
}
],
expireType: [
{
required: true,
message: '请选择到期类型',
trigger: 'change'
}
],
expireDay: [
{
required: true,
message: '请输入有效天数',
trigger: 'blur',
validator: (rule: any, value: any) => {
if (form.expireType === 10 && (!value || value <= 0)) {
return Promise.reject('有效天数必须大于0');
}
return Promise.resolve();
}
}
],
startTime: [
{
required: true,
message: '请选择开始时间',
trigger: 'change',
validator: (rule: any, value: any) => {
if (form.expireType === 20 && !value) {
return Promise.reject('请选择开始时间');
}
return Promise.resolve();
}
}
],
endTime: [
{
required: true,
message: '请选择结束时间',
trigger: 'change',
validator: (rule: any, value: any) => {
if (form.expireType === 20 && !value) {
return Promise.reject('请选择结束时间');
}
if (form.expireType === 20 && form.startTime && value && value <= form.startTime) {
return Promise.reject('结束时间必须晚于开始时间');
}
return Promise.resolve();
}
}
],
applyRange: [
{
required: true,
message: '请选择适用范围',
trigger: 'change'
}
]
});
});
const chooseImage = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.path,
status: 'done'
});
form.image = data.path;
};
const {resetFields} = useForm(form, rules);
const onDeleteItem = (index: number) => {
images.value.splice(index, 1);
form.image = '';
};
/* 优惠券类型变化处理 */
const onTypeChange = (value: number) => {
// 清空相关字段
if (value !== 10) {
form.reducePrice = undefined;
}
if (value !== 20) {
form.discount = undefined;
}
};
const { resetFields } = useForm(form, rules);
/* 到期类型变化处理 */
const onExpireTypeChange = (e: any) => {
const value = e.target.value;
// 清空相关字段
if (value !== 10) {
form.expireDay = undefined;
}
if (value !== 20) {
form.startTime = undefined;
form.endTime = undefined;
}
};
/* 保存编辑 */
const save = () => {
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
@@ -293,9 +458,42 @@
.validate()
.then(() => {
loading.value = true;
// 清理和准备提交数据
const formData = {
...form
};
// 清理不需要的字段
delete formData.shopCouponId;
delete formData.shopCouponName;
delete formData.comments;
// 确保数值类型正确
if (formData.type) formData.type = Number(formData.type);
if (formData.expireType) formData.expireType = Number(formData.expireType);
if (formData.applyRange) formData.applyRange = Number(formData.applyRange);
if (formData.status !== undefined) formData.status = Number(formData.status);
if (formData.enabled !== undefined) formData.enabled = Number(formData.enabled);
if (formData.deleted !== undefined) formData.deleted = Number(formData.deleted);
if (formData.isExpire !== undefined) formData.isExpire = Number(formData.isExpire);
if (formData.sortNumber !== undefined) formData.sortNumber = Number(formData.sortNumber);
if (formData.totalCount !== undefined) formData.totalCount = Number(formData.totalCount);
if (formData.limitPerUser !== undefined) formData.limitPerUser = Number(formData.limitPerUser);
if (formData.expireDay !== undefined) formData.expireDay = Number(formData.expireDay);
if (formData.reducePrice !== undefined) formData.reducePrice = Number(formData.reducePrice);
if (formData.discount !== undefined) formData.discount = Number(formData.discount);
if (formData.minPrice !== undefined) formData.minPrice = Number(formData.minPrice);
// 清理空值
Object.keys(formData).forEach(key => {
if (formData[key] === undefined || formData[key] === null || formData[key] === '') {
delete formData[key];
}
});
console.log('提交的数据:', formData);
const saveOrUpdate = isUpdate.value ? updateShopCoupon : addShopCoupon;
saveOrUpdate(formData)
.then((msg) => {
@@ -306,26 +504,21 @@
})
.catch((e) => {
loading.value = false;
console.error('保存失败:', e);
message.error(e.message);
});
})
.catch(() => {});
};
.catch(() => {
});
};
watch(
watch(
() => props.visible,
(visible) => {
if (visible) {
images.value = [];
if (props.data) {
assignObject(form, props.data);
if(props.data.image){
images.value.push({
uid: uuid(),
url: props.data.image,
status: 'done'
})
}
isUpdate.value = true;
} else {
isUpdate.value = false;
@@ -334,6 +527,6 @@
resetFields();
}
},
{ immediate: true }
);
{immediate: true}
);
</script>

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

@@ -3,12 +3,19 @@
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="shopCouponId"
row-key="id"
:columns="columns"
:datasource="datasource"
:customRow="customRow"
tool-class="ele-toolbar-form"
class="sys-org-table"
:scroll="{ x: 1400, y: 'calc(100vh - 320px)' }"
size="middle"
:pagination="{
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`
}"
>
<template #toolbar>
<search
@@ -20,22 +27,27 @@
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'image'">
<a-image :src="record.image" :width="50" />
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
<template v-if="column.key === 'couponStatus'">
<a-tag v-if="record.deleted === 1" color="red">已删除</a-tag>
<a-tag v-else-if="record.enabled === 0" color="orange">已禁用</a-tag>
<a-tag v-else-if="record.isExpire === 1" color="gray">已过期</a-tag>
<a-tag v-else-if="record.status === 1" color="red">隐藏</a-tag>
<a-tag v-else color="green">正常</a-tag>
</template>
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(record)">修改</a>
<a @click="openEdit(record)" class="ele-text-primary">
<EditOutlined /> 编辑
</a>
<a-divider type="vertical" />
<a-popconfirm
title="确定要删除此记录吗？"
title="确定要删除此优惠券吗？"
@confirm="remove(record)"
placement="topRight"
>
<a class="ele-text-danger">删除</a>
<a class="ele-text-danger">
<DeleteOutlined /> 删除
</a>
</a-popconfirm>
</a-space>
</template>
@@ -51,7 +63,7 @@
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import type { EleProTable } from 'ele-admin-pro';
import { toDateString } from 'ele-admin-pro';
import type {
@@ -100,157 +112,133 @@
// 表格列配置
const columns = ref<ColumnItem[]>([
{
title: 'id',
title: 'ID',
dataIndex: 'id',
key: 'id',
align: 'center',
width: 90,
width: 80,
fixed: 'left'
},
{
title: '优惠券名称',
dataIndex: 'name',
key: 'name',
align: 'center',
align: 'left',
width: 150,
ellipsis: true,
fixed: 'left'
},
{
title: '优惠券描述',
dataIndex: 'description',
key: 'description',
align: 'center',
},
{
title: '优惠券类型(10满减券 20折扣券 30免费劵)',
title: '类型',
dataIndex: 'type',
key: 'type',
align: 'center',
width: 100,
customRender: ({ text }) => {
const typeMap: Record<number, string> = {
10: '满减券',
20: '折扣券',
30: '免费券'
};
return typeMap[text] || text;
}
},
{
title: '满减券-减免金额',
dataIndex: 'reducePrice',
key: 'reducePrice',
title: '优惠金额',
key: 'couponValue',
align: 'center',
width: 120,
customRender: ({ record }) => {
if (record.type === 10) {
return `减${record.reducePrice}元`;
} else if (record.type === 20) {
return `${record.discount}折`;
}
return '免费';
}
},
{
title: '折扣券-折扣率(0-100)',
dataIndex: 'discount',
key: 'discount',
align: 'center',
},
{
title: '最低消费金额',
title: '最低消费',
dataIndex: 'minPrice',
key: 'minPrice',
align: 'center',
width: 100,
customRender: ({ text }) => text ? `满${text}元` : '无门槛'
},
{
title: '到期类型(10领取后生效 20固定时间)',
dataIndex: 'expireType',
key: 'expireType',
title: '有效期',
key: 'validity',
align: 'center',
width: 180,
customRender: ({ record }) => {
if (record.expireType === 10) {
return `领取后${record.expireDay}天`;
} else {
return `${toDateString(record.startTime, 'MM-dd')} 至 ${toDateString(record.endTime, 'MM-dd')}`;
}
}
},
{
title: '领取后生效-有效天数',
dataIndex: 'expireDay',
key: 'expireDay',
align: 'center',
},
{
title: '有效期开始时间',
dataIndex: 'startTime',
key: 'startTime',
align: 'center',
},
{
title: '有效期结束时间',
dataIndex: 'endTime',
key: 'endTime',
align: 'center',
},
{
title: '适用范围(10全部商品 20指定商品 30指定分类)',
title: '适用范围',
dataIndex: 'applyRange',
key: 'applyRange',
align: 'center',
width: 100,
customRender: ({ text }) => {
const rangeMap: Record<number, string> = {
10: '全部商品',
20: '指定商品',
30: '指定分类'
};
return rangeMap[text] || text;
}
},
{
title: '适用范围配置(json格式)',
dataIndex: 'applyRangeConfig',
key: 'applyRangeConfig',
title: '发放情况',
key: 'issueInfo',
align: 'center',
width: 120,
customRender: ({ record }) => {
const total = record.totalCount === -1 ? '无限' : record.totalCount;
return `${record.issuedCount}/${total}`;
}
},
{
title: '是否过期(0未过期 1已过期)',
dataIndex: 'isExpire',
key: 'isExpire',
title: '限领数量',
dataIndex: 'limitPerUser',
key: 'limitPerUser',
align: 'center',
width: 100,
customRender: ({ text }) => text === -1 ? '无限制' : `${text}张/人`
},
{
title: '排序(数字越小越靠前)',
title: '状态',
key: 'couponStatus',
align: 'center',
width: 100
},
{
title: '排序',
dataIndex: 'sortNumber',
key: 'sortNumber',
align: 'center',
},
{
title: '状态, 0正常, 1禁用',
dataIndex: 'status',
key: 'status',
align: 'center',
},
{
title: '是否删除, 0否, 1是',
dataIndex: 'deleted',
key: 'deleted',
align: 'center',
},
{
title: '创建用户ID',
dataIndex: 'userId',
key: 'userId',
align: 'center',
width: 80,
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
align: 'center',
width: 120,
sorter: true,
ellipsis: true,
customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
},
{
title: '修改时间',
dataIndex: 'updateTime',
key: 'updateTime',
align: 'center',
},
{
title: '发放总数量(-1表示无限制)',
dataIndex: 'totalCount',
key: 'totalCount',
align: 'center',
},
{
title: '已发放数量',
dataIndex: 'issuedCount',
key: 'issuedCount',
align: 'center',
},
{
title: '每人限领数量(-1表示无限制)',
dataIndex: 'limitPerUser',
key: 'limitPerUser',
align: 'center',
},
{
title: '是否启用(0禁用 1启用)',
dataIndex: 'enabled',
key: 'enabled',
align: 'center',
},
{
title: '操作',
key: 'action',
width: 180,
width: 150,
fixed: 'right',
align: 'center',
hideInSetting: true
@@ -277,7 +265,7 @@
/* 删除单个 */
const remove = (row: ShopCoupon) => {
const hide = message.loading('请求中..', 0);
removeShopCoupon(row.shopCouponId)
removeShopCoupon(row.id)
.then((msg) => {
hide();
message.success(msg);
@@ -302,7 +290,7 @@
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchShopCoupon(selection.value.map((d) => d.shopCouponId))
removeBatchShopCoupon(selection.value.map((d) => d.id))
.then((msg) => {
hide();
message.success(msg);
@@ -343,4 +331,47 @@
};
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.sys-org-table {
:deep(.ant-table) {
.ant-table-thead > tr > th {
background: #fafafa;
font-weight: 600;
color: #262626;
border-bottom: 2px solid #f0f0f0;
}
.ant-table-tbody > tr > td {
padding: 12px 8px;
border-bottom: 1px solid #f5f5f5;
}
.ant-table-tbody > tr:hover > td {
background: #f8f9ff;
}
.ant-tag {
margin: 0;
border-radius: 4px;
font-size: 12px;
padding: 2px 8px;
}
}
}
.ele-text-primary {
color: #1890ff;
&:hover {
color: #40a9ff;
}
}
.ele-text-danger {
color: #ff4d4f;
&:hover {
color: #ff7875;
}
}
</style>