mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-09-20 20:02:05 +08:00
feat(distribution): 添加主推商品数量设置与超限提示
- 新增主推商品数量选择功能,用户可选择显示5个或10个商品 - 增加超限提示,确保用户在自定义商品选择时不超过限制 - 更新相关描述信息,提升用户体验与交互反馈
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user