sanmu
authored
|
1
2
|
<template>
<v-container>
|
sanmu
authored
|
3
4
5
6
7
|
<div class="tw-border tw-border-solid tw-border-[#1f88e5]">
<v-row
class="ma-0 pl-4 bg-grey-lighten-3 tw-border-0 tw-border-b tw-border-solid tw-border-[#1f88e5] md:tw-leading-[64px]"
>
<div
|
sanmu
authored
|
8
9
10
|
class="tw-pr-0 tw-font-bold tw-w-[160px] tw-h-[36px] tw-leading-[64px] text-grey-darken-3"
>
CATEGORY:
|
sanmu
authored
|
11
12
|
</div>
<v-col class="flex pa-0" cols="12" sm="9">
|
sanmu
authored
|
13
|
<span
|
sanmu
authored
|
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] ' +
|
sanmu
authored
|
15
16
|
(categoryStore.selectedCategory === item.categoryDisplayName &&
'tw-text-[#fff] tw-bg-[#1e88e5]')
|
sanmu
authored
|
17
|
"
|
sanmu
authored
|
18
19
20
21
|
v-for="(item, index) in categoryStore.list"
:key="index"
@click="handleCategoryClick(item)"
>
|
sanmu
authored
|
22
23
|
<b class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</b>
</span>
|
sanmu
authored
|
24
25
|
</v-col>
</v-row>
|
sanmu
authored
|
26
|
<v-row class="pa-4 ma-0 bg-grey-lighten-4">
|
sanmu
authored
|
27
|
<div
|
sanmu
authored
|
28
|
class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
|
sanmu
authored
|
29
30
31
|
>
DEVICE TYPE:
</div>
|
sanmu
authored
|
32
|
<v-col class="pa-0" cols="12" sm="9">
|
sanmu
authored
|
33
|
<span
|
sanmu
authored
|
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] ' +
|
sanmu
authored
|
35
|
(categoryStore.selectedSubCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
|
sanmu
authored
|
36
|
"
|
sanmu
authored
|
37
38
39
40
41
|
v-for="(item, index) in subCategoryList"
:key="index"
@click="handleSubCategoryClick(item.id)"
>
{{ item.name }}
|
sanmu
authored
|
42
|
</span>
|
sanmu
authored
|
43
44
|
</v-col>
</v-row>
|
sanmu
authored
|
45
46
47
48
|
<v-row
v-if="funcCategoryList.length"
class="pa-4 ma-0 bg-grey-lighten-4 tw-border-0 tw-border-t tw-border-dashed tw-border-[rgb(178, 178, 178)]"
>
|
sanmu
authored
|
49
50
51
52
53
|
<div
class="tw-pr-0 tw-font-bold tw-w-[210px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
>
MATERIAL FUNCTION:
</div>
|
sanmu
authored
|
54
|
<v-col class="pa-0" cols="12" sm="9">
|
sanmu
authored
|
55
|
<span
|
sanmu
authored
|
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] ' +
|
sanmu
authored
|
57
|
(categoryStore.selectedFuncCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
|
sanmu
authored
|
58
|
"
|
sanmu
authored
|
59
60
61
62
63
|
v-for="(item, index) in funcCategoryList"
:key="index"
@click="handleFuncCategoryClick(item.id)"
>
{{ item.name }}
|
sanmu
authored
|
64
|
</span>
|
sanmu
authored
|
65
66
|
</v-col>
</v-row>
|
sanmu
authored
|
67
68
69
70
71
72
|
</div>
</v-container>
</template>
<script setup lang="ts">
import { useCategoryStore } from '@/stores/category'
|
sanmu
authored
|
73
|
import { useProductListStore } from '@/stores/product_list'
|
sanmu
authored
|
74
75
|
import type { CategoryRootType } from '@/type'
import { computed } from 'vue'
|
sanmu
authored
|
76
77
78
|
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
|
sanmu
authored
|
79
80
|
const categoryStore = useCategoryStore()
|
sanmu
authored
|
81
|
const productStore = useProductListStore()
|
sanmu
authored
|
82
|
|
sanmu
authored
|
83
84
85
86
87
88
89
90
91
92
93
|
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'
}
|
sanmu
authored
|
94
95
96
|
const handleCategoryClick = (item: CategoryRootType) => {
categoryStore.updateCategory(item.categoryDisplayName)
categoryStore.updateSubCategory(item.list[0].id)
|
sanmu
authored
|
97
|
productStore.updatePageNo(1)
|
sanmu
authored
|
98
99
100
101
102
103
104
105
106
107
108
|
router.push({ query: { category: item.categoryDisplayName } })
const doc = document as any
const head = doc.getElementsByTagName('head')
const meta = doc.createElement('meta')
document.title = seo[item.categoryDisplayName as keyof typeof seo]
doc
.querySelector('meta[name="keywords"]')
.setAttribute('content', seo[item.categoryDisplayName as keyof typeof seo])
head[0].appendChild(meta)
|
sanmu
authored
|
109
110
111
112
|
}
const handleSubCategoryClick = (value: string) => {
categoryStore.updateSubCategory(value)
|
sanmu
authored
|
113
|
productStore.updatePageNo(1)
|
sanmu
authored
|
114
115
|
}
|
sanmu
authored
|
116
117
|
const handleFuncCategoryClick = (value: string) => {
categoryStore.updateFuncCategory(value)
|
sanmu
authored
|
118
|
productStore.updatePageNo(1)
|
sanmu
authored
|
119
120
|
}
|
sanmu
authored
|
121
122
123
124
125
126
127
128
129
|
const subCategoryList = computed(() => {
if (categoryStore.selectedCategory) {
const tmp = categoryStore.list.filter(
(item) => item.categoryDisplayName === categoryStore.selectedCategory
)
return tmp?.[0]?.list || []
}
return []
})
|
sanmu
authored
|
130
131
132
133
134
135
136
137
138
139
|
const funcCategoryList = computed(() => {
if (categoryStore.selectedCategory) {
const tmp = categoryStore.list.filter(
(item) => item.categoryDisplayName === categoryStore.selectedCategory
)
return tmp?.[0]?.productFunctions || []
}
return []
})
|
sanmu
authored
|
140
|
</script>
|