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

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/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>