sanmu
authored
about a year ago
1
2
3
4
5
<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>
6
7
8
<span
class="ml-1 text-grey-darken-4 text-body-2"
@click="drawerVis = !drawerVis"
sanmu
authored
about a year ago
9
10
11
12
13
14
15
16
17
18
19
20
>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"
>
21
22
23
24
25
<div
class="mb-4 pa-2 tw-bg-[#fff]"
v-for="(item, index) in categoryStore.list"
:key="index"
>
sanmu
authored
about a year ago
26
27
28
29
30
31
32
33
34
35
36
37
<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>
38
39
40
<strong class="tw-m-0 tw-inline">{{
item.categoryDisplayName
}}</strong>
sanmu
authored
about a year ago
41
42
43
44
45
46
47
48
49
50
51
52
53
</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"
54
@click="handleCategoryClick(item, k.id, k)"
sanmu
authored
about a year ago
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
>
{{ 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"
70
@click="handleCategoryClick(item, k.id, k)"
sanmu
authored
about a year ago
71
72
73
74
75
76
77
78
79
80
81
>
{{ k.name }}
</div>
</template>
</div>
</div>
</v-navigation-drawer>
</v-layout>
</template>
<script setup lang="ts">
82
83
84
85
86
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";
sanmu
authored
about a year ago
87
88
89
const router = useRouter();
const route = useRoute();
sanmu
authored
about a year ago
90
91
92
93
const categoryStore = useCategoryStore();
const productStore = useProductListStore();
const routeQuery = useRouteQuery();
sanmu
authored
about a year ago
94
95
const drawerVis = ref(false);
sanmu
authored
about a year ago
96
97
const CATEGORY_IMG = [
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
{
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",
},
];
120
watchEffect(async () => {
121
122
123
124
125
126
127
128
129
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"; // 取第二个值(如果存在)
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// 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 [];
});
148
149
150
151
152
// 4. 查找对应的子分类 ID
const foundFuncCategory = subCategoryList.value.find(
(func) => func.name === subCategoryName.value
);
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
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 [];
});
174
175
176
177
178
// 4. 查找对应的子分类 ID
const foundFuncCategory = subCategoryList.value.find(
(func) => func.name === subCategoryName.value
);
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
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
);
203
console.log(foundFuncCategory, "functionName");
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
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 (
233
234
235
236
237
Object.keys(route.query).length === 0 &&
!route.path.includes("/products/detail")
) {
// 检查是否有默认的分类
const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
238
239
240
241
242
if (defaultCategory) {
const defaultCategoryName = defaultCategory.categoryDisplayName;
const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
243
244
245
246
// 更新 store 和 URL
categoryStore.updateCategory(defaultCategoryName);
productStore.updatePageNo(1);
247
248
249
if (defaultSubCategory) {
categoryStore.updateSubCategory(defaultSubCategory.id);
250
251
252
253
// 如果有之前的值则使用之前的值,拼接新的子分类名
const updatedCategory =
defaultCategoryName + "," + defaultSubCategory.name;
254
255
256
257
258
259
260
261
// 拼接设备类型到 URL
router.push({
query: {
categories: defaultCategoryName + "," + defaultSubCategory.name,
},
});
}
262
263
264
265
266
267
268
269
270
271
272
273
274
275
if (defaultFuncCategory) {
categoryStore.updateFuncCategory(defaultFuncCategory.id);
// 拼接功能类型到 URL
router.push({
query: {
categories: defaultCategoryName + "," + defaultSubCategory.name,
function: defaultFuncCategory.name,
},
});
}
}
}
});
sanmu
authored
about a year ago
276
277
const SEO = {
278
279
280
281
282
283
"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",
sanmu
authored
about a year ago
284
Equipment:
285
286
"Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
};
sanmu
authored
about a year ago
287
288
const handleDrawerHide = () => {
289
// productStore.updatePageNo(1);
sanmu
authored
about a year ago
290
291
292
293
294
295
// router.push({
// query: {
// categories: categoryStore.selectedCategory,
// },
// });
sanmu
authored
about a year ago
296
297
298
299
300
const doc = document as any;
const head = doc.getElementsByTagName("head");
const meta = doc.createElement("meta");
document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO];
sanmu
authored
about a year ago
301
302
doc
.querySelector('meta[name="keywords"]')
303
304
305
306
307
308
.setAttribute(
"content",
SEO[categoryStore.selectedCategory as keyof typeof SEO]
);
head[0].appendChild(meta);
};
sanmu
authored
about a year ago
309
310
311
312
313
314
315
const handleCategoryClick = (
item: CategoryRootType,
id: string,
subItem: any
) => {
categoryStore.updateCategory(item.categoryDisplayName);
sanmu
authored
about a year ago
316
317
318
319
320
321
322
323
324
325
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,
},
});
sanmu
authored
about a year ago
326
} else {
327
328
329
330
331
332
categoryStore.updateSubCategory(id);
router.push({
query: {
categories: categoryStore.selectedCategory + "," + subItem.name,
},
});
sanmu
authored
about a year ago
333
}
334
};
sanmu
authored
about a year ago
335
336
337
</script>
<style lang="less" scoped></style>