feat：【antd】【mall】优化满减送的界面

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">
+  <div>
-    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>
+    <!-- 已选优惠券列表 -->
-
+    <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="coupon-list-item mb-2 flex justify-between rounded-lg border border-dashed border-gray-300 p-2"
+        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="coupon-list-item-left flex flex-wrap items-center gap-2">
+        <div class="flex flex-wrap items-center gap-3">
-        <div>优惠券名称：{{ item.name }}</div>
+          <span class="font-medium text-gray-800">{{ item.name }}</span>
-        <div>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
-          范围：
             <DictTag
               :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
               :value="item.productScope"
             />
-        </div>
+          </span>
-        <div class="flex items-center">
+          <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>
+        <div class="flex shrink-0 items-center gap-2">
-      <div class="coupon-list-item-right flex items-center gap-2">
+          <span class="text-gray-500">送</span>
-        <span>送</span>
           <Input
             v-model:value="item.giveCount"
-          class="!w-150px"
+            class="!w-20"
             placeholder=""
             type="number"
+            size="small"
           />
-        <span>张</span>
+          <span class="text-gray-500">张</span>
-        <Button type="link" danger @click="handleDelete(index)">删除</Button>
+          <Button type="link" danger size="small" @click="handleDelete(index)">
+            删除
+          </Button>
+        </div>
       </div>
     </div>
 
-    <!-- 优惠券选择 -->
+    <!-- 添加按钮 -->
+    <Button type="link" class="!pl-0" @click="handleSelect">
+      + 添加优惠券
+    </Button>
+
+    <!-- 优惠券选择弹窗 -->
     <CouponSelect
       ref="selectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"

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,24 +62,32 @@ 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">
+        <Card size="small" class="rounded-lg">
           <!-- 规则标题 -->
-        <div class="mb-4 flex items-center">
+          <template #title>
-          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
+            <div class="flex items-center">
+              <span class="text-base font-medium">
+                活动层级 {{ index + 1 }}
+              </span>
+            </div>
+          </template>
+          <template v-if="index !== 0" #extra>
             <Button
-            v-if="index !== 0"
               type="link"
               danger
-            class="ml-2"
+              size="small"
               @click="handleDelete(index)"
             >
               删除
             </Button>
-        </div>
+          </template>
 
           <Form :model="rule" layout="horizontal">
             <!-- 优惠门槛 -->
-          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
+            <FormItem label="优惠门槛:" :colon="false" class="mb-3">
-            <div class="flex items-center gap-2">
+              <div
+                class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+              >
                 <span>满</span>
                 <InputNumber
                   v-if="isPriceCondition"
@@ -101,14 +110,15 @@ function handleDelete(ruleIndex: number) {
               </div>
             </FormItem>
             <!-- 优惠内容 -->
-          <FormItem
+            <FormItem label="优惠内容:" :colon="false" class="!mb-0">
-            label="优惠内容"
+              <div class="flex flex-col gap-3">
-            :label-col="{ span: 4 }"
+                <!-- 订单金额优惠 -->
-            :wrapper-col="{ span: 20 }"
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
                 >
-            <div class="flex flex-col gap-2">
+                  <span class="!w-21 shrink-0 text-sm text-gray-500">
-              <span>订单金额优惠</span>
+                    订单金额优惠
-              <div class="flex items-center gap-2">
+                  </span>
                   <span>减</span>
                   <InputNumber
                     v-model:value="rule.discountPrice"
@@ -120,17 +130,24 @@ function handleDelete(ruleIndex: number) {
                   />
                   <span>元</span>
                 </div>
-              <div class="flex items-center gap-2">
+                <!-- 包邮 -->
-                <span>包邮:</span>
+                <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>
+                <!-- 送积分 -->
-                <div>送积分:</div>
+                <div
-                <div class="mt-2 flex items-center gap-2">
+                  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>
+                <!-- 送优惠券 -->
-              <div class="flex items-center gap-2">
+                <div
-                <span class="w-20">送优惠券:</span>
+                  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)"
+                    @update:model-value="
+                      (val) => (formData.rules![index] = val)
+                    "
                   />
                 </div>
               </div>
             </FormItem>
           </Form>
+        </Card>
       </Col>
     </template>