Commit 4fa43f25d81a1a0dc8969cc556198d6249c3105b
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) => { | @@ -106,35 +237,60 @@ const handleCategoryClick = (item: CategoryRootType) => { | ||
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> |