Blame view

pages/products/index.vue 5.62 KB
1
2
3
4
5
6
<template>
  <div class="tw-m-auto tw-pb-[64px]">
    <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
    <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
    <v-container class="">
      <div class="tw-text-center" v-if="loading">
7
8
9
10
11
12
        <v-progress-circular
          color="blue-lighten-2"
          indeterminate
          size="64"
          class="tw-m-auto"
        ></v-progress-circular>
13
14
15
      </div>
      <v-item-group multiple>
        <v-row v-if="!loading">
16
17
18
19
20
21
22
23
          <v-col
            v-for="(item, i) in productStore.list"
            :key="i"
            cols="6"
            lg="3"
            md="4"
            sm="6"
          >
24
            <v-hover v-slot="{ isHovering, props }" open-delay="200">
25
26
27
28
29
30
31
              <v-card
                :elevation="isHovering ? 16 : 2"
                :class="{ 'on-hover': isHovering }"
                class="mx-auto"
                v-bind="props"
                :to="`/products/detail/${item.id}`"
              >
32
33
34
35
36
37
38
39
40
41
42
                <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>
43
                <v-card-text class="tw-text-left font-weight-medium title">
44
45
46
                  <h3 style="color: red" v-if="item.price">
                    ${{ item.price }}
                  </h3>
47
                  <h4>{{ item.name }}</h4>
48
                </v-card-text>
49
50
51
52
              </v-card>
            </v-hover>
          </v-col>
        </v-row>
53
54
55
56
        <div
          v-if="!productStore.total && !loading"
          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
        >
57
58
59
60
61
          no data
        </div>
      </v-item-group>
      <v-row>
        <v-col>
62
63
64
65
66
67
68
69
70
71
72
          <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>
73
74
75
76
77
    </v-container>
  </div>
</template>

<script setup lang="ts">
78
79
80
81
82
83
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";
84
85
86
87
88
const productStore = useProductListStore();
const categoryStore = useCategoryStore();
const loading = ref(false);
const route = useRoute(); // 获取路由信息
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
useHead({
  title: "canrud",
  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.",
    },
  ],
});
110
111

const loadProducts = async () => {
112
  console.log(productStore, "5656productStore");
113
114
  let params: any = {
    pageNo: productStore.pageNo,
115
116
    pageSize: 20,
  };
117
118
  loading.value = true;
119
  if (productStore.keyword && !isEqual(productStore.params, params)) {
120
121
122
123
124
    params.keyword = productStore.keyword;
    productStore.updateParams(params);
    await productStore.getList(params);
    loading.value = false;
    return;
125
126
  }
127
  params.productCategoryId = categoryStore.selectedSubCategory;
128
129
130
  // productCategoryId: '78b86c6e917841cf9a292234f2805e24',

  if (categoryStore.selectedFuncCategory) {
131
    params.productFunctionId = categoryStore.selectedFuncCategory;
132
133
  }
134
135
136
137
138
  if (
    categoryStore.selectedSubCategory &&
    !isEqual(productStore.params, params)
  ) {
    productStore.updateParams(params);
139
140
    await productStore.getList(params);
141
  }
142
143
  loading.value = false;
};
144
145

watchEffect(async () => {
146
147
  if (route.query.keyword !== undefined) {
    productStore.keyword = route.query.keyword;
148
149
  }
  loadProducts();
150
});
151
152
153

const length = computed(() =>
  productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
154
);
155
156
157
158
159
160
161
162
163
164
165
166
</script>

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