canrd-main / canrud-nuxt-front · Files

<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)"
          >
            {{ 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)"
          >
            {{ 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";
import { useRouteQuery } from "@/stores/route_query";

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

const categoryStore = useCategoryStore();
const productStore = useProductListStore();
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("Not specified");
    subCategoryName.value = categories[1]
      ? categories[1].trim()
      : "Not specified"; // 取第二个值（如果存在）

    // 2. 更新选中的主分类
    categoryStore.updateCategory(mainCategory);
    routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
    // 3. 如果有子分类名称，查找其对应的 ID
    if (subCategoryName.value) {
      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")) {
      const defaultCategory = categoryStore.list[1];
      const defaultFuncCategory = defaultCategory.productFunctions[1];
      if (defaultFuncCategory) {
        categoryStore.updateFuncCategory(defaultFuncCategory.id);
      }
      router.push({
        query: {
          categories: route.query.categories,
          function: defaultFuncCategory.name,
        },
      });
    }
  } 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 handleCategoryClick = (item: CategoryRootType) => {
  categoryStore.updateCategory(item.categoryDisplayName);
  categoryStore.updateSubCategory(item.list[0].id);
  productStore.updatePageNo(1);
  const defaultSubCategory = item.list[0]; // 假设第一个子分类为默认子分类

  if (item.categoryDisplayName === "Energy materials") {
    router.push({
      query: {
        categories: item.categoryDisplayName + "," + defaultSubCategory.name,
        function: item.productFunctions[0].name,
      },
    });
  } else {
    router.push({
      query: {
        categories: item.categoryDisplayName + "," + defaultSubCategory.name,
      },
    });
  }

  // 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: CategoryRootType) => {
  categoryStore.updateSubCategory(value.id);
  productStore.updatePageNo(1);

  // 获取当前的查询参数
  const currentQuery = router.currentRoute.value.query;
  const currentCategory = currentQuery.categories || "";

  // 如果有之前的值则使用之前的值，拼接新的子分类名
  const updatedCategory = currentCategory.split(",")[0] + "," + value.name;

  // 更新路由，保持 handleCategoryClick 的值不变
  // router.push({ query: { category: updatedCategory } });
  // 更新路由，保持 function 参数不变
  router.push({
    query: { categories: updatedCategory, function: currentQuery.function },
  });
};

const handleFuncCategoryClick = (value: CategoryRootType) => {
  categoryStore.updateFuncCategory(value.id);
  productStore.updatePageNo(1);
  // 获取当前的查询参数
  const currentQuery = router.currentRoute.value.query;

  // 将 value.name 作为新的查询参数加入到现有的 query 中
  const updatedQuery = {
    ...currentQuery, // 保持当前的查询参数
    function: value.name, // 将 value.name 添加为新的查询参数 funcCategory
  };

  // 更新路由
  router.push({ query: updatedQuery });
};

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 [];
});

import type { ProductImage } from "~/type";
import { isMobile, isEqual } from "~/utils";
import { watchEffect, ref } from "vue";

const title = ref("");
const { width } = useDisplay();

</script>
<style scoped>
.title {
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 1537px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 20px;
    width: 100%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 40px;
    width: 100%;
  }
}
@media screen and (max-width: 1280px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 40px;
    width: 100%;
  }
}
/* .tabs {
  border-bottom: 2px solid #1f88e5;
} */

.active {
  background-color: #1086e8;
}

@media screen and (min-width: 1537px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    margin: 10px auto 50px;
    width: 75%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin: 10px auto 0px;
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 1280px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    margin: 10px auto 0px;
    width: 100%;
    padding: 0;
  }
}
.image-row {
  display: flex;
  height: 245px;
}
@media screen and (min-width: 1537px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 300px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 200px;
  }
}
@media screen and (max-width: 1280px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 200px;
  }
}
@media screen and (min-width: 1537px) {
  .image-row img {
    width: 240px;
    height: 240px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row img {
    width: 140px;
    height: 140px;
  }
}
@media screen and (max-width: 1280px) {
  .image-row img {
    width: 120px;
    height: 120px;
  }
}
@media screen and (min-width: 1537px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 50px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 10px;
  }
}
@media screen and (max-width: 1280px) {
  .image-name {
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
    text-align: center; /* Centers the text horizontally */
    margin-left: 10px;
  }
}

button .recommendButton {
  margin: 0 0px;
  cursor: pointer;
}

.recommend-left-box {
}

@media screen and (max-width: 1280px) {
  .recommend-img-left {
    width: 26px;
    height: 27px;
    margin-bottom: 60px;
  }
}
.recommend-img-left {
  width: 26px;
  height: 27px;
  margin-right: 30px;
  margin-bottom: 60px;
}

.recommend-img-left:hover {
  cursor: pointer;
}
.recommend-right-box {
}

.recommend-img-right {
  width: 26px;
  height: 27px;
  margin-left: 30px;
  margin-bottom: 60px;
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .recommend-img-left {
    width: 26px;
    height: 27px;
    margin-right: 30px;
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .recommend-img-right {
    width: 26px;
    height: 27px;
    margin-left: 30px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1600px) {
  .recommend-img-left {
    width: 26px;
    height: 27px;
    margin-right: 70px;
    margin-bottom: 60px;
  }
}
@media screen and (min-width: 1600px) {
  .recommend-img-right {
    width: 26px;
    height: 27px;
    margin-left: 70px;
    margin-bottom: 60px;
  }
}

.recommend-img-right:hover {
  cursor: pointer;
}

.v-card {
  transition: all 0.3s ease-in-out;
}

.v-card-text {
  max-width: 100%; /* 确保文字宽度受限 */
}
.item-name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  text-align: left;
  line-height: 1.5em;
  min-height: calc(3 * 1.5em); /* 强制未满三行时高度一致 */
}

#product-card .v-responsive.v-img {
  width: 274px !important; /* 设置宽度 */
  height: 274px !important; /* 设置高度 */
}

.clamp-text {
  display: -webkit-box; /* 使用弹性盒子 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  -webkit-line-clamp: 3; /* 限制最多显示3行 */
  overflow: hidden; /* 隐藏多余内容 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: normal; /* 允许换行 */
  line-height: 1.5em; /* 设置每行的高度 */
  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
}
</style>