feat: 完成营销中心优惠券页面与抽屉
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 53s
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 53s
This commit is contained in:
184
apps/web-antd/src/api/marketing/index.ts
Normal file
184
apps/web-antd/src/api/marketing/index.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* 文件职责：营销中心 API 与 DTO 定义。
|
||||
* 1. 维护优惠券列表、详情、保存、状态切换与删除契约。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 优惠券类型。 */
|
||||
export type MarketingCouponType = 'amount_off' | 'discount' | 'free_delivery';
|
||||
|
||||
/** 列表展示状态。 */
|
||||
export type MarketingCouponDisplayStatus =
|
||||
| 'disabled'
|
||||
| 'ended'
|
||||
| 'ongoing'
|
||||
| 'upcoming';
|
||||
|
||||
/** 编辑状态。 */
|
||||
export type MarketingCouponEditorStatus = 'disabled' | 'enabled';
|
||||
|
||||
/** 有效期类型。 */
|
||||
export type MarketingCouponValidityType = 'days' | 'fixed';
|
||||
|
||||
/** 适用渠道。 */
|
||||
export type MarketingCouponChannel = 'delivery' | 'dine_in' | 'pickup';
|
||||
|
||||
/** 门店范围模式。 */
|
||||
export type MarketingCouponStoreScopeMode = 'all' | 'stores';
|
||||
|
||||
/** 优惠券列表查询。 */
|
||||
export interface MarketingCouponListQuery {
|
||||
couponType?: '' | MarketingCouponType;
|
||||
keyword?: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
status?: '' | MarketingCouponDisplayStatus;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 优惠券详情查询。 */
|
||||
export interface MarketingCouponDetailQuery {
|
||||
couponId: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 保存优惠券请求。 */
|
||||
export interface SaveMarketingCouponDto {
|
||||
channels: MarketingCouponChannel[];
|
||||
couponType: MarketingCouponType;
|
||||
id?: string;
|
||||
minimumSpend: null | number;
|
||||
name: string;
|
||||
perUserLimit: null | number;
|
||||
relativeValidDays: null | number;
|
||||
status: MarketingCouponEditorStatus;
|
||||
storeId: string;
|
||||
storeIds?: string[];
|
||||
storeScopeMode: MarketingCouponStoreScopeMode;
|
||||
totalQuantity: number;
|
||||
validFrom: null | string;
|
||||
validTo: null | string;
|
||||
validityType: MarketingCouponValidityType;
|
||||
value: number;
|
||||
}
|
||||
|
||||
/** 修改状态请求。 */
|
||||
export interface ChangeMarketingCouponStatusDto {
|
||||
couponId: string;
|
||||
status: MarketingCouponEditorStatus;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 删除请求。 */
|
||||
export interface DeleteMarketingCouponDto {
|
||||
couponId: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 统计数据。 */
|
||||
export interface MarketingCouponStatsDto {
|
||||
claimedCount: number;
|
||||
ongoingCount: number;
|
||||
redeemRate: number;
|
||||
redeemedCount: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 列表项。 */
|
||||
export interface MarketingCouponListItemDto {
|
||||
channels: MarketingCouponChannel[];
|
||||
claimedQuantity: number;
|
||||
couponType: MarketingCouponType;
|
||||
displayStatus: MarketingCouponDisplayStatus;
|
||||
id: string;
|
||||
isDimmed: boolean;
|
||||
minimumSpend: null | number;
|
||||
name: string;
|
||||
perUserLimit: null | number;
|
||||
redeemedQuantity: number;
|
||||
relativeValidDays: null | number;
|
||||
storeIds: string[];
|
||||
storeScopeMode: MarketingCouponStoreScopeMode;
|
||||
totalQuantity: number;
|
||||
updatedAt: string;
|
||||
validFrom: null | string;
|
||||
validTo: null | string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
/** 列表结果。 */
|
||||
export interface MarketingCouponListResultDto {
|
||||
items: MarketingCouponListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
stats: MarketingCouponStatsDto;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 详情数据。 */
|
||||
export interface MarketingCouponDetailDto {
|
||||
channels: MarketingCouponChannel[];
|
||||
claimedQuantity: number;
|
||||
couponType: MarketingCouponType;
|
||||
id: string;
|
||||
minimumSpend: null | number;
|
||||
name: string;
|
||||
perUserLimit: null | number;
|
||||
relativeValidDays: null | number;
|
||||
status: MarketingCouponEditorStatus;
|
||||
storeIds: string[];
|
||||
storeScopeMode: MarketingCouponStoreScopeMode;
|
||||
totalQuantity: number;
|
||||
updatedAt: string;
|
||||
validFrom: null | string;
|
||||
validTo: null | string;
|
||||
validityType: MarketingCouponValidityType;
|
||||
value: number;
|
||||
}
|
||||
|
||||
/** 获取优惠券列表。 */
|
||||
export async function getMarketingCouponListApi(
|
||||
params: MarketingCouponListQuery,
|
||||
) {
|
||||
return requestClient.get<MarketingCouponListResultDto>(
|
||||
'/marketing/coupon/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 获取优惠券详情。 */
|
||||
export async function getMarketingCouponDetailApi(
|
||||
params: MarketingCouponDetailQuery,
|
||||
) {
|
||||
return requestClient.get<MarketingCouponDetailDto>(
|
||||
'/marketing/coupon/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 保存优惠券。 */
|
||||
export async function saveMarketingCouponApi(data: SaveMarketingCouponDto) {
|
||||
return requestClient.post<MarketingCouponDetailDto>(
|
||||
'/marketing/coupon/save',
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
/** 修改优惠券状态。 */
|
||||
export async function changeMarketingCouponStatusApi(
|
||||
data: ChangeMarketingCouponStatusDto,
|
||||
) {
|
||||
return requestClient.post<MarketingCouponDetailDto>(
|
||||
'/marketing/coupon/status',
|
||||
data,
|
||||
);
|
||||
}
|
||||
|
||||
/** 删除优惠券。 */
|
||||
export async function deleteMarketingCouponApi(data: DeleteMarketingCouponDto) {
|
||||
return requestClient.post('/marketing/coupon/delete', data);
|
||||
}
|
||||
@@ -0,0 +1,389 @@
|
||||
<script setup lang="ts">
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type { CouponEditorForm } from '../types';
|
||||
|
||||
import type {
|
||||
MarketingCouponChannel,
|
||||
MarketingCouponStoreScopeMode,
|
||||
MarketingCouponType,
|
||||
MarketingCouponValidityType,
|
||||
} from '#/api/marketing';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
DatePicker,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Radio,
|
||||
Select,
|
||||
Spin,
|
||||
Switch,
|
||||
} from 'ant-design-vue';
|
||||
/**
|
||||
* 文件职责：优惠券编辑抽屉。
|
||||
* 1. 承载券基础信息、发放规则与适用范围配置。
|
||||
* 2. 对外抛出字段更新与保存事件。
|
||||
*/
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
COUPON_CHANNEL_OPTIONS,
|
||||
COUPON_EDITOR_TYPE_OPTIONS,
|
||||
COUPON_STORE_SCOPE_OPTIONS,
|
||||
COUPON_VALIDITY_OPTIONS,
|
||||
} from '../composables/coupon-page/constants';
|
||||
|
||||
defineProps<{
|
||||
form: CouponEditorForm;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
storeOptions: Array<{ label: string; value: string }>;
|
||||
submitText: string;
|
||||
submitting: boolean;
|
||||
title: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'setChannels', value: MarketingCouponChannel[]): void;
|
||||
(event: 'setCouponType', value: MarketingCouponType): void;
|
||||
(event: 'setMinimumSpend', value: null | number): void;
|
||||
(event: 'setName', value: string): void;
|
||||
(event: 'setPerUserLimit', value: null | number): void;
|
||||
(event: 'setRelativeValidDays', value: null | number): void;
|
||||
(event: 'setStatus', value: boolean): void;
|
||||
(event: 'setStoreIds', value: string[]): void;
|
||||
(event: 'setStoreScopeMode', value: MarketingCouponStoreScopeMode): void;
|
||||
(event: 'setTotalQuantity', value: null | number): void;
|
||||
(event: 'setValidDateRange', value: [Dayjs, Dayjs] | null): void;
|
||||
(event: 'setValidityType', value: MarketingCouponValidityType): void;
|
||||
(event: 'setValue', value: null | number): void;
|
||||
(event: 'submit'): void;
|
||||
}>();
|
||||
|
||||
function onChannelsChange(value: Array<MarketingCouponChannel | string>) {
|
||||
emit(
|
||||
'setChannels',
|
||||
value.filter(
|
||||
(item): item is MarketingCouponChannel =>
|
||||
item === 'delivery' || item === 'pickup' || item === 'dine_in',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function onStoreIdsChange(value: Array<number | string>) {
|
||||
emit('setStoreIds', value.map(String));
|
||||
}
|
||||
|
||||
function onCouponTypeChange(value: unknown) {
|
||||
if (
|
||||
value === 'amount_off' ||
|
||||
value === 'discount' ||
|
||||
value === 'free_delivery'
|
||||
) {
|
||||
emit('setCouponType', value);
|
||||
}
|
||||
}
|
||||
|
||||
function onValidityTypeChange(value: unknown) {
|
||||
if (value === 'fixed' || value === 'days') {
|
||||
emit('setValidityType', value);
|
||||
}
|
||||
}
|
||||
|
||||
function onStoreScopeModeChange(value: unknown) {
|
||||
if (value === 'all' || value === 'stores') {
|
||||
emit('setStoreScopeMode', value);
|
||||
}
|
||||
}
|
||||
|
||||
function onDateRangeChange(value: [Dayjs, Dayjs] | [string, string] | null) {
|
||||
if (!value) {
|
||||
emit('setValidDateRange', null);
|
||||
return;
|
||||
}
|
||||
|
||||
const [start, end] = value;
|
||||
if (typeof start === 'string' || typeof end === 'string') {
|
||||
emit('setValidDateRange', [dayjs(String(start)), dayjs(String(end))]);
|
||||
return;
|
||||
}
|
||||
|
||||
emit('setValidDateRange', value as [Dayjs, Dayjs]);
|
||||
}
|
||||
|
||||
function onNameChange(value: string) {
|
||||
emit('setName', String(value ?? ''));
|
||||
}
|
||||
|
||||
function onMinimumSpendChange(value: null | number | string) {
|
||||
emit('setMinimumSpend', parseNullableNumber(value));
|
||||
}
|
||||
|
||||
function onValueChange(value: null | number | string) {
|
||||
emit('setValue', parseNullableNumber(value));
|
||||
}
|
||||
|
||||
function onTotalQuantityChange(value: null | number | string) {
|
||||
emit('setTotalQuantity', parseNullableNumber(value));
|
||||
}
|
||||
|
||||
function onPerUserLimitChange(value: null | number | string) {
|
||||
emit('setPerUserLimit', parseNullableNumber(value));
|
||||
}
|
||||
|
||||
function onRelativeValidDaysChange(value: null | number | string) {
|
||||
emit('setRelativeValidDays', parseNullableNumber(value));
|
||||
}
|
||||
|
||||
function onChannelsGroupChange(value: unknown[]) {
|
||||
onChannelsChange((value ?? []).map(String));
|
||||
}
|
||||
|
||||
function onStoreIdsSelectChange(value: unknown) {
|
||||
const values = Array.isArray(value) ? value : [];
|
||||
onStoreIdsChange(values.map(String));
|
||||
}
|
||||
|
||||
function onStatusChange(value: unknown) {
|
||||
emit('setStatus', value === true || value === 'true');
|
||||
}
|
||||
|
||||
function parseNullableNumber(value: null | number | string) {
|
||||
if (value === null || value === undefined || value === '') {
|
||||
return null;
|
||||
}
|
||||
const numeric = Number(value);
|
||||
return Number.isNaN(numeric) ? null : numeric;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="open"
|
||||
:title="title"
|
||||
width="560"
|
||||
:destroy-on-close="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="loading">
|
||||
<Form layout="vertical" class="mcp-editor-form">
|
||||
<Form.Item label="券名称" required>
|
||||
<Input
|
||||
:value="form.name"
|
||||
:maxlength="64"
|
||||
placeholder="如：新用户满减券"
|
||||
@update:value="onNameChange"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="券类型" required>
|
||||
<Radio.Group
|
||||
:value="form.couponType"
|
||||
button-style="solid"
|
||||
@update:value="onCouponTypeChange"
|
||||
>
|
||||
<Radio.Button
|
||||
v-for="item in COUPON_EDITOR_TYPE_OPTIONS"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
v-if="form.couponType === 'amount_off'"
|
||||
label="面额设置"
|
||||
required
|
||||
>
|
||||
<div class="mcp-inline-fields">
|
||||
<span>满</span>
|
||||
<InputNumber
|
||||
:value="form.minimumSpend ?? undefined"
|
||||
:min="0.01"
|
||||
:precision="2"
|
||||
placeholder="如：50"
|
||||
@update:value="onMinimumSpendChange"
|
||||
/>
|
||||
<span>元减</span>
|
||||
<InputNumber
|
||||
:value="form.value ?? undefined"
|
||||
:min="0.01"
|
||||
:precision="2"
|
||||
placeholder="如：15"
|
||||
@update:value="onValueChange"
|
||||
/>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
v-if="form.couponType === 'discount'"
|
||||
label="折扣力度"
|
||||
required
|
||||
>
|
||||
<div class="mcp-inline-fields">
|
||||
<InputNumber
|
||||
:value="form.value ?? undefined"
|
||||
:min="0.01"
|
||||
:max="9.99"
|
||||
:precision="2"
|
||||
placeholder="如：8"
|
||||
@update:value="onValueChange"
|
||||
/>
|
||||
<span>折</span>
|
||||
</div>
|
||||
<div class="mcp-field-hint">输入 8 表示打 8 折，即优惠 20%</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
v-if="form.couponType === 'free_delivery'"
|
||||
label="面额设置"
|
||||
class="mcp-form-muted"
|
||||
>
|
||||
免配送费券无需设置面额
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="发放总量" required>
|
||||
<InputNumber
|
||||
:value="form.totalQuantity"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
class="mcp-input-wide"
|
||||
placeholder="如：1000"
|
||||
@update:value="onTotalQuantityChange"
|
||||
/>
|
||||
<div class="mcp-field-hint">设置后不可减少，可增加</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="每人限领">
|
||||
<InputNumber
|
||||
:value="form.perUserLimit ?? undefined"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
class="mcp-input-wide"
|
||||
placeholder="如：1"
|
||||
@update:value="onPerUserLimitChange"
|
||||
/>
|
||||
<div class="mcp-field-hint">不填则不限制</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="有效期类型" required>
|
||||
<Radio.Group
|
||||
:value="form.validityType"
|
||||
button-style="solid"
|
||||
@update:value="onValidityTypeChange"
|
||||
>
|
||||
<Radio.Button
|
||||
v-for="item in COUPON_VALIDITY_OPTIONS"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
v-if="form.validityType === 'fixed'"
|
||||
label="有效时间范围"
|
||||
required
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
:value="form.validDateRange ?? undefined"
|
||||
format="YYYY-MM-DD"
|
||||
class="mcp-range-picker"
|
||||
@update:value="onDateRangeChange"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item v-else label="领取后有效天数" required>
|
||||
<div class="mcp-inline-fields">
|
||||
<span>领取后</span>
|
||||
<InputNumber
|
||||
:value="form.relativeValidDays ?? undefined"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
placeholder="如：7"
|
||||
@update:value="onRelativeValidDaysChange"
|
||||
/>
|
||||
<span>天内有效</span>
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item v-if="form.couponType === 'discount'" label="使用门槛">
|
||||
<div class="mcp-inline-fields">
|
||||
<span>订单满</span>
|
||||
<InputNumber
|
||||
:value="form.minimumSpend ?? undefined"
|
||||
:min="0.01"
|
||||
:precision="2"
|
||||
placeholder="如：50"
|
||||
@update:value="onMinimumSpendChange"
|
||||
/>
|
||||
<span>元可用</span>
|
||||
</div>
|
||||
<div class="mcp-field-hint">不填则无门槛</div>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="适用渠道" required>
|
||||
<Checkbox.Group
|
||||
:value="form.channels"
|
||||
:options="COUPON_CHANNEL_OPTIONS"
|
||||
@change="onChannelsGroupChange"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="适用门店" required>
|
||||
<Radio.Group
|
||||
:value="form.storeScopeMode"
|
||||
@update:value="onStoreScopeModeChange"
|
||||
>
|
||||
<Radio
|
||||
v-for="item in COUPON_STORE_SCOPE_OPTIONS"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Radio>
|
||||
</Radio.Group>
|
||||
|
||||
<Select
|
||||
v-if="form.storeScopeMode === 'stores'"
|
||||
mode="multiple"
|
||||
:value="form.storeIds"
|
||||
:options="storeOptions"
|
||||
class="mcp-store-multi"
|
||||
placeholder="请选择适用门店"
|
||||
@update:value="onStoreIdsSelectChange"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="启用状态">
|
||||
<div class="mcp-switch-row">
|
||||
<Switch
|
||||
:checked="form.status === 'enabled'"
|
||||
@update:checked="onStatusChange"
|
||||
/>
|
||||
<span>{{ form.status === 'enabled' ? '启用' : '停用' }}</span>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<div class="mcp-drawer-footer">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button type="primary" :loading="submitting" @click="emit('submit')">
|
||||
{{ submitText }}
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：优惠券统计卡片。
|
||||
* 1. 展示总数、进行中、已领取、已核销与核销率。
|
||||
*/
|
||||
import type { CouponStatsViewModel } from '../types';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { formatInteger } from '../composables/coupon-page/helpers';
|
||||
|
||||
const props = defineProps<{
|
||||
stats: CouponStatsViewModel;
|
||||
}>();
|
||||
|
||||
const redeemText = computed(
|
||||
() =>
|
||||
`${formatInteger(props.stats.redeemedCount)}（核销率 ${props.stats.redeemRate.toFixed(1)}%）`,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mcp-stats">
|
||||
<div class="mcp-stat-card">
|
||||
<span class="mcp-stat-icon mcp-stat-blue">
|
||||
<IconifyIcon icon="lucide:ticket" />
|
||||
</span>
|
||||
<div class="mcp-stat-main">
|
||||
<div class="mcp-stat-value">
|
||||
{{ formatInteger(stats.totalCount) }}
|
||||
</div>
|
||||
<div class="mcp-stat-label">优惠券总数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mcp-stat-card">
|
||||
<span class="mcp-stat-icon mcp-stat-green">
|
||||
<IconifyIcon icon="lucide:play-circle" />
|
||||
</span>
|
||||
<div class="mcp-stat-main">
|
||||
<div class="mcp-stat-value">
|
||||
{{ formatInteger(stats.ongoingCount) }}
|
||||
</div>
|
||||
<div class="mcp-stat-label">进行中</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mcp-stat-card">
|
||||
<span class="mcp-stat-icon mcp-stat-orange">
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
</span>
|
||||
<div class="mcp-stat-main">
|
||||
<div class="mcp-stat-value">
|
||||
{{ formatInteger(stats.claimedCount) }}
|
||||
</div>
|
||||
<div class="mcp-stat-label">已领取（张）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mcp-stat-card">
|
||||
<span class="mcp-stat-icon mcp-stat-purple">
|
||||
<IconifyIcon icon="lucide:check-circle" />
|
||||
</span>
|
||||
<div class="mcp-stat-main">
|
||||
<div class="mcp-stat-value">
|
||||
{{ formatInteger(stats.redeemedCount) }}
|
||||
</div>
|
||||
<div class="mcp-stat-label">{{ redeemText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,147 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：优惠券卡片项。
|
||||
* 1. 还原券面、规则、进度与状态操作布局。
|
||||
*/
|
||||
import type { CouponCardViewModel } from '../types';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
COUPON_STATUS_TAG_CLASS_MAP,
|
||||
COUPON_STATUS_TEXT_MAP,
|
||||
} from '../composables/coupon-page/constants';
|
||||
import {
|
||||
formatInteger,
|
||||
resolveClaimedProgressPercent,
|
||||
resolveCouponFaceConditionText,
|
||||
resolveCouponFaceValueText,
|
||||
resolveCouponRuleText,
|
||||
resolveCouponTypeClass,
|
||||
resolveCouponTypeLabel,
|
||||
resolveCouponValidityText,
|
||||
resolveProgressClass,
|
||||
} from '../composables/coupon-page/helpers';
|
||||
|
||||
defineProps<{
|
||||
item: CouponCardViewModel;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
disable: [item: CouponCardViewModel];
|
||||
edit: [item: CouponCardViewModel];
|
||||
enable: [item: CouponCardViewModel];
|
||||
remove: [item: CouponCardViewModel];
|
||||
view: [item: CouponCardViewModel];
|
||||
}>();
|
||||
|
||||
function resolveClaimedText(item: CouponCardViewModel) {
|
||||
return `已领 ${formatInteger(item.claimedQuantity)}/${formatInteger(item.totalQuantity)}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mcp-coupon" :class="{ 'mcp-dimmed': item.isDimmed }">
|
||||
<div class="mcp-left" :class="resolveCouponTypeClass(item.couponType)">
|
||||
<div class="mcp-face-value">
|
||||
{{ resolveCouponFaceValueText(item) }}
|
||||
</div>
|
||||
<div class="mcp-face-cond">
|
||||
{{ resolveCouponFaceConditionText(item) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mcp-right">
|
||||
<div class="mcp-title-row">
|
||||
<span class="mcp-name">{{ item.name }}</span>
|
||||
<span class="mcp-type-pill">
|
||||
{{ resolveCouponTypeLabel(item.couponType) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mcp-validity">
|
||||
<IconifyIcon icon="lucide:calendar" />
|
||||
<span>{{ resolveCouponValidityText(item) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mcp-rules">{{ resolveCouponRuleText(item) }}</div>
|
||||
|
||||
<div class="mcp-progress-row">
|
||||
<span>{{ resolveClaimedText(item) }}</span>
|
||||
<div class="mcp-progress-wrap">
|
||||
<div class="mcp-progress-bar">
|
||||
<span
|
||||
class="mcp-progress-fill"
|
||||
:class="resolveProgressClass(item.couponType)"
|
||||
:style="{
|
||||
width: `${resolveClaimedProgressPercent(item.claimedQuantity, item.totalQuantity)}%`,
|
||||
}"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<span>已用 {{ formatInteger(item.redeemedQuantity) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mcp-bottom">
|
||||
<span
|
||||
class="mcp-status-tag"
|
||||
:class="COUPON_STATUS_TAG_CLASS_MAP[item.displayStatus]"
|
||||
>
|
||||
{{ COUPON_STATUS_TEXT_MAP[item.displayStatus] }}
|
||||
</span>
|
||||
|
||||
<div class="mcp-actions">
|
||||
<template v-if="item.displayStatus === 'ended'">
|
||||
<button type="button" class="g-action" @click="emit('view', item)">
|
||||
查看
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="g-action g-action-danger"
|
||||
@click="emit('remove', item)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.displayStatus === 'disabled'">
|
||||
<button
|
||||
type="button"
|
||||
class="g-action"
|
||||
@click="emit('enable', item)"
|
||||
>
|
||||
启用
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="g-action g-action-danger"
|
||||
@click="emit('remove', item)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<button type="button" class="g-action" @click="emit('edit', item)">
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="g-action"
|
||||
@click="emit('disable', item)"
|
||||
>
|
||||
停用
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="g-action g-action-danger"
|
||||
@click="emit('remove', item)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { CouponCardViewModel } from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券卡片行操作。
|
||||
* 1. 封装启停与删除动作。
|
||||
* 2. 统一确认弹窗与成功提示。
|
||||
*/
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
changeMarketingCouponStatusApi,
|
||||
deleteMarketingCouponApi,
|
||||
} from '#/api/marketing';
|
||||
|
||||
interface CreateCardActionsOptions {
|
||||
loadCoupons: () => Promise<void>;
|
||||
selectedStoreId: Ref<string>;
|
||||
}
|
||||
|
||||
export function createCardActions(options: CreateCardActionsOptions) {
|
||||
async function enableCoupon(item: CouponCardViewModel) {
|
||||
await updateStatus(item, 'enabled', '优惠券已启用');
|
||||
}
|
||||
|
||||
async function disableCoupon(item: CouponCardViewModel) {
|
||||
await updateStatus(item, 'disabled', '优惠券已停用');
|
||||
}
|
||||
|
||||
async function updateStatus(
|
||||
item: CouponCardViewModel,
|
||||
status: 'disabled' | 'enabled',
|
||||
successMessage: string,
|
||||
) {
|
||||
if (!options.selectedStoreId.value) return;
|
||||
|
||||
try {
|
||||
await changeMarketingCouponStatusApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
couponId: item.id,
|
||||
status,
|
||||
});
|
||||
message.success(successMessage);
|
||||
await options.loadCoupons();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function removeCoupon(item: CouponCardViewModel) {
|
||||
if (!options.selectedStoreId.value) return;
|
||||
|
||||
Modal.confirm({
|
||||
title: `确认删除优惠券「${item.name}」吗？`,
|
||||
okText: '确认删除',
|
||||
cancelText: '取消',
|
||||
async onOk() {
|
||||
await deleteMarketingCouponApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
couponId: item.id,
|
||||
});
|
||||
message.success('优惠券已删除');
|
||||
await options.loadCoupons();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
disableCoupon,
|
||||
enableCoupon,
|
||||
removeCoupon,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import type {
|
||||
MarketingCouponChannel,
|
||||
MarketingCouponDisplayStatus,
|
||||
MarketingCouponStoreScopeMode,
|
||||
MarketingCouponType,
|
||||
} from '#/api/marketing';
|
||||
import type {
|
||||
CouponEditorForm,
|
||||
CouponFilterForm,
|
||||
} from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券页面常量定义与默认表单构造。
|
||||
*/
|
||||
|
||||
/** 列表状态筛选项。 */
|
||||
export const COUPON_STATUS_FILTER_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: '' | MarketingCouponDisplayStatus;
|
||||
}> = [
|
||||
{ label: '全部状态', value: '' },
|
||||
{ label: '进行中', value: 'ongoing' },
|
||||
{ label: '未开始', value: 'upcoming' },
|
||||
{ label: '已结束', value: 'ended' },
|
||||
{ label: '已停用', value: 'disabled' },
|
||||
];
|
||||
|
||||
/** 列表类型筛选项。 */
|
||||
export const COUPON_TYPE_FILTER_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: '' | MarketingCouponType;
|
||||
}> = [
|
||||
{ label: '全部类型', value: '' },
|
||||
{ label: '满减券', value: 'amount_off' },
|
||||
{ label: '折扣券', value: 'discount' },
|
||||
{ label: '免配送费券', value: 'free_delivery' },
|
||||
];
|
||||
|
||||
/** 编辑态券类型项。 */
|
||||
export const COUPON_EDITOR_TYPE_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MarketingCouponType;
|
||||
}> = [
|
||||
{ label: '满减券', value: 'amount_off' },
|
||||
{ label: '折扣券', value: 'discount' },
|
||||
{ label: '免配送费券', value: 'free_delivery' },
|
||||
];
|
||||
|
||||
/** 有效期类型项。 */
|
||||
export const COUPON_VALIDITY_OPTIONS = [
|
||||
{ label: '固定时间', value: 'fixed' },
|
||||
{ label: '领取后N天', value: 'days' },
|
||||
] as const;
|
||||
|
||||
/** 渠道选项。 */
|
||||
export const COUPON_CHANNEL_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MarketingCouponChannel;
|
||||
}> = [
|
||||
{ label: '外卖', value: 'delivery' },
|
||||
{ label: '自提', value: 'pickup' },
|
||||
{ label: '堂食', value: 'dine_in' },
|
||||
];
|
||||
|
||||
/** 门店范围选项。 */
|
||||
export const COUPON_STORE_SCOPE_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: MarketingCouponStoreScopeMode;
|
||||
}> = [
|
||||
{ label: '全部门店', value: 'all' },
|
||||
{ label: '指定门店', value: 'stores' },
|
||||
];
|
||||
|
||||
/** 列表状态文本。 */
|
||||
export const COUPON_STATUS_TEXT_MAP: Record<
|
||||
MarketingCouponDisplayStatus,
|
||||
string
|
||||
> = {
|
||||
ongoing: '进行中',
|
||||
upcoming: '未开始',
|
||||
ended: '已结束',
|
||||
disabled: '已停用',
|
||||
};
|
||||
|
||||
/** 列表状态徽标样式。 */
|
||||
export const COUPON_STATUS_TAG_CLASS_MAP: Record<
|
||||
MarketingCouponDisplayStatus,
|
||||
string
|
||||
> = {
|
||||
ongoing: 'mcp-status-ongoing',
|
||||
upcoming: 'mcp-status-upcoming',
|
||||
ended: 'mcp-status-ended',
|
||||
disabled: 'mcp-status-disabled',
|
||||
};
|
||||
|
||||
/** 渠道文本映射。 */
|
||||
export const COUPON_CHANNEL_TEXT_MAP: Record<MarketingCouponChannel, string> = {
|
||||
delivery: '外卖',
|
||||
pickup: '自提',
|
||||
dine_in: '堂食',
|
||||
};
|
||||
|
||||
/** 构建默认筛选表单。 */
|
||||
export function createDefaultCouponFilterForm(): CouponFilterForm {
|
||||
return {
|
||||
status: '',
|
||||
couponType: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 构建默认编辑表单。 */
|
||||
export function createDefaultCouponEditorForm(): CouponEditorForm {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
couponType: 'amount_off',
|
||||
value: null,
|
||||
minimumSpend: null,
|
||||
totalQuantity: 1000,
|
||||
perUserLimit: 1,
|
||||
validityType: 'fixed',
|
||||
validDateRange: null,
|
||||
relativeValidDays: 7,
|
||||
channels: ['delivery', 'pickup', 'dine_in'],
|
||||
storeScopeMode: 'all',
|
||||
storeIds: [],
|
||||
status: 'enabled',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type { MarketingCouponStatsDto } from '#/api/marketing';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
import type {
|
||||
CouponCardViewModel,
|
||||
CouponFilterForm,
|
||||
} from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券页面数据读取动作。
|
||||
* 1. 加载门店列表与优惠券分页列表。
|
||||
* 2. 维护分页、统计和加载态。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { getMarketingCouponListApi } from '#/api/marketing';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
interface CreateDataActionsOptions {
|
||||
filterForm: CouponFilterForm;
|
||||
isLoading: Ref<boolean>;
|
||||
isStoreLoading: Ref<boolean>;
|
||||
keyword: Ref<string>;
|
||||
page: Ref<number>;
|
||||
pageSize: Ref<number>;
|
||||
rows: Ref<CouponCardViewModel[]>;
|
||||
selectedStoreId: Ref<string>;
|
||||
stats: Ref<MarketingCouponStatsDto>;
|
||||
stores: Ref<StoreListItemDto[]>;
|
||||
total: Ref<number>;
|
||||
}
|
||||
|
||||
export function createDataActions(options: CreateDataActionsOptions) {
|
||||
async function loadStores() {
|
||||
options.isStoreLoading.value = true;
|
||||
try {
|
||||
const result = await getStoreListApi({
|
||||
page: 1,
|
||||
pageSize: 200,
|
||||
});
|
||||
options.stores.value = result.items ?? [];
|
||||
|
||||
if (options.stores.value.length === 0) {
|
||||
options.selectedStoreId.value = '';
|
||||
options.rows.value = [];
|
||||
options.total.value = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
const hasSelected = options.stores.value.some(
|
||||
(item) => item.id === options.selectedStoreId.value,
|
||||
);
|
||||
if (!hasSelected) {
|
||||
options.selectedStoreId.value = options.stores.value[0]?.id ?? '';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
message.error('加载门店失败');
|
||||
} finally {
|
||||
options.isStoreLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCoupons() {
|
||||
if (!options.selectedStoreId.value) {
|
||||
options.rows.value = [];
|
||||
options.total.value = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
options.isLoading.value = true;
|
||||
try {
|
||||
const result = await getMarketingCouponListApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
status: options.filterForm.status,
|
||||
couponType: options.filterForm.couponType,
|
||||
keyword: options.keyword.value.trim() || undefined,
|
||||
page: options.page.value,
|
||||
pageSize: options.pageSize.value,
|
||||
});
|
||||
|
||||
options.rows.value = result.items ?? [];
|
||||
options.total.value = result.total;
|
||||
options.page.value = result.page;
|
||||
options.pageSize.value = result.pageSize;
|
||||
options.stats.value = result.stats;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
options.rows.value = [];
|
||||
options.total.value = 0;
|
||||
options.stats.value = createEmptyStats();
|
||||
message.error('加载优惠券失败');
|
||||
} finally {
|
||||
options.isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loadCoupons,
|
||||
loadStores,
|
||||
};
|
||||
}
|
||||
|
||||
export function createEmptyStats(): MarketingCouponStatsDto {
|
||||
return {
|
||||
totalCount: 0,
|
||||
ongoingCount: 0,
|
||||
claimedCount: 0,
|
||||
redeemedCount: 0,
|
||||
redeemRate: 0,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
import type {
|
||||
MarketingCouponChannel,
|
||||
MarketingCouponStoreScopeMode,
|
||||
MarketingCouponType,
|
||||
MarketingCouponValidityType,
|
||||
} from '#/api/marketing';
|
||||
import type { CouponEditorForm } from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券编辑抽屉动作。
|
||||
* 1. 管理新增/编辑抽屉与字段更新。
|
||||
* 2. 负责详情加载、表单校验与保存提交。
|
||||
*/
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getMarketingCouponDetailApi,
|
||||
saveMarketingCouponApi,
|
||||
} from '#/api/marketing';
|
||||
|
||||
import { createDefaultCouponEditorForm } from './constants';
|
||||
import { buildSaveCouponPayload, mapDetailToEditorForm } from './helpers';
|
||||
|
||||
interface CreateDrawerActionsOptions {
|
||||
form: CouponEditorForm;
|
||||
isDrawerLoading: Ref<boolean>;
|
||||
isDrawerOpen: Ref<boolean>;
|
||||
isDrawerSubmitting: Ref<boolean>;
|
||||
loadCoupons: () => Promise<void>;
|
||||
selectedStoreId: Ref<string>;
|
||||
}
|
||||
|
||||
export function createDrawerActions(options: CreateDrawerActionsOptions) {
|
||||
const drawerMode = ref<'create' | 'edit'>('create');
|
||||
|
||||
function setDrawerOpen(value: boolean) {
|
||||
options.isDrawerOpen.value = value;
|
||||
}
|
||||
|
||||
function applyForm(next: CouponEditorForm) {
|
||||
options.form.id = next.id;
|
||||
options.form.name = next.name;
|
||||
options.form.couponType = next.couponType;
|
||||
options.form.value = next.value;
|
||||
options.form.minimumSpend = next.minimumSpend;
|
||||
options.form.totalQuantity = next.totalQuantity;
|
||||
options.form.perUserLimit = next.perUserLimit;
|
||||
options.form.validityType = next.validityType;
|
||||
options.form.validDateRange = next.validDateRange;
|
||||
options.form.relativeValidDays = next.relativeValidDays;
|
||||
options.form.channels = [...next.channels];
|
||||
options.form.storeScopeMode = next.storeScopeMode;
|
||||
options.form.storeIds = [...next.storeIds];
|
||||
options.form.status = next.status;
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
applyForm(createDefaultCouponEditorForm());
|
||||
}
|
||||
|
||||
function setFormName(value: string) {
|
||||
options.form.name = value;
|
||||
}
|
||||
|
||||
function setFormCouponType(value: MarketingCouponType) {
|
||||
options.form.couponType = value;
|
||||
if (value === 'free_delivery') {
|
||||
options.form.value = null;
|
||||
options.form.minimumSpend = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setFormValue(value: null | number) {
|
||||
options.form.value = value;
|
||||
}
|
||||
|
||||
function setFormMinimumSpend(value: null | number) {
|
||||
options.form.minimumSpend = value;
|
||||
}
|
||||
|
||||
function setFormTotalQuantity(value: null | number) {
|
||||
options.form.totalQuantity = value ? Math.max(0, Math.floor(value)) : 0;
|
||||
}
|
||||
|
||||
function setFormPerUserLimit(value: null | number) {
|
||||
if (value === null) {
|
||||
options.form.perUserLimit = null;
|
||||
return;
|
||||
}
|
||||
|
||||
options.form.perUserLimit = Math.max(0, Math.floor(value));
|
||||
}
|
||||
|
||||
function setFormValidityType(value: MarketingCouponValidityType) {
|
||||
options.form.validityType = value;
|
||||
if (value === 'fixed') {
|
||||
options.form.relativeValidDays = options.form.relativeValidDays || 7;
|
||||
return;
|
||||
}
|
||||
|
||||
options.form.validDateRange = null;
|
||||
}
|
||||
|
||||
function setFormValidDateRange(value: CouponEditorForm['validDateRange']) {
|
||||
options.form.validDateRange = value;
|
||||
}
|
||||
|
||||
function setFormRelativeValidDays(value: null | number) {
|
||||
options.form.relativeValidDays = value ? Math.max(0, Math.floor(value)) : 0;
|
||||
}
|
||||
|
||||
function setFormChannels(value: MarketingCouponChannel[]) {
|
||||
options.form.channels = [...value];
|
||||
}
|
||||
|
||||
function setFormStoreScopeMode(value: MarketingCouponStoreScopeMode) {
|
||||
options.form.storeScopeMode = value;
|
||||
if (value === 'all') {
|
||||
options.form.storeIds = [];
|
||||
}
|
||||
}
|
||||
|
||||
function setFormStoreIds(value: string[]) {
|
||||
options.form.storeIds = [...value];
|
||||
}
|
||||
|
||||
function setFormStatus(checked: boolean) {
|
||||
options.form.status = checked ? 'enabled' : 'disabled';
|
||||
}
|
||||
|
||||
async function openCreateDrawer() {
|
||||
resetForm();
|
||||
drawerMode.value = 'create';
|
||||
options.isDrawerOpen.value = true;
|
||||
}
|
||||
|
||||
async function openEditDrawer(couponId: string) {
|
||||
if (!options.selectedStoreId.value) return;
|
||||
|
||||
options.isDrawerLoading.value = true;
|
||||
try {
|
||||
const detail = await getMarketingCouponDetailApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
couponId,
|
||||
});
|
||||
|
||||
applyForm(mapDetailToEditorForm(detail));
|
||||
drawerMode.value = 'edit';
|
||||
options.isDrawerOpen.value = true;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
options.isDrawerLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitDrawer() {
|
||||
if (!options.selectedStoreId.value) return;
|
||||
if (!validateBeforeSubmit()) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isDrawerSubmitting.value = true;
|
||||
try {
|
||||
await saveMarketingCouponApi(
|
||||
buildSaveCouponPayload(options.form, options.selectedStoreId.value),
|
||||
);
|
||||
message.success(
|
||||
drawerMode.value === 'create' ? '优惠券已创建' : '优惠券已更新',
|
||||
);
|
||||
options.isDrawerOpen.value = false;
|
||||
await options.loadCoupons();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
options.isDrawerSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function validateBeforeSubmit() {
|
||||
if (!options.form.name.trim()) {
|
||||
message.warning('请输入券名称');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
options.form.couponType !== 'free_delivery' &&
|
||||
(options.form.value === null || options.form.value <= 0)
|
||||
) {
|
||||
message.warning('请设置正确的优惠额度');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
options.form.couponType === 'discount' &&
|
||||
options.form.value !== null &&
|
||||
options.form.value >= 10
|
||||
) {
|
||||
message.warning('折扣券面额必须小于 10');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
options.form.couponType === 'amount_off' &&
|
||||
(options.form.minimumSpend === null || options.form.minimumSpend <= 0)
|
||||
) {
|
||||
message.warning('满减券必须设置使用门槛');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.form.totalQuantity <= 0) {
|
||||
message.warning('发放总量必须大于 0');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.form.perUserLimit !== null && options.form.perUserLimit <= 0) {
|
||||
message.warning('每人限领必须大于 0');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.form.validityType === 'fixed' && !options.form.validDateRange) {
|
||||
message.warning('请选择固定有效期');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
options.form.validityType === 'days' &&
|
||||
(!options.form.relativeValidDays || options.form.relativeValidDays <= 0)
|
||||
) {
|
||||
message.warning('领取后有效天数必须大于 0');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.form.channels.length === 0) {
|
||||
message.warning('请至少选择一个适用渠道');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
options.form.storeScopeMode === 'stores' &&
|
||||
options.form.storeIds.length === 0
|
||||
) {
|
||||
message.warning('请选择至少一个适用门店');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return {
|
||||
drawerMode,
|
||||
openCreateDrawer,
|
||||
openEditDrawer,
|
||||
setDrawerOpen,
|
||||
setFormChannels,
|
||||
setFormCouponType,
|
||||
setFormMinimumSpend,
|
||||
setFormName,
|
||||
setFormPerUserLimit,
|
||||
setFormRelativeValidDays,
|
||||
setFormStatus,
|
||||
setFormStoreIds,
|
||||
setFormStoreScopeMode,
|
||||
setFormTotalQuantity,
|
||||
setFormValidDateRange,
|
||||
setFormValidityType,
|
||||
setFormValue,
|
||||
submitDrawer,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import type {
|
||||
MarketingCouponChannel,
|
||||
MarketingCouponDetailDto,
|
||||
MarketingCouponType,
|
||||
SaveMarketingCouponDto,
|
||||
} from '#/api/marketing';
|
||||
import type {
|
||||
CouponCardViewModel,
|
||||
CouponEditorForm,
|
||||
} from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券页面纯函数。
|
||||
* 1. 负责列表文案、视觉样式映射。
|
||||
* 2. 负责表单与 API DTO 的互转。
|
||||
*/
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
COUPON_CHANNEL_TEXT_MAP,
|
||||
COUPON_TYPE_FILTER_OPTIONS,
|
||||
createDefaultCouponEditorForm,
|
||||
} from './constants';
|
||||
|
||||
/** 领取进度百分比。 */
|
||||
export function resolveClaimedProgressPercent(
|
||||
claimedQuantity: number,
|
||||
totalQuantity: number,
|
||||
) {
|
||||
if (totalQuantity <= 0) return 0;
|
||||
const percent = Math.round((claimedQuantity * 100) / totalQuantity);
|
||||
return Math.max(0, Math.min(100, percent));
|
||||
}
|
||||
|
||||
/** 千分位格式化。 */
|
||||
export function formatInteger(value: number) {
|
||||
return Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
/** 优惠券左侧色板样式类。 */
|
||||
export function resolveCouponTypeClass(couponType: MarketingCouponType) {
|
||||
if (couponType === 'amount_off') {
|
||||
return 'mcp-left-red';
|
||||
}
|
||||
if (couponType === 'discount') {
|
||||
return 'mcp-left-blue';
|
||||
}
|
||||
return 'mcp-left-green';
|
||||
}
|
||||
|
||||
/** 进度条颜色类。 */
|
||||
export function resolveProgressClass(couponType: MarketingCouponType) {
|
||||
if (couponType === 'amount_off') {
|
||||
return 'mcp-progress-red';
|
||||
}
|
||||
if (couponType === 'discount') {
|
||||
return 'mcp-progress-blue';
|
||||
}
|
||||
return 'mcp-progress-green';
|
||||
}
|
||||
|
||||
/** 列表类型文案。 */
|
||||
export function resolveCouponTypeLabel(couponType: MarketingCouponType) {
|
||||
return (
|
||||
COUPON_TYPE_FILTER_OPTIONS.find((item) => item.value === couponType)
|
||||
?.label ?? '优惠券'
|
||||
);
|
||||
}
|
||||
|
||||
/** 列表券面主文案。 */
|
||||
export function resolveCouponFaceValueText(item: CouponCardViewModel) {
|
||||
if (item.couponType === 'amount_off') {
|
||||
return `¥${trimDecimal(item.value)}`;
|
||||
}
|
||||
if (item.couponType === 'discount') {
|
||||
return `${trimDecimal(item.value)}折`;
|
||||
}
|
||||
return '免配送';
|
||||
}
|
||||
|
||||
/** 列表券面副文案。 */
|
||||
export function resolveCouponFaceConditionText(item: CouponCardViewModel) {
|
||||
if (item.couponType === 'amount_off' || item.couponType === 'discount') {
|
||||
if (item.minimumSpend && item.minimumSpend > 0) {
|
||||
return `满${trimDecimal(item.minimumSpend)}可用`;
|
||||
}
|
||||
return item.couponType === 'discount' ? '全场通用' : '无门槛';
|
||||
}
|
||||
return '无门槛';
|
||||
}
|
||||
|
||||
/** 列表有效期文案。 */
|
||||
export function resolveCouponValidityText(item: CouponCardViewModel) {
|
||||
if (item.validFrom && item.validTo) {
|
||||
return `${item.validFrom.replaceAll('-', '.')} - ${item.validTo.replaceAll('-', '.')}`;
|
||||
}
|
||||
if (item.relativeValidDays && item.relativeValidDays > 0) {
|
||||
return `领取后 ${item.relativeValidDays} 天内有效`;
|
||||
}
|
||||
return '--';
|
||||
}
|
||||
|
||||
/** 列表规则文案。 */
|
||||
export function resolveCouponRuleText(item: CouponCardViewModel) {
|
||||
const limitText =
|
||||
item.perUserLimit && item.perUserLimit > 0
|
||||
? `每人限领${item.perUserLimit}张`
|
||||
: '不限领';
|
||||
|
||||
const channelText = resolveChannelsText(item.channels);
|
||||
return `${limitText} | ${channelText}`;
|
||||
}
|
||||
|
||||
/** 渠道文本。 */
|
||||
export function resolveChannelsText(channels: MarketingCouponChannel[]) {
|
||||
const normalized = channels.toSorted();
|
||||
const allChannels: MarketingCouponChannel[] = [
|
||||
'delivery',
|
||||
'pickup',
|
||||
'dine_in',
|
||||
];
|
||||
const isAll = allChannels.every((channel) => normalized.includes(channel));
|
||||
if (isAll) {
|
||||
return '全渠道可用';
|
||||
}
|
||||
|
||||
const channelLabels = normalized.map(
|
||||
(channel) => COUPON_CHANNEL_TEXT_MAP[channel],
|
||||
);
|
||||
if (channelLabels.length === 1) {
|
||||
return `仅${channelLabels[0]}可用`;
|
||||
}
|
||||
return `${channelLabels.join('/')}可用`;
|
||||
}
|
||||
|
||||
/** 详情映射为编辑表单。 */
|
||||
export function mapDetailToEditorForm(
|
||||
detail: MarketingCouponDetailDto,
|
||||
): CouponEditorForm {
|
||||
const form = createDefaultCouponEditorForm();
|
||||
form.id = detail.id;
|
||||
form.name = detail.name;
|
||||
form.couponType = detail.couponType;
|
||||
form.value = detail.couponType === 'free_delivery' ? null : detail.value;
|
||||
form.minimumSpend = detail.minimumSpend;
|
||||
form.totalQuantity = detail.totalQuantity;
|
||||
form.perUserLimit = detail.perUserLimit;
|
||||
form.validityType = detail.validityType;
|
||||
form.validDateRange =
|
||||
detail.validityType === 'fixed' && detail.validFrom && detail.validTo
|
||||
? [dayjs(detail.validFrom), dayjs(detail.validTo)]
|
||||
: null;
|
||||
form.relativeValidDays = detail.relativeValidDays;
|
||||
form.channels = [...detail.channels];
|
||||
form.storeScopeMode = detail.storeScopeMode;
|
||||
form.storeIds = [...detail.storeIds];
|
||||
form.status = detail.status;
|
||||
return form;
|
||||
}
|
||||
|
||||
/** 编辑表单构建保存请求。 */
|
||||
export function buildSaveCouponPayload(
|
||||
form: CouponEditorForm,
|
||||
storeId: string,
|
||||
): SaveMarketingCouponDto {
|
||||
const validFrom =
|
||||
form.validityType === 'fixed' && form.validDateRange
|
||||
? form.validDateRange[0].format('YYYY-MM-DD')
|
||||
: null;
|
||||
const validTo =
|
||||
form.validityType === 'fixed' && form.validDateRange
|
||||
? form.validDateRange[1].format('YYYY-MM-DD')
|
||||
: null;
|
||||
|
||||
const value =
|
||||
form.couponType === 'free_delivery' ? 0 : Number(form.value ?? 0);
|
||||
const minimumSpend =
|
||||
form.couponType === 'free_delivery'
|
||||
? null
|
||||
: normalizeNullableNumber(form.minimumSpend);
|
||||
|
||||
return {
|
||||
id: form.id || undefined,
|
||||
storeId,
|
||||
name: form.name.trim(),
|
||||
couponType: form.couponType,
|
||||
value,
|
||||
minimumSpend,
|
||||
totalQuantity: Math.floor(Number(form.totalQuantity || 0)),
|
||||
perUserLimit: normalizeNullableNumber(form.perUserLimit),
|
||||
validityType: form.validityType,
|
||||
validFrom,
|
||||
validTo,
|
||||
relativeValidDays:
|
||||
form.validityType === 'days'
|
||||
? Math.floor(Number(form.relativeValidDays || 0))
|
||||
: null,
|
||||
channels: [...form.channels],
|
||||
storeScopeMode: form.storeScopeMode,
|
||||
storeIds: form.storeScopeMode === 'stores' ? [...form.storeIds] : undefined,
|
||||
status: form.status,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeNullableNumber(value: null | number) {
|
||||
if (value === null || Number.isNaN(value)) {
|
||||
return null;
|
||||
}
|
||||
return Number(value);
|
||||
}
|
||||
|
||||
function trimDecimal(value: number) {
|
||||
const fixed = value.toFixed(2);
|
||||
return fixed.replace(/\.?0+$/, '');
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
import type { CouponCardViewModel } from '#/views/marketing/coupon/types';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券页面状态与行为编排。
|
||||
* 1. 管理门店、筛选、分页、统计与加载状态。
|
||||
* 2. 编排抽屉编辑动作与卡片启停删除动作。
|
||||
*/
|
||||
import { computed, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { createCardActions } from './coupon-page/card-actions';
|
||||
import {
|
||||
COUPON_STATUS_FILTER_OPTIONS,
|
||||
COUPON_TYPE_FILTER_OPTIONS,
|
||||
createDefaultCouponEditorForm,
|
||||
createDefaultCouponFilterForm,
|
||||
} from './coupon-page/constants';
|
||||
import {
|
||||
createDataActions,
|
||||
createEmptyStats,
|
||||
} from './coupon-page/data-actions';
|
||||
import { createDrawerActions } from './coupon-page/drawer-actions';
|
||||
|
||||
export function useMarketingCouponPage() {
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const selectedStoreId = ref('');
|
||||
const isStoreLoading = ref(false);
|
||||
|
||||
const filterForm = reactive(createDefaultCouponFilterForm());
|
||||
const keyword = ref('');
|
||||
|
||||
const rows = ref<CouponCardViewModel[]>([]);
|
||||
const stats = ref(createEmptyStats());
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const isDrawerOpen = ref(false);
|
||||
const isDrawerLoading = ref(false);
|
||||
const isDrawerSubmitting = ref(false);
|
||||
const form = reactive(createDefaultCouponEditorForm());
|
||||
|
||||
const storeOptions = computed(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
|
||||
const hasStore = computed(() => !!selectedStoreId.value);
|
||||
|
||||
const { loadCoupons, loadStores } = createDataActions({
|
||||
stores,
|
||||
selectedStoreId,
|
||||
isStoreLoading,
|
||||
filterForm,
|
||||
keyword,
|
||||
rows,
|
||||
stats,
|
||||
isLoading,
|
||||
page,
|
||||
pageSize,
|
||||
total,
|
||||
});
|
||||
|
||||
function setSelectedStoreId(value: string) {
|
||||
selectedStoreId.value = value;
|
||||
}
|
||||
|
||||
function setKeyword(value: string) {
|
||||
keyword.value = value;
|
||||
}
|
||||
|
||||
function setStatusFilter(value: '' | CouponCardViewModel['displayStatus']) {
|
||||
filterForm.status = value;
|
||||
}
|
||||
|
||||
function setTypeFilter(value: '' | CouponCardViewModel['couponType']) {
|
||||
filterForm.couponType = value;
|
||||
}
|
||||
|
||||
async function applyFilters() {
|
||||
page.value = 1;
|
||||
await loadCoupons();
|
||||
}
|
||||
|
||||
async function resetFilters() {
|
||||
filterForm.status = '';
|
||||
filterForm.couponType = '';
|
||||
keyword.value = '';
|
||||
page.value = 1;
|
||||
await loadCoupons();
|
||||
}
|
||||
|
||||
async function handlePageChange(nextPage: number, nextPageSize: number) {
|
||||
page.value = nextPage;
|
||||
pageSize.value = nextPageSize;
|
||||
await loadCoupons();
|
||||
}
|
||||
|
||||
const {
|
||||
drawerMode,
|
||||
openCreateDrawer,
|
||||
openEditDrawer,
|
||||
setDrawerOpen,
|
||||
setFormChannels,
|
||||
setFormCouponType,
|
||||
setFormMinimumSpend,
|
||||
setFormName,
|
||||
setFormPerUserLimit,
|
||||
setFormRelativeValidDays,
|
||||
setFormStatus,
|
||||
setFormStoreIds,
|
||||
setFormStoreScopeMode,
|
||||
setFormTotalQuantity,
|
||||
setFormValidDateRange,
|
||||
setFormValidityType,
|
||||
setFormValue,
|
||||
submitDrawer,
|
||||
} = createDrawerActions({
|
||||
form,
|
||||
isDrawerLoading,
|
||||
isDrawerOpen,
|
||||
isDrawerSubmitting,
|
||||
selectedStoreId,
|
||||
loadCoupons,
|
||||
});
|
||||
|
||||
const { disableCoupon, enableCoupon, removeCoupon } = createCardActions({
|
||||
selectedStoreId,
|
||||
loadCoupons,
|
||||
});
|
||||
|
||||
const drawerTitle = computed(() =>
|
||||
drawerMode.value === 'create' ? '创建优惠券' : '编辑优惠券',
|
||||
);
|
||||
const drawerSubmitText = computed(() => '保存');
|
||||
|
||||
watch(selectedStoreId, () => {
|
||||
page.value = 1;
|
||||
keyword.value = '';
|
||||
filterForm.status = '';
|
||||
filterForm.couponType = '';
|
||||
void loadCoupons();
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await loadStores();
|
||||
});
|
||||
|
||||
return {
|
||||
applyFilters,
|
||||
COUPON_STATUS_FILTER_OPTIONS,
|
||||
COUPON_TYPE_FILTER_OPTIONS,
|
||||
disableCoupon,
|
||||
drawerSubmitText,
|
||||
drawerTitle,
|
||||
enableCoupon,
|
||||
filterForm,
|
||||
form,
|
||||
handlePageChange,
|
||||
hasStore,
|
||||
isDrawerLoading,
|
||||
isDrawerOpen,
|
||||
isDrawerSubmitting,
|
||||
isLoading,
|
||||
isStoreLoading,
|
||||
keyword,
|
||||
openCreateDrawer,
|
||||
openEditDrawer,
|
||||
page,
|
||||
pageSize,
|
||||
removeCoupon,
|
||||
resetFilters,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setDrawerOpen,
|
||||
setFormChannels,
|
||||
setFormCouponType,
|
||||
setFormMinimumSpend,
|
||||
setFormName,
|
||||
setFormPerUserLimit,
|
||||
setFormRelativeValidDays,
|
||||
setFormStatus,
|
||||
setFormStoreIds,
|
||||
setFormStoreScopeMode,
|
||||
setFormTotalQuantity,
|
||||
setFormValidDateRange,
|
||||
setFormValidityType,
|
||||
setFormValue,
|
||||
setKeyword,
|
||||
setSelectedStoreId,
|
||||
setStatusFilter,
|
||||
setTypeFilter,
|
||||
stats,
|
||||
storeOptions,
|
||||
stores,
|
||||
submitDrawer,
|
||||
total,
|
||||
};
|
||||
}
|
||||
198
apps/web-antd/src/views/marketing/coupon/index.vue
Normal file
198
apps/web-antd/src/views/marketing/coupon/index.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：营销中心-优惠券页面主视图。
|
||||
* 1. 还原原型工具栏、统计、卡片列表和分页。
|
||||
* 2. 编排优惠券新增编辑抽屉与卡片操作。
|
||||
*/
|
||||
import type {
|
||||
MarketingCouponDisplayStatus,
|
||||
MarketingCouponType,
|
||||
} from '#/api/marketing';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Empty, Input, Pagination, Select, Spin } from 'ant-design-vue';
|
||||
|
||||
import CouponEditorDrawer from './components/CouponEditorDrawer.vue';
|
||||
import CouponStatsCards from './components/CouponStatsCards.vue';
|
||||
import CouponTemplateCard from './components/CouponTemplateCard.vue';
|
||||
import { useMarketingCouponPage } from './composables/useMarketingCouponPage';
|
||||
|
||||
const {
|
||||
applyFilters,
|
||||
COUPON_STATUS_FILTER_OPTIONS,
|
||||
COUPON_TYPE_FILTER_OPTIONS,
|
||||
disableCoupon,
|
||||
drawerSubmitText,
|
||||
drawerTitle,
|
||||
enableCoupon,
|
||||
filterForm,
|
||||
form,
|
||||
handlePageChange,
|
||||
hasStore,
|
||||
isDrawerLoading,
|
||||
isDrawerOpen,
|
||||
isDrawerSubmitting,
|
||||
isLoading,
|
||||
isStoreLoading,
|
||||
keyword,
|
||||
openCreateDrawer,
|
||||
openEditDrawer,
|
||||
page,
|
||||
pageSize,
|
||||
removeCoupon,
|
||||
resetFilters,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setDrawerOpen,
|
||||
setFormChannels,
|
||||
setFormCouponType,
|
||||
setFormMinimumSpend,
|
||||
setFormName,
|
||||
setFormPerUserLimit,
|
||||
setFormRelativeValidDays,
|
||||
setFormStatus,
|
||||
setFormStoreIds,
|
||||
setFormStoreScopeMode,
|
||||
setFormTotalQuantity,
|
||||
setFormValidDateRange,
|
||||
setFormValidityType,
|
||||
setFormValue,
|
||||
setKeyword,
|
||||
setSelectedStoreId,
|
||||
setStatusFilter,
|
||||
setTypeFilter,
|
||||
stats,
|
||||
storeOptions,
|
||||
submitDrawer,
|
||||
total,
|
||||
} = useMarketingCouponPage();
|
||||
|
||||
function onStatusFilterChange(value: unknown) {
|
||||
const next =
|
||||
typeof value === 'string' && value
|
||||
? (value as MarketingCouponDisplayStatus)
|
||||
: '';
|
||||
setStatusFilter(next);
|
||||
void applyFilters();
|
||||
}
|
||||
|
||||
function onTypeFilterChange(value: unknown) {
|
||||
const next =
|
||||
typeof value === 'string' && value ? (value as MarketingCouponType) : '';
|
||||
setTypeFilter(next);
|
||||
void applyFilters();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="优惠券" content-class="page-marketing-coupon">
|
||||
<div class="mcp-page">
|
||||
<div class="mcp-toolbar">
|
||||
<Select
|
||||
class="mcp-store-select"
|
||||
:value="selectedStoreId"
|
||||
:options="storeOptions"
|
||||
:loading="isStoreLoading"
|
||||
placeholder="请选择门店"
|
||||
@update:value="(value) => setSelectedStoreId(String(value ?? ''))"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="mcp-filter-select"
|
||||
:value="filterForm.status"
|
||||
placeholder="全部状态"
|
||||
:options="COUPON_STATUS_FILTER_OPTIONS"
|
||||
@update:value="onStatusFilterChange"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="mcp-filter-select"
|
||||
:value="filterForm.couponType"
|
||||
placeholder="全部类型"
|
||||
:options="COUPON_TYPE_FILTER_OPTIONS"
|
||||
@update:value="onTypeFilterChange"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="mcp-search"
|
||||
:value="keyword"
|
||||
placeholder="搜索券名称"
|
||||
allow-clear
|
||||
@update:value="(value) => setKeyword(String(value ?? ''))"
|
||||
@press-enter="applyFilters"
|
||||
/>
|
||||
|
||||
<Button @click="applyFilters">搜索</Button>
|
||||
<Button @click="resetFilters">重置</Button>
|
||||
|
||||
<span class="mcp-spacer"></span>
|
||||
<Button type="primary" @click="openCreateDrawer">创建优惠券</Button>
|
||||
</div>
|
||||
|
||||
<CouponStatsCards v-if="hasStore" :stats="stats" />
|
||||
|
||||
<div v-if="!hasStore" class="mcp-empty">暂无门店，请先创建门店</div>
|
||||
|
||||
<Spin v-else :spinning="isLoading">
|
||||
<div v-if="rows.length > 0" class="mcp-list">
|
||||
<CouponTemplateCard
|
||||
v-for="item in rows"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
@edit="(row) => openEditDrawer(row.id)"
|
||||
@view="(row) => openEditDrawer(row.id)"
|
||||
@enable="enableCoupon"
|
||||
@disable="disableCoupon"
|
||||
@remove="removeCoupon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="mcp-empty">
|
||||
<Empty description="暂无优惠券" />
|
||||
</div>
|
||||
|
||||
<div v-if="rows.length > 0" class="mcp-pagination">
|
||||
<Pagination
|
||||
:current="page"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
show-size-changer
|
||||
:page-size-options="['10', '20', '50']"
|
||||
:show-total="(value) => `共 ${value} 条`"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
|
||||
<CouponEditorDrawer
|
||||
:open="isDrawerOpen"
|
||||
:title="drawerTitle"
|
||||
:submit-text="drawerSubmitText"
|
||||
:submitting="isDrawerSubmitting"
|
||||
:loading="isDrawerLoading"
|
||||
:form="form"
|
||||
:store-options="storeOptions"
|
||||
@close="setDrawerOpen(false)"
|
||||
@set-name="setFormName"
|
||||
@set-coupon-type="setFormCouponType"
|
||||
@set-value="setFormValue"
|
||||
@set-minimum-spend="setFormMinimumSpend"
|
||||
@set-total-quantity="setFormTotalQuantity"
|
||||
@set-per-user-limit="setFormPerUserLimit"
|
||||
@set-validity-type="setFormValidityType"
|
||||
@set-valid-date-range="setFormValidDateRange"
|
||||
@set-relative-valid-days="setFormRelativeValidDays"
|
||||
@set-channels="setFormChannels"
|
||||
@set-store-scope-mode="setFormStoreScopeMode"
|
||||
@set-store-ids="setFormStoreIds"
|
||||
@set-status="setFormStatus"
|
||||
@submit="submitDrawer"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
30
apps/web-antd/src/views/marketing/coupon/styles/base.less
Normal file
30
apps/web-antd/src/views/marketing/coupon/styles/base.less
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* 文件职责：优惠券页面基础样式。
|
||||
* 1. 定义页面级变量与共用动作按钮。
|
||||
*/
|
||||
.page-marketing-coupon {
|
||||
--mcp-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--mcp-shadow-sm: 0 1px 2px rgb(0 0 0 / 4%);
|
||||
--mcp-shadow-md: 0 6px 16px rgb(0 0 0 / 8%), 0 1px 3px rgb(0 0 0 / 6%);
|
||||
--mcp-border: #e7eaf0;
|
||||
--mcp-text: #1f2937;
|
||||
--mcp-subtext: #6b7280;
|
||||
--mcp-muted: #9ca3af;
|
||||
|
||||
.g-action {
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.g-action + .g-action {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.g-action-danger {
|
||||
color: #ef4444;
|
||||
}
|
||||
}
|
||||
204
apps/web-antd/src/views/marketing/coupon/styles/card.less
Normal file
204
apps/web-antd/src/views/marketing/coupon/styles/card.less
Normal file
@@ -0,0 +1,204 @@
|
||||
/**
|
||||
* 文件职责：优惠券卡片样式。
|
||||
* 1. 还原券面左区、详情右区、进度与状态条。
|
||||
*/
|
||||
.page-marketing-coupon {
|
||||
.mcp-coupon {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid var(--mcp-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--mcp-shadow-sm);
|
||||
transition:
|
||||
box-shadow var(--mcp-transition),
|
||||
transform var(--mcp-transition);
|
||||
}
|
||||
|
||||
.mcp-coupon:hover {
|
||||
box-shadow: var(--mcp-shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mcp-coupon.mcp-dimmed {
|
||||
opacity: 0.58;
|
||||
}
|
||||
|
||||
.mcp-left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 160px;
|
||||
min-height: 132px;
|
||||
padding: 16px 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mcp-left::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.mcp-left-red {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ef5350);
|
||||
}
|
||||
|
||||
.mcp-left-blue {
|
||||
background: linear-gradient(135deg, #4facfe, #1677ff);
|
||||
}
|
||||
|
||||
.mcp-left-green {
|
||||
color: #1a5c3a;
|
||||
background: linear-gradient(135deg, #6ee7b7, #34d399);
|
||||
}
|
||||
|
||||
.mcp-face-value {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.mcp-face-cond {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mcp-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
.mcp-title-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mcp-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--mcp-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mcp-type-pill {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
background: #f1f5f9;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mcp-validity {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--mcp-muted);
|
||||
}
|
||||
|
||||
.mcp-validity .iconify {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mcp-rules {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--mcp-subtext);
|
||||
}
|
||||
|
||||
.mcp-progress-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--mcp-subtext);
|
||||
}
|
||||
|
||||
.mcp-progress-wrap {
|
||||
flex: 1;
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.mcp-progress-bar {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
background: #edf0f5;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mcp-progress-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mcp-progress-red {
|
||||
background: linear-gradient(90deg, #ff6b6b, #ef5350);
|
||||
}
|
||||
|
||||
.mcp-progress-blue {
|
||||
background: linear-gradient(90deg, #4facfe, #1677ff);
|
||||
}
|
||||
|
||||
.mcp-progress-green {
|
||||
background: linear-gradient(90deg, #6ee7b7, #10b981);
|
||||
}
|
||||
|
||||
.mcp-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mcp-status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mcp-status-ongoing {
|
||||
color: #166534;
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.mcp-status-upcoming {
|
||||
color: #1d4ed8;
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.mcp-status-ended {
|
||||
color: #475569;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.mcp-status-disabled {
|
||||
color: #b91c1c;
|
||||
background: #fee2e2;
|
||||
}
|
||||
}
|
||||
59
apps/web-antd/src/views/marketing/coupon/styles/drawer.less
Normal file
59
apps/web-antd/src/views/marketing/coupon/styles/drawer.less
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* 文件职责：优惠券编辑抽屉样式。
|
||||
* 1. 规范表单行内布局与提示文案样式。
|
||||
*/
|
||||
.page-marketing-coupon {
|
||||
.mcp-editor-form {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.mcp-inline-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mcp-inline-fields .ant-input-number {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.mcp-input-wide {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mcp-field-hint {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.mcp-form-muted {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.mcp-range-picker {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.mcp-store-multi {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mcp-switch-row {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mcp-drawer-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './card.less';
|
||||
@import './drawer.less';
|
||||
@import './responsive.less';
|
||||
140
apps/web-antd/src/views/marketing/coupon/styles/layout.less
Normal file
140
apps/web-antd/src/views/marketing/coupon/styles/layout.less
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* 文件职责：优惠券页面布局样式。
|
||||
* 1. 工具栏、统计区、空态与分页布局。
|
||||
*/
|
||||
.page-marketing-coupon {
|
||||
.mcp-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mcp-toolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--mcp-border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--mcp-shadow-sm);
|
||||
}
|
||||
|
||||
.mcp-store-select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.mcp-store-select .ant-select-selector,
|
||||
.mcp-filter-select .ant-select-selector {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.mcp-filter-select {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.mcp-search {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.mcp-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mcp-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mcp-stat-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--mcp-border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--mcp-shadow-sm);
|
||||
transition: box-shadow var(--mcp-transition);
|
||||
}
|
||||
|
||||
.mcp-stat-card:hover {
|
||||
box-shadow: var(--mcp-shadow-md);
|
||||
}
|
||||
|
||||
.mcp-stat-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mcp-stat-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mcp-stat-blue {
|
||||
color: #1677ff;
|
||||
background: #e6f4ff;
|
||||
}
|
||||
|
||||
.mcp-stat-green {
|
||||
color: #52c41a;
|
||||
background: #f6ffed;
|
||||
}
|
||||
|
||||
.mcp-stat-orange {
|
||||
color: #fa8c16;
|
||||
background: #fff7e6;
|
||||
}
|
||||
|
||||
.mcp-stat-purple {
|
||||
color: #722ed1;
|
||||
background: #f9f0ff;
|
||||
}
|
||||
|
||||
.mcp-stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--mcp-text);
|
||||
}
|
||||
|
||||
.mcp-stat-label {
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
color: var(--mcp-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mcp-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mcp-empty {
|
||||
padding: 28px 14px;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid var(--mcp-border);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--mcp-shadow-sm);
|
||||
}
|
||||
|
||||
.mcp-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 12px 4px 2px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 文件职责：优惠券页面响应式样式。
|
||||
*/
|
||||
.page-marketing-coupon {
|
||||
@media (width <= 1200px) {
|
||||
.mcp-toolbar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mcp-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mcp-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.mcp-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mcp-coupon {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mcp-left {
|
||||
width: 100%;
|
||||
min-height: 88px;
|
||||
}
|
||||
|
||||
.mcp-left::after {
|
||||
inset: auto auto -6px 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.mcp-progress-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.mcp-progress-wrap {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
apps/web-antd/src/views/marketing/coupon/types.ts
Normal file
46
apps/web-antd/src/views/marketing/coupon/types.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import type {
|
||||
MarketingCouponChannel,
|
||||
MarketingCouponDisplayStatus,
|
||||
MarketingCouponEditorStatus,
|
||||
MarketingCouponListItemDto,
|
||||
MarketingCouponStatsDto,
|
||||
MarketingCouponStoreScopeMode,
|
||||
MarketingCouponType,
|
||||
MarketingCouponValidityType,
|
||||
} from '#/api/marketing';
|
||||
|
||||
/**
|
||||
* 文件职责：优惠券页面类型定义。
|
||||
*/
|
||||
|
||||
/** 优惠券筛选表单。 */
|
||||
export interface CouponFilterForm {
|
||||
couponType: '' | MarketingCouponType;
|
||||
status: '' | MarketingCouponDisplayStatus;
|
||||
}
|
||||
|
||||
/** 优惠券编辑抽屉表单。 */
|
||||
export interface CouponEditorForm {
|
||||
channels: MarketingCouponChannel[];
|
||||
couponType: MarketingCouponType;
|
||||
id: string;
|
||||
minimumSpend: null | number;
|
||||
name: string;
|
||||
perUserLimit: null | number;
|
||||
relativeValidDays: null | number;
|
||||
status: MarketingCouponEditorStatus;
|
||||
storeIds: string[];
|
||||
storeScopeMode: MarketingCouponStoreScopeMode;
|
||||
totalQuantity: number;
|
||||
validDateRange: [Dayjs, Dayjs] | null;
|
||||
validityType: MarketingCouponValidityType;
|
||||
value: null | number;
|
||||
}
|
||||
|
||||
/** 优惠券卡片视图模型。 */
|
||||
export type CouponCardViewModel = MarketingCouponListItemDto;
|
||||
|
||||
/** 优惠券统计视图模型。 */
|
||||
export type CouponStatsViewModel = MarketingCouponStatsDto;
|
||||
Reference in New Issue
Block a user