canrd-main / canrud-nuxt-front · Commits

Commit e621b58f67294fffbf5bfa688ff521f7d190bcdf

Authored by boyang
1 parent 3b581a76
build: skipped

fix: prod2-42/43

Inline Side-by-side
Showing 5 changed files with 43 additions and 317 deletions
components/MobileProductDetail.vue
  View file @e621b58
... ... @@ -309,7 +309,7 @@
309 309 class="d-block"
310 310 />
311 311 <v-card-text class="tw-text-left font-weight-medium title">
312   - <h4>{{ item[0].name }}</h4>
  312 + <h4 class="clamp-text">{{ item[0].name }}</h4>
313 313 </v-card-text>
314 314 </v-card>
315 315 </div>
... ... @@ -370,7 +370,7 @@
370 370 class="d-block"
371 371 />
372 372 <v-card-text class="tw-text-left font-weight-medium title">
373   - <h4>{{ item[0].name }}</h4>
  373 + <h4 class="clamp-text">{{ item[0].name }}</h4>
374 374 </v-card-text>
375 375 </v-card>
376 376 </div>
... ... @@ -810,4 +810,14 @@ const hotLength = computed(() =&gt;
810 810 .v-card {
811 811 transition: all 0.3s ease-in-out;
812 812 }
  813 +.clamp-text {
  814 + display: -webkit-box; /* 使用弹性盒子 */
  815 + -webkit-box-orient: vertical; /* 设置为垂直方向 */
  816 + -webkit-line-clamp: 3; /* 限制最多显示3行 */
  817 + overflow: hidden; /* 隐藏多余内容 */
  818 + text-overflow: ellipsis; /* 添加省略号 */
  819 + white-space: normal; /* 允许换行 */
  820 + line-height: 1.5em; /* 设置每行的高度 */
  821 + min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
  822 +}
813 823 </style>
... ...
deploy/prod2.sh
  View file @e621b58
1 1 #!/bin/bash
2 2 # 变量定义
3   -LAST_TAG="1.0.41"
4   -TAG="1.0.42"
  3 +LAST_TAG="1.0.42"
  4 +TAG="1.0.43"
5 5 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
6 6 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
7 7 IMAGE_NAME="canrud-outside-front"
... ...
pages/contact.vue
  View file @e621b58
... ... @@ -34,6 +34,35 @@
34 34 <div class="tw-w-[300px]">
35 35 <v-img src="/wechat.jpg" alt="canrud-wechat"></v-img>
36 36 </div>
  37 + <h3 class="text-h5 tw-mb-5 tw-mt-5">Other Platforms</h3>
  38 + <div class="tw-mb-5">
  39 + <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
  40 + >LinkedIn:</label
  41 + >
  42 + <span>https://www.linkedin.com/company/canrd?originalSubdomain=cn</span>
  43 + </div>
  44 + <div class="tw-mb-5">
  45 + <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
  46 + >Amazon:</label
  47 + >
  48 + <span
  49 + >https://www.amazon.com/s?me=A3A2SQ086XUS66&marketplaceID=ATVPDKIKX0DER</span
  50 + >
  51 + </div>
  52 + <div class="tw-mb-5">
  53 + <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
  54 + >Alibaba:</label
  55 + >
  56 + <span
  57 + >https://canrd.en.alibaba.com/company_profile.html?spm=a2700.galleryofferlist.normal_offer.d_companyName.262213a0fqshG2</span
  58 + >
  59 + </div>
  60 + <div class="tw-mb-5">
  61 + <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
  62 + >Youtube:</label
  63 + >
  64 + <span>https://www.youtube.com/@Canrd_Tech</span>
  65 + </div>
37 66 <div style="margin-bottom: 10px">
38 67 <v-tabs
39 68 class="tabs2"
... ...
pages/index.vue
  View file @e621b58
... ... @@ -32,118 +32,7 @@
32 32 </v-carousel>
33 33 </v-rows>
34 34 <HotProducts />
35   - <!-- <v-tabs
36   - class="tabs"
37   - v-model="tabRecom"
38   - color="white"
39   - bg-color="#eeeeee"
40   - style="margin-top: 40px"
41   - slider-color="blue-lighten-1"
42   - selected-class="active"
43   - v-if="recommendImages[0] !== null && !isMobile()"
44   - >
45   - <v-tab :value="1">Best Sellers</v-tab>
46   - </v-tabs>
47 35  
48   - <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
49   - <div class="recommend-left-box">
50   - <v-img
51   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
52   - alt="往左移"
53   - class="recommend-img-left"
54   - @click="toggleRowLeft"
55   - />
56   - </div>
57   - <div class="image-row" id="row1">
58   - <div
59   - v-for="(imageObj, index) in recommendImages"
60   - :key="'row1-' + index"
61   - class="imageTotal"
62   - >
63   - <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
64   - <img
65   - :src="imageObj[0]?.url"
66   - :alt="'Image ' + (index + 1)"
67   - class="item-imgHot"
68   - />
69   - <span class="image-name">
70   - {{ imageObj[0]?.name }}
71   - </span>
72   - </a>
73   - <div v-else class="image-substitute"></div>
74   - </div>
75   - </div>
76   - <div class="recommend-right-box">
77   - <v-img
78   - src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
79   - alt="往右移"
80   - class="recommend-img-right"
81   - @click="toggleRowRight"
82   - />
83   - </div>
84   - </div>
85   - <div style="padding-left: 16px; padding-right: 16px">
86   - <v-tabs
87   - class="tabs2"
88   - ref="tabs2"
89   - v-model="tabRecom"
90   - style="margin-top: 25px; margin-bottom: 20px; width: 100%"
91   - color="white"
92   - bg-color="#eeeeee"
93   - slider-color="blue-lighten-1"
94   - selected-class="active"
95   - v-if="isMobile()"
96   - >
97   - <v-tab :value="1">Best Sellers</v-tab>
98   - </v-tabs>
99   - <div class="tw-text-center" v-if="hotLoadingMobile && isMobile()">
100   - <v-progress-circular
101   - color="blue-lighten-2"
102   - indeterminate
103   - size="64"
104   - class="tw-m-auto"
105   - ></v-progress-circular>
106   - </div>
107   - <v-item-group multiple v-if="isMobile()">
108   - <v-row v-if="!hotLoadingMobile">
109   - <v-col
110   - v-for="(item, i) in recommendImagesMobile"
111   - :key="i"
112   - cols="6"
113   - lg="3"
114   - md="4"
115   - sm="6"
116   - >
117   - <div v-if="item !== null">
118   - <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
119   - <v-img
120   - :src="item[0].url"
121   - :alt="item[0].name"
122   - eager
123   - class="d-block"
124   - />
125   - <v-card-text class="tw-text-left font-weight-medium title">
126   - <h4 class="clamp-text">{{ item[0].name }}</h4>
127   - </v-card-text>
128   - </v-card>
129   - </div>
130   - </v-col>
131   - </v-row>
132   - </v-item-group>
133   - <v-row v-if="isMobile()">
134   - <v-col>
135   - <v-pagination
136   - :size="isMobile() ? 'small' : 'default'"
137   - v-if="hotTotalMobile"
138   - v-model="currentIndexMobile"
139   - @update:modelValue="toggleRowMobile"
140   - :length="hotLength"
141   - rounded="0"
142   - class="tw-float-right tw-mt-[32px]"
143   - total-visible="5"
144   - ></v-pagination></v-col
145   - ></v-row>
146   - </div> -->
147 36 <!-- 能源材料 -->
148 37 <div class="tw-py-8 py-sm-16">
149 38 <v-container>
... ... @@ -211,159 +100,6 @@ import { useCategoryStore } from &quot;../stores/category&quot;;
211 100 import { computed, onMounted, reactive, ref } from "vue";
212 101 import { isMobile } from "../utils";
213 102  
214   -const maxPage = ref(1);
215   -const maxPageMobile = ref(1);
216   -const tabRecom = ref();
217   -const recommendList = ref({});
218   -const recommendImages = ref({});
219   -const currentIndex = ref(1);
220   -const hotLoading = ref(false);
221   -const hotTotal = ref(10);
222   -const isOrNotMobile = isMobile();
223   -const recommendListMobile = ref({});
224   -const recommendImagesMobile = ref({});
225   -const currentIndexMobile = ref(1);
226   -const hotLoadingMobile = ref(false);
227   -const hotTotalMobile = ref(10);
228   -// const loadHotProducts = async () => {
229   -// hotLoading.value = true;
230   -// const pageSize = 5;
231   -// let { data: hotProducts } = await useAsyncData(
232   -// "hotProducts",
233   -// () =>
234   -// $fetch("/shop/product/hotProducts", {
235   -// method: "GET",
236   -// params: {
237   -// pageNo: currentIndex.value,
238   -// pageSize: pageSize,
239   -// },
240   -// }),
241   -// {
242   -// server: true, // 仅在服务器端获取数据
243   -// }
244   -// );
245   -// hotTotal.value = hotProducts.value.data.total;
246   -// recommendList.value = hotProducts.value.data.records;
247   -// maxPage.value = hotProducts.value.data.pages;
248   -// // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
249   -// recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
250   -// const item = recommendList.value[index];
251   -// if (!item) {
252   -// return null;
253   -// }
254   -// // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
255   -// if (typeof item.productimageliststore === "string") {
256   -// try {
257   -// item.productimageliststore = JSON.parse(item.productimageliststore);
258   -// } catch (error) {
259   -// item.productimageliststore = []; // 解析失败时，设置为空数组
260   -// }
261   -// }
262   -// const ree = (item.productimageliststore = item?.productimageliststore.map(
263   -// (productItem: ProductImage) => ({
264   -// ...productItem,
265   -// // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
266   -// url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
267   -// name: item.name,
268   -// productUrl: `https://www.canrud.com/products/detail/${item.id}`,
269   -// })
270   -// ));
271   -// return ree;
272   -// });
273   -// hotLoading.value = false;
274   -// };
275   -
276   -// const toggleRowLeft = () => {
277   -// if (currentIndex.value !== 1) {
278   -// currentIndex.value--;
279   -// } else if (currentIndex.value == 1) {
280   -// currentIndex.value = maxPage.value;
281   -// }
282   -// startTimer();
283   -// };
284   -// let intervalId: any;
285   -// const toggleRowRight = () => {
286   -// if (currentIndex.value < maxPage.value) {
287   -// currentIndex.value++;
288   -// } else if (currentIndex.value == maxPage.value) {
289   -// currentIndex.value = 1;
290   -// }
291   -// startTimer();
292   -// };
293   -// const startTimer = () => {
294   -// // 清除已有计时器，防止重复
295   -// clearInterval(intervalId);
296   -// intervalId = setInterval(() => {
297   -// toggleRowRight();
298   -// }, 5000); // 每6秒调用一次
299   -// };
300   -
301   -// onMounted(() => {
302   -// startTimer();
303   -// });
304   -
305   -// const toggleRowMobile = (value: number) => {
306   -// currentIndexMobile.value = value;
307   -// };
308   -
309   -// watch(currentIndex, (newIndex) => {
310   -// loadHotProducts(); // Call loadHotProducts when currentIndex changes
311   -// });
312   -// // Initial load of hot products
313   -// await loadHotProducts(); // Load hot products the first time
314   -
315   -// const loadHotProductsMobile = async () => {
316   -// hotLoadingMobile.value = true;
317   -// let { data: hotProductsMobile } = await useAsyncData(
318   -// "hotProducts",
319   -// () =>
320   -// $fetch("/shop/product/hotProducts", {
321   -// method: "GET",
322   -// params: {
323   -// pageNo: currentIndexMobile.value,
324   -// pageSize: 4,
325   -// },
326   -// }),
327   -// {
328   -// server: true, // 仅在服务器端获取数据
329   -// }
330   -// );
331   -// hotTotalMobile.value = hotProductsMobile.value.data.total;
332   -// recommendListMobile.value = hotProductsMobile.value.data.records;
333   -// maxPageMobile.value = hotProductsMobile.value.data.pages;
334   -// // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
335   -// recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
336   -// const item = recommendListMobile.value[index];
337   -// if (!item) {
338   -// return null;
339   -// }
340   -// // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
341   -// if (typeof item.productimageliststore === "string") {
342   -// try {
343   -// item.productimageliststore = JSON.parse(item.productimageliststore);
344   -// } catch (error) {
345   -// item.productimageliststore = []; // 解析失败时，设置为空数组
346   -// }
347   -// }
348   -// const ree = (item.productimageliststore = item?.productimageliststore.map(
349   -// (productItem: ProductImage) => ({
350   -// ...productItem,
351   -// // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
352   -// url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
353   -// name: item.name,
354   -// productUrl: `https://www.canrud.com/products/detail/${item.id}`,
355   -// })
356   -// ));
357   -// return ree;
358   -// });
359   -// hotLoadingMobile.value = false;
360   -// };
361   -// watch(currentIndexMobile, (newIndex) => {
362   -// loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
363   -// });
364   -// // Initial load of hot products
365   -// await loadHotProductsMobile(); // Load hot products the first time
366   -
367 103 onMounted(() => {
368 104 console.log(
369 105 "%c [ onMounted ]-10",
... ... @@ -526,15 +262,6 @@ const packs = [
526 262 background-color: #1086e8;
527 263 }
528 264  
529   -/* #image-container {
530   - display: flex;
531   - align-items: center;
532   - justify-content: center;
533   - height: 320px;
534   - margin: 10px auto 50px;
535   - width: 80%;
536   -} */
537   -
538 265 @media screen and (min-width: 1537px) {
539 266 #image-container {
540 267 display: flex;
... ...
pages/products/index.vue
  View file @e621b58
... ... @@ -210,7 +210,6 @@ import { useProductListStore } from &quot;~/stores/product_list&quot;;
210 210 import { useCategoryStore } from "~/stores/category";
211 211 import CategoryList from "~/components/CategoryList.vue";
212 212 import MobileCategoryList from "~/components/MobileCategoryList.vue";
213   -import HotProducts from "../components/HotProducts.vue";
214 213 import { watchEffect, computed, ref } from "vue";
215 214  
216 215 const productStore = useProductListStore();
... ... @@ -546,46 +545,7 @@ watchEffect(async () =&gt; {
546 545 isWindowAssigned.value = true;
547 546 }
548 547 loadProducts();
549   - // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
550 548 });
551   -// onMounted(() => {
552   -// // window.selectedSubCategory = categoryStore.selectedSubCategory;
553   -// // window.selectedFuncCategory = categoryStore.selectedFuncCategory;
554   -// if (route.query.function) {
555   -// const functionName = route.query.function.trim();
556   -// const funcCategoryList = computed(() => {
557   -// if (categoryStore.selectedCategory) {
558   -// const tmp = categoryStore.list.filter(
559   -// (item) => item.categoryDisplayName === categoryStore.selectedCategory
560   -// );
561   -// return tmp?.[0]?.productFunctions || [];
562   -// }
563   -// return [];
564   -// });
565   -// const foundFuncCategory = funcCategoryList.value.find(
566   -// (func) => func.name === functionName
567   -// );
568   -
569   -// if (foundFuncCategory) {
570   -// const funcCategoryId = foundFuncCategory.id;
571   -// if (typeof localStorage !== "undefined") {
572   -// localStorage.setItem("selectedFuncCategory2", funcCategoryId);
573   -// localStorage.setItem("selectedFuncCategory3", "1");
574   -// }
575   -// // 你可以在这里使用找到的 funcCategoryId
576   -// }
577   -// // // 6. 查找对应的功能分类 ID
578   -// // const foundFuncCategory = funcCategories.find(
579   -// // (func) => func.name === functionName
580   -// // );
581   -
582   -// // if (foundFuncCategory) {
583   -// // const funcCategoryId = foundFuncCategory.id;
584   -// // // 使用找到的 funcCategoryId
585   -// // categoryStore.updateFuncCategory(funcCategoryId);
586   -// // }
587   -// }
588   -// });
589 549  
590 550 const length = computed(() =>
591 551 productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
... ...