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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
// 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);
// // 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
// );
//
// if (foundFuncCategory) {
// const funcCategoryId = 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 (
202
203
204
205
206
Object.keys(route.query).length === 0 &&
!route.path.includes("/products/detail")
) {
// 检查是否有默认的分类
const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
207
208
209
210
211
if (defaultCategory) {
const defaultCategoryName = defaultCategory.categoryDisplayName;
const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
212
213
214
215
// 更新 store 和 URL
categoryStore.updateCategory(defaultCategoryName);
productStore.updatePageNo(1);
216
217
218
if (defaultSubCategory) {
categoryStore.updateSubCategory(defaultSubCategory.id);
219
220
221
222
// 如果有之前的值则使用之前的值,拼接新的子分类名
const updatedCategory =
defaultCategoryName + "," + defaultSubCategory.name;
223
224
225
226
227
228
229
230
// 拼接设备类型到 URL
router.push({
query: {
categories: defaultCategoryName + "," + defaultSubCategory.name,
},
});
}
231
232
233
234
235
236
237
238
239
240
241
242
243
244
if (defaultFuncCategory) {
categoryStore.updateFuncCategory(defaultFuncCategory.id);
// 拼接功能类型到 URL
router.push({
query: {
categories: defaultCategoryName + "," + defaultSubCategory.name,
function: defaultFuncCategory.name,
},
});
}
}
}
});
sanmu
authored
about a year ago
245
246
const SEO = {
247
248
249
250
251
252
"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
253
Equipment:
254
255
"Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
};
sanmu
authored
about a year ago
256
257
const handleDrawerHide = () => {
258
// productStore.updatePageNo(1);
sanmu
authored
about a year ago
259
260
261
262
263
264
// router.push({
// query: {
// categories: categoryStore.selectedCategory,
// },
// });
sanmu
authored
about a year ago
265
266
267
268
269
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
270
271
doc
.querySelector('meta[name="keywords"]')
272
273
274
275
276
277
.setAttribute(
"content",
SEO[categoryStore.selectedCategory as keyof typeof SEO]
);
head[0].appendChild(meta);
};
sanmu
authored
about a year ago
278
279
280
281
282
283
284
const handleCategoryClick = (
item: CategoryRootType,
id: string,
subItem: any
) => {
categoryStore.updateCategory(item.categoryDisplayName);
sanmu
authored
about a year ago
285
286
287
288
289
290
291
292
293
294
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
295
} else {
296
297
298
299
300
301
categoryStore.updateSubCategory(id);
router.push({
query: {
categories: categoryStore.selectedCategory + "," + subItem.name,
},
});
sanmu
authored
about a year ago
302
}
303
};
sanmu
authored
about a year ago
304
305
306
</script>
<style lang="less" scoped></style>