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 }}

                  </h3>

                  <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-tabs
        class="tabs2"
        ref="tabs2"
        v-model="tabRecom"
        style="margin-top: 25px; margin-bottom: 20px"
        color="white"
        bg-color="#eeeeee"
        slider-color="blue-lighten-1"
        selected-class="active"
        v-if="isMobile()"
      >
        <v-tab :value="1">Best Sellers</v-tab>
        <!-- <v-tab :value="3">商品百科</v-tab> -->
      </v-tabs>

      <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">

        <v-progress-circular
          color="blue-lighten-2"
          indeterminate
          size="64"
          class="tw-m-auto"
        ></v-progress-circular>
      </div>
      <v-item-group multiple v-if="isMobile()">

        <v-row v-if="!hotLoadingMobile">

          <v-col

            v-for="(item, i) in recommendImagesMobile"

            :key="i"
            cols="6"
            lg="3"
            md="4"
            sm="6"
          >
            <div v-if="item !== null">
              <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
                <!-- 设置 eager 属性，确保图片直接加载 -->
                <v-img
                  :src="item[0].url"
                  :alt="item[0].name"
                  eager
                  class="d-block"
                />
                <v-card-text class="tw-text-left font-weight-medium title">

                  <h4 class="clamp-text">{{ item[0].name }}</h4>

                </v-card-text>
              </v-card>
            </div>
          </v-col>
        </v-row>
        <!-- <div
          v-if="!hotTotal"
          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
        >
          no data
        </div> -->
      </v-item-group>
      <v-row v-if="isMobile()">
        <v-col>
          <v-pagination
            :size="isMobile() ? 'small' : 'default'"

            v-if="hotTotalMobile"
            v-model="currentIndexMobile"

            @update:modelValue="toggleRowMobile"
            :length="hotLength"
            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 hotLoading = ref(false);

const route = useRoute(); // 获取路由信息

const router = useRouter(); // 获取路由信息
const title = ref("");

const keywordTitle = ref("");

const maxPage = ref(1);
const tabRecom = ref();

const recommendList = ref({});
const recommendImages = ref({});

const currentIndex = ref(1);

const hotTotal = ref(10);

const isOrNotMobile = ref(isMobile());
const maxPageMobile = ref(1);
const recommendListMobile = ref({});
const recommendImagesMobile = ref({});
const currentIndexMobile = ref(1);
const hotLoadingMobile = ref(false);
const hotTotalMobile = ref(10);

const loadHotProducts = async () => {

  const pageSize = 5;

  let { data: hotProducts } = await useAsyncData(
    "hotProducts",
    () =>
      $fetch("/shop/product/hotProducts", {
        method: "GET",
        params: {
          pageNo: currentIndex.value,

          pageSize: pageSize,

        },
      }),
    {
      server: true, // 仅在服务器端获取数据
    }
  );

  hotTotal.value = hotProducts.value.data.total;

  recommendList.value = hotProducts.value.data.records;
  maxPage.value = hotProducts.value.data.pages;
  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {

  recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
    const item = recommendList.value[index];
    if (!item) {
      return null;
    }
    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
    if (typeof item.productimageliststore === "string") {
      try {
        item.productimageliststore = JSON.parse(item.productimageliststore);
      } catch (error) {
        item.productimageliststore = []; // 解析失败时，设置为空数组

      }

    }

    const ree = (item.productimageliststore = item?.productimageliststore.map(
      (productItem: ProductImage) => ({
        ...productItem,
        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
        name: item.name,
        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
      })
    ));
    return ree;
  });

};

const toggleRowLeft = () => {
  if (currentIndex.value !== 1) {
    currentIndex.value--;
  } else if (currentIndex.value == 1) {
    currentIndex.value = maxPage.value;
  }

  startTimer();

};

let intervalId: any;

const toggleRowRight = () => {
  if (currentIndex.value < maxPage.value) {
    currentIndex.value++;
  } else if (currentIndex.value == maxPage.value) {
    currentIndex.value = 1;
  }

  startTimer();

};

const startTimer = () => {
  // 清除已有计时器，防止重复
  clearInterval(intervalId);
  intervalId = setInterval(() => {
    toggleRowRight();
  }, 5000); // 每6秒调用一次
};

onMounted(() => {
  startTimer();
});

const toggleRowMobile = (value: number) => {

  currentIndexMobile.value = value;

};

const { width } = useDisplay();
const firstHotIndex = ref(true);

// // 监听屏幕宽度变化
// watch(width, async (newWidth) => {
//   console.log(newWidth, "5656widthvalue");
//   if (firstHotIndex.value) {
//     if (newWidth > 600) {
//       await loadHotProducts();
//     } else {
//       await loadHotProductsMobile();
//     }
//   }
// });

// // 监听路由变化
// watch(
//   () => route.fullPath,
//   async () => {
//     if (firstHotIndex.value) {
//       if (width.value > 600) {
//         await loadHotProducts();
//       } else {
//         await loadHotProductsMobile();
//       }
//     }
//   }
// );

watch(currentIndex, (newIndex) => {
  loadHotProducts(); // Call loadHotProducts when currentIndex changes
});

const loadHotProductsMobile = async () => {
  hotLoadingMobile.value = true;
  let { data: hotProductsMobile } = await useAsyncData(
    "hotProducts",
    () =>
      $fetch("/shop/product/hotProducts", {
        method: "GET",
        params: {
          pageNo: currentIndexMobile.value,
          pageSize: 4,
        },
      }),
    {
      server: true, // 仅在服务器端获取数据
    }
  );
  hotTotalMobile.value = hotProductsMobile.value.data.total;
  recommendListMobile.value = hotProductsMobile.value.data.records;
  maxPageMobile.value = hotProductsMobile.value.data.pages;
  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
  recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
    const item = recommendListMobile.value[index];
    if (!item) {
      return null;
    }
    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
    if (typeof item.productimageliststore === "string") {
      try {
        item.productimageliststore = JSON.parse(item.productimageliststore);
      } catch (error) {
        item.productimageliststore = []; // 解析失败时，设置为空数组
      }
    }
    const ree = (item.productimageliststore = item?.productimageliststore.map(
      (productItem: ProductImage) => ({
        ...productItem,
        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
        name: item.name,
        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
      })
    ));
    return ree;
  });
  hotLoadingMobile.value = false;
};
watch(currentIndexMobile, (newIndex) => {
  loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
});
watchEffect(async () => {
  console.log("Current route:", route.fullPath, "Width:", width.value);

  if (firstHotIndex.value) {
    if (width.value > 600) {
      await loadHotProducts();
    } else {
      await loadHotProductsMobile();
    }
  }
});

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

);

const hotLength = computed(() =>

  hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 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>