<template> <div class="pr-4 tw-h-[48px] tw-leading-[48px] border-b tw-flex tw-justify-between tw-items-center" > <span class="ml-4 tw-font-bold">{{ categoryStore.selectedCategory }}</span> <span class="ml-1 text-grey-darken-4 text-body-2" @click="drawerVis = !drawerVis" >Filter <v-icon> mdi-filter-outline </v-icon></span > </div> <!-- <div class="bg-grey-lighten-4 tw-w-full tw-h-3"></div> --> <v-layout> <v-navigation-drawer @update:model-value="handleDrawerHide" v-model="drawerVis" location="bottom" touchless class="!tw-h-[70%] bg-grey-lighten-4 tw-overflow-y-auto tw-overflow-x-hidden" > <div class="mb-4 pa-2 tw-bg-[#fff]" v-for="(item, index) in categoryStore.list" :key="index" > <div class="mb-4 tw-flex tw-items-center"> <div> <v-img class="mr-4 tw-float-left" width="32" :src=" categoryStore.selectedCategory === item.categoryDisplayName ? CATEGORY_IMG[index].selected : CATEGORY_IMG[index].normal " ></v-img> </div> <strong class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</strong> </div> <div class="tw-flex tw-flex-wrap tw-justify-between"> <template v-if="index !== 0"> <div cols="6" v-for="(k, i) in item.list" :class=" 'tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis' + (categoryStore.selectedSubCategory === k.id ? ' bg-blue-darken-1 text-white ' : ' bg-grey-lighten-4 ') " :key="i" @click="handleCategoryClick(item, k.id, k)" > {{ k.name }} </div> </template> <template v-else> <div cols="6" v-for="(k, i) in item.productFunctions" :class=" (categoryStore.selectedFuncCategory === k.id ? ' bg-blue-darken-1 text-white ' : ' bg-grey-lighten-4 ') + ' tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis' " :key="i" @click="handleCategoryClick(item, k.id, k)" > {{ k.name }} </div> </template> </div> </div> </v-navigation-drawer> </v-layout> </template> <script setup lang="ts"> import { useCategoryStore } from "@/stores/category"; import { useProductListStore } from "@/stores/product_list"; import type { CategoryRootType } from "@/type"; import { computed, ref, watchEffect } from "vue"; import { useRouter, useRoute } from "vue-router"; const router = useRouter(); const route = useRoute(); const categoryStore = useCategoryStore(); const productStore = useProductListStore(); const routeQuery = useRouteQuery(); const drawerVis = ref(false); const CATEGORY_IMG = [ { normal: "/category/1.png", selected: "/category/1.1.png", name: "Energy materials", }, { normal: "/category/2.png", selected: "/category/2.1.png", name: "Laboratory consumables", }, { normal: "/category/3.png", selected: "/category/3.1.png", name: "Low-dimensional materials", }, { normal: "/category/4.png", selected: "/category/4.1.png", name: "Equipment", }, ]; watchEffect(async () => { if (route.query.categories) { // 1. 提取 query.category 的内容 productStore.updateKeyword(""); const categories = route.query.categories.split(","); const mainCategory = categories[0].trim(); // 取第一个值 const subCategoryName = ref(""); subCategoryName.value = categories[1] ? categories[1].trim() : "Not specified"; // 取第二个值(如果存在) // 2. 更新选中的主分类 categoryStore.updateCategory(mainCategory); routeQuery.updateCategories(mainCategory + "," + subCategoryName.value); if (!route.query.categories.includes("Energy materials")) { // 3. 如果有子分类名称,查找其对应的 ID if (subCategoryName.value) { // if (subCategoryName.value && mainCategory !== "Energy materials") { const subCategoryList = computed(() => { if (categoryStore.selectedCategory) { const tmp = categoryStore.list.filter( (item) => item.categoryDisplayName === categoryStore.selectedCategory ); return tmp?.[0]?.list || []; } return []; }); // 4. 查找对应的子分类 ID const foundFuncCategory = subCategoryList.value.find( (func) => func.name === subCategoryName.value ); if (foundFuncCategory) { const funcCategoryId = foundFuncCategory.id; // 你可以在这里使用找到的 funcCategoryId categoryStore.updateSubCategory(funcCategoryId); } } } else { // 3. 如果有子分类名称,查找其对应的 ID if (subCategoryName.value) { // if (subCategoryName.value && mainCategory !== "Energy materials") { const subCategoryList = computed(() => { if (categoryStore.selectedCategory) { const tmp = categoryStore.list.filter( (item) => item.categoryDisplayName === categoryStore.selectedCategory ); return tmp?.[0]?.list || []; } return []; }); // 4. 查找对应的子分类 ID const foundFuncCategory = subCategoryList.value.find( (func) => func.name === subCategoryName.value ); if (foundFuncCategory) { const funcCategoryId = foundFuncCategory.id; // 你可以在这里使用找到的 funcCategoryId categoryStore.updateSubCategory(funcCategoryId); } } // 5. 判断 query 中是否存在 function,并查找对应的 ID if (route.query.function) { const functionName = route.query.function.trim(); routeQuery.updateFunction(functionName); const funcCategoryList = computed(() => { if (categoryStore.selectedCategory) { const tmp = categoryStore.list.filter( (item) => item.categoryDisplayName === categoryStore.selectedCategory ); return tmp?.[0]?.productFunctions || []; } return []; }); const foundFuncCategory = funcCategoryList.value.find( (func) => func.name === functionName ); console.log(foundFuncCategory, "functionName"); if (foundFuncCategory) { const funcCategoryId = foundFuncCategory.id; if (typeof window !== "undefined") { window.selectedFuncCategory = foundFuncCategory.id; } // 你可以在这里使用找到的 funcCategoryId categoryStore.updateFuncCategory(funcCategoryId); } // // 6. 查找对应的功能分类 ID // const foundFuncCategory = funcCategories.find( // (func) => func.name === functionName // ); // if (foundFuncCategory) { // const funcCategoryId = foundFuncCategory.id; // // 使用找到的 funcCategoryId // categoryStore.updateFuncCategory(funcCategoryId); // } } else if (route.query.categories.includes("Energy materials")) { //没有function默认为第一个 const defaultCategory = categoryStore.list[0]; const defaultFuncCategory = defaultCategory.productFunctions[1]; if (defaultFuncCategory) { categoryStore.updateFuncCategory(defaultFuncCategory.id); } } } } else if ( Object.keys(route.query).length === 0 && !route.path.includes("/products/detail") ) { // 检查是否有默认的分类 const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的 if (defaultCategory) { const defaultCategoryName = defaultCategory.categoryDisplayName; const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类 const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类 // 更新 store 和 URL categoryStore.updateCategory(defaultCategoryName); productStore.updatePageNo(1); if (defaultSubCategory) { categoryStore.updateSubCategory(defaultSubCategory.id); // 如果有之前的值则使用之前的值,拼接新的子分类名 const updatedCategory = defaultCategoryName + "," + defaultSubCategory.name; // 拼接设备类型到 URL router.push({ query: { categories: defaultCategoryName + "," + defaultSubCategory.name, }, }); } if (defaultFuncCategory) { categoryStore.updateFuncCategory(defaultFuncCategory.id); // 拼接功能类型到 URL router.push({ query: { categories: defaultCategoryName + "," + defaultSubCategory.name, function: defaultFuncCategory.name, }, }); } } } }); const SEO = { "Energy materials": "Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories", "Laboratory consumables": "Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others", "Low-dimensional materials": ",Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others", Equipment: "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment", }; const handleDrawerHide = () => { // productStore.updatePageNo(1); // router.push({ // query: { // categories: categoryStore.selectedCategory, // }, // }); const doc = document as any; const head = doc.getElementsByTagName("head"); const meta = doc.createElement("meta"); document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO]; doc .querySelector('meta[name="keywords"]') .setAttribute( "content", SEO[categoryStore.selectedCategory as keyof typeof SEO] ); head[0].appendChild(meta); }; const handleCategoryClick = ( item: CategoryRootType, id: string, subItem: any ) => { categoryStore.updateCategory(item.categoryDisplayName); if (item.categoryDisplayName === "Energy materials") { categoryStore.updateFuncCategory(id); categoryStore.updateSubCategory(item.list[0].id); router.push({ query: { categories: categoryStore.selectedCategory + "," + item.list[0].name, function: subItem.name, }, }); } else { categoryStore.updateSubCategory(id); router.push({ query: { categories: categoryStore.selectedCategory + "," + subItem.name, }, }); } }; </script> <style lang="less" scoped></style>