From d8c87c0f7cec03d812185b9cad0ef8d80d855b3e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 14 Dec 2025 15:05:46 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91=E7=A0=8D=E4=BB=B7=E6=B4=BB=E5=8A=A8=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E9=80=89=E6=8B=A9=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/bargain/activity/data.ts   |   8 +-
 .../bargain/activity/modules/form.vue         | 202 +++++++++++++++---
 2 files changed, 179 insertions(+), 31 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
index 4bd28f89b..3505f1b7d 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
@@ -24,6 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -133,13 +134,6 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入最大砍价金额',
       },
     },
-    // TODO @puhui999：这里交互不太对，可以对比下 element-plus 版本呢
-    {
-      fieldName: 'spuId',
-      label: '砍价商品',
-      component: 'Input',
-      rules: 'required',
-    },
   ];
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
index 71e91a979..ccb54e4c2 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -1,20 +1,21 @@
 <script lang="ts" setup>
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createBargainActivity,
   getBargainActivity,
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
-import { SpuShowcase } from '#/views/mall/product/spu/components';
+import { SpuSkuSelect } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -22,21 +23,62 @@ defineOptions({ name: 'PromotionBargainActivityForm' });
 
 const emit = defineEmits(['success']);
 
-const formData = ref<Partial<MallBargainActivityApi.BargainActivity>>({});
+const formData = ref<MallBargainActivityApi.BargainActivity>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['砍价活动'])
     : $t('ui.actionTitle.create', ['砍价活动']);
 });
 
+// ================= 商品选择相关 =================
+const spuId = ref<number>();
+const skuId = ref<number>();
+const spuName = ref<string>('');
+const skuInfo = ref<{
+  picUrl: string;
+  price: number;
+  skuName: string;
+}>();
+
+const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
+
+/** 打开商品选择弹窗 */
+const handleSelectProduct = () => {
+  spuSkuSelectRef.value?.open();
+};
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
+  const spu = await getSpu(selectedSpuId);
+  if (!spu) return;
+
+  spuId.value = spu.id;
+  spuName.value = spu.name || '';
+
+  // 砍价活动只选择一个 SKU
+  if (skuIds && skuIds.length > 0) {
+    const selectedSku = spu.skus?.find((sku) => sku.id === skuIds[0]);
+    if (selectedSku) {
+      skuId.value = selectedSku.id;
+      skuInfo.value = {
+        skuName: selectedSku.name || '',
+        picUrl: selectedSku.picUrl || spu.picUrl || '',
+        price: Number(selectedSku.price) || 0,
+      };
+    }
+  }
+}
+
+// ================= end =================
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 130,
   },
+  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -48,18 +90,41 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
+
+    // 验证商品和 SKU 选择
+    if (!spuId.value) {
+      message.error('请选择砍价商品');
+      return;
+    }
+
+    if (!skuId.value) {
+      message.error('请选择商品 SKU');
+      return;
+    }
+
     modalApi.lock();
-    // 提交表单
-    const values = await formApi.getValues();
-    const data = {
-      ...values,
-      spuId: formData.value.spuId,
-    } as MallBargainActivityApi.BargainActivity;
     try {
+      const values = await formApi.getValues();
+
+      // 构建提交数据，价格字段转换为分
+      const data = {
+        ...values,
+        spuId: spuId.value,
+        skuId: skuId.value,
+        bargainFirstPrice: Math.round((values.bargainFirstPrice || 0) * 100),
+        bargainMinPrice: Math.round((values.bargainMinPrice || 0) * 100),
+        randomMinPrice: values.randomMinPrice
+          ? Math.round(values.randomMinPrice * 100)
+          : undefined,
+        randomMaxPrice: values.randomMaxPrice
+          ? 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'));
@@ -69,19 +134,59 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = {};
+      formData.value = undefined;
+      spuId.value = undefined;
+      skuId.value = undefined;
+      spuName.value = '';
+      skuInfo.value = undefined;
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
     if (!data || !data.id) {
       return;
     }
+
     modalApi.lock();
     try {
       formData.value = await getBargainActivity(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      await nextTick();
+
+      // 设置表单值时，价格字段从分转换为元
+      await formApi.setValues({
+        ...formData.value,
+        bargainFirstPrice: (formData.value.bargainFirstPrice || 0) / 100,
+        bargainMinPrice: (formData.value.bargainMinPrice || 0) / 100,
+        randomMinPrice: formData.value.randomMinPrice
+          ? formData.value.randomMinPrice / 100
+          : undefined,
+        randomMaxPrice: formData.value.randomMaxPrice
+          ? 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,
+            );
+            if (selectedSku) {
+              skuId.value = selectedSku.id;
+              skuInfo.value = {
+                skuName: selectedSku.name || '',
+                picUrl: selectedSku.picUrl || spu.picUrl || '',
+                price: Number(selectedSku.price) || 0,
+              };
+            }
+          }
+        }
+      }
     } finally {
       modalApi.unlock();
     }
@@ -90,12 +195,61 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4">
-      <!-- 自定义插槽：商品选择 -->
-      <template #spuId>
-        <SpuShowcase v-model="formData.spuId" :limit="1" />
-      </template>
-    </Form>
+  <Modal class="w-3/5" :title="getTitle">
+    <div class="mx-4">
+      <Form />
+
+      <!-- 商品选择区域 -->
+      <div class="mt-4">
+        <div class="mb-2 flex items-center">
+          <span class="text-sm font-medium">砍价活动商品:</span>
+          <Button class="ml-2" type="primary" @click="handleSelectProduct">
+            选择商品
+          </Button>
+          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
+            已选择: {{ spuName }}
+          </span>
+        </div>
+
+        <!-- SKU 信息展示 -->
+        <div v-if="skuInfo" class="mt-4">
+          <table class="w-full border-collapse border border-gray-300">
+            <thead>
+              <tr class="bg-gray-100">
+                <th class="border border-gray-300 px-4 py-2">商品图片</th>
+                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
+                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  <img
+                    v-if="skuInfo.picUrl"
+                    :src="skuInfo.picUrl"
+                    alt="商品图片"
+                    class="h-16 w-16 object-cover"
+                  />
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  {{ skuInfo.skuName }}
+                </td>
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  ¥{{ (skuInfo.price / 100).toFixed(2) }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </Modal>
+
+  <!-- 商品选择器弹窗（单选模式） -->
+  <SpuSkuSelect
+    ref="spuSkuSelectRef"
+    :is-select-sku="true"
+    :radio="true"
+    @select="handleSpuSelected"
+  />
 </template>