From 0ffebd6de4da57342a370af13f776c9fd259a867 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 29 Nov 2025 11:17:37 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91=E4=BC=98=E5=8C=96=E6=BB=A1=E5=87=8F=E9=80=81?=
 =?UTF-8?q?=E7=9A=84=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/reward-rule-coupon-select.vue     |  75 ++++----
 .../rewardActivity/modules/reward-rule.vue    | 166 ++++++++++--------
 2 files changed, 136 insertions(+), 105 deletions(-)

diff --git 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
index 7674f5b1a..fef6297ed 100644
--- 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
@@ -102,46 +102,53 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-full">
-    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</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 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 items-center">
-          优惠：
-          <DictTag
-            :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
-            :value="item.discountType"
+        <div class="flex shrink-0 items-center gap-2">
+          <span class="text-gray-500">送</span>
+          <Input
+            v-model:value="item.giveCount"
+            class="!w-20"
+            placeholder=""
+            type="number"
+            size="small"
           />
-          {{ discountFormat(item) }}
+          <span class="text-gray-500">张</span>
+          <Button type="link" danger size="small" @click="handleDelete(index)">
+            删除
+          </Button>
         </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="handleDelete(index)">删除</Button>
-      </div>
     </div>
 
-    <!-- 优惠券选择 -->
+    <!-- 添加按钮 -->
+    <Button type="link" class="!pl-0" @click="handleSelect">
+      + 添加优惠券
+    </Button>
+
+    <!-- 优惠券选择弹窗 -->
     <CouponSelect
       ref="selectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
diff --git 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
index 56df4ac84..a90d9ff97 100644
--- 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
@@ -8,6 +8,7 @@ import { PromotionConditionTypeEnum } from '@vben/constants';
 import { useVModel } from '@vueuse/core';
 import {
   Button,
+  Card,
   Col,
   Form,
   FormItem,
@@ -61,76 +62,92 @@ function handleDelete(ruleIndex: number) {
   <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="handleDelete(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"
-                class="!w-40"
-                placeholder="请输入金额"
-              />
-              <Input
-                v-else
-                v-model:value="rule.limit"
-                :min="0"
-                class="!w-40"
-                placeholder="请输入数量"
-                type="number"
-              />
-              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+        <Card size="small" class="rounded-lg">
+          <!-- 规则标题 -->
+          <template #title>
+            <div class="flex items-center">
+              <span class="text-base font-medium">
+                活动层级 {{ index + 1 }}
+              </span>
             </div>
-          </FormItem>
-          <!-- 优惠内容 -->
-          <FormItem
-            label="优惠内容"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 20 }"
-          >
-            <div class="flex flex-col gap-2">
-              <span>订单金额优惠</span>
-              <div class="flex items-center gap-2">
-                <span>减</span>
+          </template>
+          <template v-if="index !== 0" #extra>
+            <Button
+              type="link"
+              danger
+              size="small"
+              @click="handleDelete(index)"
+            >
+              删除
+            </Button>
+          </template>
+
+          <Form :model="rule" layout="horizontal">
+            <!-- 优惠门槛 -->
+            <FormItem label="优惠门槛:" :colon="false" class="mb-3">
+              <div
+                class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+              >
+                <span>满</span>
                 <InputNumber
-                  v-model:value="rule.discountPrice"
+                  v-if="isPriceCondition"
+                  v-model:value="rule.limit"
                   :min="0"
                   :precision="2"
                   :step="0.1"
-                  class="!w-32"
+                  class="!w-40"
                   placeholder="请输入金额"
                 />
-                <span>元</span>
-              </div>
-              <div class="flex items-center gap-2">
-                <span>包邮:</span>
-                <Switch
-                  v-model:checked="rule.freeDelivery"
-                  checked-children="是"
-                  un-checked-children="否"
+                <Input
+                  v-else
+                  v-model:value="rule.limit"
+                  :min="0"
+                  class="!w-40"
+                  placeholder="请输入数量"
+                  type="number"
                 />
+                <span>{{ isPriceCondition ? '元' : '件' }}</span>
               </div>
-              <div>
-                <div>送积分:</div>
-                <div class="mt-2 flex items-center gap-2">
+            </FormItem>
+            <!-- 优惠内容 -->
+            <FormItem label="优惠内容:" :colon="false" 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>
+                  <InputNumber
+                    v-model:value="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>
+                  <Switch
+                    v-model:checked="rule.freeDelivery"
+                    checked-children="是"
+                    un-checked-children="否"
+                  />
+                </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>
                   <InputNumber
                     v-model:value="rule.point"
@@ -140,17 +157,24 @@ function handleDelete(ruleIndex: number) {
                   />
                   <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>
-              <div class="flex items-center gap-2">
-                <span class="w-20">送优惠券:</span>
-                <RewardRuleCouponSelect
-                  :model-value="rule"
-                  @update:model-value="(val) => (formData.rules![index] = val)"
-                />
-              </div>
-            </div>
-          </FormItem>
-        </Form>
+            </FormItem>
+          </Form>
+        </Card>
       </Col>
     </template>