Commit 4fa43f25d81a1a0dc8969cc556198d6249c3105b

Authored by boyang
1 parent 6c04fa04

feat: url链接对应目录

Showing 1 changed file with 200 additions and 44 deletions
components/CategoryList.vue
@@ -11,7 +11,8 @@ @@ -11,7 +11,8 @@
11 </div> 11 </div>
12 <v-col class="flex pa-0" cols="12" sm="9"> 12 <v-col class="flex pa-0" cols="12" sm="9">
13 <span 13 <span
14 - :class="'tw-leading-[50px] tw-inline-flex tw-cursor-pointer px-4 mb-1 mr-1 tw-font-medium rounded hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' + 14 + :class="
  15 + 'tw-leading-[50px] tw-inline-flex tw-cursor-pointer px-4 mb-1 mr-1 tw-font-medium rounded hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
15 (categoryStore.selectedCategory === item.categoryDisplayName && 16 (categoryStore.selectedCategory === item.categoryDisplayName &&
16 'tw-text-[#fff] tw-bg-[#1e88e5]') 17 'tw-text-[#fff] tw-bg-[#1e88e5]')
17 " 18 "
@@ -31,12 +32,14 @@ @@ -31,12 +32,14 @@
31 </div> 32 </div>
32 <v-col class="pa-0" cols="12" sm="9"> 33 <v-col class="pa-0" cols="12" sm="9">
33 <span 34 <span
34 - :class="'px-4 py-1 mb-1 mr-1 tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +  
35 - (categoryStore.selectedSubCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]') 35 + :class="
  36 + 'px-4 py-1 mb-1 mr-1 tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
  37 + (categoryStore.selectedSubCategory === item.id &&
  38 + 'tw-text-[#fff] tw-bg-[#1e88e5]')
36 " 39 "
37 v-for="(item, index) in subCategoryList" 40 v-for="(item, index) in subCategoryList"
38 :key="index" 41 :key="index"
39 - @click="handleSubCategoryClick(item.id)" 42 + @click="handleSubCategoryClick(item)"
40 > 43 >
41 {{ item.name }} 44 {{ item.name }}
42 </span> 45 </span>
@@ -53,12 +56,14 @@ @@ -53,12 +56,14 @@
53 </div> 56 </div>
54 <v-col class="pa-0" cols="12" sm="9"> 57 <v-col class="pa-0" cols="12" sm="9">
55 <span 58 <span
56 - :class="'px-4 py-1 mb-1 mr-1 tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +  
57 - (categoryStore.selectedFuncCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]') 59 + :class="
  60 + 'px-4 py-1 mb-1 mr-1 tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
  61 + (categoryStore.selectedFuncCategory === item.id &&
  62 + 'tw-text-[#fff] tw-bg-[#1e88e5]')
58 " 63 "
59 v-for="(item, index) in funcCategoryList" 64 v-for="(item, index) in funcCategoryList"
60 :key="index" 65 :key="index"
61 - @click="handleFuncCategoryClick(item.id)" 66 + @click="handleFuncCategoryClick(item)"
62 > 67 >
63 {{ item.name }} 68 {{ item.name }}
64 </span> 69 </span>
@@ -69,34 +74,160 @@ @@ -69,34 +74,160 @@
69 </template> 74 </template>
70 75
71 <script setup lang="ts"> 76 <script setup lang="ts">
72 -import { useCategoryStore } from '@/stores/category'  
73 -import { useProductListStore } from '@/stores/product_list'  
74 -import type { CategoryRootType } from '@/type'  
75 -import { computed } from 'vue'  
76 -import { useRouter, useRoute } from 'vue-router' 77 +import { useCategoryStore } from "@/stores/category";
  78 +import { useProductListStore } from "@/stores/product_list";
  79 +import type { CategoryRootType } from "@/type";
  80 +import { computed } from "vue";
  81 +import { useRouter, useRoute } from "vue-router";
  82 +
  83 +const route = useRoute();
  84 +const router = useRouter();
  85 +
  86 +const categoryStore = useCategoryStore();
  87 +const productStore = useProductListStore();
  88 +watchEffect(async () => {
  89 + if (route.query.category) {
  90 + // 1. 提取 query.category 的内容
  91 + const categories = route.query.category.split(",");
  92 + const mainCategory = categories[0].trim(); // 取第一个值
  93 + const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值(如果存在)
  94 +
  95 + // 2. 更新选中的主分类
  96 + categoryStore.updateCategory(mainCategory);
  97 +
  98 + // 3. 如果有子分类名称,查找其对应的 ID
  99 + if (subCategoryName) {
  100 + const subCategoryList = computed(() => {
  101 + if (categoryStore.selectedCategory) {
  102 + const tmp = categoryStore.list.filter(
  103 + (item) =>
  104 + item.categoryDisplayName === categoryStore.selectedCategory
  105 + );
  106 + return tmp?.[0]?.list || [];
  107 + }
  108 + return [];
  109 + });
77 110
78 -const router = useRouter() 111 + // 4. 查找对应的子分类 ID
  112 + const foundFuncCategory = subCategoryList.value.find(
  113 + (func) => func.name === subCategoryName
  114 + );
79 115
80 -const categoryStore = useCategoryStore()  
81 -const productStore = useProductListStore() 116 + if (foundFuncCategory) {
  117 + const funcCategoryId = foundFuncCategory.id;
  118 + // 你可以在这里使用找到的 funcCategoryId
  119 + categoryStore.updateSubCategory(funcCategoryId);
  120 + }
  121 + }
  122 + // 5. 判断 query 中是否存在 function,并查找对应的 ID
  123 + if (route.query.function) {
  124 + const functionName = route.query.function.trim();
  125 + const funcCategoryList = computed(() => {
  126 + if (categoryStore.selectedCategory) {
  127 + const tmp = categoryStore.list.filter(
  128 + (item) =>
  129 + item.categoryDisplayName === categoryStore.selectedCategory
  130 + );
  131 + return tmp?.[0]?.productFunctions || [];
  132 + }
  133 + return [];
  134 + });
  135 + const foundFuncCategory = funcCategoryList.value.find(
  136 + (func) => func.name === functionName
  137 + );
82 138
  139 + if (foundFuncCategory) {
  140 + const funcCategoryId = foundFuncCategory.id;
  141 + // 你可以在这里使用找到的 funcCategoryId
  142 + categoryStore.updateFuncCategory(funcCategoryId);
  143 + }
  144 + // // 6. 查找对应的功能分类 ID
  145 + // const foundFuncCategory = funcCategories.find(
  146 + // (func) => func.name === functionName
  147 + // );
  148 +
  149 + // if (foundFuncCategory) {
  150 + // const funcCategoryId = foundFuncCategory.id;
  151 + // // 使用找到的 funcCategoryId
  152 + // categoryStore.updateFuncCategory(funcCategoryId);
  153 + // }
  154 + }
  155 + } else {
  156 + }
  157 +});
83 const seo = { 158 const seo = {
84 - 'Energy materials':  
85 - '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',  
86 - 'Laboratory consumables':  
87 - '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',  
88 - 'Low-dimensional materials':  
89 - ',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', 159 + "Energy materials":
  160 + "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",
  161 + "Laboratory consumables":
  162 + "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",
  163 + "Low-dimensional materials":
  164 + ",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",
90 Equipment: 165 Equipment:
91 - 'Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment'  
92 -} 166 + "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
  167 +};
  168 +
  169 +onMounted(() => {
  170 + if (Object.keys(route.query).length === 0) {
  171 + // 检查是否有默认的分类
  172 + const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
  173 + if (defaultCategory) {
  174 + const defaultCategoryName = defaultCategory.categoryDisplayName;
  175 + const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
  176 + const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
  177 +
  178 + // 更新 store 和 URL
  179 + categoryStore.updateCategory(defaultCategoryName);
  180 + productStore.updatePageNo(1);
  181 +
  182 + if (defaultSubCategory) {
  183 + categoryStore.updateSubCategory(defaultSubCategory.id);
  184 +
  185 + // 如果有之前的值则使用之前的值,拼接新的子分类名
  186 + const updatedCategory =
  187 + defaultCategoryName + "," + defaultSubCategory.name;
  188 +
  189 + // 拼接设备类型到 URL
  190 + router.push({
  191 + query: {
  192 + category: defaultCategoryName + "," + defaultSubCategory.name,
  193 + },
  194 + });
  195 + }
  196 +
  197 + if (defaultFuncCategory) {
  198 + categoryStore.updateFuncCategory(defaultFuncCategory.id);
  199 + // 拼接功能类型到 URL
  200 + router.push({
  201 + query: {
  202 + category: defaultCategoryName + "," + defaultSubCategory.name,
  203 + function: defaultFuncCategory.name,
  204 + },
  205 + });
  206 + }
  207 + }
  208 + }
  209 +});
93 210
94 const handleCategoryClick = (item: CategoryRootType) => { 211 const handleCategoryClick = (item: CategoryRootType) => {
95 - categoryStore.updateCategory(item.categoryDisplayName)  
96 - categoryStore.updateSubCategory(item.list[0].id)  
97 - productStore.updatePageNo(1) 212 + categoryStore.updateCategory(item.categoryDisplayName);
  213 + categoryStore.updateSubCategory(item.list[0].id);
  214 + productStore.updatePageNo(1);
  215 + const defaultSubCategory = item.list[0]; // 假设第一个子分类为默认子分类
98 216
99 - router.push({ query: { category: item.categoryDisplayName } }) 217 + if (item.categoryDisplayName === "Energy materials") {
  218 + router.push({
  219 + query: {
  220 + category: item.categoryDisplayName + "," + defaultSubCategory.name,
  221 + function: item.productFunctions[0].name,
  222 + },
  223 + });
  224 + } else {
  225 + router.push({
  226 + query: {
  227 + category: item.categoryDisplayName + "," + defaultSubCategory.name,
  228 + },
  229 + });
  230 + }
100 231
101 // const doc = document as any 232 // const doc = document as any
102 // const head = doc.getElementsByTagName('head') 233 // const head = doc.getElementsByTagName('head')
@@ -106,35 +237,60 @@ const handleCategoryClick = (item: CategoryRootType) =&gt; { @@ -106,35 +237,60 @@ const handleCategoryClick = (item: CategoryRootType) =&gt; {
106 // .querySelector('meta[name="keywords"]') 237 // .querySelector('meta[name="keywords"]')
107 // .setAttribute('content', seo[item.categoryDisplayName as keyof typeof seo]) 238 // .setAttribute('content', seo[item.categoryDisplayName as keyof typeof seo])
108 // head[0].appendChild(meta) 239 // head[0].appendChild(meta)
109 -} 240 +};
  241 +
  242 +const handleSubCategoryClick = (value: CategoryRootType) => {
  243 + categoryStore.updateSubCategory(value.id);
  244 + productStore.updatePageNo(1);
  245 +
  246 + // 获取当前的查询参数
  247 + const currentQuery = router.currentRoute.value.query;
  248 + const currentCategory = currentQuery.category || "";
  249 +
  250 + // 如果有之前的值则使用之前的值,拼接新的子分类名
  251 + const updatedCategory = currentCategory.split(",")[0] + "," + value.name;
  252 +
  253 + // 更新路由,保持 handleCategoryClick 的值不变
  254 + // router.push({ query: { category: updatedCategory } });
  255 + // 更新路由,保持 function 参数不变
  256 + router.push({
  257 + query: { category: updatedCategory, function: currentQuery.function },
  258 + });
  259 +};
  260 +
  261 +const handleFuncCategoryClick = (value: CategoryRootType) => {
  262 + categoryStore.updateFuncCategory(value.id);
  263 + productStore.updatePageNo(1);
  264 + // 获取当前的查询参数
  265 + const currentQuery = router.currentRoute.value.query;
110 266
111 -const handleSubCategoryClick = (value: string) => {  
112 - categoryStore.updateSubCategory(value)  
113 - productStore.updatePageNo(1)  
114 -} 267 + // 将 value.name 作为新的查询参数加入到现有的 query 中
  268 + const updatedQuery = {
  269 + ...currentQuery, // 保持当前的查询参数
  270 + function: value.name, // 将 value.name 添加为新的查询参数 funcCategory
  271 + };
115 272
116 -const handleFuncCategoryClick = (value: string) => {  
117 - categoryStore.updateFuncCategory(value)  
118 - productStore.updatePageNo(1)  
119 -} 273 + // 更新路由
  274 + router.push({ query: updatedQuery });
  275 +};
120 276
121 const subCategoryList = computed(() => { 277 const subCategoryList = computed(() => {
122 if (categoryStore.selectedCategory) { 278 if (categoryStore.selectedCategory) {
123 const tmp = categoryStore.list.filter( 279 const tmp = categoryStore.list.filter(
124 (item) => item.categoryDisplayName === categoryStore.selectedCategory 280 (item) => item.categoryDisplayName === categoryStore.selectedCategory
125 - )  
126 - return tmp?.[0]?.list || [] 281 + );
  282 + return tmp?.[0]?.list || [];
127 } 283 }
128 - return []  
129 -}) 284 + return [];
  285 +});
130 286
131 const funcCategoryList = computed(() => { 287 const funcCategoryList = computed(() => {
132 if (categoryStore.selectedCategory) { 288 if (categoryStore.selectedCategory) {
133 const tmp = categoryStore.list.filter( 289 const tmp = categoryStore.list.filter(
134 (item) => item.categoryDisplayName === categoryStore.selectedCategory 290 (item) => item.categoryDisplayName === categoryStore.selectedCategory
135 - )  
136 - return tmp?.[0]?.productFunctions || [] 291 + );
  292 + return tmp?.[0]?.productFunctions || [];
137 } 293 }
138 - return []  
139 -}) 294 + return [];
  295 +});
140 </script> 296 </script>