diff --git a/README.md b/README.md
index b55aa2d0c..d3fe9fab1 100644
--- a/README.md
+++ b/README.md
@@ -162,7 +162,7 @@ lilishop-ui
 
 ## 8. 升级计划
 
-> 更新日期：2026-11-03，依据各端近期提交及当前代码实现同步。
+> 更新日期：2026-11-04，依据各端近期提交及当前代码实现同步。
 
 ### ✅ 已完成特性
 | 功能模块 | 功能模块 |
@@ -173,7 +173,7 @@ lilishop-ui
 | ✅ 购物卡 | ✅ 腾讯云-云直播 |
 | ✅ 卡密商品 | ✅ 二级分销 |
 | ✅ 定时任务管理（数据库配置驱动） | ✅ 预约服务商品 |
-| ✅ 主题色管理 | |
+| ✅ 主题色管理 | ✅ 立减优惠券 |
 
 ### 🔜 近期规划中
 - 🔜 微信小店对接
diff --git a/buyer/src/components/drawer/Drawer.vue b/buyer/src/components/drawer/Drawer.vue
index 6649dc5a8..ebc3a676f 100644
--- a/buyer/src/components/drawer/Drawer.vue
+++ b/buyer/src/components/drawer/Drawer.vue
@@ -39,7 +39,7 @@
               <div>
                 <span v-if="coupon.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(coupon.price) }}</span></span>
                 <span v-if="coupon.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{coupon.couponDiscount}}</span>折</span>
-                <span class="describe">满{{coupon.consumeThreshold}}元可用</span>
+                <span class="describe">{{ coupon.consumeThreshold > 0 ? '满' + coupon.consumeThreshold + '元可用' : '无门槛使用' }}</span>
               </div>
               <p>使用范围：{{useScope(coupon.scopeType, coupon.storeName)}}</p>
               <p>有效期：{{coupon.endTime}}</p>
diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue
index a3fe79216..35864d24c 100644
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -100,7 +100,7 @@
                   @click="handleReceiveCoupon(item.id)"
                 >
                   <span v-if="item.couponType == 'PRICE'"
-                    >满{{ item.consumeThreshold }}减{{ item.price }}</span>
+                    >{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '减' + item.price : '无门槛，立减' + item.price + '元' }}</span>
                   <span v-if="item.couponType == 'DISCOUNT'"
                     >满{{ item.consumeThreshold }}打{{
                       item.couponDiscount
@@ -117,7 +117,7 @@
                       @click="handleReceiveCoupon(item.id)"
                     >
                       <span v-if="item.couponType == 'PRICE'"
-                        >满{{ item.consumeThreshold }}减{{ item.price }}</span>
+                        >{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '减' + item.price : '无门槛，立减' + item.price + '元' }}</span>
                       <span v-if="item.couponType == 'DISCOUNT'"
                         >满{{ item.consumeThreshold }}打{{
                           item.couponDiscount
diff --git a/buyer/src/pages/Cart.vue b/buyer/src/pages/Cart.vue
index 70d6d3344..92de65652 100644
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -75,7 +75,7 @@
                       >￥{{ item.price }}</span>
                     <span v-if="item.couponType === 'DISCOUNT'"
                       >{{ item.couponDiscount }}折</span>
-                    <span>满{{ item.consumeThreshold }}元可用</span>
+                    <span>{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '元可用' : '无门槛使用' }}</span>
                     <el-button
                       class="coupon-btn"
                       size="small"
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index e5862358c..37391c25b 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -11,7 +11,7 @@
                       <el-card shadow="never" v-for="(item, index) in autoCoupList" :key="index" style="margin: 10px 15px">
                             <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                             <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span class="price">{{item.discount}}</span>折</span>
-                            <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{item.consumeThreshold}}元可用</span>
+                            <span class="describe" style="font-size: 15px;margin-left: 5px;">{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '元可用' : '无门槛使用' }}</span>
                             <p style="font-size: 14px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
                             <p style="font-size: 14px;">有效期：{{item.endTime}}</p>
                       </el-card>
diff --git a/buyer/src/pages/home/userCenter/Coupons.vue b/buyer/src/pages/home/userCenter/Coupons.vue
index 4c2bb7575..89685de27 100644
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -23,7 +23,7 @@
               v-if="item.couponType === 'DISCOUNT'"
               class="global_color coupon-amount"
               ><span class="price">{{ item.discount }}</span>折</span>
-            <span class="describe">满{{ item.consumeThreshold }}元可用</span>
+            <span class="describe">{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '元可用' : '无门槛使用' }}</span>
           </div>
           <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
           <p class="coupon-expire">有效期：{{ formatValidity(item) }}</p>
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index 7b421aedb..a052f4db0 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -202,7 +202,7 @@
               <template v-else>{{ item.discount }}折</template>
             </div>
             <div class="pay-coupon-info">
-              <p>满{{ item.consumeThreshold }}元可用</p>
+              <p>{{ item.consumeThreshold > 0 ? '满' + item.consumeThreshold + '元可用' : '无门槛使用' }}</p>
               <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
               <p>有效期：{{ item.endTime }}</p>
             </div>
diff --git a/manager/src/views/member/benefit/index.vue b/manager/src/views/member/benefit/index.vue
index c1b615659..5bc763483 100644
--- a/manager/src/views/member/benefit/index.vue
+++ b/manager/src/views/member/benefit/index.vue
@@ -2,29 +2,12 @@
 
   <div class="search member-benefit">
 
-    <el-card shadow="never" class="table-card">
+    <el-card>
 
-      <template #header>
-
-        <div class="card-header-bar">
-
-          <div class="header-title">
-
-            <span>客户权益列表</span>
-
-          </div>
-
-          <div class="header-actions">
-
-            <el-button size="small" @click="getData">刷新</el-button>
-
-            <el-button type="primary" size="small" @click="openAdd">添加权益设置</el-button>
-
-          </div>
-
-        </div>
-
-      </template>
+      <div class="operation padding-row benefit-actions">
+        <el-button type="primary" @click="openAdd">添加权益设置</el-button>
+        <el-button @click="getData">刷新</el-button>
+      </div>
 
 
 
@@ -33,16 +16,14 @@
         <el-table
 
           v-loading="loading"
-
-          stripe
-
           border
 
           :data="data"
 
           empty-text="暂无数据"
 
-          class="custom-benefit-table"
+          class="custom-benefit-table mt_10"
+          row-key="id"
 
           style="width: 100%"
 
@@ -50,13 +31,13 @@
 
           <!-- 权益ID -->
 
-          <el-table-column prop="id" label="权益ID" min-width="190" show-overflow-tooltip />
+          <el-table-column prop="id" label="权益ID" min-width="150" show-overflow-tooltip />
 
 
 
           <!-- 权益LOGO -->
 
-          <el-table-column label="权益LOGO" width="86" align="center">
+          <el-table-column label="权益LOGO" width="100" align="center">
 
             <template #default="{ row }">
 
@@ -96,7 +77,7 @@
 
           <!-- 权益名称 -->
 
-          <el-table-column prop="benefitName" label="权益名称" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="benefitName" label="权益名称" min-width="150" show-overflow-tooltip />
 
 
 
@@ -108,7 +89,7 @@
 
           <!-- 权益类型 -->
 
-          <el-table-column label="权益类型" width="140" align="center">
+          <el-table-column label="权益类型" width="120" align="center">
 
             <template #default="{ row }">
 
@@ -122,13 +103,13 @@
 
           <!-- 排序 -->
 
-          <el-table-column prop="benefitSort" label="排序" width="80" align="center" />
+          <el-table-column prop="benefitSort" label="排序" width="70" align="center" />
 
 
 
           <!-- 状态 -->
 
-          <el-table-column label="状态" width="110" align="center">
+          <el-table-column label="状态" width="100" align="center">
 
             <template #default="{ row }">
 
@@ -158,7 +139,7 @@
 
           <!-- 操作 -->
 
-          <el-table-column label="操作" width="140" align="center" fixed="right">
+          <el-table-column label="操作" width="120" align="center" fixed="right">
 
             <template #default="{ row }">
 
@@ -484,13 +465,15 @@
 
       </el-form>
 
-      <div class="benefit-drawer-footer-btns">
+      <template #footer>
+        <div class="benefit-drawer-footer-btns">
 
         <el-button @click="addFlag = false">取消</el-button>
 
         <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">提交</el-button>
 
-      </div>
+        </div>
+      </template>
 
     </el-drawer>
 
@@ -724,13 +707,15 @@
 
       </el-form>
 
-      <div class="benefit-drawer-footer-btns">
+      <template #footer>
+        <div class="benefit-drawer-footer-btns">
 
         <el-button @click="editFlag = false">取消</el-button>
 
         <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">提交</el-button>
 
-      </div>
+        </div>
+      </template>
 
     </el-drawer>
 
@@ -1770,47 +1755,15 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 
-.card-header-bar {
-
+.benefit-actions {
   display: flex;
-
-  justify-content: space-between;
-
   align-items: center;
-
-
-
-  .header-title {
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 10px;
-
-    font-size: 15px;
-
-    font-weight: 600;
-
-    color: #303133;
-
-  }
-
-
-
-  .header-actions {
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 8px;
-
-  }
-
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.benefit-actions .el-button + .el-button {
+  margin-left: 0;
 }
-
-
 
 .font-mono {
 
@@ -1913,21 +1866,13 @@ onMounted(() => {
 
 
 .benefit-drawer-footer-btns {
-
-  margin-top: 24px;
-
-  padding-top: 16px;
-
-  border-top: 1px solid #e8eaec;
-
-  text-align: right;
-
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
 }
 
 .benefit-drawer-footer-btns .el-button + .el-button {
-
-  margin-left: 8px;
-
+  margin-left: 0;
 }
 
 .link-text {
@@ -1953,6 +1898,21 @@ onMounted(() => {
 
 
 <style lang="scss">
+.benefit-form-drawer {
+  max-width: 100vw;
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+  .el-drawer__body { padding: 24px; }
+  .el-drawer__footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+  .el-form-item__content { min-width: 0; }
+}
+
 
 .benefit-logo-thumb {
 
diff --git a/manager/src/views/page-decoration/pc/template/TplCoupon.vue b/manager/src/views/page-decoration/pc/template/TplCoupon.vue
index 38339298a..44190b2dd 100644
--- a/manager/src/views/page-decoration/pc/template/TplCoupon.vue
+++ b/manager/src/views/page-decoration/pc/template/TplCoupon.vue
@@ -10,7 +10,7 @@
           <span class="val">{{ cp.price }}</span>
         </div>
         <div class="right-info">
-          <span class="title">满{{ cp.consumeThreshold }}可用</span>
+          <span class="title">{{ cp.consumeThreshold > 0 ? '满' + cp.consumeThreshold + '可用' : '无门槛使用' }}</span>
           <span class="scope" v-if="cp.title">{{ cp.title }}</span>
           <span class="btn">立即领取</span>
         </div>
diff --git a/manager/src/views/promotions/coupon-activity/coupon-info.vue b/manager/src/views/promotions/coupon-activity/coupon-info.vue
index bddc03ab3..9f257c560 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-info.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-info.vue
@@ -91,7 +91,7 @@
         <el-table-column label="优惠券类型" width="130" align="center">
           <template #default="{ row }">
             <el-tag v-if="row" size="small" effect="light" :type="row.couponType === 'DISCOUNT' ? 'warning' : 'danger'">
-              {{ couponTypeText(row.couponType) }}
+              {{ couponTypeText(row) }}
             </el-tag>
           </template>
         </el-table-column>
@@ -181,9 +181,9 @@ onMounted(() => {
   getCouponActivity();
 });
 
-function couponTypeText(v) {
-  if (v === "DISCOUNT") return "打折券";
-  if (v === "PRICE") return "减免现金券";
+function couponTypeText(row) {
+  if (row.couponType === "DISCOUNT") return "满折优惠券";
+  if (row.couponType === "PRICE") return Number(row.consumeThreshold) === 0 ? "立减优惠券" : "满减优惠券";
   return "未知类型";
 }
 
diff --git a/manager/src/views/promotions/coupon-activity/coupon-publish.vue b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
index f7e4c185a..541a5f9de 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -25,13 +25,6 @@
               />
             </el-form-item>
 
-            <el-form-item label="优惠券活动类型" prop="couponActivityType">
-              <el-radio-group v-model="form.couponActivityType">
-                <el-radio-button value="REGISTERED">新人发券</el-radio-button>
-                <el-radio-button value="SPECIFY">精确发券</el-radio-button>
-                <el-radio-button value="AUTO_COUPON">自动赠券</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
             <el-form-item
               label="领取频率"
               v-if="form.couponActivityType === 'AUTO_COUPON'"
@@ -170,8 +163,8 @@
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
-import { useRouter } from "vue-router";
+import { ref, reactive, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import couponTemplate from "@/views/promotions/coupon/coupon";
 import userList from "@/views/member/list/index";
 import { saveActivityCoupon } from "@/api/promotion";
@@ -182,6 +175,7 @@ import { unixToDate } from "@/utils/filters";
 defineOptions({ name: "add-coupon-activity" });
 
 const router = useRouter();
+const route = useRoute();
 const appStore = useAppStore();
 
 const options = reactive({
@@ -205,6 +199,15 @@ const form = reactive({
   couponActivityItems: [],
   couponFrequencyEnum: "",
 });
+watch(
+  () => route.query.couponActivityType,
+  (type) => {
+    if (["REGISTERED", "SPECIFY", "AUTO_COUPON"].includes(type)) {
+      form.couponActivityType = type;
+    }
+  },
+  { immediate: true }
+);
 const submitLoading = ref(false);
 const selectCouponList = ref([]);
 const formRule = reactive({
diff --git a/manager/src/views/promotions/coupon-activity/coupon.vue b/manager/src/views/promotions/coupon-activity/coupon.vue
index 4b8027372..33b626d9a 100644
--- a/manager/src/views/promotions/coupon-activity/coupon.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon.vue
@@ -2,7 +2,9 @@
   <div class="search">
     <el-card>
       <div class="operation padding-row">
-        <el-button type="primary" @click="add">添加活动</el-button>
+        <el-button type="primary" plain @click="addRegistered">注册赠券</el-button>
+        <el-button type="primary" plain @click="addSpecify">精准发券</el-button>
+        <el-button type="primary" plain @click="addAutoCoupon">自动赠券</el-button>
       </div>
 
       <el-table
@@ -105,7 +107,7 @@ function activityTypeText(type) {
     REGISTERED: "注册赠券",
     AUTO_COUPON: "自动发券",
   };
-  return map[type] || "精确发券";
+  return map[type] || "精准发券";
 }
 function activityScopeText(scope) {
   return scope === "DESIGNATED" ? "指定会员" : "全部会员";
@@ -145,8 +147,23 @@ function promotionStatusTagType(status) {
 function init() {
   getDataList();
 }
-function add() {
-  router.push({ name: "add-coupon-activity" });
+function addRegistered() {
+  router.push({
+    name: "add-coupon-activity",
+    query: { couponActivityType: "REGISTERED" },
+  });
+}
+function addSpecify() {
+  router.push({
+    name: "add-coupon-activity",
+    query: { couponActivityType: "SPECIFY" },
+  });
+}
+function addAutoCoupon() {
+  router.push({
+    name: "add-coupon-activity",
+    query: { couponActivityType: "AUTO_COUPON" },
+  });
 }
 function info(v) {
   router.push({ name: "coupon-activity-info", query: { id: v.id } });
diff --git a/manager/src/views/promotions/coupon/coupon-publish.vue b/manager/src/views/promotions/coupon/coupon-publish.vue
index a837616bd..9cb0670b0 100644
--- a/manager/src/views/promotions/coupon/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon/coupon-publish.vue
@@ -1,369 +1,347 @@
 <template>
   <div class="coupon-publish-page">
-    <!-- 顶部页面标题与操作栏 -->
-    <el-card shadow="never" class="header-card">
-      <div class="page-header-row">
-        <div class="header-left">
-          <div class="header-title">
-            <span>{{ isOnlyView ? "平台优惠券详情" : (id ? "编辑平台优惠券" : "添加平台优惠券") }}</span>
-            <el-tag v-if="isOnlyView" type="info" size="small" effect="plain" class="mode-tag">
-              只读模式
-            </el-tag>
-            <el-tag v-else-if="id" type="warning" size="small" effect="plain" class="mode-tag">
-              编辑模式
-            </el-tag>
-            <span v-if="id" class="coupon-id-tip font-mono">ID: {{ id }}</span>
-          </div>
-          <p class="page-description">配置优惠内容、发放规则及适用商品范围。</p>
-        </div>
-        <div class="header-right">
-          <el-button :icon="ArrowLeft" @click="closeCurrentPage">返回优惠券列表</el-button>
-        </div>
+    <div class="page-heading">
+      <div>
+        <h1>{{ isOnlyView ? "平台优惠券详情" : id ? "编辑平台优惠券" : "添加平台优惠券" }}</h1>
+        <p>设置优惠内容、领取规则及适用范围</p>
       </div>
-    </el-card>
-
-    <!-- 表单卡片 -->
-    <el-card shadow="never" class="form-card mt_10">
-      <el-form
-        ref="formRef"
-        :model="form"
-        label-width="130px"
-        :rules="formRule"
-        class="custom-coupon-form"
-      >
-        <!-- 模块一：基本信息 -->
-        <div class="form-section">
-          <div class="section-header">
-            <span class="section-number">01</span>
-            <span class="section-title">基本信息</span>
-            <span class="section-subtitle">配置活动名称、券面额及发放规则</span>
-          </div>
-
-          <div class="section-body">
-            <el-form-item label="活动名称" prop="promotionName">
-              <el-input
-                :disabled="disabled"
-                v-model="form.promotionName"
-                placeholder="请输入活动名称"
-                clearable
-                style="width: 360px"
-              />
-            </el-form-item>
-
-            <el-form-item label="优惠券名称" prop="couponName">
-              <el-input
-                :disabled="disabled"
-                v-model="form.couponName"
-                placeholder="请输入优惠券名称"
-                clearable
-                style="width: 360px"
-              />
-            </el-form-item>
-
-            <el-form-item label="优惠券类型" prop="couponType">
-              <el-select :disabled="disabled" v-model="form.couponType" style="width: 240px">
-                <el-option label="打折" value="DISCOUNT" />
-                <el-option label="减免现金" value="PRICE" />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item
-              label="折扣"
-              prop="couponDiscount"
-              v-if="form.couponType == 'DISCOUNT'"
-            >
-              <el-input-number
-                :disabled="disabled"
-                placeholder="折扣"
-                :max="9.9"
-                :min="0.1"
-                :step="0.1"
-                :precision="1"
-                v-model="form.couponDiscount"
-                style="width: 240px"
-              />
-              <span class="form-describe">请输入 0.1 ~ 9.9 之间的数值（1位小数）</span>
-            </el-form-item>
-
-            <el-form-item label="面额" prop="price" v-if="form.couponType == 'PRICE'">
-              <el-input
-                :disabled="disabled"
-                v-model="form.price"
-                placeholder="请输入减免面额"
-                clearable
-                style="width: 240px"
+      <el-button @click="closeCurrentPage">返回优惠券列表</el-button>
+    </div>
+    <el-form
+      :disabled="disabled"
+      ref="formRef"
+      :model="form"
+      label-position="top"
+      :rules="formRule"
+      class="coupon-form"
+    >
+      <el-card shadow="never" class="type-card">
+        <div class="type-heading">选择优惠券类型</div>
+        <el-radio-group
+          v-model="couponKind"
+          class="coupon-type-options"
+          @change="changeCouponKind"
+          aria-label="优惠券类型"
+        >
+          <el-radio-button value="FULL_REDUCTION"
+            ><span class="type-name">满减优惠券</span
+            ><span class="type-description">消费满指定金额，减免现金</span></el-radio-button
+          >
+          <el-radio-button value="DISCOUNT"
+            ><span class="type-name">满折优惠券</span
+            ><span class="type-description">消费满指定金额，享受折扣</span></el-radio-button
+          >
+          <el-radio-button value="DIRECT_REDUCTION"
+            ><span class="type-name">立减优惠券</span
+            ><span class="type-description">无消费金额门槛，直接减免</span></el-radio-button
+          >
+        </el-radio-group>
+      </el-card>
+      <div class="coupon-layout">
+        <el-card shadow="never" class="editor-card">
+          <section class="form-section">
+            <div class="section-heading">
+              <span class="section-number">01</span>
+              <h2>基本信息</h2>
+            </div>
+            <div class="form-grid">
+              <el-form-item label="活动名称" prop="promotionName"
+                ><el-input
+                  v-model="form.promotionName"
+                  placeholder="例如：双十一平台优惠"
+                  clearable
+              /></el-form-item>
+              <el-form-item label="优惠券名称" prop="couponName"
+                ><el-input v-model="form.couponName" placeholder="例如：新客专享优惠券" clearable
+              /></el-form-item>
+            </div>
+          </section>
+          <section class="form-section">
+            <div class="section-heading">
+              <span class="section-number">02</span>
+              <h2>优惠规则</h2>
+            </div>
+            <div class="form-grid">
+              <el-form-item
+                v-if="couponKind !== 'DIRECT_REDUCTION'"
+                label="消费门槛"
+                prop="consumeThreshold"
               >
-                <template #prefix>¥</template>
-              </el-input>
-            </el-form-item>
-
-            <el-form-item label="店铺承担比例" prop="storeCommission">
-              <el-input
-                :disabled="disabled"
-                v-model="form.storeCommission"
-                placeholder="店铺承担比例"
-                style="width: 240px"
-              >
-                <template #append>%</template>
-              </el-input>
-              <span class="form-describe">店铺承担的资金比例，范围 0-100</span>
-            </el-form-item>
-
-            <el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
-              <el-input
-                :disabled="disabled"
-                v-model="form.publishNum"
-                placeholder="请输入发放数量"
-                style="width: 240px"
-              />
-              <span class="form-describe">若设置为 0，则代表不限制发放数量</span>
-            </el-form-item>
-
-            <el-form-item
-              label="领取数量限制"
-              prop="couponLimitNum"
-              v-if="form.getType === 'FREE'"
-            >
-              <el-input
-                :disabled="disabled"
-                v-model="form.couponLimitNum"
-                placeholder="每人限领张数"
-                clearable
-                style="width: 240px"
-              />
-              <span class="form-describe">若设置为 0，则代表不限制每人领取数量</span>
-            </el-form-item>
-
-            <el-form-item label="范围描述" prop="description" class="form-item-wide">
-              <el-input
-                :disabled="disabled"
-                v-model="form.description"
-                type="textarea"
-                :rows="3"
-                maxlength="50"
-                show-word-limit
-                placeholder="请输入优惠券适用范围或简要说明"
-                style="width: 480px"
-              />
-            </el-form-item>
-          </div>
-        </div>
-
-        <!-- 模块二：使用限制 -->
-        <div class="form-section mt_10">
-          <div class="section-header">
-            <span class="section-number">02</span>
-            <span class="section-title">使用限制</span>
-            <span class="section-subtitle">配置消费门槛、有效时间以及指定适用商品范围</span>
-          </div>
-
-          <div class="section-body usage-fields">
-            <el-form-item label="消费门槛" prop="consumeThreshold">
-              <el-input
-                :disabled="disabled"
-                v-model="form.consumeThreshold"
-                placeholder="请输入消费门槛金额"
-                clearable
-                style="width: 240px"
-              >
-                <template #prefix>¥</template>
-              </el-input>
-              <span class="form-describe">订单满此金额方可使用该优惠券</span>
-            </el-form-item>
-
-            <el-form-item label="有效期" prop="rangeTime">
-              <div class="validity-field">
-                <div v-if="form.getType == 'ACTIVITY'" class="validity-type">
-                  <el-radio-group v-model="rangeTimeType">
-                    <el-radio :disabled="disabled" :value="1" v-if="form.getType !== 'ACTIVITY'">起止时间</el-radio>
-                    <el-radio :disabled="disabled" :value="0">固定有效天数</el-radio>
-                  </el-radio-group>
-                </div>
-
-                <div v-if="rangeTimeType == 1">
-                  <el-date-picker
-                    :disabled="disabled"
-                    type="datetimerange"
-                    v-model="form.rangeTime"
-                    format="YYYY-MM-DD HH:mm:ss"
-                    value-format="YYYY-MM-DD HH:mm:ss"
-                    start-placeholder="开始时间"
-                    end-placeholder="结束时间"
-                    range-separator="至"
-                    :disabled-date="options.disabledDate"
-                    style="width: 380px"
-                  />
-                </div>
-
-                <div class="effectiveDays-row" v-if="rangeTimeType == 0">
-                  <span class="days-label">领取当天开始</span>
+                <el-input
+                  v-model="form.consumeThreshold"
+                  :validate-event="false"
+                  @blur="formRef?.validateField('consumeThreshold').catch(() => {})"
+                  placeholder="请输入最低消费金额"
+                  clearable
+                  ><template #append>元</template></el-input
+                >
+                <div class="form-tip">适用商品金额达到门槛后可使用</div>
+              </el-form-item>
+              <el-form-item v-if="form.couponType === 'PRICE'" label="减免金额" prop="price">
+                <el-input v-model="form.price" placeholder="请输入减免金额" clearable
+                  ><template #append>元</template></el-input
+                >
+                <div class="form-tip">最多支持两位小数</div>
+              </el-form-item>
+              <el-form-item v-else label="优惠折扣" prop="couponDiscount">
+                <div class="input-with-unit">
                   <el-input-number
-                    :disabled="disabled"
+                    v-model="form.couponDiscount"
+                    :min="0.1"
+                    :max="9.9"
+                    :step="0.1"
+                    :precision="1"
+                    controls-position="right"
+                    placeholder="请输入折扣"
+                  /><span>折</span>
+                </div>
+                <div class="form-tip">例如：8.5 折，即按原价的 85% 支付</div>
+              </el-form-item>
+              <div v-if="couponKind === 'DIRECT_REDUCTION'" class="no-threshold-note">
+                <span class="no-threshold-badge">无门槛</span
+                ><span>适用商品可直接抵扣，最多抵扣商品金额。</span>
+              </div>
+              <el-form-item label="店铺承担比例" prop="storeCommission">
+                <el-input v-model="form.storeCommission" placeholder="请输入店铺承担比例"
+                  ><template #append>%</template></el-input
+                >
+                <div class="form-tip">店铺承担优惠金额的比例，范围 0–100</div>
+              </el-form-item>
+            </div>
+          </section>
+          <section class="form-section">
+            <div class="section-heading">
+              <span class="section-number">03</span>
+              <h2>发放与使用</h2>
+            </div>
+            <div class="form-grid">
+              <template v-if="form.getType === 'FREE'">
+                <el-form-item label="发放数量" prop="publishNum"
+                  ><el-input v-model="form.publishNum" placeholder="请输入发放数量"
+                    ><template #append>张</template></el-input
+                  >
+                  <div class="form-tip">设为 0 表示不限发放数量</div></el-form-item
+                >
+                <el-form-item label="每人限领" prop="couponLimitNum"
+                  ><el-input
+                    v-model="form.couponLimitNum"
+                    placeholder="请输入每人可领取张数"
+                    clearable
+                    ><template #append>张</template></el-input
+                  >
+                  <div class="form-tip">设为 0 表示不限领取数量</div></el-form-item
+                >
+              </template>
+              <el-form-item label="有效期" prop="rangeTime" class="full-width">
+                <el-date-picker
+                  v-if="rangeTimeType === 1"
+                  type="datetimerange"
+                  v-model="form.rangeTime"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  range-separator="至"
+                  :disabled-date="options.disabledDate"
+                  class="validity-picker"
+                />
+                <div v-else class="effective-days">
+                  <span>领取当天起</span
+                  ><el-input-number
                     v-model="form.effectiveDays"
                     :min="1"
                     :max="365"
-                    style="width: 130px"
-                  />
-                  <span class="days-unit">天内有效</span>
+                    controls-position="right"
+                  /><span>天内有效</span>
                 </div>
-                <div v-if="rangeTimeType == 0" class="validity-help">有效天数为 1–365 天的整数</div>
-              </div>
-            </el-form-item>
-
-            <el-form-item label="使用范围" prop="scopeType">
-              <el-radio-group v-model="form.scopeType">
-                <el-radio-button :disabled="disabled" value="ALL">全品类通用</el-radio-button>
-                <el-radio-button :disabled="disabled" value="PORTION_GOODS">指定商品</el-radio-button>
-                <el-radio-button :disabled="disabled" value="PORTION_GOODS_CATEGORY">部分商品分类</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-
-            <!-- 指定适用商品表格 -->
-            <el-form-item
-              v-if="form.scopeType == 'PORTION_GOODS'"
-              :label-width="0"
-              class="portion-goods-form-item"
-            >
-              <div class="portion-goods-wrapper">
-                <div class="portion-goods-toolbar">
-                  <div class="portion-goods-heading">
-                    <h3>指定商品</h3>
-                    <span>已选 {{ form.promotionGoodsList.length }} 件商品</span>
-                  </div>
-                  <div v-if="!isOnlyView && form.promotionGoodsList.length" class="goods-toolbar-actions">
-                    <el-button
-                      v-if="selectedGoods.length"
-                      type="danger"
-                      plain
-                      @click="delSelectGoods"
+                <div v-if="rangeTimeType === 0" class="form-tip">有效天数为 1–365 天的整数</div>
+              </el-form-item>
+              <el-form-item label="使用范围" prop="scopeType" class="full-width"
+                ><el-radio-group v-model="form.scopeType" class="scope-options"
+                  ><el-radio-button value="ALL">全平台商品</el-radio-button
+                  ><el-radio-button value="PORTION_GOODS">指定商品</el-radio-button
+                  ><el-radio-button value="PORTION_GOODS_CATEGORY"
+                    >指定分类</el-radio-button
+                  ></el-radio-group
+                ></el-form-item
+              >
+              <el-form-item
+                v-if="form.scopeType == 'PORTION_GOODS'"
+                :label-width="0"
+                class="portion-goods-form-item full-width"
+              >
+                <div class="portion-goods-wrapper">
+                  <div class="portion-goods-toolbar">
+                    <div class="portion-goods-heading">
+                      <h3>指定商品</h3>
+                      <span>已选 {{ form.promotionGoodsList.length }} 件商品</span>
+                    </div>
+                    <div
+                      v-if="!isOnlyView && form.promotionGoodsList.length"
+                      class="goods-toolbar-actions"
+                    >
+                      <el-button
+                        v-if="selectedGoods.length"
+                        type="danger"
+                        plain
+                        @click="delSelectGoods"
+                      >
+                        批量删除 ({{ selectedGoods.length }})
+                      </el-button>
+                      <el-button type="primary" :icon="Plus" @click="openSkuList"
+                        >选择商品</el-button
+                      >
+                    </div>
+                  </div>
+
+                  <el-table
+                    v-if="form.promotionGoodsList.length"
+                    :data="form.promotionGoodsList"
+                    style="width: 100%"
+                    empty-text="暂无指定商品数据"
+                    class="portion-goods-table"
+                    row-key="skuId"
+                    scrollbar-always-on
+                    @selection-change="changeSelect"
+                  >
+                    <el-table-column
+                      v-if="!isOnlyView"
+                      type="selection"
+                      width="50"
+                      align="center"
+                    />
+                    <el-table-column label="图片" width="76" align="center">
+                      <template #default="{ row }">
+                        <el-image
+                          v-if="row && row.thumbnail"
+                          :src="row.thumbnail"
+                          fit="cover"
+                          class="table-goods-thumb"
+                          preview-teleported
+                          :preview-src-list="[row.thumbnail]"
+                        >
+                          <template #error>
+                            <div class="thumb-slot">无图</div>
+                          </template>
+                        </el-image>
+                        <div v-else class="table-goods-thumb thumb-slot">无图</div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="goodsName" label="商品名称" min-width="280">
+                      <template #default="{ row }">
+                        <div class="selected-goods-name" :title="row.goodsName">
+                          {{ row.goodsName || "-" }}
+                        </div>
+                        <div class="selected-goods-sku">SKU：{{ row.skuId }}</div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="商品单价" width="130" align="right">
+                      <template #default="{ row }">
+                        <span v-if="row" class="price-text font-mono font-semibold">
+                          {{ $filters.unitPrice(row.price, "￥") }}
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="库存" width="100" align="right">
+                      <template #default="{ row }">
+                        <span v-if="row" class="font-mono">{{ row.quantity ?? "-" }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      v-if="!isOnlyView"
+                      label="操作"
+                      width="90"
+                      align="center"
+                      fixed="right"
+                    >
+                      <template #default="{ $index }">
+                        <el-button type="danger" size="small" link @click="delGoods($index)">
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <div v-else class="portion-goods-empty">
+                    <div class="empty-icon">
+                      <el-icon :size="28"><ShoppingBag /></el-icon>
+                    </div>
+                    <h3>选择优惠券适用的商品</h3>
+                    <p>
+                      {{
+                        isOnlyView
+                          ? "暂无指定商品"
+                          : "仅选中的商品可使用该优惠券，可一次添加多个商品"
+                      }}
+                    </p>
+                    <el-button v-if="!isOnlyView" type="primary" :icon="Plus" @click="openSkuList"
+                      >选择商品</el-button
                     >
-                      批量删除 ({{ selectedGoods.length }})
-                    </el-button>
-                    <el-button type="primary" :icon="Plus" @click="openSkuList">选择商品</el-button>
                   </div>
                 </div>
+              </el-form-item>
 
-                <el-table
-                  v-if="form.promotionGoodsList.length"
-                  :data="form.promotionGoodsList"
-                  style="width: 100%"
-                  empty-text="暂无指定商品数据"
-                  class="portion-goods-table"
-                  row-key="skuId"
-                  scrollbar-always-on
-                  @selection-change="changeSelect"
-                >
-                  <el-table-column
-                    v-if="!isOnlyView"
-                    type="selection"
-                    width="50"
-                    align="center"
-                  />
-                  <el-table-column label="图片" width="76" align="center">
-                    <template #default="{ row }">
-                      <el-image
-                        v-if="row && row.thumbnail"
-                        :src="row.thumbnail"
-                        fit="cover"
-                        class="table-goods-thumb"
-                        preview-teleported
-                        :preview-src-list="[row.thumbnail]"
-                      >
-                        <template #error>
-                          <div class="thumb-slot">无图</div>
-                        </template>
-                      </el-image>
-                      <div v-else class="table-goods-thumb thumb-slot">无图</div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    prop="goodsName"
-                    label="商品名称"
-                    min-width="280"
-                  >
-                    <template #default="{ row }">
-                      <div class="selected-goods-name" :title="row.goodsName">{{ row.goodsName || '-' }}</div>
-                      <div class="selected-goods-sku">SKU：{{ row.skuId }}</div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="商品单价" width="130" align="right">
-                    <template #default="{ row }">
-                      <span v-if="row" class="price-text font-mono font-semibold">
-                        {{ $filters.unitPrice(row.price, "￥") }}
-                      </span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="库存" width="100" align="right">
-                    <template #default="{ row }">
-                      <span v-if="row" class="font-mono">{{ row.quantity ?? "-" }}</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    v-if="!isOnlyView"
-                    label="操作"
-                    width="90"
-                    align="center"
-                    fixed="right"
-                  >
-                    <template #default="{ $index }">
-                      <el-button
-                        type="danger"
-                        size="small"
-                        link
-                        @click="delGoods($index)"
-                      >
-                        删除
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <div v-else class="portion-goods-empty">
-                  <div class="empty-icon"><el-icon :size="28"><ShoppingBag /></el-icon></div>
-                  <h3>选择优惠券适用的商品</h3>
-                  <p>{{ isOnlyView ? '暂无指定商品' : '仅选中的商品可使用该优惠券，可一次添加多个商品' }}</p>
-                  <el-button v-if="!isOnlyView" type="primary" :icon="Plus" @click="openSkuList">选择商品</el-button>
-                </div>
+              <el-form-item
+                v-if="form.scopeType === 'PORTION_GOODS_CATEGORY'"
+                label="适用分类"
+                class="full-width"
+                ><el-cascader
+                  :options="goodsCategoryList"
+                  v-model="form.scopeIdGoods"
+                  placeholder="请选择适用的商品分类"
+                  clearable
+              /></el-form-item>
+              <el-form-item label="范围描述" prop="description" class="full-width"
+                ><el-input
+                  v-model="form.description"
+                  type="textarea"
+                  :rows="3"
+                  maxlength="50"
+                  show-word-limit
+                  placeholder="请输入优惠券适用范围或简要说明"
+              /></el-form-item>
+            </div>
+          </section>
+        </el-card>
+        <aside class="preview-panel" aria-label="优惠券预览">
+          <div class="preview-heading">券面预览<span>随填写实时更新</span></div>
+          <div class="coupon-ticket">
+            <div class="ticket-benefit">
+              <span class="ticket-type">{{ couponTypeName }}</span>
+              <div class="ticket-amount">
+                <span v-if="form.couponType === 'PRICE'" class="amount-unit">¥</span
+                >{{ previewAmount
+                }}<span v-if="form.couponType === 'DISCOUNT'" class="amount-unit">折</span>
               </div>
-            </el-form-item>
-
-            <!-- 部分商品分类 -->
-            <el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'" label="指定分类">
-              <el-cascader
-                :disabled="disabled"
-                :options="goodsCategoryList"
-                placeholder="请选择适用的商品分类"
-                style="width: 360px"
-                v-model="form.scopeIdGoods"
-                clearable
-              />
-            </el-form-item>
+              <div class="ticket-condition">{{ previewCondition }}</div>
+            </div>
+            <div class="ticket-details">
+              <div class="ticket-name">{{ form.couponName || "优惠券名称" }}</div>
+              <div>{{ previewScope }}</div>
+              <div v-if="form.description">{{ form.description }}</div>
+              <div>{{ previewValidity }}</div>
+            </div>
           </div>
-        </div>
-      </el-form>
-    </el-card>
-
-    <!-- 底部固定操作栏 -->
-    <el-card shadow="never" class="footer-card mt_10">
-      <div class="footer-actions">
-        <el-button @click="closeCurrentPage">返回列表</el-button>
-        <el-button
-          v-if="!isOnlyView"
-          type="primary"
-          :loading="submitLoading"
-          @click="handleSubmit"
-        >
-          保存提交
-        </el-button>
+          <div class="preview-note">预览仅供参考，实际展示以买家端为准。</div>
+        </aside>
       </div>
-    </el-card>
-
-    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
+    </el-form>
+    <div class="form-footer">
+      <span>{{
+        isOnlyView ? "只读模式" : form.getType === "ACTIVITY" ? "活动赠送券" : "买家可主动领取"
+      }}</span>
+      <div class="footer-buttons">
+        <el-button @click="closeCurrentPage">{{ isOnlyView ? "返回列表" : "取消" }}</el-button
+        ><el-button v-if="!isOnlyView" type="primary" :loading="submitLoading" @click="handleSubmit"
+          >保存优惠券</el-button
+        >
+      </div>
+    </div>
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData" />
   </div>
 </template>
-
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { ArrowLeft, Plus, ShoppingBag } from "@element-plus/icons-vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { Plus, ShoppingBag } from "@element-plus/icons-vue";
 import { useRoute, useRouter } from "vue-router";
 import {
   savePlatformCoupon,
@@ -389,8 +367,10 @@ const skuSelectRef = ref(null);
 const checkPrice = (rule, value, callback) => {
   if (!value && value !== 0) {
     return callback(new Error("面额不能为空"));
-  } else if (!regular.money.test(value)) {
+  } else if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value))) {
     callback(new Error("请输入正整数或者两位小数"));
+  } else if (Number(value) <= 0) {
+    callback(new Error("面额必须大于0"));
   } else if (parseFloat(value) > 99999999) {
     callback(new Error("面额设置超过上限值"));
   } else {
@@ -400,8 +380,10 @@ const checkPrice = (rule, value, callback) => {
 const checkWeight = (rule, value, callback) => {
   if (!value && typeof value !== "number") {
     callback(new Error("消费门槛不能为空"));
-  } else if (!regular.money.test(value)) {
+  } else if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value))) {
     callback(new Error("请输入正整数或者两位小数"));
+  } else if (Number(value) <= 0) {
+    callback(new Error("消费门槛必须大于0"));
   } else if (parseFloat(value) > 99999999) {
     callback(new Error("消费门槛设置超过上限值"));
   } else {
@@ -412,8 +394,29 @@ const checkWeight = (rule, value, callback) => {
 const isOnlyView = computed(() => route.query.onlyView === "true" || route.query.onlyView === true);
 const disabled = computed(() => isOnlyView.value);
 
+const couponKind = ref("FULL_REDUCTION");
+const couponTypeName = computed(() => form.value.couponType === "DISCOUNT" ? "满折优惠券" : (Number(form.value.consumeThreshold) === 0 ? "立减优惠券" : "满减优惠券"));
+function changeCouponKind(kind) {
+  form.value.couponType = kind === "DISCOUNT" ? "DISCOUNT" : "PRICE";
+  if (kind === "DIRECT_REDUCTION") {
+    form.value.consumeThreshold = 0;
+  } else if (!(Number(form.value.consumeThreshold) > 0)) {
+    form.value.consumeThreshold = undefined;
+  }
+  if (kind === "DISCOUNT") form.value.price = undefined;
+  else form.value.couponDiscount = undefined;
+  nextTick(() => formRef.value?.clearValidate());
+}
+
 const rangeTimeType = ref(1);
 const modalType = ref(0);
+function defaultCouponRangeTime() {
+  const start = new Date();
+  const end = new Date(start);
+  end.setDate(end.getDate() + 7);
+  return [start, end].map((date) => unixToDate(date.getTime() / 1000));
+}
+
 const form = ref({
   storeCommission: 0,
   publishNum: 0,
@@ -426,6 +429,7 @@ const form = ref({
   promotionGoodsList: [],
   scopeIdGoods: [],
   rangeDayType: "",
+  rangeTime: route.query.id ? [] : defaultCouponRangeTime(),
   effectiveDays: 1,
 });
 const id = ref(route.query.id);
@@ -470,6 +474,32 @@ const options = {
   },
 };
 
+const previewAmount = computed(() => {
+  const value = form.value.couponType === "DISCOUNT" ? form.value.couponDiscount : form.value.price;
+  return value !== undefined && value !== null && value !== "" && Number.isFinite(Number(value)) ? value : "—";
+});
+const previewCondition = computed(() => {
+  if (couponKind.value === "DIRECT_REDUCTION") return "无消费金额门槛";
+  return Number(form.value.consumeThreshold) > 0 ? "满 " + form.value.consumeThreshold + " 元可用" : "达到指定消费金额后可用";
+});
+const previewScope = computed(() => {
+  if (form.value.scopeType === "PORTION_GOODS") return "指定商品可用 · 已选 " + form.value.promotionGoodsList.length + " 件";
+  return form.value.scopeType === "ALL" ? "全平台商品通用" : "指定商品分类可用";
+});
+const previewValidity = computed(() => {
+  if (rangeTimeType.value === 0) return "领取当天起 " + (form.value.effectiveDays || "—") + " 天内有效";
+  const range = form.value.rangeTime;
+  if (!range || range.length !== 2) return "请设置有效期";
+  return formatTime(range[0]).slice(0, 10) + " 至 " + formatTime(range[1]).slice(0, 10);
+});
+
+
+function formatTime(val) {
+  if (!val) return "-";
+  const d = val instanceof Date ? val : new Date(val);
+  return unixToDate(d.getTime() / 1000);
+}
+
 watch(
   () => form.value.getType,
   (val) => {
@@ -491,11 +521,15 @@ watch(
   (e) => {
     id.value = e.id;
     if (id.value) {
+      modalType.value = 1;
       getCoupon();
     } else {
       formRef.value?.resetFields();
+      couponKind.value = "FULL_REDUCTION";
+      changeCouponKind(couponKind.value);
       modalType.value = 0;
       form.value.getType = e.getType === "ACTIVITY" ? "ACTIVITY" : "FREE";
+      form.value.rangeTime = defaultCouponRangeTime();
     }
   }
 );
@@ -545,6 +579,7 @@ function getCoupon() {
       data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
     }
     form.value = data;
+    couponKind.value = data.couponType === "DISCOUNT" ? "DISCOUNT" : (Number(data.consumeThreshold) === 0 ? "DIRECT_REDUCTION" : "FULL_REDUCTION");
   });
 }
 
@@ -552,6 +587,9 @@ function handleSubmit() {
   formRef.value.validate((valid) => {
     if (valid) {
       const params = JSON.parse(JSON.stringify(form.value));
+      if (couponKind.value === "DIRECT_REDUCTION") params.consumeThreshold = 0;
+      if (params.couponType === "DISCOUNT") delete params.price;
+      else delete params.couponDiscount;
       params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
 
       if (rangeTimeType.value == 1) {
@@ -736,228 +774,531 @@ function filterCategoryId(list, idArr) {
 
 <style lang="scss" scoped>
 .coupon-publish-page {
-  max-width: 1640px;
-  padding: 12px 20px 24px;
+  max-width: 1240px;
   margin: 0 auto;
-
-  .header-card {
-    border: 0;
-    background: transparent;
-    :deep(.el-card__body) { padding: 8px 0 4px; }
-    .page-header-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .header-left {
-        .header-title {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          font-size: 22px;
-          font-weight: 500;
-          color: #303133;
-
-          .mode-tag {
-            font-weight: normal;
-          }
-
-          .coupon-id-tip {
-            font-size: 13px;
-            font-weight: normal;
-            color: #909399;
-            background-color: #f4f4f5;
-            padding: 2px 8px;
-            border-radius: 4px;
-          }
-        }
-      }
-
-      .header-right {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
+  padding: 8px 12px 20px;
+  color: #303133;
+}
+.page-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+  h1 {
+    margin: 0 0 8px;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.4;
   }
-
-  .form-card {
-    background: transparent;
-    border: 0;
-    :deep(.el-card__body) { padding: 0; }
-    .custom-coupon-form {
-      padding: 0;
-    }
-
-    .form-section {
-      border: 1px solid #ebeef5;
-      border-radius: 10px;
-      padding: 24px;
-      background-color: var(--el-bg-color);
-      margin-top: 16px;
-
-      .section-header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding-bottom: 14px;
-        margin-bottom: 16px;
-        border-bottom: 1px solid #f0f2f5;
-
-        .section-title {
-          font-size: 15px;
-          font-weight: 500;
-          color: #303133;
-        }
-
-        .section-subtitle {
-          font-size: 12px;
-          color: #909399;
-          margin-left: 6px;
-        }
-      }
-
-      .section-body {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        column-gap: 24px;
-        width: 100%;
-        min-width: 0;
-      }
-      .section-body.usage-fields { display: block; }
-    }
-  }
-
-  .form-describe {
-    font-size: 12px;
-    margin-top: 6px;
-    width: 100%;
+  p {
+    margin: 0;
     color: #909399;
+    font-size: 13px;
   }
-
-  .validity-field {
+}
+.type-card,
+.editor-card,
+.detail-card {
+  border-radius: 8px;
+  border-color: #e6e8eb;
+}
+.type-card {
+  margin-bottom: 20px;
+  :deep(.el-card__body) {
+    padding: 16px 20px 20px;
+  }
+}
+.type-heading {
+  margin-bottom: 14px;
+  font-size: 14px;
+  font-weight: 600;
+}
+.coupon-type-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100%;
+  gap: 16px;
+  :deep(.el-radio-button) {
+    min-width: 0;
+  }
+  :deep(.el-radio-button__inner) {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 8px;
+    gap: 10px;
     width: 100%;
-    min-width: 0;
+    padding: 14px 18px;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px !important;
+    background: #fff;
+    text-align: left;
+    box-shadow: none !important;
+    white-space: normal;
   }
-
-  .validity-help {
-    font-size: 12px;
-    line-height: 20px;
-    color: var(--el-text-color-secondary);
+  :deep(.el-radio-button.is-active .el-radio-button__inner) {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary);
   }
-
-  .effectiveDays-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-
-    :deep(.el-input-number) {
-      flex: 0 0 130px;
-      width: 130px !important;
-      max-width: 130px;
-    }
-
-    .days-label,
-    .days-unit {
-      font-size: 13px;
-      color: #606266;
-      white-space: nowrap;
-    }
-  }
-
-  .portion-goods-wrapper {
-    width: 100%;
-
-    .portion-goods-toolbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      gap: 12px;
-      margin-bottom: 16px;
-    }
-
-    .portion-goods-table {
-      .table-goods-thumb {
-        display: block;
-        width: 44px;
-        height: 44px;
-        margin: 0 auto;
-        border-radius: 4px;
-        border: 1px solid #ebeef5;
-      }
-
-      .thumb-slot {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 11px;
-        color: #c0c4cc;
-        background-color: #fafafa;
-      }
-
-      .price-text {
-        color: #f56c6c;
-      }
-    }
-  }
-
-  .footer-card {
-    border: 1px solid var(--el-border-color-lighter);
-    border-radius: 10px;
-    margin-top: 16px;
-    .footer-actions {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 14px;
-    }
-  }
-
-  .font-mono {
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-  .page-description { margin: 8px 0 0; color: var(--el-text-color-secondary); font-size: 13px; }
-  .section-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; border-radius: 7px; background: var(--el-color-primary-light-9); color: var(--el-color-primary); font-size: 12px; font-weight: 500; }
-  .section-header { flex-wrap: wrap; }
-  .section-body > .el-form-item { min-width: 0; margin-bottom: 22px; align-self: start; }
-  .form-item-wide { grid-column: 1 / -1; }
-  :deep(.el-form-item__content) { min-width: 0; }
-  .section-body :deep(.el-input), .section-body :deep(.el-select), .section-body :deep(.el-input-number), .section-body :deep(.el-cascader) { width: 100% !important; max-width: 360px; }
-  .section-body :deep(.el-textarea) { width: 100% !important; max-width: 720px; }
-  .usage-fields :deep(.el-date-editor.el-date-editor--datetimerange) { width: 520px !important; max-width: 100%; }
-
-  .portion-goods-form-item :deep(.el-form-item__content) { margin-left: 0 !important; }
-  .portion-goods-heading, .goods-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
-  .portion-goods-heading h3 { margin: 0; font-size: 15px; font-weight: 500; }
-  .portion-goods-heading span { color: var(--el-text-color-secondary); font-size: 13px; }
-  .goods-toolbar-actions :deep(.el-button + .el-button), .footer-actions :deep(.el-button + .el-button) { margin-left: 0; }
-  .selected-goods-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
-  .selected-goods-sku { margin-top: 4px; color: var(--el-text-color-secondary); font: 12px/1.5 Consolas, monospace; overflow-wrap: anywhere; }
-  .portion-goods-table :deep(.el-table__cell) { padding: 12px 0; }
-  .portion-goods-table :deep(th.el-table__cell) { background: var(--el-fill-color-light); font-weight: 400; }
-  .portion-goods-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 230px; padding: 24px 20px; box-sizing: border-box; border: 1px dashed var(--el-border-color); border-radius: 8px; background: var(--el-fill-color-lighter); text-align: center; }
-  .portion-goods-empty h3 { margin: 0; font-size: 16px; font-weight: 500; }
-  .portion-goods-empty p { margin: 8px 0 20px; font-size: 13px; color: var(--el-text-color-secondary); }
-  .empty-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 16px; color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
-  @media (max-width: 1100px) {
-    .form-card .form-section .section-body { grid-template-columns: minmax(0, 1fr); }
-  }
-  @media (max-width: 768px) {
-    padding: 8px 8px 20px;
-    .page-header-row { flex-wrap: wrap; gap: 16px; }
-    .form-card .form-section { padding: 16px; }
-    .section-subtitle { width: 100%; }
-    .effectiveDays-row { flex-wrap: wrap; }
+  :deep(.el-radio-button__original-radio:focus-visible + .el-radio-button__inner) {
+    outline: 2px solid var(--el-color-primary);
+    outline-offset: 3px;
   }
 }
+.type-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+}
+.type-description {
+  font-size: 12px;
+  line-height: 18px;
+  color: #909399;
+}
+.coupon-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  align-items: start;
+  gap: 24px;
+}
+.editor-card :deep(.el-card__body) {
+  padding: 0 28px;
+}
+.form-section {
+  padding: 20px 0 4px;
+  & + & {
+    border-top: 1px solid #ebeef5;
+  }
+}
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  h2 {
+    margin: 0;
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+}
+.section-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: #f2f5f9;
+  color: #7b8798;
+  font-size: 12px;
+  font-weight: 600;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 24px;
+  :deep(.el-form-item) {
+    min-width: 0;
+    margin-bottom: 24px;
+  }
+  :deep(.el-form-item__label) {
+    color: #606266;
+    font-weight: 500;
+    margin-bottom: 8px;
+    line-height: 20px;
+  }
+  :deep(.el-input),
+  :deep(.el-cascader),
+  :deep(.el-input-number) {
+    width: 100%;
+  }
+  :deep(.el-input__wrapper) {
+    min-height: 36px;
+    box-sizing: border-box;
+  }
+  :deep(.el-form-item__content) {
+    align-content: flex-start;
+  }
+}
+.full-width {
+  grid-column: 1 / -1;
+}
+.form-tip {
+  width: 100%;
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 7px;
+  color: #909399;
+}
+.input-with-unit {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  color: #909399;
+}
+.no-threshold-note {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 24px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+}
+.no-threshold-badge {
+  color: #339978;
+  background: #edf8f3;
+  padding: 3px 9px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.validity-picker {
+  width: 100% !important;
+  max-width: 530px;
+  min-height: 36px;
+}
+.effective-days {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #606266;
+  :deep(.el-input-number) {
+    width: 130px;
+  }
+}
+.scope-options {
+  flex-wrap: wrap;
+}
+.goods-selection-content {
+  width: 100%;
+}
+.goods-toolbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.goods-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.goods-thumb {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.goods-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.preview-panel {
+  position: sticky;
+  top: 20px;
+  padding-top: 4px;
+}
+.preview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  span {
+    font-size: 12px;
+    font-weight: normal;
+    color: #909399;
+  }
+}
+.coupon-ticket {
+  overflow: hidden;
+  border: 1px solid #dce9fa;
+  border-radius: 10px;
+  background: #fff;
+}
+.ticket-benefit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 16px 26px;
+  background: #eef5ff;
+  color: #3176d2;
+}
+.ticket-type {
+  padding: 3px 10px;
+  border: 1px solid #c9ddfa;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.ticket-amount {
+  margin: 18px 0 8px;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -1px;
+}
+.amount-unit {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0 4px;
+}
+.ticket-condition {
+  font-size: 13px;
+  text-align: center;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.ticket-details {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 1px dashed #c9ddfa;
+  padding: 22px 20px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #dce9fa;
+    border-radius: 50%;
+    background: #f5f7fa;
+    top: -9px;
+  }
+  &::before {
+    left: -10px;
+  }
+  &::after {
+    right: -10px;
+  }
+}
+.ticket-name {
+  color: #303133;
+  font-size: 15px;
+  font-weight: 600;
+}
+.preview-note {
+  padding: 12px 4px;
+  color: #a0a6af;
+  font-size: 12px;
+  line-height: 20px;
+}
+.form-footer {
+  position: sticky;
+  z-index: 5;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 20px;
+  padding: 16px 24px;
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 8px;
+  box-shadow: 0 -4px 16px rgb(31 45 61 / 3%);
+  > span {
+    color: #909399;
+    font-size: 13px;
+  }
+}
+.footer-buttons {
+  display: flex;
+  gap: 12px;
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
+.detail-card {
+  h4 {
+    font-size: 15px;
+    margin: 8px 0 16px;
+  }
+  .desc-block {
+    margin-bottom: 24px;
+  }
+  .foot-btn {
+    margin-top: 20px;
+  }
+}
+@media (max-width: 1100px) {
+  .coupon-layout {
+    grid-template-columns: minmax(0, 1fr) 240px;
+    gap: 16px;
+  }
+  .editor-card :deep(.el-card__body) {
+    padding: 0 20px;
+  }
+  .form-grid {
+    column-gap: 16px;
+  }
+}
+@media (max-width: 900px) {
+  .coupon-layout {
+    grid-template-columns: 1fr;
+  }
+  .preview-panel {
+    display: none;
+  }
+  .coupon-type-options {
+    gap: 10px;
+    :deep(.el-radio-button__inner) {
+      padding: 14px 12px;
+    }
+  }
+}
+@media (max-width: 600px) {
+  .coupon-publish-page {
+    padding: 4px 0 12px;
+  }
+  .page-heading {
+    align-items: flex-start;
+    h1 {
+      font-size: 18px;
+    }
+  }
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .coupon-type-options {
+    grid-template-columns: 1fr;
+  }
+  .type-card :deep(.el-card__body) {
+    padding: 16px;
+  }
+  .form-footer {
+    padding: 14px 16px;
+    > span {
+      display: none;
+    }
+  }
+  .footer-buttons {
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+.portion-goods-wrapper {
+  width: 100%;
+}
+.portion-goods-form-item :deep(.el-form-item__content) {
+  min-width: 0;
+}
+.portion-goods-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.portion-goods-heading,
+.goods-toolbar-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.portion-goods-heading h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+.portion-goods-heading span {
+  color: #909399;
+  font-size: 12px;
+}
+.goods-toolbar-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+.table-goods-thumb {
+  display: block;
+  width: 44px;
+  height: 44px;
+  margin: 0 auto;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+.thumb-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+  color: #c0c4cc;
+  background: #fafafa;
+}
+.price-text {
+  color: #f56c6c;
+}
+.selected-goods-name {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.6;
+}
+.selected-goods-sku {
+  margin-top: 4px;
+  color: #909399;
+  font: 12px/1.5 Consolas, monospace;
+  overflow-wrap: anywhere;
+}
+.portion-goods-table :deep(.el-table__cell) {
+  padding: 12px 0;
+}
+.portion-goods-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 180px;
+  padding: 24px 20px;
+  box-sizing: border-box;
+  border: 1px dashed #dcdfe6;
+  border-radius: 8px;
+  background: #fafbfc;
+  text-align: center;
+}
+.portion-goods-empty h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 500;
+}
+.portion-goods-empty p {
+  margin: 8px 0 20px;
+  font-size: 12px;
+  color: #909399;
+}
+.empty-icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 12px;
+  border-radius: 12px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+}
+.font-mono {
+  font-family: Consolas, monospace;
+}
+.font-semibold {
+  font-weight: 600;
+}
 </style>
diff --git a/manager/src/views/promotions/coupon/coupon-receive.vue b/manager/src/views/promotions/coupon/coupon-receive.vue
index ff7d7fcc1..e0a35e5b0 100644
--- a/manager/src/views/promotions/coupon/coupon-receive.vue
+++ b/manager/src/views/promotions/coupon/coupon-receive.vue
@@ -72,7 +72,7 @@
         <el-table-column label="面额/折扣" width="100">
           <template #default="{ row }">
             <priceColorScheme
-              v-if="row && row.price"
+              v-if="row && row.couponType === 'PRICE'"
               :value="row.price"
               :color="$mainColor"
             />
diff --git a/manager/src/views/promotions/coupon/coupon.vue b/manager/src/views/promotions/coupon/coupon.vue
index aeaed5730..0f99cd799 100644
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -93,7 +93,7 @@
         <el-table-column label="面额/折扣" width="150">
           <template #default="{ row }">
             <span v-if="row">
-              <span v-if="row.price" :style="{ color: $mainColor }">
+              <span v-if="row.couponType === 'PRICE'" :style="{ color: $mainColor }">
                 {{ $filters.unitPrice(row.price, "￥") }}</span>
               <span v-else>{{ row.couponDiscount }}折</span>
             </span>
@@ -118,7 +118,7 @@
         <el-table-column label="优惠券类型" width="120">
           <template #default="{ row }">
             <el-tag v-if="row" :type="couponTypeTagType(row.couponType)">
-              {{ couponTypeText(row.couponType) }}
+              {{ couponTypeText(row) }}
             </el-tag>
           </template>
         </el-table-column>
@@ -362,12 +362,10 @@ function getTypeTagType(type) {
   };
   return map[type] || "";
 }
-function couponTypeText(type) {
-  const map = {
-    DISCOUNT: "打折",
-    PRICE: "减免现金",
-  };
-  return map[type] || "未知";
+function couponTypeText(row) {
+  if (row.couponType === "DISCOUNT") return "满折优惠券";
+  if (row.couponType === "PRICE") return Number(row.consumeThreshold) === 0 ? "立减优惠券" : "满减优惠券";
+  return "未知";
 }
 function couponTypeTagType(type) {
   const map = {
diff --git a/seller/src/views/promotion/coupon/coupon-publish.vue b/seller/src/views/promotion/coupon/coupon-publish.vue
index e99d155d6..d40b59ad6 100644
--- a/seller/src/views/promotion/coupon/coupon-publish.vue
+++ b/seller/src/views/promotion/coupon/coupon-publish.vue
@@ -1,12 +1,19 @@
 <template>
-  <div>
-    <el-card v-if="disabled">
+  <div class="coupon-publish-page">
+    <div class="page-heading">
+      <div>
+        <h1>{{ disabled ? "店铺优惠券详情" : id ? "编辑店铺优惠券" : "添加店铺优惠券" }}</h1>
+        <p>设置优惠内容、领取规则及适用范围</p>
+      </div>
+      <el-button @click="closeCurrentPage">返回优惠券列表</el-button>
+    </div>
+    <el-card v-if="disabled" shadow="never" class="detail-card">
       <h4>基本信息</h4>
       <el-descriptions border :column="2" class="desc-block">
         <el-descriptions-item label="活动名称">{{ form.promotionName }}</el-descriptions-item>
         <el-descriptions-item label="优惠券名称">{{ form.couponName }}</el-descriptions-item>
         <el-descriptions-item label="优惠券类型">
-          {{ form.couponType === "DISCOUNT" ? "打折" : "减免现金" }}
+          {{ couponTypeName }}
         </el-descriptions-item>
         <el-descriptions-item v-if="form.couponType === 'DISCOUNT'" label="折扣">
           {{ form.couponDiscount }} 折
@@ -30,7 +37,11 @@
       <h4>使用限制</h4>
       <el-descriptions border :column="2" class="desc-block">
         <el-descriptions-item label="消费门槛">
-          {{ $filters.unitPrice(form.consumeThreshold, "￥") }}
+          {{
+            Number(form.consumeThreshold) === 0
+              ? "无门槛"
+              : $filters.unitPrice(form.consumeThreshold, "￥")
+          }}
         </el-descriptions-item>
         <el-descriptions-item label="有效期">
           <span v-if="rangeTimeType === 1 && form.rangeTime && form.rangeTime.length === 2">
@@ -72,7 +83,8 @@
           <el-table-column label="商品价格" width="110" align="right">
             <template #default="{ row }">
               <span v-if="row" :style="{ color: $mainColor }">
-                {{ $filters.unitPrice(row.price, "￥") }}</span>
+                {{ $filters.unitPrice(row.price, "￥") }}</span
+              >
             </template>
           </el-table-column>
           <el-table-column label="库存" width="90" align="right">
@@ -87,229 +99,284 @@
         <el-button @click="closeCurrentPage">返回</el-button>
       </div>
     </el-card>
-    <el-card v-else>
-      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
-        <div class="base-info-item">
-          <h4>基本信息</h4>
-          <div class="form-item-view">
-            <el-form-item label="活动名称" prop="promotionName">
-              <el-input
-                :disabled="disabled"
-                v-model="form.promotionName"
-                placeholder="活动名称"
-                clearable
-                style="width: 260px"
-              />
-            </el-form-item>
-            <el-form-item label="优惠券名称" prop="couponName">
-              <el-input
-                :disabled="disabled"
-                v-model="form.couponName"
-                placeholder="优惠券名称"
-                clearable
-                style="width: 260px"
-              />
-            </el-form-item>
-            <el-form-item label="优惠券类型" prop="couponType">
-              <el-select :disabled="disabled" v-model="form.couponType" style="width: 260px">
-                <el-option label="打折" value="DISCOUNT" />
-                <el-option label="减免现金" value="PRICE" />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              label="折扣"
-              prop="couponDiscount"
-              v-if="form.couponType == 'DISCOUNT'"
+    <template v-else>
+      <el-form
+        ref="formRef"
+        :model="form"
+        label-position="top"
+        :rules="formRule"
+        class="coupon-form"
+      >
+        <el-card shadow="never" class="type-card">
+          <div class="type-heading">选择优惠券类型</div>
+          <el-radio-group
+            v-model="couponKind"
+            class="coupon-type-options"
+            @change="changeCouponKind"
+            aria-label="优惠券类型"
+          >
+            <el-radio-button value="FULL_REDUCTION"
+              ><span class="type-name">满减优惠券</span
+              ><span class="type-description">消费满指定金额，减免现金</span></el-radio-button
             >
-              <el-input-number
-                :disabled="disabled"
-                placeholder="折扣"
-                :max="9.9"
-                :min="0.1"
-                :step="0.1"
-                :precision="1"
-                v-model="form.couponDiscount"
-                style="width: 260px"
-              />
-              <span class="describe">请输入0-10的数字,可有一位小数</span>
-            </el-form-item>
-            <el-form-item label="面额" prop="price" v-if="form.couponType == 'PRICE'">
-              <el-input
-                :disabled="disabled"
-                v-model="form.price"
-                placeholder="面额"
-                clearable
-                style="width: 260px"
-              />
-            </el-form-item>
-            <el-form-item label="发放数量" prop="publishNum" v-if="form.getType === 'FREE'">
-              <div class="form-field-block">
-                <el-input
-                  :disabled="disabled"
-                  v-model="form.publishNum"
-                  placeholder="发放数量"
-                  style="width: 260px"
-                />
-                <div class="form-tip">如果发放数量为0时,则代表不限制发放数量</div>
-              </div>
-            </el-form-item>
-            <el-form-item
-              label="领取数量限制"
-              prop="couponLimitNum"
-              v-if="form.getType === 'FREE'"
+            <el-radio-button value="DISCOUNT"
+              ><span class="type-name">满折优惠券</span
+              ><span class="type-description">消费满指定金额，享受折扣</span></el-radio-button
             >
-              <div class="form-field-block">
-                <el-input
-                  :disabled="disabled"
-                  v-model="form.couponLimitNum"
-                  placeholder="领取限制"
-                  clearable
-                  style="width: 260px"
-                />
-                <div class="form-tip">如果领取数量为0时,则代表不限制领取数量</div>
+            <el-radio-button value="DIRECT_REDUCTION"
+              ><span class="type-name">立减优惠券</span
+              ><span class="type-description">无消费金额门槛，直接减免</span></el-radio-button
+            >
+          </el-radio-group>
+        </el-card>
+        <div class="coupon-layout">
+          <el-card shadow="never" class="editor-card">
+            <section class="form-section">
+              <div class="section-heading">
+                <span class="section-number">01</span>
+                <h2>基本信息</h2>
               </div>
-            </el-form-item>
-          </div>
-          <h4>使用限制</h4>
-          <div class="form-item-view">
-            <el-form-item label="消费门槛" prop="consumeThreshold">
-              <el-input
-                :disabled="disabled"
-                v-model="form.consumeThreshold"
-                placeholder="消费门槛"
-                clearable
-                style="width: 260px"
-              />
-            </el-form-item>
-            <el-form-item label="有效期" prop="rangeTime">
-              <div v-if="form.getType == 'ACTIVITY'">
-                <el-radio-group v-model="rangeTimeType">
-                  <el-radio :disabled="disabled" :value="1" v-if="form.getType !== 'ACTIVITY'">起止时间</el-radio>
-                  <el-radio :disabled="disabled" :value="0">固定时间</el-radio>
-                </el-radio-group>
+              <div class="form-grid">
+                <el-form-item label="活动名称" prop="promotionName"
+                  ><el-input
+                    v-model="form.promotionName"
+                    placeholder="例如：双十一店铺优惠"
+                    clearable
+                /></el-form-item>
+                <el-form-item label="优惠券名称" prop="couponName"
+                  ><el-input v-model="form.couponName" placeholder="例如：新客专享优惠券" clearable
+                /></el-form-item>
               </div>
-              <div v-if="rangeTimeType == 1">
-                <el-date-picker
-                  :disabled="disabled"
-                  type="datetimerange"
-                  v-model="form.rangeTime"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  :disabled-date="options.disabledDate"
-                  style="width: 260px"
-                />
+            </section>
+            <section class="form-section">
+              <div class="section-heading">
+                <span class="section-number">02</span>
+                <h2>优惠规则</h2>
               </div>
-              <div class="effectiveDays" v-if="rangeTimeType == 0">
-                领取当天开始
-                <el-input-number
-                  :disabled="disabled"
-                  v-model="form.effectiveDays"
-                  :min="1"
-                  style="width: 100px"
-                  :max="365"
-                />
-                天内有效(1-365间的整数)
+              <div class="form-grid">
+                <el-form-item
+                  v-if="couponKind !== 'DIRECT_REDUCTION'"
+                  label="消费门槛"
+                  prop="consumeThreshold"
+                >
+                  <el-input
+                    v-model="form.consumeThreshold"
+                    :validate-event="false"
+                    @blur="formRef?.validateField('consumeThreshold').catch(() => {})"
+                    placeholder="请输入最低消费金额"
+                    clearable
+                    ><template #append>元</template></el-input
+                  >
+                  <div class="form-tip">适用商品金额达到门槛后可使用</div>
+                </el-form-item>
+                <el-form-item v-if="form.couponType === 'PRICE'" label="减免金额" prop="price">
+                  <el-input v-model="form.price" placeholder="请输入减免金额" clearable
+                    ><template #append>元</template></el-input
+                  >
+                  <div class="form-tip">最多支持两位小数</div>
+                </el-form-item>
+                <el-form-item v-else label="优惠折扣" prop="couponDiscount">
+                  <div class="input-with-unit">
+                    <el-input-number
+                      v-model="form.couponDiscount"
+                      :min="0.1"
+                      :max="9.9"
+                      :step="0.1"
+                      :precision="1"
+                      controls-position="right"
+                      placeholder="请输入折扣"
+                    /><span>折</span>
+                  </div>
+                  <div class="form-tip">例如：8.5 折，即按原价的 85% 支付</div>
+                </el-form-item>
+                <div v-if="couponKind === 'DIRECT_REDUCTION'" class="no-threshold-note">
+                  <span class="no-threshold-badge">无门槛</span
+                  ><span>适用商品可直接抵扣，最多抵扣商品金额。</span>
+                </div>
               </div>
-            </el-form-item>
-
-            <el-form-item label="使用范围" prop="scopeType">
-              <el-radio-group v-model="form.scopeType">
-                <el-radio-button :disabled="disabled" value="ALL">全品类</el-radio-button>
-                <el-radio-button :disabled="disabled" value="PORTION_GOODS">指定商品</el-radio-button>
-                <el-radio-button :disabled="disabled" value="PORTION_GOODS_CATEGORY">部分商品分类</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
-              <div style="display: flex; margin-bottom: 10px">
-                <el-button :disabled="disabled" type="primary" @click="openSkuList">选择商品</el-button>
-                <el-button
-                  :disabled="disabled"
-                  type="danger"
-                  plain
-                  style="margin-left: 10px"
-                  @click="delSelectGoods"
-                >批量删除</el-button>
+            </section>
+            <section class="form-section">
+              <div class="section-heading">
+                <span class="section-number">03</span>
+                <h2>发放与使用</h2>
               </div>
-              <el-table
-                border
-                :data="form.promotionGoodsList"
-                style="width: 100%"
-                @selection-change="changeSelect"
-              >
-                <el-table-column type="selection" width="60" align="center" />
-                <el-table-column label="商品名称" min-width="220">
-                  <template #default="{ row }">
-                    <div v-if="row" class="goods-cell">
-                      <img v-if="row.thumbnail" :src="row.thumbnail" class="goods-thumb" alt="" />
-                      <span class="goods-name">{{ row.goodsName }}</span>
+              <div class="form-grid">
+                <template v-if="form.getType === 'FREE'">
+                  <el-form-item label="发放数量" prop="publishNum"
+                    ><el-input v-model="form.publishNum" placeholder="请输入发放数量"
+                      ><template #append>张</template></el-input
+                    >
+                    <div class="form-tip">设为 0 表示不限发放数量</div></el-form-item
+                  >
+                  <el-form-item label="每人限领" prop="couponLimitNum"
+                    ><el-input
+                      v-model="form.couponLimitNum"
+                      placeholder="请输入每人可领取张数"
+                      clearable
+                      ><template #append>张</template></el-input
+                    >
+                    <div class="form-tip">设为 0 表示不限领取数量</div></el-form-item
+                  >
+                </template>
+                <el-form-item label="有效期" prop="rangeTime" class="full-width">
+                  <el-date-picker
+                    v-if="rangeTimeType === 1"
+                    type="datetimerange"
+                    v-model="form.rangeTime"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    range-separator="至"
+                    :disabled-date="options.disabledDate"
+                    class="validity-picker"
+                  />
+                  <div v-else class="effective-days">
+                    <span>领取当天起</span
+                    ><el-input-number
+                      v-model="form.effectiveDays"
+                      :min="1"
+                      :max="365"
+                      controls-position="right"
+                    /><span>天内有效</span>
+                  </div>
+                  <div v-if="rangeTimeType === 0" class="form-tip">有效天数为 1–365 天的整数</div>
+                </el-form-item>
+                <el-form-item label="使用范围" prop="scopeType" class="full-width"
+                  ><el-radio-group v-model="form.scopeType" class="scope-options"
+                    ><el-radio-button value="ALL">全店商品</el-radio-button
+                    ><el-radio-button value="PORTION_GOODS">指定商品</el-radio-button
+                    ><el-radio-button value="PORTION_GOODS_CATEGORY"
+                      >指定分类</el-radio-button
+                    ></el-radio-group
+                  ></el-form-item
+                >
+                <el-form-item class="full-width" v-if="form.scopeType == 'PORTION_GOODS'">
+                  <div class="goods-selection-content">
+                    <div class="goods-toolbar">
+                      <el-button :disabled="disabled" type="primary" @click="openSkuList"
+                        >选择商品</el-button
+                      >
+                      <el-button
+                        :disabled="disabled"
+                        type="danger"
+                        plain
+                        style="margin-left: 10px"
+                        @click="delSelectGoods"
+                        v-if="selectedGoods.length"
+                        >批量删除（{{ selectedGoods.length }}）</el-button
+                      >
                     </div>
-                  </template>
-                </el-table-column>
-                <el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
-                  <template #default="{ row }">
-                    {{ row?.sn || "-" }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="规格" min-width="140" show-overflow-tooltip>
-                  <template #default="{ row }">
-                    {{ row?.simpleSpecs || "-" }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="商品价格" width="110" align="right">
-                  <template #default="{ row }">
-                    <span v-if="row" :style="{ color: $mainColor }">
-                      {{ $filters.unitPrice(row.price, "￥") }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="库存" width="90" align="right">
-                  <template #default="{ row }">
-                    <span v-if="row">{{ row.quantity }}</span>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="100" align="right">
-                  <template #default="{ $index }">
-                    <el-button
-                      :disabled="disabled"
-                      type="danger"
-                      size="small"
-                      plain
-                      @click="delGoods($index)"
-                    >删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-form-item>
+                    <el-table
+                      empty-text="暂未选择商品，请点击上方按钮添加"
+                      border
+                      :data="form.promotionGoodsList"
+                      style="width: 100%"
+                      @selection-change="changeSelect"
+                    >
+                      <el-table-column type="selection" width="60" align="center" />
+                      <el-table-column label="商品名称" min-width="220">
+                        <template #default="{ row }">
+                          <div v-if="row" class="goods-cell">
+                            <img
+                              v-if="row.thumbnail"
+                              :src="row.thumbnail"
+                              class="goods-thumb"
+                              alt=""
+                            />
+                            <span class="goods-name">{{ row.goodsName }}</span>
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="SKU编码" min-width="140" show-overflow-tooltip>
+                        <template #default="{ row }">
+                          {{ row?.sn || "-" }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="规格" min-width="140" show-overflow-tooltip>
+                        <template #default="{ row }">
+                          {{ row?.simpleSpecs || "-" }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="商品价格" width="110" align="right">
+                        <template #default="{ row }">
+                          <span v-if="row" :style="{ color: $mainColor }">
+                            {{ $filters.unitPrice(row.price, "￥") }}</span
+                          >
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="库存" width="90" align="right">
+                        <template #default="{ row }">
+                          <span v-if="row">{{ row.quantity }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="操作" width="100" align="right">
+                        <template #default="{ $index }">
+                          <el-button
+                            :disabled="disabled"
+                            type="danger"
+                            size="small"
+                            plain
+                            @click="delGoods($index)"
+                            >删除</el-button
+                          >
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+                </el-form-item>
 
-            <el-form-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
-              <el-cascader
-                :disabled="disabled"
-                :options="goodsCategoryList"
-                style="width: 260px"
-                v-model="form.scopeIdGoods"
-              />
-            </el-form-item>
-            <div>
-              <el-button :disabled="disabled" link @click="closeCurrentPage">返回</el-button>
-              <el-button
-                :disabled="disabled"
-                type="primary"
-                :loading="submitLoading"
-                @click="handleSubmit"
-              >提交</el-button>
+                <el-form-item
+                  v-if="form.scopeType === 'PORTION_GOODS_CATEGORY'"
+                  label="适用分类"
+                  class="full-width"
+                  ><el-cascader
+                    :options="goodsCategoryList"
+                    v-model="form.scopeIdGoods"
+                    placeholder="请选择适用的商品分类"
+                    clearable
+                /></el-form-item>
+              </div>
+            </section>
+          </el-card>
+          <aside class="preview-panel" aria-label="优惠券预览">
+            <div class="preview-heading">券面预览<span>随填写实时更新</span></div>
+            <div class="coupon-ticket">
+              <div class="ticket-benefit">
+                <span class="ticket-type">{{ couponTypeName }}</span>
+                <div class="ticket-amount">
+                  <span v-if="form.couponType === 'PRICE'" class="amount-unit">¥</span
+                  >{{ previewAmount
+                  }}<span v-if="form.couponType === 'DISCOUNT'" class="amount-unit">折</span>
+                </div>
+                <div class="ticket-condition">{{ previewCondition }}</div>
+              </div>
+              <div class="ticket-details">
+                <div class="ticket-name">{{ form.couponName || "优惠券名称" }}</div>
+                <div>{{ previewScope }}</div>
+                <div>{{ previewValidity }}</div>
+              </div>
             </div>
+            <div class="preview-note">预览仅供参考，实际展示以买家端为准。</div>
+          </aside>
+        </div>
+        <div class="form-footer">
+          <span>{{ form.getType === "ACTIVITY" ? "活动赠送券" : "买家可主动领取" }}</span>
+          <div class="footer-buttons">
+            <el-button @click="closeCurrentPage">取消</el-button
+            ><el-button type="primary" :loading="submitLoading" @click="handleSubmit"
+              >保存优惠券</el-button
+            >
           </div>
         </div>
       </el-form>
-    </el-card>
+    </template>
     <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref, watch } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { saveShopCoupon, getShopCoupon, editShopCoupon } from "@/api/promotion";
 import { getGoodsCategoryAll } from "@/api/goods";
@@ -331,8 +398,10 @@ const skuSelectRef = ref(null);
 const checkPrice = (rule, value, callback) => {
   if (!value && value !== 0) {
     return callback(new Error("面额不能为空"));
-  } else if (!regular.money.test(value)) {
+  } else if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value))) {
     callback(new Error("请输入正整数或者两位小数"));
+  } else if (Number(value) <= 0) {
+    callback(new Error("面额必须大于0"));
   } else if (parseFloat(value) > 99999999) {
     callback(new Error("面额设置超过上限值"));
   } else {
@@ -342,8 +411,10 @@ const checkPrice = (rule, value, callback) => {
 const checkWeight = (rule, value, callback) => {
   if (!value && typeof value !== "number") {
     callback(new Error("消费门槛不能为空"));
-  } else if (!regular.money.test(value)) {
+  } else if (!/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value))) {
     callback(new Error("请输入正整数或者两位小数"));
+  } else if (Number(value) <= 0) {
+    callback(new Error("消费门槛必须大于0"));
   } else if (parseFloat(value) > 99999999) {
     callback(new Error("消费门槛设置超过上限值"));
   } else {
@@ -351,9 +422,30 @@ const checkWeight = (rule, value, callback) => {
   }
 };
 
-const disabled = ref(route.query.onlyView);
+const disabled = computed(() => route.query.onlyView === "true" || route.query.onlyView === true);
+const couponKind = ref("FULL_REDUCTION");
+const couponTypeName = computed(() => form.value.couponType === "DISCOUNT" ? "满折优惠券" : (Number(form.value.consumeThreshold) === 0 ? "立减优惠券" : "满减优惠券"));
+function changeCouponKind(kind) {
+  form.value.couponType = kind === "DISCOUNT" ? "DISCOUNT" : "PRICE";
+  if (kind === "DIRECT_REDUCTION") {
+    form.value.consumeThreshold = 0;
+  } else if (!(Number(form.value.consumeThreshold) > 0)) {
+    form.value.consumeThreshold = undefined;
+  }
+  if (kind === "DISCOUNT") form.value.price = undefined;
+  else form.value.couponDiscount = undefined;
+  nextTick(() => formRef.value?.clearValidate());
+}
+
 const rangeTimeType = ref(1);
 const modalType = ref(0);
+function defaultCouponRangeTime() {
+  const start = new Date();
+  const end = new Date(start);
+  end.setDate(end.getDate() + 7);
+  return [start, end].map((date) => unixToDate(date.getTime() / 1000));
+}
+
 const form = ref({
   storeCommission: 100,
   publishNum: 0,
@@ -366,6 +458,7 @@ const form = ref({
   promotionGoodsList: [],
   scopeIdGoods: [],
   rangeDayType: "",
+  rangeTime: route.query.id ? [] : defaultCouponRangeTime(),
   effectiveDays: 1,
 });
 const id = ref(route.query.id);
@@ -411,6 +504,25 @@ const scopeTypeText = computed(() => {
   };
   return map[form.value.scopeType] || form.value.scopeType;
 });
+const previewAmount = computed(() => {
+  const value = form.value.couponType === "DISCOUNT" ? form.value.couponDiscount : form.value.price;
+  return value !== undefined && value !== null && value !== "" && Number.isFinite(Number(value)) ? value : "—";
+});
+const previewCondition = computed(() => {
+  if (couponKind.value === "DIRECT_REDUCTION") return "无消费金额门槛";
+  return Number(form.value.consumeThreshold) > 0 ? "满 " + form.value.consumeThreshold + " 元可用" : "达到指定消费金额后可用";
+});
+const previewScope = computed(() => {
+  if (form.value.scopeType === "PORTION_GOODS") return "指定商品可用 · 已选 " + form.value.promotionGoodsList.length + " 件";
+  return form.value.scopeType === "ALL" ? "全店商品通用" : "指定商品分类可用";
+});
+const previewValidity = computed(() => {
+  if (rangeTimeType.value === 0) return "领取当天起 " + (form.value.effectiveDays || "—") + " 天内有效";
+  const range = form.value.rangeTime;
+  if (!range || range.length !== 2) return "请设置有效期";
+  return formatTime(range[0]).slice(0, 10) + " 至 " + formatTime(range[1]).slice(0, 10);
+});
+
 const scopeCategoryText = computed(() => {
   const findLabel = (list, value) => {
     for (const item of list) {
@@ -456,11 +568,15 @@ watch(
   (e) => {
     id.value = e.id;
     if (id.value) {
+      modalType.value = 1;
       getCoupon();
     } else {
       formRef.value?.resetFields();
+      couponKind.value = "FULL_REDUCTION";
+      changeCouponKind(couponKind.value);
       modalType.value = 0;
       form.value.getType = e.getType === "ACTIVITY" ? "ACTIVITY" : "FREE";
+      form.value.rangeTime = defaultCouponRangeTime();
     }
   }
 );
@@ -510,12 +626,16 @@ function getCoupon() {
       data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
     }
     form.value = data;
+    couponKind.value = data.couponType === "DISCOUNT" ? "DISCOUNT" : (Number(data.consumeThreshold) === 0 ? "DIRECT_REDUCTION" : "FULL_REDUCTION");
   });
 }
 function handleSubmit() {
   formRef.value.validate((valid) => {
     if (valid) {
       const params = JSON.parse(JSON.stringify(form.value));
+      if (couponKind.value === "DIRECT_REDUCTION") params.consumeThreshold = 0;
+      if (params.couponType === "DISCOUNT") delete params.price;
+      else delete params.couponDiscount;
       params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
 
       if (rangeTimeType.value == 1) {
@@ -692,35 +812,221 @@ function filterCategoryId(list, idArr) {
 </script>
 
 <style lang="scss" scoped>
-h4 {
-  margin-bottom: 10px;
-  padding: 0 10px;
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  font-weight: bold;
-  color: #333;
+.coupon-publish-page {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 8px 12px 20px;
+  color: #303133;
+}
+.page-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 20px;
+  h1 {
+    margin: 0 0 8px;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  p {
+    margin: 0;
+    color: #909399;
+    font-size: 13px;
+  }
+}
+.type-card,
+.editor-card,
+.detail-card {
+  border-radius: 8px;
+  border-color: #e6e8eb;
+}
+.type-card {
+  margin-bottom: 20px;
+  :deep(.el-card__body) {
+    padding: 16px 20px 20px;
+  }
+}
+.type-heading {
+  margin-bottom: 14px;
   font-size: 14px;
-  line-height: 40px;
-  text-align: left;
+  font-weight: 600;
 }
-
-.describe {
+.coupon-type-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  width: 100%;
+  gap: 16px;
+  :deep(.el-radio-button) {
+    min-width: 0;
+  }
+  :deep(.el-radio-button__inner) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    width: 100%;
+    padding: 14px 18px;
+    border: 1px solid #e4e7ed;
+    border-radius: 6px !important;
+    background: #fff;
+    text-align: left;
+    box-shadow: none !important;
+    white-space: normal;
+  }
+  :deep(.el-radio-button.is-active .el-radio-button__inner) {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary);
+  }
+  :deep(.el-radio-button__original-radio:focus-visible + .el-radio-button__inner) {
+    outline: 2px solid var(--el-color-primary);
+    outline-offset: 3px;
+  }
+}
+.type-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+}
+.type-description {
   font-size: 12px;
-  margin-left: 10px;
-  color: #999;
+  line-height: 18px;
+  color: #909399;
 }
-
-.desc-block {
-  margin-bottom: 10px;
+.coupon-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  align-items: start;
+  gap: 24px;
+}
+.editor-card :deep(.el-card__body) {
+  padding: 0 28px;
+}
+.form-section {
+  padding: 20px 0 4px;
+  & + & {
+    border-top: 1px solid #ebeef5;
+  }
+}
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  h2 {
+    margin: 0;
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 600;
+  }
+}
+.section-number {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: #f2f5f9;
+  color: #7b8798;
+  font-size: 12px;
+  font-weight: 600;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 24px;
+  :deep(.el-form-item) {
+    min-width: 0;
+    margin-bottom: 24px;
+  }
+  :deep(.el-form-item__label) {
+    color: #606266;
+    font-weight: 500;
+    margin-bottom: 8px;
+    line-height: 20px;
+  }
+  :deep(.el-input),
+  :deep(.el-cascader),
+  :deep(.el-input-number) {
+    width: 100%;
+  }
+  :deep(.el-input__wrapper) {
+    min-height: 36px;
+    box-sizing: border-box;
+  }
+  :deep(.el-form-item__content) {
+    align-content: flex-start;
+  }
+}
+.full-width {
+  grid-column: 1 / -1;
+}
+.form-tip {
+  width: 100%;
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: 7px;
+  color: #909399;
+}
+.input-with-unit {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  color: #909399;
+}
+.no-threshold-note {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 24px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 18px;
+}
+.no-threshold-badge {
+  color: #339978;
+  background: #edf8f3;
+  padding: 3px 9px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+.validity-picker {
+  width: 100% !important;
+  max-width: 530px;
+  min-height: 36px;
+}
+.effective-days {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #606266;
+  :deep(.el-input-number) {
+    width: 130px;
+  }
+}
+.scope-options {
+  flex-wrap: wrap;
+}
+.goods-selection-content {
+  width: 100%;
+}
+.goods-toolbar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
 }
-
 .goods-cell {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
 }
-
 .goods-thumb {
   width: 40px;
   height: 40px;
@@ -728,37 +1034,202 @@ h4 {
   border-radius: 4px;
   flex-shrink: 0;
 }
-
 .goods-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.foot-btn {
-  margin-top: 16px;
+.preview-panel {
+  position: sticky;
+  top: 20px;
+  padding-top: 4px;
 }
-
-.form-field-block {
+.preview-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  span {
+    font-size: 12px;
+    font-weight: normal;
+    color: #909399;
+  }
+}
+.coupon-ticket {
+  overflow: hidden;
+  border: 1px solid #dce9fa;
+  border-radius: 10px;
+  background: #fff;
+}
+.ticket-benefit {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
+  align-items: center;
+  padding: 24px 16px 26px;
+  background: #eef5ff;
+  color: #3176d2;
 }
-
-.form-tip {
+.ticket-type {
+  padding: 3px 10px;
+  border: 1px solid #c9ddfa;
+  border-radius: 4px;
   font-size: 12px;
-  line-height: 1.5;
-  margin-top: 4px;
-  color: #999;
+  line-height: 18px;
 }
-
-.effectiveDays {
+.ticket-amount {
+  margin: 18px 0 8px;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-size: 48px;
+  font-weight: 600;
+  line-height: 1.15;
+  letter-spacing: -1px;
+}
+.amount-unit {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0 4px;
+}
+.ticket-condition {
+  font-size: 13px;
+  text-align: center;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+.ticket-details {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 1px dashed #c9ddfa;
+  padding: 22px 20px;
+  color: #909399;
   font-size: 12px;
-  color: #999;
-
-  > * {
-    margin: 0 4px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #dce9fa;
+    border-radius: 50%;
+    background: #f5f7fa;
+    top: -9px;
+  }
+  &::before {
+    left: -10px;
+  }
+  &::after {
+    right: -10px;
+  }
+}
+.ticket-name {
+  color: #303133;
+  font-size: 15px;
+  font-weight: 600;
+}
+.preview-note {
+  padding: 12px 4px;
+  color: #a0a6af;
+  font-size: 12px;
+  line-height: 20px;
+}
+.form-footer {
+  position: sticky;
+  z-index: 5;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 20px;
+  padding: 16px 24px;
+  background: #fff;
+  border: 1px solid #e6e8eb;
+  border-radius: 8px;
+  box-shadow: 0 -4px 16px rgb(31 45 61 / 3%);
+  > span {
+    color: #909399;
+    font-size: 13px;
+  }
+}
+.footer-buttons {
+  display: flex;
+  gap: 12px;
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
+.detail-card {
+  h4 {
+    font-size: 15px;
+    margin: 8px 0 16px;
+  }
+  .desc-block {
+    margin-bottom: 24px;
+  }
+  .foot-btn {
+    margin-top: 20px;
+  }
+}
+@media (max-width: 1100px) {
+  .coupon-layout {
+    grid-template-columns: minmax(0, 1fr) 240px;
+    gap: 16px;
+  }
+  .editor-card :deep(.el-card__body) {
+    padding: 0 20px;
+  }
+  .form-grid {
+    column-gap: 16px;
+  }
+}
+@media (max-width: 900px) {
+  .coupon-layout {
+    grid-template-columns: 1fr;
+  }
+  .preview-panel {
+    display: none;
+  }
+  .coupon-type-options {
+    gap: 10px;
+    :deep(.el-radio-button__inner) {
+      padding: 14px 12px;
+    }
+  }
+}
+@media (max-width: 600px) {
+  .coupon-publish-page {
+    padding: 4px 0 12px;
+  }
+  .page-heading {
+    align-items: flex-start;
+    h1 {
+      font-size: 18px;
+    }
+  }
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .coupon-type-options {
+    grid-template-columns: 1fr;
+  }
+  .type-card :deep(.el-card__body) {
+    padding: 16px;
+  }
+  .form-footer {
+    padding: 14px 16px;
+    > span {
+      display: none;
+    }
+  }
+  .footer-buttons {
+    width: 100%;
+    justify-content: flex-end;
   }
 }
 </style>
diff --git a/seller/src/views/promotion/coupon/coupon-receive.vue b/seller/src/views/promotion/coupon/coupon-receive.vue
index e49d857ef..918960087 100644
--- a/seller/src/views/promotion/coupon/coupon-receive.vue
+++ b/seller/src/views/promotion/coupon/coupon-receive.vue
@@ -67,7 +67,7 @@
         <el-table-column label="面额/折扣" width="100">
           <template #default="{ row }">
             <priceColorScheme
-              v-if="row && row.price"
+              v-if="row && row.couponType === 'PRICE'"
               :value="row.price"
               :color="$mainColor"
             />
diff --git a/seller/src/views/promotion/coupon/coupon.vue b/seller/src/views/promotion/coupon/coupon.vue
index 2ff35f28b..3c122800f 100644
--- a/seller/src/views/promotion/coupon/coupon.vue
+++ b/seller/src/views/promotion/coupon/coupon.vue
@@ -17,10 +17,10 @@
             style="width: 240px"
           />
         </el-form-item>
-        <el-form-item label="获取方式" prop="getType">
-          <el-select v-model="searchForm.getType" placeholder="请选择" clearable style="width: 240px">
-            <el-option label="免费获取" value="FREE" />
-            <el-option label="活动获取" value="ACTIVITY" />
+        <el-form-item label="优惠券类型" prop="couponType">
+          <el-select v-model="searchForm.couponType" placeholder="请选择" clearable style="width: 240px">
+            <el-option label="满减优惠券" value="PRICE" />
+            <el-option label="满折优惠券" value="DISCOUNT" />
           </el-select>
         </el-form-item>
         <el-form-item label="活动状态" prop="promotionStatus">
@@ -75,7 +75,7 @@
         <el-table-column label="面额/折扣" width="150">
           <template #default="{ row }">
             <span v-if="row">
-              <span v-if="row.price" :style="{ color: $mainColor }">
+              <span v-if="row.couponType === 'PRICE'" :style="{ color: $mainColor }">
                 {{ $filters.unitPrice(row.price, "￥") }}</span>
               <span v-else>{{ row.couponDiscount }}折</span>
             </span>
@@ -94,21 +94,17 @@
         </el-table-column>
         <el-table-column label="获取方式" width="120">
           <template #default="{ row }">
-            <el-tag v-if="row" :type="getTypeTagType(row.getType)">{{ getTypeText(row.getType) }}</el-tag>
+            <span v-if="row">{{ getTypeText(row.getType) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="优惠券类型" width="120">
           <template #default="{ row }">
-            <el-tag v-if="row" :type="couponTypeTagType(row.couponType)">
-              {{ couponTypeText(row.couponType) }}
-            </el-tag>
+            <span v-if="row">{{ couponTypeText(row) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="品类描述" width="120">
           <template #default="{ row }">
-            <el-tag v-if="row" :type="scopeTypeTagType(row.scopeType)">
-              {{ scopeTypeText(row.scopeType) }}
-            </el-tag>
+            <span v-if="row">{{ scopeTypeText(row.scopeType) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="活动时间" width="200">
@@ -124,9 +120,7 @@
           fixed="right"
         >
           <template #default="{ row }">
-            <el-tag v-if="row" :type="promotionStatusTagType(row.promotionStatus)">
-              {{ promotionStatusText(row.promotionStatus) }}
-            </el-tag>
+            <span v-if="row">{{ promotionStatusText(row.promotionStatus) }}</span>
           </template>
         </el-table-column>
         <el-table-column
@@ -269,15 +263,6 @@ function promotionStatusText(status) {
   return map[status] || "未知";
 }
 
-function promotionStatusTagType(status) {
-  const map = {
-    NEW: "info",
-    START: "success",
-    END: "danger",
-    CLOSE: "danger",
-  };
-  return map[status] || "danger";
-}
 
 function scopeTypeText(type) {
   const map = {
@@ -289,15 +274,6 @@ function scopeTypeText(type) {
   return map[type] || "未知";
 }
 
-function scopeTypeTagType(type) {
-  const map = {
-    ALL: "info",
-    PORTION_GOODS_CATEGORY: "warning",
-    PORTION_SHOP_CATEGORY: "warning",
-    PORTION_GOODS: "primary",
-  };
-  return map[type] || "danger";
-}
 
 function getTypeText(type) {
   const map = {
@@ -309,31 +285,13 @@ function getTypeText(type) {
   return map[type] || "未知";
 }
 
-function getTypeTagType(type) {
-  const map = {
-    FREE: "danger",
-    ACTIVITY: "warning",
-    INSIDE: "success",
-    IGAME: "success",
-  };
-  return map[type] || "info";
+
+function couponTypeText(row) {
+  if (row.couponType === "DISCOUNT") return "满折优惠券";
+  if (row.couponType === "PRICE") return Number(row.consumeThreshold) === 0 ? "立减优惠券" : "满减优惠券";
+  return "未知";
 }
 
-function couponTypeText(type) {
-  const map = {
-    DISCOUNT: "打折",
-    PRICE: "减免现金",
-  };
-  return map[type] || "未知";
-}
-
-function couponTypeTagType(type) {
-  const map = {
-    DISCOUNT: "primary",
-    PRICE: "info",
-  };
-  return map[type] || "info";
-}
 
 function isSameSelection(next, current) {
   const a = next || [];