canrd-main / canrud-nuxt-front · Commits

Commit e4816a9f5229821d86ace1c80ca93f50155a3610

Authored by boyang
2 parents 69330632 b350e523

Merge branch 'by' 

# Conflicts:
#	components/MobileCategoryList.vue
Inline Side-by-side
Showing 6 changed files with 155 additions and 8 deletions
components/MobileCategoryList.vue
  View file @e4816a9
... ... @@ -127,7 +127,7 @@ watchEffect(async () => {
127 127 // subCategoryName.value = categories[1]
128 128 // ? categories[1].trim()
129 129 // : "Not specified"; // 取第二个值（如果存在）
130   - //
  130 +
131 131 // // 2. 更新选中的主分类
132 132 // categoryStore.updateCategory(mainCategory);
133 133 // routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
... ... @@ -144,12 +144,12 @@ watchEffect(async () => {
144 144 // }
145 145 // return [];
146 146 // });
147   - //
  147 +
148 148 // // 4. 查找对应的子分类 ID
149 149 // const foundFuncCategory = subCategoryList.value.find(
150 150 // (func) => func.name === subCategoryName.value
151 151 // );
152   - //
  152 +
153 153 // if (foundFuncCategory) {
154 154 // const funcCategoryId = foundFuncCategory.id;
155 155 // // 你可以在这里使用找到的 funcCategoryId
... ... @@ -173,7 +173,7 @@ watchEffect(async () => {
173 173 // const foundFuncCategory = funcCategoryList.value.find(
174 174 // (func) => func.name === functionName
175 175 // );
176   - //
  176 +
177 177 // if (foundFuncCategory) {
178 178 // const funcCategoryId = foundFuncCategory.id;
179 179 // // 你可以在这里使用找到的 funcCategoryId
... ... @@ -183,7 +183,7 @@ watchEffect(async () => {
183 183 // // const foundFuncCategory = funcCategories.find(
184 184 // // (func) => func.name === functionName
185 185 // // );
186   - //
  186 +
187 187 // // if (foundFuncCategory) {
188 188 // // const funcCategoryId = foundFuncCategory.id;
189 189 // // // 使用找到的 funcCategoryId
... ... @@ -198,7 +198,7 @@ watchEffect(async () => {
198 198 // }
199 199 // }
200 200 // } else
201   - if (
  201 + if (
202 202 Object.keys(route.query).length === 0 &&
203 203 !route.path.includes("/products/detail")
204 204 ) {
... ...
components/MobileProductDetail.vue
  View file @e4816a9
... ... @@ -259,6 +259,35 @@
259 259 <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
260 260 </v-window>
261 261 </div>
  262 + <!-- Basic use -->
  263 + <div class="social-share-container">
  264 + <SocialShare
  265 + network="facebook"
  266 + :styled="true"
  267 + :label="true"
  268 + :title="info.name"
  269 + :url="currentUrl"
  270 + style="color: #1e88e5; width: 140px"
  271 + />
  272 +
  273 + <SocialShare
  274 + network="twitter"
  275 + :styled="true"
  276 + :label="true"
  277 + :title="info.name"
  278 + :url="currentUrl"
  279 + style="color: #1e88e5; width: 140px"
  280 + />
  281 +
  282 + <SocialShare
  283 + network="linkedin"
  284 + :styled="true"
  285 + :label="true"
  286 + :title="info.name"
  287 + :url="currentUrl"
  288 + style="color: #1e88e5; width: 140px"
  289 + />
  290 + </div>
262 291 </v-container>
263 292 </template>
264 293  
... ... @@ -282,6 +311,7 @@ const href1 = ref(&quot;/products&quot;);
282 311 const href2 = ref("/products");
283 312 const routeQuery = useRouteQuery();
284 313 const productStore = useProductListStore();
  314 +const currentUrl = ref();
285 315  
286 316 // const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
287 317 // const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
... ... @@ -395,6 +425,7 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
395 425 ]);
396 426 watchEffect(() => {
397 427 console.log(info, "5656info");
  428 + currentUrl.value = window.location.href;
398 429 if (info?.productCrumbsVO?.category1 && productStore.keyword) {
399 430 items.value[1].title = info.productCrumbsVO.category1;
400 431 items.value[1].href =
... ... @@ -503,6 +534,14 @@ watchEffect(() =&gt; {
503 534 // return ree;
504 535 // });
505 536 });
  537 +function getTitle(network) {
  538 + const titles = {
  539 + facebook: "Facebook",
  540 + twitter: "Twitter",
  541 + linkedin: "LinkedIn",
  542 + };
  543 + return titles[network] || "Share";
  544 +}
506 545 </script>
507 546  
508 547 <style lang="scss" scoped>
... ... @@ -536,4 +575,23 @@ watchEffect(() =&gt; {
536 575 // box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
537 576 // padding: 8px 0;
538 577 // }
  578 +.social-share-container {
  579 + display: flex;
  580 + flex-direction: row; /* 父容器横向排列 */
  581 + gap: 1rem; /* 设置每个分享项之间的间距 */
  582 + margin-left: 10px;
  583 + margin-bottom: 10px;
  584 +}
  585 +
  586 +.social-share-item {
  587 + display: flex;
  588 + flex-direction: row; /* 每个分享项横向排列 */
  589 + align-items: center; /* 垂直居中对齐 */
  590 + gap: 0.5rem; /* 标题与按钮之间的间距 */
  591 +}
  592 +
  593 +.social-share-title {
  594 + font-size: 1rem;
  595 + font-weight: bold;
  596 +}
539 597 </style>
... ...
components/ProductDetail.vue
  View file @e4816a9
... ... @@ -350,6 +350,54 @@
350 350 <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
351 351 </v-window>
352 352 </div>
  353 + <div class="social-share-container">
  354 + <SocialShare
  355 + network="facebook"
  356 + :styled="true"
  357 + :label="true"
  358 + :title="info.name"
  359 + :url="currentUrl"
  360 + style="color: #1e88e5; width: 140px"
  361 + />
  362 +
  363 + <SocialShare
  364 + network="twitter"
  365 + :styled="true"
  366 + :label="true"
  367 + :title="info.name"
  368 + :url="currentUrl"
  369 + style="color: #1e88e5; width: 140px"
  370 + />
  371 +
  372 + <SocialShare
  373 + network="linkedin"
  374 + :styled="true"
  375 + :label="true"
  376 + :title="info.name"
  377 + :url="currentUrl"
  378 + style="color: #1e88e5; width: 140px"
  379 + />
  380 + </div>
  381 + <!-- <div class="social-share-container">
  382 + <div
  383 + v-for="network in ['facebook', 'twitter', 'linkedin']"
  384 + :key="network"
  385 + class="social-share-item"
  386 + >
  387 + <h3 class="social-share-title" style="color: #1e88e5">
  388 + {{ getTitle(network) }}
  389 + </h3>
  390 + <SocialShare
  391 + :network="network"
  392 + :styled="true"
  393 + style="color: #1e88e5"
  394 + :label="getTitle(network)"
  395 + :title="info.name"
  396 + :url="currentUrl"
  397 + class="p-4 rounded-none"
  398 + />
  399 + </div>
  400 + </div> -->
353 401 </v-container>
354 402 </template>
355 403  
... ... @@ -374,6 +422,7 @@ const href1 = ref(&quot;/products&quot;);
374 422 const href2 = ref("/products");
375 423 const idHref = ref("/products");
376 424 const productStore = useProductListStore();
  425 +const currentUrl = ref();
377 426 // 定义单个 item 的接口
378 427 interface BreadcrumbItem {
379 428 title: string; // 标题
... ... @@ -425,6 +474,7 @@ let { data: resData } = await useAsyncData(
425 474 }
426 475 );
427 476 watchEffect(() => {
  477 + currentUrl.value = window.location.href;
428 478 if (info?.productCrumbsVO?.category1 && productStore.keyword) {
429 479 items.value[1].title = info.productCrumbsVO.category1;
430 480 items.value[1].href =
... ... @@ -506,6 +556,7 @@ watchEffect(() =&gt; {
506 556 }
507 557 }
508 558 recommendList.value = resData.value.data.records;
  559 + console.log(resData.value, "5656resData.value.data");
509 560  
510 561 // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
511 562 recommendImages.value = Array.from({ length: 10 }).map((_, index) => {
... ... @@ -670,4 +721,22 @@ button .recommendButton {
670 721 .recommend-img-right:hover {
671 722 cursor: pointer;
672 723 }
  724 +
  725 +.social-share-container {
  726 + display: flex;
  727 + flex-direction: row; /* 父容器横向排列 */
  728 + gap: 1rem; /* 设置每个分享项之间的间距 */
  729 +}
  730 +
  731 +.social-share-item {
  732 + display: flex;
  733 + flex-direction: row; /* 每个分享项横向排列 */
  734 + align-items: center; /* 垂直居中对齐 */
  735 + gap: 0.5rem; /* 标题与按钮之间的间距 */
  736 +}
  737 +
  738 +.social-share-title {
  739 + font-size: 1rem;
  740 + font-weight: bold;
  741 +}
673 742 </style>
... ...
nuxt.config.ts
  View file @e4816a9
... ... @@ -20,7 +20,16 @@ export default defineNuxtConfig({
20 20 // baseURL: 'http://47.89.254.121:8002/shop' || 'http://39.108.227.113:8002' // Exposed to the frontend as well.
21 21 // }
22 22 // },
23   - modules: ["vuetify-nuxt-module", "@pinia/nuxt", "@nuxtjs/i18n"],
  23 + modules: [
  24 + "vuetify-nuxt-module",
  25 + "@pinia/nuxt",
  26 + "@nuxtjs/i18n",
  27 + "@stefanobartoletti/nuxt-social-share",
  28 + ],
  29 + // optional configuration, should be added manually
  30 + socialShare: {
  31 + // module options
  32 + },
24 33 vuetify: {
25 34 moduleOptions: {
26 35 /* module specific options */
... ...
package-lock.json
  View file @e4816a9
... ... @@ -8,6 +8,7 @@
8 8 "hasInstallScript": true,
9 9 "dependencies": {
10 10 "@pinia/nuxt": "^0.5.1",
  11 + "@stefanobartoletti/nuxt-social-share": "^1.2.0",
11 12 "lodash": "^4.17.21",
12 13 "nuxt": "^3.11.2",
13 14 "vue": "^3.4.27",
... ... @@ -2440,6 +2441,15 @@
2440 2441 "url": "https://github.com/sponsors/sindresorhus"
2441 2442 }
2442 2443 },
  2444 + "node_modules/@stefanobartoletti/nuxt-social-share": {
  2445 + "version": "1.2.0",
  2446 + "resolved": "https://registry.npmmirror.com/@stefanobartoletti/nuxt-social-share/-/nuxt-social-share-1.2.0.tgz",
  2447 + "integrity": "sha512-iehssGh971g49CFU3A9leUpAgrLMb9gPFIO7OORyh6ghclc6HNr7QaGnOXihAM0VTJRIqiL3f3AEMiAvwT79Kg==",
  2448 + "dependencies": {
  2449 + "@nuxt/kit": "^3.13.2",
  2450 + "defu": "^6.1.4"
  2451 + }
  2452 + },
2443 2453 "node_modules/@tailwindcss/aspect-ratio": {
2444 2454 "version": "0.4.2",
2445 2455 "resolved": "https://registry.npmmirror.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
... ...
package.json
  View file @e4816a9
... ... @@ -11,6 +11,7 @@
11 11 },
12 12 "dependencies": {
13 13 "@pinia/nuxt": "^0.5.1",
  14 + "@stefanobartoletti/nuxt-social-share": "^1.2.0",
14 15 "lodash": "^4.17.21",
15 16 "nuxt": "^3.11.2",
16 17 "vue": "^3.4.27",
... ... @@ -25,4 +26,4 @@
25 26 "sass": "^1.77.1",
26 27 "tailwindcss": "^3.4.3"
27 28 }
28   -}
29 29 \ No newline at end of file
  30 +}
... ...