feat：【mall 商城】满减送活动优化（antd）

2025-10-31 23:00:21 +08:00
parent dd37e58a41
commit 58a0636959
6 changed files with 174 additions and 145 deletions
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -11,7 +11,7 @@ import {
 } from '@vben/constants';
 import { convertToInteger, formatToFraction } from '@vben/utils';

-import { Alert, FormItem, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
 import {
@@ -20,19 +20,19 @@ import {
  updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
-// TODO @puhui999：有问题
-// import { SpuAndSkuList } from '#/views/mall/promotion/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';

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

 const emit = defineEmits(['success']);
-// TODO @puhui999：代码风格，和别的 form 保持一致；
+
 const formData = ref<MallRewardActivityApi.RewardActivity>({
  conditionType: PromotionConditionTypeEnum.PRICE.type,
  productScope: PromotionProductScopeEnum.ALL.scope,
  rules: [],
 });
+
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['满减送'])
@@ -44,7 +44,9 @@ const [Form, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
+    labelWidth: 100,
  } as VbenFormProps['commonConfig'],
+  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
 });
@@ -60,29 +62,28 @@ const [Modal, modalApi] = useVbenModal({
    modalApi.lock();
    try {
      const data = await formApi.getValues();
-      // 设置活动规则优惠券
+
      rewardRuleRef.value?.setRuleCoupon();
-      // 时间段转换
+
      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);
        }
      });
-      // 设置商品范围
+
      setProductScopeValues(data);

-      // 提交表单
      await (formData.value?.id
-        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
-        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
-      // 关闭并提示
+        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
+        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
+
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -99,17 +100,18 @@ const [Modal, modalApi] = useVbenModal({
      };
      return;
    }
-    // 加载数据
+
    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
    if (!data || !data.id) {
      return;
    }
+
    modalApi.lock();
    try {
      const result = await getReward(data.id);
-      // 转区段时间
-      result.startAndEndTime = [result.startTime, result.endTime];
-      // 规则分转元
+
+      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) {
@@ -118,10 +120,8 @@ const [Modal, modalApi] = useVbenModal({
      });

      formData.value = result;
-      // 设置到 values
      await formApi.setValues(result);

-      // 获得商品范围
      await getProductScope();
    } finally {
      modalApi.unlock();
@@ -129,8 +129,6 @@ const [Modal, modalApi] = useVbenModal({
  },
 });

-/** 获得商品范围 */
-// TODO @puhui999：可以参考下优惠劵模版的做法；可见 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 295 行；
 async function getProductScope() {
  switch (formData.value.productScope) {
    case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -140,15 +138,12 @@ async function getProductScope() {
        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;
    }
@@ -158,7 +153,6 @@ async function getProductScope() {
  }
 }

-/** 设置商品范围 */
 function setProductScopeValues(data: any) {
  switch (formData.value.productScope) {
    case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -179,33 +173,17 @@ function setProductScopeValues(data: any) {
 </script>

 <template>
-  <Modal :title="getTitle" class="!w-[65%]">
-    <!-- TODO @puhui999：貌似可以不要？ -->
-    <Alert
-      description="【营销】满减送"
-      message="提示"
-      show-icon
-      type="info"
-      class="mb-4"
-    />
-    <Form class="mx-4" />
+  <Modal :title="getTitle" class="w-2/3">
+    <Form class="mx-6">
+      <!-- 自定义插槽：优惠规则 -->
+      <template #rules>
+        <RewardRule ref="rewardRuleRef" v-model="formData" />
+      </template>

-    <!-- 优惠设置 -->
-    <FormItem label="优惠设置">
-      <RewardRule ref="rewardRuleRef" v-model="formData" />
-    </FormItem>
-    <!-- 商品范围选择 -->
-    <FormItem
-      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>
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+    </Form>
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -0,0 +1,146 @@
+<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 } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Input } from 'ant-design-vue';
+
+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 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,
+  ) 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],
+    });
+  });
+}
+
+/** 设置赠送的优惠券 */
+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"
+          />
+        </div>
+        <div class="flex items-center">
+          优惠：
+          <DictTag
+            :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+            :value="item.discountType"
+          />
+          {{ discountFormat(item) }}
+        </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>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed, ref } from 'vue';
+
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
+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 isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+function addRule() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
+function setRuleCoupon() {
+  if (!rewardRuleCouponSelectRef.value) {
+    return;
+  }
+  rewardRuleCouponSelectRef.value.forEach((item: any) =>
+    item.setGiveCouponList(),
+  );
+}
+
+defineExpose({ setRuleCoupon });
+</script>
+
+<template>
+  <Row :gutter="[16, 16]">
+    <template v-if="formData.rules">
+      <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <!-- 规则标题 -->
+        <div class="mb-4 flex items-center">
+          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
+          <Button
+            v-if="index !== 0"
+            type="link"
+            danger
+            class="ml-2"
+            @click="deleteRule(index)"
+          >
+            删除
+          </Button>
+        </div>
+
+        <Form :model="rule" layout="horizontal">
+          <!-- 优惠门槛 -->
+          <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"
+                :controls="false"
+                class="!w-40"
+                placeholder="请输入金额"
+              />
+              <Input
+                v-else
+                v-model:value="rule.limit"
+                :min="0"
+                class="!w-40"
+                placeholder="请输入数量"
+                type="number"
+              />
+              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+            </div>
+          </FormItem>
+
+          <!-- 优惠内容 -->
+          <FormItem label="优惠内容" :label-col="{ span: 4 }">
+            <div class="flex flex-col gap-4">
+              <!-- 订单金额优惠 -->
+              <div class="flex flex-col gap-2">
+                <div class="font-medium">订单金额优惠</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"
+                    :controls="false"
+                    class="!w-40"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
+              </div>
+
+              <!-- 包邮 -->
+              <div class="flex items-center gap-2">
+                <span class="font-medium">包邮：</span>
+                <Switch
+                  v-model:checked="rule.freeDelivery"
+                  checked-children="是"
+                  un-checked-children="否"
+                />
+              </div>
+
+              <!-- 送积分 -->
+              <div class="flex items-center gap-2">
+                <span class="font-medium">送积分：</span>
+                <span>送</span>
+                <InputNumber
+                  v-model:value="rule.point"
+                  :min="0"
+                  :controls="false"
+                  class="!w-40"
+                  placeholder="请输入积分"
+                />
+                <span>积分</span>
+              </div>
+
+              <!-- 送优惠券 -->
+              <div class="flex items-start gap-2">
+                <span class="font-medium">送优惠券：</span>
+                <RewardRuleCouponSelect
+                  ref="rewardRuleCouponSelectRef"
+                  :model-value="rule"
+                />
+              </div>
+            </div>
+          </FormItem>
+        </Form>
+      </Col>
+    </template>
+
+    <!-- 添加规则按钮 -->
+    <Col :span="24" class="mt-2">
+      <Button type="primary" @click="addRule">+ 添加优惠规则</Button>
+    </Col>
+
+    <!-- 提示信息 -->
+    <Col :span="24" class="mt-2">
+      <Tag color="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </Tag>
+    </Col>
+  </Row>
+</template>