<template> <v-container> <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 class="tw-pr-0 tw-font-bold tw-w-[160px] tw-h-[36px] tw-leading-[64px] text-grey-darken-3" > CATEGORY: </div> <v-col class="flex pa-0" cols="12" sm="9"> <span :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] ' + (categoryStore.selectedCategory === item.categoryDisplayName && 'tw-text-[#fff] tw-bg-[#1e88e5]') " v-for="(item, index) in categoryStore.list" :key="index" @click="handleCategoryClick(item)" > <b class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</b> </span> </v-col> </v-row> <v-row class="pa-4 ma-0 bg-grey-lighten-4"> <div class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3" > DEVICE TYPE: </div> <v-col class="pa-0" cols="12" sm="9"> <span :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] ' + (categoryStore.selectedSubCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]') " v-for="(item, index) in subCategoryList" :key="index" @click="handleSubCategoryClick(item.id)" > {{ item.name }} </span> </v-col> </v-row> <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)]" > <div class="tw-pr-0 tw-font-bold tw-w-[210px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3" > MATERIAL FUNCTION: </div> <v-col class="pa-0" cols="12" sm="9"> <span :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] ' + (categoryStore.selectedFuncCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]') " v-for="(item, index) in funcCategoryList" :key="index" @click="handleFuncCategoryClick(item.id)" > {{ item.name }} </span> </v-col> </v-row> </div> </v-container> </template> <script setup lang="ts"> import { useCategoryStore } from '@/stores/category' import { useProductListStore } from '@/stores/product_list' import type { CategoryRootType } from '@/type' import { computed } from 'vue' import { useRouter, useRoute } from 'vue-router' const router = useRouter() const categoryStore = useCategoryStore() const productStore = useProductListStore() 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' } const handleCategoryClick = (item: CategoryRootType) => { categoryStore.updateCategory(item.categoryDisplayName) categoryStore.updateSubCategory(item.list[0].id) productStore.updatePageNo(1) 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) } const handleSubCategoryClick = (value: string) => { categoryStore.updateSubCategory(value) productStore.updatePageNo(1) } const handleFuncCategoryClick = (value: string) => { categoryStore.updateFuncCategory(value) productStore.updatePageNo(1) } const subCategoryList = computed(() => { if (categoryStore.selectedCategory) { const tmp = categoryStore.list.filter( (item) => item.categoryDisplayName === categoryStore.selectedCategory ) return tmp?.[0]?.list || [] } return [] }) const funcCategoryList = computed(() => { if (categoryStore.selectedCategory) { const tmp = categoryStore.list.filter( (item) => item.categoryDisplayName === categoryStore.selectedCategory ) return tmp?.[0]?.productFunctions || [] } return [] }) </script>