<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> <span class="ml-1 text-grey-darken-4 text-body-2" @click="drawerVis = !drawerVis" >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" > <div class="mb-4 pa-2 tw-bg-[#fff]" v-for="(item, index) in categoryStore.list" :key="index"> <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> <strong class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</strong> </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" @click="handleCategoryClick(item, k.id)" > {{ 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" @click="handleCategoryClick(item, k.id)" > {{ k.name }} </div> </template> </div> </div> </v-navigation-drawer> </v-layout> </template> <script setup lang="ts"> import { useCategoryStore } from '@/stores/category' import { useProductListStore } from '@/stores/product_list' import type { CategoryRootType } from '@/type' import { computed, ref, watchEffect } from 'vue' import { useRouter } from 'vue-router' const router = useRouter() const categoryStore = useCategoryStore() const productStore = useProductListStore() const drawerVis = ref(false) const CATEGORY_IMG = [ { 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' } ] 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 handleDrawerHide = () => { productStore.updatePageNo(1) router.push({ query: { category: categoryStore.selectedCategory } }) const doc = document as any const head = doc.getElementsByTagName('head') const meta = doc.createElement('meta') document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO] doc .querySelector('meta[name="keywords"]') .setAttribute('content', SEO[categoryStore.selectedCategory as keyof typeof SEO]) head[0].appendChild(meta) } const handleCategoryClick = (item: CategoryRootType, id: string) => { categoryStore.updateCategory(item.categoryDisplayName) if (item.categoryDisplayName === 'Energy materials') { categoryStore.updateFuncCategory(id) categoryStore.updateSubCategory(item.list[0].id) } else { categoryStore.updateSubCategory(id) } } </script> <style lang="less" scoped></style>