feat：【mall 商城】promotion reward【antd】100%: 迁移完成

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

@@ -0,0 +1,2 @@
+export { default as RewardRuleCouponSelect } from './reward-rule-coupon-select.vue';
+export { default as RewardRule } from './reward-rule.vue';

apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Input } from 'ant-design-vue';
+
+// import { CouponSelect } from '@/views/mall/promotion/coupon/components'; // TODO: 根据实际路径调整
+// import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; // TODO: API
+// import { discountFormat } from '@/views/mall/promotion/coupon/formatter'; // TODO: 根据实际路径调整
+
+defineOptions({ name: 'RewardRuleCouponSelect' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardRule;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const rewardRule = useVModel(props, 'modelValue', emits);
+const list = ref<any[]>([]); // TODO: 改为 GiveCouponVO[] 类型
+
+const CouponTemplateTakeTypeEnum = {
+  ADMIN: { type: 2 },
+};
+
+/** 选择优惠券 */
+// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+function selectCoupon() {
+  // couponSelectRef.value?.open();
+}
+
+/** 选择优惠券后的回调 */
+function handleCouponChange(val: any[]) {
+  for (const item of val) {
+    if (list.value.some((v) => v.id === item.id)) {
+      continue;
+    }
+    list.value.push(item);
+  }
+}
+
+/** 删除优惠券 */
+function deleteCoupon(index: number) {
+  list.value.splice(index, 1);
+}
+
+/** 初始化赠送的优惠券列表 */
+async function initGiveCouponList() {
+  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  //   return;
+  // }
+  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
+  // const data = await CouponTemplateApi.getCouponTemplateList(tempLateIds);
+  // if (!data) {
+  //   return;
+  // }
+  // data.forEach((coupon) => {
+  //   list.value.push({
+  //     ...coupon,
+  //     giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+  //   });
+  // });
+}
+
+/** 设置赠送的优惠券 */
+function setGiveCouponList() {
+  if (!rewardRule.value) {
+    return;
+  }
+  rewardRule.value.giveCouponTemplateCounts = {};
+  list.value.forEach((rule) => {
+    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
+  });
+}
+
+defineExpose({ setGiveCouponList });
+
+onMounted(async () => {
+  await nextTick();
+  await initGiveCouponList();
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+
+    <div
+      v-for="(item, index) in list"
+      :key="item.id"
+      class="coupon-list-item mb-2 flex justify-between rounded-lg border border-dashed border-gray-300 p-2"
+    >
+      <div class="coupon-list-item-left flex flex-wrap items-center gap-2">
+        <div>优惠券名称：{{ item.name }}</div>
+        <div>
+          范围：
+          <!-- <DictTag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" /> -->
+          {{ item.productScope }}
+        </div>
+        <div class="flex items-center">
+          优惠：
+          <!-- <DictTag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" /> -->
+          <!-- {{ discountFormat(item) }} -->
+          {{ item.discountType }}
+        </div>
+      </div>
+      <div class="coupon-list-item-right flex items-center gap-2">
+        <span>送</span>
+        <Input
+          v-model:value="item.giveCount"
+          class="!w-150px"
+          placeholder=""
+          type="number"
+        />
+        <span>张</span>
+        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+      </div>
+    </div>
+
+    <!-- 优惠券选择 -->
+    <!-- <CouponSelect
+      ref="couponSelectRef"
+      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
+      @change="handleCouponChange"
+    /> -->
+  </div>
+</template>

apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue

@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  InputNumber,
+  Row,
+  Switch,
+  Tag,
+} from 'ant-design-vue';
+
+import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
+
+defineOptions({ name: 'RewardRule' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardActivity;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emits);
+const rewardRuleCouponSelectRef =
+  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
+
+const PromotionConditionTypeEnum = {
+  PRICE: { type: 10 },
+  COUNT: { type: 20 },
+};
+
+const isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+/** 删除优惠规则 */
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
+/** 添加优惠规则 */
+function addRule() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+/** 设置规则优惠券-提交时 */
+function setRuleCoupon() {
+  if (!rewardRuleCouponSelectRef.value) {
+    return;
+  }
+  rewardRuleCouponSelectRef.value.forEach((item: any) =>
+    item.setGiveCouponList(),
+  );
+}
+
+defineExpose({ setRuleCoupon });
+</script>
+
+<template>
+  <Row>
+    <template v-if="formData.rules">
+      <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <div class="mb-4">
+          <span class="font-bold">活动层级{{ index + 1 }}</span>
+          <Button
+            v-if="index !== 0"
+            type="link"
+            danger
+            class="ml-2"
+            @click="deleteRule(index)"
+          >
+            删除
+          </Button>
+        </div>
+
+        <Form :model="rule">
+          <FormItem label="优惠门槛:" label-col="{ span: 4 }">
+            <div class="flex items-center gap-2">
+              <span>满</span>
+              <InputNumber
+                v-if="isPriceCondition"
+                v-model:value="rule.limit"
+                :min="0"
+                :precision="2"
+                :step="0.1"
+                class="!w-150px"
+                placeholder=""
+                controls-position="right"
+              />
+              <Input
+                v-else
+                v-model:value="rule.limit"
+                :min="0"
+                class="!w-150px"
+                placeholder=""
+                type="number"
+              />
+              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+            </div>
+          </FormItem>
+
+          <FormItem label="优惠内容:" label-col="{ span: 4 }">
+            <div class="flex flex-col gap-4">
+              <!-- 订单金额优惠 -->
+              <div class="flex items-center gap-2">
+                <span>订单金额优惠</span>
+              </div>
+              <div class="ml-4 flex items-center gap-2">
+                <span>减</span>
+                <InputNumber
+                  v-model:value="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-150px"
+                  controls-position="right"
+                />
+                <span>元</span>
+              </div>
+
+              <!-- 包邮 -->
+              <div class="flex items-center gap-2">
+                <span>包邮：</span>
+                <Switch
+                  v-model:checked="rule.freeDelivery"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </div>
+
+              <!-- 送积分 -->
+              <div class="flex items-center gap-2">
+                <span>送积分：</span>
+                <span>送</span>
+                <Input
+                  v-model:value="rule.point"
+                  class="!w-150px"
+                  placeholder=""
+                  type="number"
+                />
+                <span>积分</span>
+              </div>
+
+              <!-- 送优惠券 -->
+              <div class="flex items-center gap-2">
+                <span>送优惠券：</span>
+                <RewardRuleCouponSelect
+                  ref="rewardRuleCouponSelectRef"
+                  v-model="rule"
+                />
+              </div>
+            </div>
+          </FormItem>
+        </Form>
+      </Col>
+    </template>
+
+    <Col :span="24" class="mt-4">
+      <Button type="primary" @click="addRule">添加优惠规则</Button>
+    </Col>
+
+    <Col :span="24" class="mt-4">
+      <Tag color="warning">赠送积分为 0 时不赠送。未选优惠券时不赠送。</Tag>
+    </Col>
+  </Row>
+</template>

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

@@ -1,84 +1,20 @@
+// 1. 导入类型
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+// 2. 导入 VBEN 常量和工具
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 
-/** 表单配置 */
+// 3. 导入 Zod 用于高级验证
-export function useFormSchema(): VbenFormSchema[] {
+import { z } from '#/adapter/form';
-  return [
+// 4. 导入项目级工具函数
-    {
+import { getRangePickerDefaultProps } from '#/utils';
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '活动名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入活动名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'startTime',
-      label: '开始时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择开始时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'endTime',
-      label: '结束时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择结束时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'conditionType',
-      label: '条件类型',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'productScope',
-      label: '商品范围',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
 
-/** 列表的搜索表单 */
+/**
+ * @description: 列表的搜索表单
+ */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -95,9 +31,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         allowClear: true,
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
     {
@@ -105,28 +41,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['活动开始日期', '活动结束日期'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/**
+ * @description: 列表的字段
+ */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '活动名称',
-      minWidth: 140,
+      minWidth: 200,
     },
     {
       field: 'productScope',
       title: '活动范围',
-      minWidth: 100,
+      minWidth: 120,
+      align: 'center',
       cellRender: {
-        name: 'CellDict',
+        name: 'CellDictTag',
         props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
       },
     },
@@ -134,20 +72,23 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'startTime',
       title: '活动开始时间',
       minWidth: 180,
+      align: 'center',
       formatter: 'formatDateTime',
     },
     {
       field: 'endTime',
       title: '活动结束时间',
       minWidth: 180,
+      align: 'center',
       formatter: 'formatDateTime',
     },
     {
       field: 'status',
       title: '状态',
       minWidth: 100,
+      align: 'center',
       cellRender: {
-        name: 'CellDict',
+        name: 'CellDictTag',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
@@ -159,9 +100,77 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 180,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
+/**
+ * @description: 新增/修改的表单
+ */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    // 隐藏的 ID 字段
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: z.string().min(1, '活动名称不能为空'),
+    },
+    {
+      fieldName: 'startAndEndTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
+      },
+      rules: z.array(z.any()).min(1, '活动时间不能为空'),
+    },
+    {
+      fieldName: 'conditionType',
+      label: '条件类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
+    },
+    {
+      fieldName: 'productScope',
+      label: '活动范围',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+    },
+  ];
+}

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+// 严格遵循导入顺序原则
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -15,46 +16,32 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import RewardActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionRewardActivity' });
 
+// 1. 使用 useVbenModal 初始化弹窗
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: RewardActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 刷新表格 */
+// 2. 定义业务操作函数
-function handleRefresh() {
-  gridApi.query();
-}
-
-/** 创建满减送活动 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑满减送活动 */
 function handleEdit(row: MallRewardActivityApi.RewardActivity) {
-  formModalApi.setData(row).open();
+  formModalApi.setData({ id: row.id }).open();
 }
 
-/** 关闭活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该满减送活动吗？',
-    });
-  } catch {
-    return;
-  }
-
   const hideLoading = message.loading({
-    content: '正在关闭中',
+    content: '活动关闭中...',
     duration: 0,
   });
   try {
-    await closeRewardActivity(row.id as number);
+    await closeRewardActivity(row.id!);
     message.success({
       content: '关闭成功',
     });
@@ -64,105 +51,81 @@ async function handleClose(row: MallRewardActivityApi.RewardActivity) {
   }
 }
 
-/** 删除活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
-  const hideLoading = message.loading({
+  await deleteRewardActivity(row.id!);
-    content: $t('ui.actionMessage.deleting', [row.name]),
+  message.success($t('common.delSuccess'));
-    duration: 0,
-  });
-  try {
-    await deleteRewardActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
   handleRefresh();
-  } finally {
-    hideLoading();
-  }
 }
 
+function handleRefresh() {
+  gridApi.query();
+}
+
+// 3. 使用 useVbenVxeGrid 初始化列表
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getRewardActivityPage({
+          const params = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
-          });
+          };
+          return await getRewardActivityPage(params);
         },
       },
     },
-    rowConfig: {
+  } as VxeTableGridOptions,
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
 });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <Page>
-    <template #doc>
+    <!-- 弹窗组件的注册 -->
-      <DocAlert
-        title="【营销】满减送"
-        url="https://doc.iocoder.cn/mall/promotion-record/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
 
-    <Grid table-title="满减送活动列表">
+    <!-- 列表组件的渲染 -->
+    <Grid table-title="满减送活动">
+      <!-- 工具栏按钮 -->
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['满减送活动']),
+              label: $t('ui.actionTitle.create', ['活动']),
-              type: 'primary',
               icon: ACTION_ICON.ADD,
-              auth: ['promotion:reward-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
+      <!-- 操作列按钮 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
               label: $t('common.edit'),
-              type: 'link',
               icon: ACTION_ICON.EDIT,
-              auth: ['promotion:reward-activity:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
               label: '关闭',
-              type: 'link',
+              icon: ACTION_ICON.CLOSE,
               danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['promotion:reward-activity:close'],
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              popConfirm: {
+                title: '确认关闭该满减活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
-              type: 'link',
-              danger: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['promotion:reward-activity:delete'],
+              danger: true,
-              ifShow: row.status !== 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),

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

@@ -1,103 +1,216 @@
 <script lang="ts" setup>
+import type { VbenFormProps } from '#/adapter/form';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Alert, FormItem, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import {
   createRewardActivity,
   getReward,
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { SpuAndSkuList } from '#/views/mall/promotion/components';
 
+import RewardRule from '../components/reward-rule.vue';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallRewardActivityApi.RewardActivity>();
+const formData = ref<MallRewardActivityApi.RewardActivity>({
-const getTitle = computed(() => {
+  conditionType: PromotionConditionTypeEnum.PRICE.type,
-  return formData.value?.id
+  productScope: PromotionProductScopeEnum.ALL.scope,
-    ? $t('ui.actionTitle.edit', ['满减送活动'])
+  rules: [],
-    : $t('ui.actionTitle.create', ['满减送活动']);
 });
 
+const getTitle = computed(() =>
+  formData.value?.id ? '编辑满减送' : '新增满减送',
+);
+
+// 1. 使用 useVbenForm 初始化表单
 const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    labelWidth: 100,
+  } as VbenFormProps['commonConfig'],
-  },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
-  schema: useFormSchema(),
-  showDefaultActions: false,
 });
 
+const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
+
+// 2. 使用 useVbenModal 定义弹窗行为
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
-    if (!valid) {
+    if (!valid) return;
-      return;
+
-    }
     modalApi.lock();
-    // 提交表单
+    try {
-    const data =
+      const data = await formApi.getValues();
-      (await formApi.getValues()) as MallRewardActivityApi.RewardActivity;
 
-    // 确保必要的默认值
+      // 1. 设置活动规则优惠券
-    if (!data.rules) {
+      rewardRuleRef.value?.setRuleCoupon();
-      data.rules = [];
+
+      // 2. 时间段转换
+      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
+        data.startTime = data.startAndEndTime[0];
+        data.endTime = data.startAndEndTime[1];
+        delete data.startAndEndTime;
       }
 
-    try {
+      // 3. 规则元转分
-      await (formData.value?.id
+      data.rules?.forEach((item: any) => {
-        ? updateRewardActivity(data)
+        item.discountPrice = convertToInteger(item.discountPrice || 0);
-        : createRewardActivity(data));
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
-      // 关闭并提示
+          item.limit = convertToInteger(item.limit || 0);
+        }
+      });
+
+      // 4. 设置商品范围
+      setProductScopeValues(data);
+
+      if (formData.value?.id) {
+        await updateRewardActivity(<MallRewardActivityApi.RewardActivity>data);
+        message.success($t('common.updateSuccess'));
+      } else {
+        await createRewardActivity(<MallRewardActivityApi.RewardActivity>data);
+        message.success($t('common.createSuccess'));
+      }
       await modalApi.close();
       emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {
-      return;
+        conditionType: PromotionConditionTypeEnum.PRICE.type,
-    }
+        productScope: PromotionProductScopeEnum.ALL.scope,
-    // 加载数据
+        rules: [],
-    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
+      };
-    if (!data || !data.id) {
       return;
     }
+
+    const data = modalApi.getData();
+    if (!data || !data.id) return;
+
     modalApi.lock();
     try {
-      formData.value = await getReward(data.id);
+      const result = await getReward(data.id);
-      // 设置到 values
+
-      await formApi.setValues(formData.value);
+      // 转区段时间
+      result.startAndEndTime = [result.startTime, result.endTime];
+
+      // 规则分转元
+      result.rules?.forEach((item: any) => {
+        item.discountPrice = formatToFraction(item.discountPrice || 0);
+        if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = formatToFraction(item.limit || 0);
+        }
+      });
+
+      formData.value = result;
+      await formApi.setValues(result);
+
+      // 获得商品范围
+      await getProductScope();
     } finally {
       modalApi.unlock();
     }
   },
 });
+
+/** 获得商品范围 */
+async function getProductScope() {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.CATEGORY.scope: {
+      await nextTick();
+      let productCategoryIds = formData.value.productScopeValues as any;
+      if (
+        Array.isArray(productCategoryIds) &&
+        productCategoryIds.length === 1
+      ) {
+        // 单选时使用数组不能反显
+        productCategoryIds = productCategoryIds[0];
+      }
+      // 设置品类编号
+      formData.value.productCategoryIds = productCategoryIds;
+      break;
+    }
+    case PromotionProductScopeEnum.SPU.scope: {
+      // 设置商品编号
+      formData.value.productSpuIds = formData.value.productScopeValues;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 设置商品范围 */
+function setProductScopeValues(data: any) {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.CATEGORY.scope: {
+      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
+        ? formData.value.productCategoryIds
+        : [formData.value.productCategoryIds];
+      break;
+    }
+    case PromotionProductScopeEnum.SPU.scope: {
+      data.productScopeValues = formData.value.productSpuIds;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
 </script>
 
 <template>
-  <Modal class="w-4/5" :title="getTitle">
+  <Modal :title="getTitle" class="!w-[65%]">
+    <Alert
+      description="【营销】满减送"
+      message="提示"
+      show-icon
+      type="info"
+      class="mb-4"
+    />
+
     <Form />
 
-    <!-- 简化说明 -->
+    <!-- 优惠设置 -->
-    <div class="mt-4 rounded bg-blue-50 p-4">
+    <FormItem label="优惠设置">
-      <p class="text-sm text-blue-600">
+      <RewardRule ref="rewardRuleRef" v-model="formData" />
-        <strong>说明：</strong> 当前为简化版本的满减送活动表单。
+    </FormItem>
-        复杂的商品选择、优惠规则配置等功能已简化，仅保留基础字段配置。
+
-        如需完整功能，请参考原始 Element UI 版本的实现。
+    <!-- 商品范围选择 -->
-      </p>
+    <FormItem
-    </div>
+      v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
+      label="选择商品"
+    >
+      <SpuAndSkuList
+        v-model:spu-ids="formData.productSpuIds"
+        :rule-config="[]"
+        :spu-property-list="[]"
+        :deletable="true"
+        :spu-list="[]"/>
+    </FormItem>
+
+    <!-- 分类选择 -->
+    <!-- 注意：category 选择器暂未实现，需要根据实际需求添加 -->
   </Modal>
 </template>