!288 feat：【antd】【mall】商城活动优化

Merge pull request !288 from puhui999/dev-mall

apps/web-antd/src/api/mall/promotion/combination/combinationActivity.ts

@@ -21,6 +21,7 @@ export namespace MallCombinationActivityApi {
     limitDuration?: number; // 限制时长
     combinationPrice?: number; // 拼团价格
     products: CombinationProduct[]; // 商品列表
+    picUrl?: any;
   }
 
   /** 拼团活动所需属性 */

apps/web-antd/src/api/mall/promotion/seckill/seckillActivity.ts

@@ -31,6 +31,7 @@ export namespace MallSeckillActivityApi {
     totalStock?: number; // 秒杀总库存
     seckillPrice?: number; // 秒杀价格
     products?: SeckillProduct[]; // 秒杀商品列表
+    picUrl?: any;
   }
 }
 

apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts

@@ -133,6 +133,12 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入最大砍价金额',
       },
     },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+    },
   ];
 }
 

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

@@ -14,6 +14,7 @@ import {
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -21,7 +22,7 @@ defineOptions({ name: 'PromotionBargainActivityForm' });
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallBargainActivityApi.BargainActivity>();
+const formData = ref<Partial<MallBargainActivityApi.BargainActivity>>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['砍价活动'])
@@ -49,8 +50,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const values = await formApi.getValues();
-      (await formApi.getValues()) as MallBargainActivityApi.BargainActivity;
+    const data = {
+      ...values,
+      spuId: formData.value.spuId,
+    } as MallBargainActivityApi.BargainActivity;
     try {
       await (formData.value?.id
         ? updateBargainActivity(data)
@@ -65,7 +69,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -86,8 +90,12 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <!-- TODO @puhui999：这里缺少商品的选择； -->
   <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/combination/activity/data.ts

@@ -106,10 +106,10 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      // TODO <!-- TODO @puhui999：这里缺少商品的选择； -->
       fieldName: 'spuId',
       label: '拼团商品',
       component: 'Input',
+      rules: 'required',
     },
   ];
 }

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

@@ -13,13 +13,16 @@ import {
   updateCombinationActivity,
 } from '#/api/mall/promotion/combination/combinationActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'CombinationActivityForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<MallCombinationActivityApi.CombinationActivity>();
+const formData = ref<Partial<MallCombinationActivityApi.CombinationActivity>>(
+  {},
+);
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['拼团活动'])
@@ -47,8 +50,11 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const values = await formApi.getValues();
-      (await formApi.getValues()) as MallCombinationActivityApi.CombinationActivity;
+    const data = {
+      ...values,
+      spuId: formData.value.spuId,
+    } as MallCombinationActivityApi.CombinationActivity;
     try {
       await (formData.value?.id
         ? updateCombinationActivity(data)
@@ -63,7 +69,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -86,6 +92,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-3/5" :title="getTitle">
-    <Form />
+    <Form>
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuId>
+        <SpuShowcase v-model="formData.spuId" :limit="1" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue

@@ -111,7 +111,6 @@ function emitActivityChange() {
     >
       <Tooltip :title="activity.name">
         <div class="relative h-full w-full">
-          <!-- TODO @芋艿 -->
           <Image
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"

apps/web-antd/src/views/mall/promotion/coupon/template/data.ts

@@ -60,14 +60,10 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       defaultValue: PromotionProductScopeEnum.ALL.scope,
     },
-    // TODO @puhui999： 商品选择器优化
     {
       fieldName: 'productSpuIds',
       label: '商品',
       component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品',
-      },
       dependencies: {
         triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>
@@ -84,14 +80,10 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @puhui999： 商品分类选择器优化
     {
       fieldName: 'productCategoryIds',
       label: '商品分类',
       component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品分类',
-      },
       dependencies: {
         triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>

apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue

@@ -16,11 +16,18 @@ import {
   updateCouponTemplate,
 } from '#/api/mall/promotion/coupon/couponTemplate';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallCouponTemplateApi.CouponTemplate>();
+const formData = ref<
+  Partial<MallCouponTemplateApi.CouponTemplate> & {
+    productCategoryIds?: number | number[];
+    productSpuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['优惠券模板'])
@@ -64,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getCouponTemplate(data.id);
-      const processedData = await processLoadData(formData.value);
+      const processedData = await processLoadData(formData.value as any);
       // 设置到表单
       await formApi.setValues(processedData);
     } finally {
@@ -144,6 +151,15 @@ async function processLoadData(
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" />
+      </template>
+    </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/discountActivity/data.ts

@@ -67,8 +67,15 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuIds',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
-    // TODO @puhui999：少了商品选择~
   ];
 }
 

apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue

@@ -13,13 +13,18 @@ import {
   updateDiscountActivity,
 } from '#/api/mall/promotion/discount/discountActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'DiscountActivityForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<MallDiscountActivityApi.DiscountActivity>();
+const formData = ref<
+  Partial<MallDiscountActivityApi.DiscountActivity> & {
+    spuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -69,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -91,6 +96,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-3/5" :title="getTitle">
-    <Form />
+    <Form>
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuIds>
+        <SpuShowcase v-model="formData.spuIds" />
+      </template>
+    </Form>
   </Modal>
 </template>

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

@@ -133,10 +133,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       rules: 'required',
       formItemClass: 'col-span-2',
-      // TODO @puhui999：貌似 renderComponentContent 不需要哇？
-      renderComponentContent: () => ({
-        default: () => null,
-      }),
     },
   ];
 }

apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue

@@ -42,7 +42,6 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 
 /** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  // TODO @puhui999：这个国际化，需要加下哈；closing、closeSuccess；
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.closing', [row.name]),
     duration: 0,

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

@@ -29,10 +29,10 @@ const emit = defineEmits(['success']);
 
 const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
+  productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
 
-// TODO @puhui999：点击“编辑”后，会出现 Cannot read properties of null (reading 'type') 报错；
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['满减送'])
@@ -78,6 +78,7 @@ const [Modal, modalApi] = useVbenModal({
       switch (data.productScope) {
         case PromotionProductScopeEnum.CATEGORY.scope: {
           const categoryIds = data.productCategoryIds;
+
           data.productScopeValues = Array.isArray(categoryIds)
             ? categoryIds
             : categoryIds

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

@@ -8,12 +8,14 @@ import { useVbenModal } from '@vben/common-ui';
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createSeckillActivity,
   getSeckillActivity,
   updateSeckillActivity,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
+import { SpuSkuSelect } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -31,25 +33,37 @@ const spuId = ref<number>();
 const spuName = ref<string>('');
 const skuTableData = ref<any[]>([]);
 
-// 选择商品（占位函数，实际需要对接商品选择组件）
+const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
+
+/** 打开商品选择弹窗 */
 const handleSelectProduct = () => {
-  message.info('商品选择功能需要对接商品选择组件');
+  spuSkuSelectRef.value?.open();
-  // TODO: 打开商品选择弹窗
-  // 实际使用时需要：
-  // 1. 打开商品选择弹窗
-  // 2. 选择商品后调用以下逻辑设置数据：
-  //    spuId.value = selectedSpu.id;
-  //    spuName.value = selectedSpu.name;
-  //    skuTableData.value = selectedSkus.map(sku => ({
-  //      skuId: sku.id,
-  //      skuName: sku.name || '',
-  //      picUrl: sku.picUrl || selectedSpu.picUrl || '',
-  //      price: sku.price || 0,
-  //      stock: 0,
-  //      seckillPrice: 0,
-  //    }));
 };
 
+/** 选择商品后的回调 */
+async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
+  const spu = await getSpu(selectedSpuId);
+  if (!spu) return;
+
+  spuId.value = spu.id;
+  spuName.value = spu.name || '';
+
+  // 筛选指定的 SKU
+  const selectedSkus = skuIds
+    ? spu.skus?.filter((sku) => skuIds.includes(sku.id!))
+    : spu.skus;
+
+  skuTableData.value =
+    selectedSkus?.map((sku) => ({
+      skuId: sku.id!,
+      skuName: sku.name || '',
+      picUrl: sku.picUrl || spu.picUrl || '',
+      price: sku.price || 0,
+      stock: 0,
+      seckillPrice: 0,
+    })) || [];
+}
+
 // ================= end =================
 
 const [Form, formApi] = useVbenForm({
@@ -137,10 +151,30 @@ const [Modal, modalApi] = useVbenModal({
       await nextTick();
       await formApi.setValues(formData.value);
 
-      // TODO: 加载商品和 SKU 信息
+      // 加载商品和 SKU 信息
-      // 需要调用商品 API 获取 SPU 详情
+      if (formData.value.spuId) {
-      // spuId.value = formData.value.spuId;
+        const spu = await getSpu(formData.value.spuId);
-      // await loadProductDetails(formData.value.spuId, formData.value.products);
+        if (spu) {
+          spuId.value = spu.id;
+          spuName.value = spu.name || '';
+          // 回填 SKU 配置
+          const products = formData.value.products || [];
+          skuTableData.value =
+            spu.skus
+              ?.filter((sku) => products.some((p) => p.skuId === sku.id))
+              .map((sku) => {
+                const product = products.find((p) => p.skuId === sku.id);
+                return {
+                  skuId: sku.id!,
+                  skuName: sku.name || '',
+                  picUrl: sku.picUrl || spu.picUrl || '',
+                  price: sku.price || 0,
+                  stock: product?.stock || 0,
+                  seckillPrice: (product?.seckillPrice || 0) / 100, // 分转元
+                };
+              }) || [];
+        }
+      }
     } finally {
       modalApi.unlock();
     }
@@ -154,7 +188,6 @@ const [Modal, modalApi] = useVbenModal({
       <Form />
 
       <!-- 商品选择区域 -->
-      <!-- TODO @puhui999：这里缺少商品的选择； -->
       <div class="mt-4">
         <div class="mb-2 flex items-center">
           <span class="text-sm font-medium">秒杀活动商品:</span>
@@ -218,4 +251,11 @@ const [Modal, modalApi] = useVbenModal({
       </div>
     </div>
   </Modal>
+
+  <!-- 商品选择器弹窗 -->
+  <SpuSkuSelect
+    ref="spuSkuSelectRef"
+    :is-select-sku="true"
+    @select="handleSpuSelected"
+  />
 </template>

apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue

@@ -133,7 +133,6 @@ function emitActivityChange() {
         class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="handleOpenActivitySelect"
       >
-        <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
         <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </Tooltip>

packages/locales/src/langs/en-US/ui.json

@@ -36,7 +36,9 @@
     "downloadTemplateFail": "Download template failed",
     "updating": "Updating {0}...",
     "updateSuccess": "Update {0} successfully",
-    "updateFailed": "Update {0} failed"
+    "updateFailed": "Update {0} failed",
+    "closing": "Closing {0} ...",
+    "closeSuccess": "{0} closed successfully"
   },
   "placeholder": {
     "input": "Please enter",

packages/locales/src/langs/zh-CN/ui.json

@@ -36,7 +36,9 @@
     "downloadTemplateFail": "下载模板失败",
     "updating": "正在更新 {0}...",
     "updateSuccess": "更新 {0} 成功",
-    "updateFailed": "更新 {0} 失败"
+    "updateFailed": "更新 {0} 失败",
+    "closing": "正在关闭 {0} ...",
+    "closeSuccess": "{0} 关闭成功"
   },
   "placeholder": {
     "input": "请输入",