|
|
@@ -61,16 +61,23 @@
|
|
|
</div>
|
|
|
<div class="head-bos" v-else>
|
|
|
<div class="head-title">品牌:</div>
|
|
|
- <div class="head-box">
|
|
|
+ <div class="head-box" ref="brandBoxRef">
|
|
|
<div
|
|
|
@click="onHead(item, 'brandId')"
|
|
|
class="classify-list"
|
|
|
- v-for="(item, index) in brandList"
|
|
|
+ v-for="(item, index) in isBrandExpanded ? brandList : displayBrandList"
|
|
|
:key="index"
|
|
|
:class="item.id == httpObj.brandId ? 'hig' : ''"
|
|
|
>
|
|
|
{{ item.brandName }}
|
|
|
</div>
|
|
|
+ <div v-if="brandList.length > itemsPerRow * 2" class="expand-toggle" @click="toggleBrandExpand">
|
|
|
+ {{ isBrandExpanded ? '收起' : `展开(${brandList.length - itemsPerRow * 2})` }}
|
|
|
+ <el-icon :size="14" style="margin-left: 4px">
|
|
|
+ <ArrowDown v-if="!isBrandExpanded" />
|
|
|
+ <ArrowUp v-else />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="head-bos">
|
|
|
@@ -199,6 +206,32 @@ const checkList = ref<any>([]);
|
|
|
const classifyList = ref<any>([]);
|
|
|
const classifyData = ref<any>([]);
|
|
|
const brandList = ref<any>([]);
|
|
|
+const isBrandExpanded = ref(false); // 品牌列表是否展开
|
|
|
+const itemsPerRow = ref(6); // 每行显示的品牌数量（根据实际样式调整）
|
|
|
+const brandBoxRef = ref<HTMLElement | null>(null); // 品牌容器引用
|
|
|
+
|
|
|
+// 计算每行可以显示多少个品牌
|
|
|
+const calculateItemsPerRow = () => {
|
|
|
+ if (brandBoxRef.value) {
|
|
|
+ const containerWidth = brandBoxRef.value.clientWidth;
|
|
|
+ // 每个品牌项大约占用的宽度（包括gap）
|
|
|
+ const itemWidth = 80; // 估算值，可根据实际样式调整
|
|
|
+ itemsPerRow.value = Math.floor(containerWidth / itemWidth);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 计算应该显示的品牌列表（收起状态下只显示前2排）
|
|
|
+const displayBrandList = computed(() => {
|
|
|
+ if (isBrandExpanded.value) {
|
|
|
+ return brandList.value;
|
|
|
+ }
|
|
|
+ return brandList.value.slice(0, itemsPerRow.value * 2);
|
|
|
+});
|
|
|
+
|
|
|
+// 切换品牌列表展开/收起
|
|
|
+const toggleBrandExpand = () => {
|
|
|
+ isBrandExpanded.value = !isBrandExpanded.value;
|
|
|
+};
|
|
|
|
|
|
const categoryName = ref<any>('');
|
|
|
const hasMore = ref(true); // 是否还有更多数据
|
|
|
@@ -524,6 +557,10 @@ const getBrand1 = () => {
|
|
|
}).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
brandList.value = res.rows;
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
+ nextTick(() => {
|
|
|
+ calculateItemsPerRow();
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -541,6 +578,10 @@ const getBrand2 = () => {
|
|
|
id: ''
|
|
|
});
|
|
|
brandList.value = res.rows;
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
+ nextTick(() => {
|
|
|
+ calculateItemsPerRow();
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -554,6 +595,10 @@ const getBrandInfo = () => {
|
|
|
id: res.data.id
|
|
|
}
|
|
|
];
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
+ nextTick(() => {
|
|
|
+ calculateItemsPerRow();
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -629,8 +674,20 @@ watch(route, () => {
|
|
|
initData();
|
|
|
});
|
|
|
|
|
|
+// 监听窗口大小变化，重新计算每行显示数量
|
|
|
onMounted(() => {
|
|
|
initData();
|
|
|
+ // 等待DOM渲染完成后计算
|
|
|
+ nextTick(() => {
|
|
|
+ calculateItemsPerRow();
|
|
|
+ });
|
|
|
+ // 监听窗口resize事件
|
|
|
+ window.addEventListener('resize', calculateItemsPerRow);
|
|
|
+});
|
|
|
+
|
|
|
+// 组件卸载时移除事件监听
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', calculateItemsPerRow);
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -672,6 +729,17 @@ onMounted(() => {
|
|
|
color: var(--el-color-primary);
|
|
|
}
|
|
|
}
|
|
|
+ .expand-toggle {
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ user-select: none;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.head-sort {
|
|
|
margin: 15px 15px 0 0;
|
weixin_52219567