|
@@ -61,18 +61,22 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="head-bos" v-else>
|
|
<div class="head-bos" v-else>
|
|
|
<div class="head-title">品牌:</div>
|
|
<div class="head-title">品牌:</div>
|
|
|
- <div class="head-box">
|
|
|
|
|
|
|
+ <div class="head-box" ref="brandBoxRef">
|
|
|
<div
|
|
<div
|
|
|
@click="onHead(item, 'brandId')"
|
|
@click="onHead(item, 'brandId')"
|
|
|
class="classify-list"
|
|
class="classify-list"
|
|
|
- v-for="(item, index) in brandList"
|
|
|
|
|
|
|
+ v-for="(item, index) in isBrandExpanded ? brandList : displayBrandList"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
:class="item.id == httpObj.brandId ? 'hig' : ''"
|
|
:class="item.id == httpObj.brandId ? 'hig' : ''"
|
|
|
>
|
|
>
|
|
|
{{ item.brandName }}
|
|
{{ item.brandName }}
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-if="brandHasMore" @click="getBrandAll" class="classify-list" style="color: var(--el-color-primary); cursor: pointer;">
|
|
|
|
|
- 更多
|
|
|
|
|
|
|
+ <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>
|
|
|
</div>
|
|
</div>
|
|
@@ -202,6 +206,32 @@ const checkList = ref<any>([]);
|
|
|
const classifyList = ref<any>([]);
|
|
const classifyList = ref<any>([]);
|
|
|
const classifyData = ref<any>([]);
|
|
const classifyData = ref<any>([]);
|
|
|
const brandList = 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 categoryName = ref<any>('');
|
|
|
const hasMore = ref(true); // 是否还有更多数据
|
|
const hasMore = ref(true); // 是否还有更多数据
|
|
@@ -519,24 +549,24 @@ const onHead1 = (index1: any, item2: any) => {
|
|
|
|
|
|
|
|
//查询品牌
|
|
//查询品牌
|
|
|
const getBrand1 = () => {
|
|
const getBrand1 = () => {
|
|
|
- getBrandByCategoryList({
|
|
|
|
|
- name: categoryName.value,
|
|
|
|
|
|
|
+ getBrandPage({
|
|
|
|
|
+ categoryName: categoryName.value,
|
|
|
categoryId: httpObj.value.topCategoryId,
|
|
categoryId: httpObj.value.topCategoryId,
|
|
|
pageSize: 100,
|
|
pageSize: 100,
|
|
|
pageNum: 1
|
|
pageNum: 1
|
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
|
brandList.value = res.rows;
|
|
brandList.value = res.rows;
|
|
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ calculateItemsPerRow();
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
//查询分类下得品牌
|
|
//查询分类下得品牌
|
|
|
-const brandTotal = ref(0);
|
|
|
|
|
-const brandHasMore = ref(false);
|
|
|
|
|
-
|
|
|
|
|
const getBrand2 = () => {
|
|
const getBrand2 = () => {
|
|
|
- brandHasMore.value = false;
|
|
|
|
|
getBrandByCategoryList({
|
|
getBrandByCategoryList({
|
|
|
categoryId: httpObj.value.topCategoryId,
|
|
categoryId: httpObj.value.topCategoryId,
|
|
|
pageSize: 100,
|
|
pageSize: 100,
|
|
@@ -548,26 +578,10 @@ const getBrand2 = () => {
|
|
|
id: ''
|
|
id: ''
|
|
|
});
|
|
});
|
|
|
brandList.value = res.rows;
|
|
brandList.value = res.rows;
|
|
|
- brandTotal.value = res.total;
|
|
|
|
|
- brandHasMore.value = res.total > 100;
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
-};
|
|
|
|
|
-
|
|
|
|
|
-// 点击更多,查询全部品牌
|
|
|
|
|
-const getBrandAll = () => {
|
|
|
|
|
- getBrandByCategoryList({
|
|
|
|
|
- categoryId: httpObj.value.topCategoryId,
|
|
|
|
|
- pageSize: brandTotal.value,
|
|
|
|
|
- pageNum: 1
|
|
|
|
|
- }).then((res) => {
|
|
|
|
|
- if (res.code == 200) {
|
|
|
|
|
- res.rows.unshift({
|
|
|
|
|
- brandName: '全部',
|
|
|
|
|
- id: ''
|
|
|
|
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ calculateItemsPerRow();
|
|
|
});
|
|
});
|
|
|
- brandList.value = res.rows;
|
|
|
|
|
- brandHasMore.value = false;
|
|
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
@@ -581,6 +595,10 @@ const getBrandInfo = () => {
|
|
|
id: res.data.id
|
|
id: res.data.id
|
|
|
}
|
|
}
|
|
|
];
|
|
];
|
|
|
|
|
+ // 品牌列表更新后重新计算每行显示数量
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ calculateItemsPerRow();
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
};
|
|
};
|
|
@@ -656,8 +674,20 @@ watch(route, () => {
|
|
|
initData();
|
|
initData();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+// 监听窗口大小变化,重新计算每行显示数量
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
initData();
|
|
initData();
|
|
|
|
|
+ // 等待DOM渲染完成后计算
|
|
|
|
|
+ nextTick(() => {
|
|
|
|
|
+ calculateItemsPerRow();
|
|
|
|
|
+ });
|
|
|
|
|
+ // 监听窗口resize事件
|
|
|
|
|
+ window.addEventListener('resize', calculateItemsPerRow);
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+// 组件卸载时移除事件监听
|
|
|
|
|
+onUnmounted(() => {
|
|
|
|
|
+ window.removeEventListener('resize', calculateItemsPerRow);
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
@@ -699,6 +729,17 @@ onMounted(() => {
|
|
|
color: var(--el-color-primary);
|
|
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 {
|
|
.head-sort {
|
|
|
margin: 15px 15px 0 0;
|
|
margin: 15px 15px 0 0;
|