canrd-main / canrud-nuxt-front · Files

<template>
  <div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
    <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
    <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
    <v-container class="">
      <div class="tw-text-center tw-mt-[32px]" v-if="loading">
        <v-progress-circular
          color="blue-lighten-2"
          indeterminate
          size="64"
          class="tw-m-auto"
        ></v-progress-circular>
      </div>
      <v-item-group multiple>
        <v-row v-if="!loading">
          <v-col
            v-for="(item, i) in productStore.list"
            :key="i"
            cols="6"
            lg="3"
            md="4"
            sm="6"
          >
            <v-hover v-slot="{ isHovering, props }" open-delay="200">
              <v-card
                id="product-card"
                :elevation="isHovering ? 16 : 2"
                :class="{ 'on-hover': isHovering }"
                class="mx-auto"
                v-bind="props"
                :to="`/products/detail/${item.id}`"
              >
                <v-img :src="item.imgList[0]?.url" :alt="item.name"> </v-img>
                <v-card-text
                  class="tw-text-left font-weight-medium title"
                  style="height: auto"
                >
                  <h3 style="color: red" v-if="item.price">
                    {{
                      item.price === item.maxPrice
                        ? `$${item.price}`
                        : `$${item.price} - $${item.maxPrice}`
                    }}
                  </h3>
                  <!-- <s style="font-size: 13px; color: #757575">{{
                    item.originPrice === item.maxPrice
                      ? `$${item.originMinPrice}`
                      : `$${item.originMinPrice} - $${item.originMaxPrice}`
                  }}</s> -->
                  <h4 class="item-name">{{ item.name }}</h4>
                </v-card-text>
              </v-card>
            </v-hover>
          </v-col>
        </v-row>
        <div
          v-if="!productStore.total && !loading"
          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
        >
          no data
        </div>
      </v-item-group>
      <v-row>
        <v-col>
          <v-pagination
            :size="isMobile() ? 'small' : 'default'"
            v-if="productStore.total"
            v-model="productStore.pageNo"
            @update:modelValue="productStore.updatePageNo"
            :length="length"
            rounded="0"
            class="tw-float-right tw-mt-[32px]"
            total-visible="5"
          ></v-pagination></v-col
      ></v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import type { ProductImage } from "~/type";
import { isMobile, isEqual } from "~/utils";
import { useProductListStore } from "~/stores/product_list";
import { useCategoryStore } from "~/stores/category";
import CategoryList from "~/components/CategoryList.vue";
import MobileCategoryList from "~/components/MobileCategoryList.vue";
import { watchEffect, computed, ref } from "vue";

const productStore = useProductListStore();
const categoryStore = useCategoryStore();
const loading = ref(false);
const route = useRoute(); // 获取路由信息
const router = useRouter(); // 获取路由信息
const title = ref("");
const keywordTitle = ref("");

watchEffect(() => {
  // 遍历数组
  if (router.currentRoute.value.query.categories) {
    title.value = `${router.currentRoute.value.query.categories}`;
  } else if (router.currentRoute.value.query.function) {
    title.value += `,${router.currentRoute.value.query.function}`;
  }
  if (router.currentRoute.value.query.keyword) {
    keywordTitle.value = `${router.currentRoute.value.query.keyword}`;
  }
});

useHead({
  title: title.value || keywordTitle.value,
  meta: [
    {
      name: "title",
      content:
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
    {
      name: "keywords",
      content:
        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
    },
    {
      name: "description",
      content:
        "科路得,助您科研之路势在必得。We offer a wide range of research materials and related equipment, technical services, and battery material performance evaluation in areas such as pouch cells, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries, and sodium-ion batteries.",
    },
  ],
});
const firstIndex = ref(0);
const loadProducts = async () => {
  let params: any = {
    pageNo: productStore.pageNo,
    pageSize: 20,
  };

  loading.value = true;
  if (productStore.keyword && !isEqual(productStore.params, params)) {
    params.keyword = productStore.keyword;
    productStore.updateParams(params);
    await productStore.getList(params);
    loading.value = false;
    return;
  }
  const categories = ref();
  const mainCategory = ref();
  if (router.currentRoute.value.query.categories) {
    categories.value = router.currentRoute.value.query.categories.split(",");
    mainCategory.value = categories.value[0].trim(); // 取第一个值
  }

  params.productCategoryId = categoryStore.selectedSubCategory;
  // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
  if (categoryStore.selectedFuncCategory) {
    params.productFunctionId = categoryStore.selectedFuncCategory;
    if (firstIndex.value == 1) {
      params.productFunctionId = selectedFuncCategoryBak.value;
      firstIndex.value += 1;
      if (
        params.productFunctionId == "" &&
        selectedFuncCategoryBak.value == ""
      ) {
        categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
        params.productFunctionId = categoryStore.selectedFuncCategory;
        // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
      }
      console.log(
        params.productFunctionId,
        selectedFuncCategoryBak.value,
        categoryStore.selectedFuncCategory
      );
    }
    // const savedSubCategory = localStorage.getItem("selectedFuncCategory2");
    // console.log(savedSubCategory, "5656savedSubCategory");
    // localStorage.setItem("selectedFuncCategory3", "2");
  } else if (mainCategory.value == "Energy materials") {
    params.productCategoryId = categoryStore.selectedSubCategory;
  }

  console.log(
    // params,
    // productStore?.params,
    // categoryStore.selectedSubCategory,
    // categoryStore.selectedFuncCategory,
    window.selectedSubCategory,
    window.selectedFuncCategory
  );
  if (
    categoryStore.selectedSubCategory &&
    !isEqual(productStore.params, params)
  ) {
    // console.log(route, "5656route");
    productStore.updateParams(params);
    const categories = ref("Laboratory consumables,Others");
    const mainCategory = categories.value[0].trim(); // 取第一个值
    // console.log(categoryStore.selectedSubCategory, "5656mobi");

    await productStore.getList(params);
  }
  // if (
  //   categoryStore.selectedFuncCategory &&
  //   !isEqual(productStore.params, params)
  // ) {
  //   console.log(
  //     categoryStore.selectedFuncCategory,
  //     "5656categoryStore.selectedFuncCategoryss"
  //   );
  //   productStore.updateParams(params);
  //   await productStore.getList(params);
  // }
  if (firstIndex.value === 0 && categoryStore.selectedFuncCategory) {
    // console.log(route, "5656route");
    productStore.updateParams(params);
    // const categories = ref("Laboratory consumables,Others");
    // const mainCategory = categories.value[0].trim(); // 取第一个值
    // console.log(categoryStore.selectedFuncCategory, "5656mobi");
    await productStore.getList(params);
    firstIndex.value = 1;
  }
  loading.value = false;
};
const isWindowAssigned = ref(false);
const selectedSubCategoryBak = ref();
const selectedFuncCategoryBak = ref();
watchEffect(async () => {
  if (route.query.keyword !== undefined) {
    productStore.keyword = route.query.keyword;
  }
  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
  if (typeof window !== "undefined" && !isWindowAssigned.value) {
    window.selectedSubCategory = categoryStore.selectedSubCategory;
    window.selectedFuncCategory = categoryStore.selectedFuncCategory;
    selectedSubCategoryBak.value = categoryStore.selectedSubCategory;
    selectedFuncCategoryBak.value = categoryStore.selectedFuncCategory;
    isWindowAssigned.value = true;
  }
  loadProducts();
});

const length = computed(() =>
  productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
);
</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: 93%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 40px;
    width: 77%;
  }
}
@media screen and (max-width: 1280px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 40px;
    width: 92.5%;
  }
}
/* .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: 80%;
  }
}
@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: 80%;
    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: 80%;
    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>