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/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts
@@ -1,2 +0,0 @@
-export { default as RewardRuleCouponSelect } from './reward-rule-coupon-select.vue';
-export { default as RewardRule } from './reward-rule.vue';
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -1,10 +1,15 @@
 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';

+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';

 /** 列表的搜索表单 */
@@ -97,35 +102,40 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
+    // 隐藏 ID 字段
    {
-      component: 'Input',
      fieldName: 'id',
+      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
      },
    },
+    // 活动名称
    {
      fieldName: 'name',
      label: '活动名称',
      component: 'Input',
+      rules: 'required',
      componentProps: {
        placeholder: '请输入活动名称',
+        allowClear: true,
      },
-      rules: 'required',
    },
+    // 活动时间
    {
      fieldName: 'startAndEndTime',
      label: '活动时间',
      component: 'RangePicker',
+      rules: 'required',
      componentProps: {
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
+        allowClear: true,
      },
-      rules: 'required',
    },
-    // TODO @puhui999：增加一个 defaultValue
+    // 条件类型
    {
      fieldName: 'conditionType',
      label: '条件类型',
@@ -135,9 +145,9 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
-      defaultValue: PromotionConditionTypeEnum.PRICE.type,
-      rules: 'required',
+      rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
    },
+    // 活动范围
    {
      fieldName: 'productScope',
      label: '活动范围',
@@ -147,8 +157,9 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
-      rules: 'required',
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
    },
+    // 备注
    {
      fieldName: 'remark',
      label: '备注',
@@ -156,6 +167,26 @@ export function useFormSchema(): VbenFormSchema[] {
      componentProps: {
        placeholder: '请输入备注',
        rows: 4,
+        allowClear: true,
+      },
+    },
+    // 优惠规则（自定义组件插槽）
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+    // 商品范围选择（自定义组件插槽）
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
      },
    },
  ];
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -42,12 +42,12 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 /** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
  const hideLoading = message.loading({
-    content: '正在关闭中...',
+    content: $t('ui.actionMessage.closing', [row.name]),
    duration: 0,
  });
  try {
    await closeRewardActivity(row.id!);
-    message.success('关闭成功');
+    message.success($t('ui.actionMessage.closeSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
@@ -96,7 +96,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
      refresh: true,
      search: true,
    },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
 });
 </script>

@@ -104,6 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <Grid table-title="满减送活动">
+      <!-- 工具栏按钮 -->
      <template #toolbar-tools>
        <TableAction
          :actions="[
@@ -111,19 +112,22 @@ const [Grid, gridApi] = useVbenVxeGrid({
              label: $t('ui.actionTitle.create', ['活动']),
              type: 'primary',
              icon: ACTION_ICON.ADD,
+              auth: ['promotion:reward-activity:create'],
              onClick: handleCreate,
            },
          ]"
        />
      </template>
+
+      <!-- 行操作按钮 -->
      <template #actions="{ row }">
-        <!-- TODO @AI：table action 的权限标识；参考 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/promotion/rewardActivity/index.vue -->
        <TableAction
          :actions="[
            {
              label: $t('common.edit'),
              type: 'link',
              icon: ACTION_ICON.EDIT,
+              auth: ['promotion:reward-activity:update'],
              onClick: handleEdit.bind(null, row),
            },
            {
@@ -131,9 +135,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
              type: 'link',
              danger: true,
              icon: ACTION_ICON.CLOSE,
+              auth: ['promotion:reward-activity:close'],
              ifShow: row.status === 0,
              popConfirm: {
-                title: '确认关闭该满减活动吗？',
+                title: '确认关闭该满减送活动吗？',
                confirm: handleClose.bind(null, row),
              },
            },
@@ -142,6 +147,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
              type: 'link',
              danger: true,
              icon: ACTION_ICON.DELETE,
+              auth: ['promotion:reward-activity:delete'],
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                confirm: handleDelete.bind(null, row),
--- 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/components/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
@@ -1,16 +1,19 @@
 <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 { 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: 根据实际路径调整
+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';

-// TODO @puhui999：这里报错了。
 defineOptions({ name: 'RewardRuleCouponSelect' });

 const props = defineProps<{
@@ -21,17 +24,22 @@ 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<any[]>([]); // TODO: 改为 GiveCouponVO[] 类型
+const list = ref<GiveCoupon[]>([]);

 const CouponTemplateTakeTypeEnum = {
  ADMIN: { type: 2 },
 };

 /** 选择优惠券 */
-// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
 function selectCoupon() {
-  // couponSelectRef.value?.open();
+  couponSelectRef.value?.open();
 }

 /** 选择优惠券后的回调 */
@@ -51,20 +59,22 @@ function deleteCoupon(index: number) {

 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
-  //   return;
-  // }
-  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
-  // const data = await getCouponTemplateList(tempLateIds);
-  // if (!data) {
-  //   return;
-  // }
-  // data.forEach((coupon) => {
-  //   list.value.push({
-  //     ...coupon,
-  //     giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
-  //   });
-  // });
+  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],
+    });
+  });
 }

 /** 设置赠送的优惠券 */
@@ -99,14 +109,18 @@ onMounted(async () => {
        <div>优惠券名称：{{ item.name }}</div>
        <div>
          范围：
-          <!-- <DictTag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" /> -->
-          {{ item.productScope }}
+          <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) }} -->
-          {{ item.discountType }}
+          <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">
@@ -123,10 +137,10 @@ onMounted(async () => {
    </div>

    <!-- 优惠券选择 -->
-    <!-- <CouponSelect
+    <CouponSelect
      ref="couponSelectRef"
      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
      @change="handleCouponChange"
-    /> -->
+    />
  </div>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-// TODO @puhui999：在优化下代码；
 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,
@@ -33,23 +34,12 @@ 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 = [];
@@ -62,7 +52,10 @@ function addRule() {
  });
 }

-/** 设置规则优惠券-提交时 */
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
 function setRuleCoupon() {
  if (!rewardRuleCouponSelectRef.value) {
    return;
@@ -76,11 +69,12 @@ defineExpose({ setRuleCoupon });
 </script>

 <template>
-  <Row>
+  <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">
-          <span class="font-bold">活动层级{{ index + 1 }}</span>
+        <!-- 规则标题 -->
+        <div class="mb-4 flex items-center">
+          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
          <Button
            v-if="index !== 0"
            type="link"
@@ -92,8 +86,9 @@ defineExpose({ setRuleCoupon });
          </Button>
        </div>

-        <Form :model="rule">
-          <FormItem label="优惠门槛:" :label-col="{ span: 4 }">
+        <Form :model="rule" layout="horizontal">
+          <!-- 优惠门槛 -->
+          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
            <div class="flex items-center gap-2">
              <span>满</span>
              <InputNumber
@@ -102,44 +97,46 @@ defineExpose({ setRuleCoupon });
                :min="0"
                :precision="2"
                :step="0.1"
-                class="!w-150px"
-                placeholder=""
-                controls-position="right"
+                :controls="false"
+                class="!w-40"
+                placeholder="请输入金额"
              />
              <Input
                v-else
                v-model:value="rule.limit"
                :min="0"
-                class="!w-150px"
-                placeholder=""
+                class="!w-40"
+                placeholder="请输入数量"
                type="number"
              />
              <span>{{ isPriceCondition ? '元' : '件' }}</span>
            </div>
          </FormItem>

-          <FormItem label="优惠内容:" :label-col="{ span: 4 }">
+          <!-- 优惠内容 -->
+          <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 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>包邮：</span>
+                <span class="font-medium">包邮：</span>
                <Switch
                  v-model:checked="rule.freeDelivery"
                  checked-children="是"
@@ -149,20 +146,21 @@ defineExpose({ setRuleCoupon });

              <!-- 送积分 -->
              <div class="flex items-center gap-2">
-                <span>送积分：</span>
+                <span class="font-medium">送积分：</span>
                <span>送</span>
-                <Input
+                <InputNumber
                  v-model:value="rule.point"
-                  class="!w-150px"
-                  placeholder=""
-                  type="number"
+                  :min="0"
+                  :controls="false"
+                  class="!w-40"
+                  placeholder="请输入积分"
                />
                <span>积分</span>
              </div>

              <!-- 送优惠券 -->
-              <div class="flex items-center gap-2">
-                <span>送优惠券：</span>
+              <div class="flex items-start gap-2">
+                <span class="font-medium">送优惠券：</span>
                <RewardRuleCouponSelect
                  ref="rewardRuleCouponSelectRef"
                  :model-value="rule"
@@ -174,12 +172,16 @@ defineExpose({ setRuleCoupon });
      </Col>
    </template>

-    <Col :span="24" class="mt-4">
-      <Button type="primary" @click="addRule">添加优惠规则</Button>
+    <!-- 添加规则按钮 -->
+    <Col :span="24" class="mt-2">
+      <Button type="primary" @click="addRule">+ 添加优惠规则</Button>
    </Col>

-    <Col :span="24" class="mt-4">
-      <Tag color="warning">赠送积分为 0 时不赠送。未选优惠券时不赠送。</Tag>
+    <!-- 提示信息 -->
+    <Col :span="24" class="mt-2">
+      <Tag color="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </Tag>
    </Col>
  </Row>
 </template>