diff --git a/manager/src/views/distribution/distributionSetting.vue b/manager/src/views/distribution/distributionSetting.vue index 33f738d4..2e8754a1 100644 --- a/manager/src/views/distribution/distributionSetting.vue +++ b/manager/src/views/distribution/distributionSetting.vue @@ -294,6 +294,15 @@ 自定义主推商品 + +
+ + 5个 + 10个 + +
{{ featuredDisplayCountDesc }}
+
+ 展示佣金最高的推广商品 @@ -302,8 +311,11 @@
+
+ 当前已选超过主推数量，请删除多余商品后再保存（本页其他设置也会一并无法保存）。 +
- 请从已审核通过的分销商品中选择，最多可配置 10 个，按列表顺序展示。 + 请从已审核通过的分销商品中选择，最多可配置 {{ featuredGoodsLimit }} 个，按列表顺序展示。
选择分销商品 @@ -346,12 +358,6 @@
- - - 5个 - 10个 - -
@@ -387,6 +393,7 @@ ref="featuredPickerTable" v-loading="featuredPickerLoading" border + row-key="skuId" :data="featuredPickerList" max-height="420" @selection-change="onFeaturedPickerSelectionChange" @@ -517,7 +524,9 @@ export default { featuredPickerLoading: false, featuredPickerList: [], featuredPickerTotal: 0, + featuredPickerDraft: [], featuredPickerSelection: [], + syncingFeaturedPickerSelection: false, featuredPickerSearch: { goodsName: "", authStatus: "PASS", @@ -526,6 +535,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(); }, @@ -683,10 +706,12 @@ export default { }); }, openFeaturedGoodsPicker() { + this.featuredPickerDraft = this.featuredCustomGoods.map((item) => ({ ...item })); this.featuredPickerVisible = true; }, loadFeaturedPickerGoods() { this.featuredPickerLoading = true; + this.syncingFeaturedPickerSelection = true; getDistributionGoods({ ...this.featuredPickerSearch }) .then((res) => { if (res.success) { @@ -696,8 +721,29 @@ export default { }) .finally(() => { this.featuredPickerLoading = false; + this.$nextTick(() => { + this.syncFeaturedPickerSelection(); + this.$nextTick(() => { + this.syncingFeaturedPickerSelection = false; + }); + }); }); }, + syncFeaturedPickerSelection() { + const table = this.$refs.featuredPickerTable; + if (!table) { + return; + } + const selectedSkuIds = new Set( + this.featuredPickerDraft.map((item) => item.skuId).filter(Boolean) + ); + table.clearSelection(); + this.featuredPickerList.forEach((row) => { + if (row.skuId && selectedSkuIds.has(row.skuId)) { + table.toggleRowSelection(row, true); + } + }); + }, searchFeaturedPickerGoods() { this.featuredPickerSearch.pageNumber = 1; this.loadFeaturedPickerGoods(); @@ -707,40 +753,58 @@ export default { this.loadFeaturedPickerGoods(); }, onFeaturedPickerSelectionChange(selection) { + if (this.syncingFeaturedPickerSelection) { + return; + } + const selectedSkuIds = new Set((selection || []).map((item) => item.skuId).filter(Boolean)); + const currentPageSkuIds = new Set(this.featuredPickerList.map((item) => item.skuId).filter(Boolean)); + const remaining = this.featuredPickerDraft.filter((item) => { + if (!currentPageSkuIds.has(item.skuId)) { + return true; + } + return selectedSkuIds.has(item.skuId); + }); + const remainingSkuIds = new Set(remaining.map((item) => item.skuId)); + const added = []; + (selection || []).forEach((item) => { + if (!item.skuId || remainingSkuIds.has(item.skuId)) { + return; + } + remainingSkuIds.add(item.skuId); + added.push(this.toFeaturedGoodsItem(item)); + }); + this.featuredPickerDraft = [...remaining, ...added]; this.featuredPickerSelection = selection || []; }, + toFeaturedGoodsItem(item) { + return { + id: item.id, + goodsId: item.goodsId, + skuId: item.skuId, + goodsName: item.goodsName, + specs: item.specs, + thumbnail: item.thumbnail, + price: item.price, + commission: item.commission, + storeName: item.storeName, + }; + }, + featuredGoodsLimitMessage() { + const limit = this.featuredGoodsLimit; + return `主推商品数量为${limit}时，最多选择${limit}个自定义商品`; + }, confirmFeaturedPicker() { - if (!this.featuredPickerSelection.length) { + const next = this.featuredPickerDraft.filter((item) => item.skuId); + if (!next.length) { this.$Message.warning("请至少选择一个分销商品"); return; } - const existingSkuIds = new Set(this.featuredCustomGoods.map((item) => item.skuId)); - const merged = [...this.featuredCustomGoods]; - this.featuredPickerSelection.forEach((item) => { - if (!item.skuId || existingSkuIds.has(item.skuId)) { - return; - } - if (merged.length >= 10) { - return; - } - existingSkuIds.add(item.skuId); - merged.push({ - id: item.id, - goodsId: item.goodsId, - skuId: item.skuId, - goodsName: item.goodsName, - specs: item.specs, - thumbnail: item.thumbnail, - price: item.price, - 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 (next.length > limit) { + this.$Message.warning(this.featuredGoodsLimitMessage()); + return; } + this.featuredCustomGoods = next; this.featuredPickerVisible = false; this.featuredPickerSelection = []; }, @@ -767,6 +831,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 +1002,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; }