oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

review：【antd/ele】【mall】营销模块的迁移

Browse Source
This commit is contained in:
YunaiV
2025-12-15 19:29:47 +08:00
parent ef0f0a9a9d
commit 4ec82f0fd0
50 changed files with 317 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
View File

@@ -41,23 +41,14 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {
/** 关闭砍价活动 */
async function handleClose(row: MallBargainActivityApi.BargainActivity) {
try {
await confirm({
content: '确认关闭该砍价活动吗？',
});
} catch {
return;
}
await confirm('确认关闭该砍价活动吗？');
const hideLoading = message.loading({
content: '确认关闭该砍价活动吗？',
content: '关闭中...',
duration: 0,
});
try {
await closeBargainActivity(row.id as number);
message.success({
content: '关闭成功',
});
await closeBargainActivity(row.id!);
message.success('关闭成功');
handleRefresh();
} finally {
hideLoading();
@@ -71,10 +62,8 @@ async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
duration: 0,
});
try {
await deleteBargainActivity(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
await deleteBargainActivity(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();

26
apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
View File

@@ -96,17 +96,15 @@ const [Modal, modalApi] = useVbenModal({
message.error('请选择砍价商品');
return;
}
if (!skuId.value) {
message.error('请选择商品 SKU');
return;
}
// 提交表单
modalApi.lock();
try {
const values = await formApi.getValues();
// 构建提交数据，价格字段转换为分
const data = {
...values,
spuId: spuId.value,
@@ -120,11 +118,10 @@ const [Modal, modalApi] = useVbenModal({
? Math.round(values.randomMaxPrice * 100)
: undefined,
} as MallBargainActivityApi.BargainActivity;
await (formData.value?.id
? updateBargainActivity(data)
: createBargainActivity(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@@ -141,17 +138,15 @@ const [Modal, modalApi] = useVbenModal({
skuInfo.value = undefined;
return;
}
// 加载表单数据
const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getBargainActivity(data.id);
await nextTick();
// 设置表单值时，价格字段从分转换为元
await formApi.setValues({
...formData.value,
@@ -164,14 +159,12 @@ const [Modal, modalApi] = useVbenModal({
? formData.value.randomMaxPrice / 100
: undefined,
});
// 加载商品和 SKU 信息
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
spuId.value = spu.id;
spuName.value = spu.name || '';
if (formData.value.skuId) {
const selectedSku = spu.skus?.find(
(sku) => sku.id === formData.value?.skuId,
@@ -214,6 +207,19 @@ const [Modal, modalApi] = useVbenModal({
<!-- SKU 信息展示 -->
<div v-if="skuInfo" class="mt-4">
<table class="w-full border-collapse border border-gray-300">
<!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
颜色
版本
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
砍价起始价格(元)
砍价底价(元)
活动库存
-->
<thead>
<tr class="bg-gray-100">
<th class="border border-gray-300 px-4 py-2">商品图片</th>

21
apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
View File

@@ -43,23 +43,14 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
async function handleClose(
row: MallCombinationActivityApi.CombinationActivity,
) {
try {
await confirm({
content: '确认关闭该拼团活动吗？',
});
} catch {
return;
}
await confirm('确认关闭该拼团活动吗？');
const hideLoading = message.loading({
content: '关闭中...',
duration: 0,
});
try {
await closeCombinationActivity(row.id as number);
message.success({
content: '关闭成功',
});
await closeCombinationActivity(row.id!);
message.success('关闭成功');
handleRefresh();
} finally {
hideLoading();
@@ -75,10 +66,8 @@ async function handleDelete(
duration: 0,
});
try {
await deleteCombinationActivity(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
await deleteCombinationActivity(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();

23
apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
View File

@@ -92,12 +92,10 @@ const [Modal, modalApi] = useVbenModal({
message.error('请选择拼团商品');
return;
}
if (skuTableData.value.length === 0) {
message.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.combinationPrice < 0.01,
@@ -107,11 +105,10 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 提交表单
modalApi.lock();
try {
const values = await formApi.getValues();
// 构建提交数据
const data: any = {
...values,
spuId: spuId.value,
@@ -120,11 +117,10 @@ const [Modal, modalApi] = useVbenModal({
combinationPrice: Math.round(sku.combinationPrice * 100), // 转换为分
})),
};
await (formData.value?.id
? updateCombinationActivity(data)
: createCombinationActivity(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@@ -140,20 +136,19 @@ const [Modal, modalApi] = useVbenModal({
skuTableData.value = [];
return;
}
// 加载数据
const data =
modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getCombinationActivity(data.id);
await nextTick();
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return，简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
@@ -221,6 +216,15 @@ const [Modal, modalApi] = useVbenModal({
class="h-16 w-16 object-cover"
/>
</td>
<!-- TODO @puhui999：这里貌似和 element-plus 没对齐；；ps：是不是用 grid 组件呀？或者 vxe 组件
图片
商品条码
销售价(元)
市场价(元)
成本价(元)
库存
拼团价格(元)
-->
<td class="border border-gray-300 px-4 py-2">
{{ sku.skuName }}
</td>
@@ -228,6 +232,7 @@ const [Modal, modalApi] = useVbenModal({
¥{{ (sku.price / 100).toFixed(2) }}
</td>
<td class="border border-gray-300 px-4 py-2">
<!-- TODO @puhui999：是不是要使用 antd 的哈？ -->
<input
v-model.number="sku.combinationPrice"
type="number"

18
apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
View File

@@ -57,24 +57,22 @@ const [Grid, gridApi] = useVbenVxeGrid({
/** 打开弹窗 */
async function open() {
visible.value = true;
// 重置查询条件并重新加载数据，与老组件行为一致
await gridApi.query();
}
/** 确认选择 */
function handleConfirm() {
const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
[]) as MallCouponTemplateApi.CouponTemplate[];
emit('change', selectedRecords);
closeModal();
}
/** 关闭弹窗 */
function closeModal() {
visible.value = false;
}
/** 确认选择 */
function handleConfirm() {
// 从 gridApi 获取选中的记录
const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
[]) as MallCouponTemplateApi.CouponTemplate[];
emit('change', selectedRecords);
closeModal();
}
/** 对外暴露的方法 */
defineExpose({
open,

19
apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
View File

@@ -41,23 +41,14 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
/** 关闭满减活动 */
async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
try {
await confirm({
content: '确认关闭该限时折扣活动吗？',
});
} catch {
return;
}
await confirm('确认关闭该限时折扣活动吗？');
const hideLoading = message.loading({
content: '正在关闭中',
content: '正在关闭中...',
duration: 0,
});
try {
await closeDiscountActivity(row.id as number);
message.success({
content: '关闭成功',
});
await closeDiscountActivity(row.id!);
message.success('关闭成功');
handleRefresh();
} finally {
hideLoading();
@@ -71,7 +62,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
duration: 0,
});
try {
await deleteDiscountActivity(row.id as number);
await deleteDiscountActivity(row.id!);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});

1
apps/web-antd/src/views/mall/promotion/point/activity/data.ts
View File

@@ -126,7 +126,6 @@ export function useFormSchema(): VbenFormSchema[] {
},
formItemClass: 'col-span-2',
},
// TODO @puhui999：商品图太大了。
{
fieldName: 'spuId',
label: '活动商品',

1
apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
View File

@@ -180,7 +180,6 @@ const [Modal, modalApi] = useVbenModal({
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 重置表单数据（新增和编辑模式都需要）
formData.value = undefined;
spuList.value = [];
spuPropertyList.value = [];

1
apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
View File

@@ -1,4 +1,5 @@
<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
<!-- TODO @puhui999：不需要 point- 前缀 --->
<script lang="ts" setup>
import type { MallPointActivityApi } from '#/api/mall/promotion/point';

1
apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
View File

@@ -1,4 +1,5 @@
<!-- 积分商城活动选择弹窗组件 -->
<!-- TODO @puhui999：不需要 point- 前缀 --->
<script lang="ts" setup>
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

3
apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
View File

@@ -32,7 +32,6 @@ const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
productScope: PromotionProductScopeEnum.ALL.scope,
rules: [],
});
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['满减送'])
@@ -76,6 +75,7 @@ const [Modal, modalApi] = useVbenModal({
});
// 设置 productScopeValues
switch (data.productScope) {
// TODO @puhui999：这里要不要搞成类似优惠劵的
case PromotionProductScopeEnum.CATEGORY.scope: {
const categoryIds = data.productCategoryIds;
data.productScopeValues = Array.isArray(categoryIds)
@@ -90,7 +90,6 @@ const [Modal, modalApi] = useVbenModal({
break;
}
}
await (data.id
? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
: createRewardActivity(data as MallRewardActivityApi.RewardActivity));

14
apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
View File

@@ -21,7 +21,6 @@ import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MallSeckillActivityApi.SeckillActivity>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['秒杀活动'])
@@ -90,12 +89,10 @@ const [Modal, modalApi] = useVbenModal({
message.error('请选择秒杀商品');
return;
}
if (skuTableData.value.length === 0) {
message.error('请至少配置一个 SKU');
return;
}
// 验证 SKU 配置
const hasInvalidSku = skuTableData.value.some(
(sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
@@ -105,11 +102,10 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 提交表单
modalApi.lock();
try {
const values = await formApi.getValues();
// 构建提交数据
const data: any = {
...values,
spuId: spuId.value,
@@ -119,11 +115,10 @@ const [Modal, modalApi] = useVbenModal({
seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
})),
};
await (formData.value?.id
? updateSeckillActivity(data)
: createSeckillActivity(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
@@ -140,18 +135,18 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getSeckillActivity(data.id);
await nextTick();
await formApi.setValues(formData.value);
// 加载商品和 SKU 信息
// TODO @puhui999：if return 简化括号层级
if (formData.value.spuId) {
const spu = await getSpu(formData.value.spuId);
if (spu) {
@@ -201,6 +196,7 @@ const [Modal, modalApi] = useVbenModal({
<!-- SKU 配置表格 -->
<div v-if="skuTableData.length > 0" class="mt-4">
<!-- TODO @puhui999：Grid？或者 VXETable 哇？ -->
<table class="w-full border-collapse border border-gray-300">
<thead>
<tr class="bg-gray-100">