Blame view

src/components/CategoryList.vue 5.31 KB
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>