From 62d55e2b92272cdfc582e7bb37ddd1408f478fac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E9=A6=99=E7=90=AA?= <624506849@qq.com>
Date: Sun, 13 Sep 2026 10:06:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(distribution):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=BB=E6=8E=A8=E5=95=86=E5=93=81=E6=95=B0=E9=87=8F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=8E=E8=B6=85=E9=99=90=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增主推商品数量选择功能，用户可选择显示5个或10个商品
- 增加超限提示，确保用户在自定义商品选择时不超过限制
- 更新相关描述信息，提升用户体验与交互反馈
---
 .../distribution/distributionSetting.vue      | 67 ++++++++++++++-----
 1 file changed, 52 insertions(+), 15 deletions(-)

diff --git a/manager/src/views/distribution/distributionSetting.vue b/manager/src/views/distribution/distributionSetting.vue
index 33f738d4..82656165 100644
--- a/manager/src/views/distribution/distributionSetting.vue
+++ b/manager/src/views/distribution/distributionSetting.vue
@@ -294,6 +294,15 @@
                 <el-radio value="CUSTOM">自定义主推商品</el-radio>
               </el-radio-group>
             </el-form-item>
+            <el-form-item label="主推商品数量">
+              <div class="option-with-desc">
+                <el-radio-group v-model="featuredForm.displayCount">
+                  <el-radio :value="5">5个</el-radio>
+                  <el-radio :value="10">10个</el-radio>
+                </el-radio-group>
+                <div class="form-desc">{{ featuredDisplayCountDesc }}</div>
+              </div>
+            </el-form-item>
             <el-form-item v-if="featuredForm.sourceMode === 'AUTO'" label="匹配规则">
               <el-radio-group v-model="featuredForm.matchRule">
                 <el-radio value="HIGHEST_COMMISSION">展示佣金最高的推广商品</el-radio>
@@ -302,8 +311,11 @@
             </el-form-item>
             <el-form-item v-if="featuredForm.sourceMode === 'CUSTOM'" label="自定义商品">
               <div class="custom-goods-block">
+                <div v-if="featuredGoodsOverLimit" class="featured-over-limit-tip">
+                  当前已选超过主推数量，请删除多余商品后再保存（本页其他设置也会一并无法保存）。
+                </div>
                 <div class="form-desc">
-                  请从已审核通过的分销商品中选择，最多可配置 10 个，按列表顺序展示。
+                  请从已审核通过的分销商品中选择，最多可配置 {{ featuredGoodsLimit }} 个，按列表顺序展示。
                 </div>
                 <div class="goods-toolbar">
                   <a class="link-btn" @click.prevent="openFeaturedGoodsPicker">选择分销商品</a>
@@ -346,12 +358,6 @@
                 </el-table>
               </div>
             </el-form-item>
-            <el-form-item label="主推商品数量">
-              <el-radio-group v-model="featuredForm.displayCount">
-                <el-radio :value="5">5个</el-radio>
-                <el-radio :value="10">10个</el-radio>
-              </el-radio-group>
-            </el-form-item>
             </div>
 
             <el-form-item>
@@ -526,6 +532,20 @@ export default {
       },
     };
   },
+  computed: {
+    featuredGoodsLimit() {
+      return this.featuredForm.displayCount === 10 ? 10 : 5;
+    },
+    featuredGoodsOverLimit() {
+      return this.featuredForm.sourceMode === "CUSTOM" && this.featuredCustomGoods.length > this.featuredGoodsLimit;
+    },
+    featuredDisplayCountDesc() {
+      if (this.featuredForm.sourceMode === "CUSTOM") {
+        return `最多选择 ${this.featuredGoodsLimit} 个，分销员端按顺序展示。`;
+      }
+      return `分销员端展示前 ${this.featuredGoodsLimit} 个。`;
+    },
+  },
   mounted() {
     this.init();
   },
@@ -709,6 +729,10 @@ export default {
     onFeaturedPickerSelectionChange(selection) {
       this.featuredPickerSelection = selection || [];
     },
+    featuredGoodsLimitMessage() {
+      const limit = this.featuredGoodsLimit;
+      return `主推商品数量为${limit}时，最多选择${limit}个自定义商品`;
+    },
     confirmFeaturedPicker() {
       if (!this.featuredPickerSelection.length) {
         this.$Message.warning("请至少选择一个分销商品");
@@ -720,9 +744,6 @@ export default {
         if (!item.skuId || existingSkuIds.has(item.skuId)) {
           return;
         }
-        if (merged.length >= 10) {
-          return;
-        }
         existingSkuIds.add(item.skuId);
         merged.push({
           id: item.id,
@@ -735,12 +756,13 @@ export default {
           commission: item.commission,
         });
       });
-      if (merged.length > 10) {
-        this.$Message.warning("自定义主推商品最多配置 10 个");
-        this.featuredCustomGoods = merged.slice(0, 10);
-      } else {
-        this.featuredCustomGoods = merged;
+      const limit = this.featuredGoodsLimit;
+      if (merged.length > limit) {
+        const remain = Math.max(limit - this.featuredCustomGoods.length, 0);
+        this.$Message.warning(`${this.featuredGoodsLimitMessage()}，还可选择 ${remain} 个`);
+        return;
       }
+      this.featuredCustomGoods = merged;
       this.featuredPickerVisible = false;
       this.featuredPickerSelection = [];
     },
@@ -767,6 +789,10 @@ export default {
         this.$Message.warning("请至少选择一个自定义主推商品");
         return;
       }
+      if (this.featuredGoodsOverLimit) {
+        this.$Message.warning(this.featuredGoodsLimitMessage());
+        return;
+      }
       this.saving.featured = true;
       putDistributionFeaturedGoodsSetting(this.buildFeaturedPayload())
         .then((res) => {
@@ -934,6 +960,17 @@ export default {
     width: 100%;
   }
 
+  .featured-over-limit-tip {
+    margin-bottom: 8px;
+    padding: 8px 12px;
+    color: #e6a23c;
+    background: #fdf6ec;
+    border: 1px solid #f5dab1;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
   .goods-toolbar {
     margin: 8px 0 12px;
   }