canrd-main / canrud-nuxt-front · Files

<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)"
            >
              {{ 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)"
            >
              {{ 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, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const categoryStore = useCategoryStore();
const productStore = useProductListStore();
const routeQuery = useRouteQuery();

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",
  },
];

watchEffect(async () => {
  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 (
    Object.keys(route.query).length === 0 &&
    !route.path.includes("/products/detail")
  ) {
    // 检查是否有默认的分类
    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的

    if (defaultCategory) {
      const defaultCategoryName = defaultCategory.categoryDisplayName;
      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类

      // 更新 store 和 URL
      categoryStore.updateCategory(defaultCategoryName);
      productStore.updatePageNo(1);

      if (defaultSubCategory) {
        categoryStore.updateSubCategory(defaultSubCategory.id);

        // 如果有之前的值则使用之前的值，拼接新的子分类名
        const updatedCategory =
          defaultCategoryName + "," + defaultSubCategory.name;

        // 拼接设备类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
          },
        });
      }

      if (defaultFuncCategory) {
        categoryStore.updateFuncCategory(defaultFuncCategory.id);
        // 拼接功能类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
            function: defaultFuncCategory.name,
          },
        });
      }
    }
  }
});

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: {
  //     categories: 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,
  subItem: any
) => {
  categoryStore.updateCategory(item.categoryDisplayName);

  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,
      },
    });
  } else {
    categoryStore.updateSubCategory(id);
    router.push({
      query: {
        categories: categoryStore.selectedCategory + "," + subItem.name,
      },
    });
  }
};
</script>

<style lang="less" scoped></style>