feat：【ele】【mall】rewardActivity 代码迁移

2025-12-30 10:32:25 +00:00 · 2025-12-15 15:55:56 +08:00
parent f943b175eb
commit e0d3fac19e
7 changed files with 625 additions and 168 deletions
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';

-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { ElDialog } from 'element-plus';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,8 +17,11 @@ const props = defineProps<{
  takeType?: number; // 领取方式
 }>();

-// TODO @puhui999：这个也要调整，和 antd 保持统一。
-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态

 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
@@ -49,19 +54,44 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });

-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    // 从 gridApi 获取选中的记录
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-      []) as MallCouponTemplateApi.CouponTemplate[];
-    await modalApi.close();
-    emit('success', selectedRecords);
-  },
+/** 打开弹窗 */
+async function open() {
+  visible.value = true;
+  // 重置查询条件并重新加载数据，与 antd 行为一致
+  await gridApi.query();
+}
+
+/** 确认选择 */
+async function handleConfirm() {
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+defineExpose({
+  open,
 });
 </script>

 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <ElDialog
+    v-model="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
    <Grid />
-  </Modal>
+    <template #footer>
+      <el-button @click="closeModal">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </ElDialog>
 </template>
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
@@ -73,8 +73,7 @@ const [Modal, modalApi] = useVbenModal({
          :actions="[
            {
              label: '发送',
-              type: 'primary',
-              link: true,
+              type: 'text',
              auth: ['promotion:coupon:send'],
              onClick: () => handleSendCoupon(row),
            },
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
@@ -1,86 +1,17 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { DICT_TYPE } from '@vben/constants';
+import {
+  DICT_TYPE,
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';

-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      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',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'endTime',
-      label: '结束时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择结束时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-        class: '!w-full',
-      },
-      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,
-      },
-    },
-  ];
-}
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';

-/** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
@@ -89,7 +20,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'Input',
      componentProps: {
        placeholder: '请输入活动名称',
-        clearable: true,
+        allowClear: true,
      },
    },
    {
@@ -97,9 +28,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '活动状态',
      component: 'Select',
      componentProps: {
-        placeholder: '请选择活动状态',
-        clearable: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择活动状态',
+        allowClear: true,
      },
    },
    {
@@ -107,26 +38,24 @@ export function useGridFormSchema(): VbenFormSchema[] {
      label: '活动时间',
      component: 'RangePicker',
      componentProps: {
-        placeholder: ['活动开始日期', '活动结束日期'],
-        clearable: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
      },
    },
  ];
 }

-/** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'name',
      title: '活动名称',
-      minWidth: 140,
+      minWidth: 200,
    },
    {
      field: 'productScope',
      title: '活动范围',
-      minWidth: 100,
+      minWidth: 120,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
@@ -161,9 +90,156 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    },
    {
      title: '操作',
-      width: 180,
+      width: 200,
      fixed: 'right',
      slots: { default: 'actions' },
    },
  ];
 }
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'startAndEndTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      rules: 'required',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: [
+          $t('utils.rangePicker.beginTime'),
+          $t('utils.rangePicker.endTime'),
+        ],
+      },
+    },
+    {
+      fieldName: 'conditionType',
+      label: '条件类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
+    },
+    {
+      fieldName: 'productScope',
+      label: '活动范围',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
+    },
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
+        trigger(values, form) {
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScopeValues',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
+    },
+  ];
+}
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
@@ -2,7 +2,8 @@
 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 { CommonStatusEnum } from '@vben/constants';

 import { ElLoading, ElMessage } from 'element-plus';

@@ -15,39 +16,40 @@ 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' });

 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: RewardActivityForm,
+  connectedComponent: Form,
  destroyOnClose: true,
 });

-/** 刷新表格 */
 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) {
-  await confirm('确认关闭该满减送活动吗？');
-  await closeRewardActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  const loading = ElLoading.service({
+    text: $t('ui.actionMessage.closing', [row.name]),
+  });
+  try {
+    await closeRewardActivity(row.id as number);
+    ElMessage.success($t('ui.actionMessage.closeSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loading.close();
+  }
 }

-/** 删除活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
  const loadingInstance = ElLoading.service({
    text: $t('ui.actionMessage.deleting', [row.name]),
@@ -94,21 +96,14 @@ const [Grid, gridApi] = useVbenVxeGrid({

 <template>
  <Page auto-content-height>
-    <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'],
@@ -122,28 +117,29 @@ const [Grid, gridApi] = useVbenVxeGrid({
          :actions="[
            {
              label: $t('common.edit'),
-              type: 'primary',
-              link: true,
+              type: 'link',
              icon: ACTION_ICON.EDIT,
              auth: ['promotion:reward-activity:update'],
              onClick: handleEdit.bind(null, row),
            },
            {
              label: '关闭',
-              type: 'danger',
-              link: true,
-              icon: ACTION_ICON.DELETE,
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.CLOSE,
              auth: ['promotion:reward-activity:close'],
-              ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              ifShow: row.status === CommonStatusEnum.ENABLE,
+              popConfirm: {
+                title: '确认关闭该满减送活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
            },
            {
              label: $t('common.delete'),
-              type: 'danger',
-              link: true,
+              type: 'link',
+              danger: true,
              icon: ACTION_ICON.DELETE,
              auth: ['promotion:reward-activity:delete'],
-              ifShow: row.status !== 0,
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                confirm: handleDelete.bind(null, row),
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -3,25 +3,38 @@ import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardAc

 import { computed, 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 { ElMessage } from 'element-plus';

+import { useVbenForm } from '#/adapter/form';
 import {
  createRewardActivity,
  getReward,
  updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';
+import RewardRule from './reward-rule.vue';

 const emit = defineEmits(['success']);
-const formData = ref<MallRewardActivityApi.RewardActivity>();
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
+  conditionType: PromotionConditionTypeEnum.PRICE.type,
+  productScope: PromotionProductScopeEnum.ALL.scope,
+  rules: [],
+});
 const getTitle = computed(() => {
  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['满减送活动'])
-    : $t('ui.actionTitle.create', ['满减送活动']);
+    ? $t('ui.actionTitle.edit', ['满减送'])
+    : $t('ui.actionTitle.create', ['满减送']);
 });

 const [Form, formApi] = useVbenForm({
@@ -31,7 +44,6 @@ const [Form, formApi] = useVbenForm({
    },
    labelWidth: 100,
  },
-  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
@@ -44,20 +56,38 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }
    modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallRewardActivityApi.RewardActivity;
-
-    // 确保必要的默认值
-    if (!data.rules) {
-      data.rules = [];
-    }
-
    try {
-      await (formData.value?.id
-        ? updateRewardActivity(data)
-        : createRewardActivity(data));
-      // 关闭并提示
+      const values = await formApi.getValues();
+      const data = { ...formData.value, ...values };
+      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
+        data.startTime = data.startAndEndTime[0];
+        data.endTime = data.startAndEndTime[1];
+        delete data.startAndEndTime;
+      }
+      data.rules?.forEach((item: any) => {
+        item.discountPrice = convertToInteger(item.discountPrice || 0);
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = convertToInteger(item.limit || 0);
+        }
+      });
+      switch (data.productScope) {
+        case PromotionProductScopeEnum.CATEGORY.scope: {
+          const categoryIds = data.productCategoryIds;
+          data.productScopeValues = Array.isArray(categoryIds)
+            ? categoryIds
+            : categoryIds
+              ? [categoryIds]
+              : [];
+          break;
+        }
+        case PromotionProductScopeEnum.SPU.scope: {
+          data.productScopeValues = data.productSpuIds;
+          break;
+        }
+      }
+      await (data.id
+        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
+        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
      await modalApi.close();
      emit('success');
      ElMessage.success($t('ui.actionMessage.operationSuccess'));
@@ -67,19 +97,25 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
      return;
    }
-    // 加载数据
    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
    if (!data || !data.id) {
      return;
    }
    modalApi.lock();
    try {
-      formData.value = await getReward(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      const result = await getReward(data.id);
+      result.startAndEndTime = [result.startTime, result.endTime] as any[];
+      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);
    } finally {
      modalApi.unlock();
    }
@@ -88,16 +124,17 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <Form />
-
-    <!-- 简化说明 -->
-    <div class="mt-4 rounded bg-blue-50 p-4">
-      <p class="text-sm text-blue-600">
-        <strong>说明：</strong> 当前为简化版本的满减送活动表单。
-        复杂的商品选择、优惠规则配置等功能已简化，仅保留基础字段配置。
-        如需完整功能，请参考原始 Element UI 版本的实现。
-      </p>
-    </div>
+  <Modal :title="getTitle" class="w-2/3">
+    <Form class="mx-6">
+      <template #rules>
+        <RewardRule v-model="formData" />
+      </template>
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
+    </Form>
  </Modal>
 </template>
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -0,0 +1,147 @@
+<script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElInputNumber } from 'element-plus';
+
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
+import { DictTag } from '#/components/dict-tag';
+import { CouponSelect } from '#/views/mall/promotion/coupon/components';
+import { discountFormat } from '#/views/mall/promotion/coupon/formatter';
+
+defineOptions({ name: 'RewardRuleCouponSelect' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardRule;
+}>();
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
+  giveCount?: number;
+}
+
+const rewardRule = useVModel(props, 'modelValue', emits);
+const list = ref<GiveCoupon[]>([]);
+
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
+function handleSelect() {
+  selectRef.value?.open();
+}
+
+function handleChange(val: any[]) {
+  for (const item of val) {
+    if (list.value.some((v) => v.id === item.id)) {
+      continue;
+    }
+    list.value.push(item);
+  }
+}
+
+function handleDelete(index: number) {
+  list.value.splice(index, 1);
+}
+
+async function initGiveCouponList() {
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
+    return;
+  }
+  const tempLateIds = Object.keys(
+    rewardRule.value.giveCouponTemplateCounts,
+  ) as unknown as number[];
+  const data = await getCouponTemplateList(tempLateIds);
+  if (!data) {
+    return;
+  }
+  data.forEach((coupon) => {
+    list.value.push({
+      ...coupon,
+      giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+    });
+  });
+}
+
+watch(
+  list,
+  (val) => {
+    if (!rewardRule.value) {
+      return;
+    }
+    rewardRule.value.giveCouponTemplateCounts = {};
+    val.forEach((item) => {
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
+    });
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  await nextTick();
+  await initGiveCouponList();
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="list.length > 0" class="mb-2 flex flex-col gap-2">
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-2 transition-all hover:border-blue-400 hover:shadow-sm"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="font-medium text-gray-800">{{ item.name }}</span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+              :value="item.productScope"
+            />
+          </span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+              :value="item.discountType"
+            />
+            {{ discountFormat(item) }}
+          </span>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <span class="text-gray-500">送</span>
+          <ElInputNumber
+            v-model="item.giveCount"
+            class="!w-20"
+            :min="0"
+            :step="1"
+          />
+          <span class="text-gray-500">张</span>
+          <ElButton
+            type="danger"
+            text
+            size="small"
+            @click="handleDelete(index)"
+          >
+            删除
+          </ElButton>
+        </div>
+      </div>
+    </div>
+
+    <ElButton link class="!pl-0" @click="handleSelect">+ 添加优惠券</ElButton>
+
+    <CouponSelect
+      ref="selectRef"
+      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
+      @change="handleChange"
+    />
+  </div>
+</template>
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed } from 'vue';
+
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInputNumber,
+  ElRow,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
+
+defineOptions({ name: 'RewardRule' });
+
+const props = defineProps<{
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
+}>();
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emits);
+
+const isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+function handleAdd() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+function handleDelete(ruleIndex: number) {
+  formData.value.rules?.splice(ruleIndex, 1);
+}
+</script>
+
+<template>
+  <ElRow :gutter="[16, 16]">
+    <template v-if="formData.rules">
+      <ElCol v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <ElCard size="small" class="rounded-lg">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span class="text-base font-medium">活动层级 {{ index + 1 }}</span>
+              <ElButton
+                v-if="index !== 0"
+                type="danger"
+                text
+                size="small"
+                @click="handleDelete(index)"
+              >
+                删除
+              </ElButton>
+            </div>
+          </template>
+
+          <ElForm :model="rule" label-position="left">
+            <ElFormItem label="优惠门槛:" class="mb-3">
+              <div
+                class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+              >
+                <span>满</span>
+                <ElInputNumber
+                  v-if="isPriceCondition"
+                  v-model="rule.limit"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-40"
+                  placeholder="请输入金额"
+                />
+                <ElInputNumber
+                  v-else
+                  v-model="rule.limit"
+                  :min="0"
+                  :step="1"
+                  class="!w-40"
+                  placeholder="请输入数量"
+                />
+                <span>{{ isPriceCondition ? '元' : '件' }}</span>
+              </div>
+            </ElFormItem>
+
+            <ElFormItem label="优惠内容:" class="!mb-0">
+              <div class="flex flex-col gap-3">
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="!w-21 shrink-0 text-sm text-gray-500">订单金额优惠</span>
+                  <span>减</span>
+                  <ElInputNumber
+                    v-model="rule.discountPrice"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    class="!w-32"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
+
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">包邮</span>
+                  <ElSwitch v-model="rule.freeDelivery" />
+                </div>
+
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">送积分</span>
+                  <span>送</span>
+                  <ElInputNumber
+                    v-model="rule.point"
+                    :min="0"
+                    :step="1"
+                    class="!w-32"
+                    placeholder="请输入积分"
+                  />
+                  <span>积分</span>
+                </div>
+
+                <div
+                  class="flex flex-col items-start gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">送优惠券</span>
+                  <RewardRuleCouponSelect
+                    :model-value="rule"
+                    @update:model-value="
+                      (val) => (formData.rules![index] = val)
+                    "
+                  />
+                </div>
+              </div>
+            </ElFormItem>
+          </ElForm>
+        </ElCard>
+      </ElCol>
+    </template>
+
+    <ElCol :span="24" class="mt-2">
+      <ElButton type="primary" @click="handleAdd">+ 添加优惠规则</ElButton>
+    </ElCol>
+
+    <ElCol :span="24" class="mt-2">
+      <ElTag type="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </ElTag>
+    </ElCol>
+  </ElRow>
+</template>