feat(distribution): 添加主推商品数量设置与超限提示

- 新增主推商品数量选择功能,用户可选择显示5个或10个商品
- 增加超限提示,确保用户在自定义商品选择时不超过限制
- 更新相关描述信息,提升用户体验与交互反馈
This commit is contained in:
田香琪
2026-09-13 10:06:33 +08:00
parent f4a50cd854
commit 62d55e2b92

View File

@@ -294,6 +294,15 @@
<el-radio value="CUSTOM">自定义主推商品</el-radio> <el-radio value="CUSTOM">自定义主推商品</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </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-form-item v-if="featuredForm.sourceMode === 'AUTO'" label="匹配规则">
<el-radio-group v-model="featuredForm.matchRule"> <el-radio-group v-model="featuredForm.matchRule">
<el-radio value="HIGHEST_COMMISSION">展示佣金最高的推广商品</el-radio> <el-radio value="HIGHEST_COMMISSION">展示佣金最高的推广商品</el-radio>
@@ -302,8 +311,11 @@
</el-form-item> </el-form-item>
<el-form-item v-if="featuredForm.sourceMode === 'CUSTOM'" label="自定义商品"> <el-form-item v-if="featuredForm.sourceMode === 'CUSTOM'" label="自定义商品">
<div class="custom-goods-block"> <div class="custom-goods-block">
<div v-if="featuredGoodsOverLimit" class="featured-over-limit-tip">
当前已选超过主推数量请删除多余商品后再保存本页其他设置也会一并无法保存
</div>
<div class="form-desc"> <div class="form-desc">
请从已审核通过的分销商品中选择最多可配置 10 按列表顺序展示 请从已审核通过的分销商品中选择最多可配置 {{ featuredGoodsLimit }} 按列表顺序展示
</div> </div>
<div class="goods-toolbar"> <div class="goods-toolbar">
<a class="link-btn" @click.prevent="openFeaturedGoodsPicker">选择分销商品</a> <a class="link-btn" @click.prevent="openFeaturedGoodsPicker">选择分销商品</a>
@@ -346,12 +358,6 @@
</el-table> </el-table>
</div> </div>
</el-form-item> </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> </div>
<el-form-item> <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() { mounted() {
this.init(); this.init();
}, },
@@ -709,6 +729,10 @@ export default {
onFeaturedPickerSelectionChange(selection) { onFeaturedPickerSelectionChange(selection) {
this.featuredPickerSelection = selection || []; this.featuredPickerSelection = selection || [];
}, },
featuredGoodsLimitMessage() {
const limit = this.featuredGoodsLimit;
return `主推商品数量为${limit}时,最多选择${limit}个自定义商品`;
},
confirmFeaturedPicker() { confirmFeaturedPicker() {
if (!this.featuredPickerSelection.length) { if (!this.featuredPickerSelection.length) {
this.$Message.warning("请至少选择一个分销商品"); this.$Message.warning("请至少选择一个分销商品");
@@ -720,9 +744,6 @@ export default {
if (!item.skuId || existingSkuIds.has(item.skuId)) { if (!item.skuId || existingSkuIds.has(item.skuId)) {
return; return;
} }
if (merged.length >= 10) {
return;
}
existingSkuIds.add(item.skuId); existingSkuIds.add(item.skuId);
merged.push({ merged.push({
id: item.id, id: item.id,
@@ -735,12 +756,13 @@ export default {
commission: item.commission, commission: item.commission,
}); });
}); });
if (merged.length > 10) { const limit = this.featuredGoodsLimit;
this.$Message.warning("自定义主推商品最多配置 10 个"); if (merged.length > limit) {
this.featuredCustomGoods = merged.slice(0, 10); const remain = Math.max(limit - this.featuredCustomGoods.length, 0);
} else { this.$Message.warning(`${this.featuredGoodsLimitMessage()},还可选择 ${remain}`);
this.featuredCustomGoods = merged; return;
} }
this.featuredCustomGoods = merged;
this.featuredPickerVisible = false; this.featuredPickerVisible = false;
this.featuredPickerSelection = []; this.featuredPickerSelection = [];
}, },
@@ -767,6 +789,10 @@ export default {
this.$Message.warning("请至少选择一个自定义主推商品"); this.$Message.warning("请至少选择一个自定义主推商品");
return; return;
} }
if (this.featuredGoodsOverLimit) {
this.$Message.warning(this.featuredGoodsLimitMessage());
return;
}
this.saving.featured = true; this.saving.featured = true;
putDistributionFeaturedGoodsSetting(this.buildFeaturedPayload()) putDistributionFeaturedGoodsSetting(this.buildFeaturedPayload())
.then((res) => { .then((res) => {
@@ -934,6 +960,17 @@ export default {
width: 100%; 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 { .goods-toolbar {
margin: 8px 0 12px; margin: 8px 0 12px;
} }