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-tabs
      class="tabs"
      v-model="tabRecom"
      style="margin-top: 25px"
      color="white"
      bg-color="#eeeeee"
      slider-color="blue-lighten-1"
      selected-class="active"
      v-if="recommendImages[0] !== null && !isMobile()"
    >
      <v-tab :value="1">Best Sellers</v-tab>
      <!-- <v-tab :value="3">商品百科</v-tab> -->
    </v-tabs>
    <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
      <div class="recommend-left-box">
        <v-img
          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
          alt="往左移"
          class="recommend-img-left"
          @click="toggleRowLeft"
        />
      </div>
      <div class="image-row" id="row1">
        <!-- <img
          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
          :key="'row1-' + index"
          :src="imageObj[0]?.url"
          :alt="'Image ' + (index + 1)"
          style="margin: 0 5px; width: 200px; height: 200px"
        /> -->
        <div
          v-for="(imageObj, index) in recommendImages"
          :key="'row1-' + index"
          class="imageTotal"
        >
          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
            <img
              :src="imageObj[0]?.url"
              :alt="'Image ' + (index + 1)"
              class="item-imgHot"
            />
            <span class="image-name">
              {{ imageObj[0]?.name }}
            </span>
          </a>
          <div v-else style="width: 200px; height: 200px"></div>
        </div>
      </div>
      <div class="recommend-right-box">
        <v-img
          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
          alt="往右移"
          class="recommend-img-right"
          @click="toggleRowRight"
        />
      </div>
    </div>
    <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
                :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-expand-transition>
                    <div
                      v-if="isHovering"
                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
                      style="height: 100%"
                    >
                      产品描述描述描述描述描述描述描述描述
                    </div>
                  </v-expand-transition> -->
                </v-img>
                <v-card-text class="tw-text-left font-weight-medium title">
                  <h3 style="color: red" v-if="item.price">
                    ${{ item.price }}
                  </h3>
                  <h4>{{ 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="hotLoading && 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="!hotLoading">
          <v-col
            v-for="(item, i) in recommendImages"
            :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>{{ 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="hotTotal"
            v-model="currentIndex"
            @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 = isMobile();

const loadHotProducts = async () => {
  const pageSize = ref(5);
  if (isOrNotMobile) {
    pageSize.value = 4;
  }
  hotLoading.value = true;
  let { data: hotProducts } = await useAsyncData(
    "hotProducts",
    () =>
      $fetch("/shop/product/hotProducts", {
        method: "GET",
        params: {
          pageNo: currentIndex.value,
          pageSize: pageSize.value,
        },
      }),
    {
      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: pageSize.value }).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;
    }
  );
  hotLoading.value = false;
};

const toggleRowLeft = () => {
  if (currentIndex.value !== 1) {
    currentIndex.value--;
  } else if (currentIndex.value == 1) {
    currentIndex.value = maxPage.value;
  }
};
const toggleRowRight = () => {
  if (currentIndex.value < maxPage.value) {
    currentIndex.value++;
  } else if (currentIndex.value == maxPage.value) {
    currentIndex.value = 1;
  }
};
const toggleRowMobile = (value: number) => {
  currentIndex.value = value;
};

watch(currentIndex, (newIndex) => {
  loadHotProducts(); // Call loadHotProducts when currentIndex changes
});
// Initial load of hot products
await loadHotProducts(); // Load hot products the first time

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();
  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
});
// onMounted(() => {
//   // window.selectedSubCategory = categoryStore.selectedSubCategory;
//   // window.selectedFuncCategory = categoryStore.selectedFuncCategory;
//   if (route.query.function) {
//     const functionName = route.query.function.trim();
//     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;
//       if (typeof localStorage !== "undefined") {
//         localStorage.setItem("selectedFuncCategory2", funcCategoryId);
//         localStorage.setItem("selectedFuncCategory3", "1");
//       }
//       // 你可以在这里使用找到的 funcCategoryId
//     }
//     // // 6. 查找对应的功能分类 ID
//     // const foundFuncCategory = funcCategories.find(
//     //   (func) => func.name === functionName
//     // );

//     // if (foundFuncCategory) {
//     //   const funcCategoryId = foundFuncCategory.id;
//     //   // 使用找到的 funcCategoryId
//     //   categoryStore.updateFuncCategory(funcCategoryId);
//     // }
//   }
// });

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

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

.v-card {
  transition: all 0.3s ease-in-out;
}
</style>