Merge branch 'by'

# Conflicts: # components/MobileCategoryList.vue

Merge branch 'by'
# Conflicts: # components/MobileCategoryList.vue
boyang
2 parents 69330632 b350e523
Showing 6 changed files with 155 additions and 8 deletions
components/MobileCategoryList.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
nuxt.config.ts
package-lock.json
package.json
@@ -127,7 +127,7 @@ watchEffect(async () =&gt; {
   //   subCategoryName.value = categories[1]
   //     ? categories[1].trim()
   //     : "Not specified"; // 取第二个值（如果存在）
-  //
+
   //   // 2. 更新选中的主分类
   //   categoryStore.updateCategory(mainCategory);
   //   routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
@@ -144,12 +144,12 @@ watchEffect(async () =&gt; {
   //       }
   //       return [];
   //     });
-  //
+
   //     // 4. 查找对应的子分类 ID
   //     const foundFuncCategory = subCategoryList.value.find(
   //       (func) => func.name === subCategoryName.value
   //     );
-  //
+
   //     if (foundFuncCategory) {
   //       const funcCategoryId = foundFuncCategory.id;
   //       // 你可以在这里使用找到的 funcCategoryId
@@ -173,7 +173,7 @@ watchEffect(async () =&gt; {
   //     const foundFuncCategory = funcCategoryList.value.find(
   //       (func) => func.name === functionName
   //     );
-  //
+
   //     if (foundFuncCategory) {
   //       const funcCategoryId = foundFuncCategory.id;
   //       // 你可以在这里使用找到的 funcCategoryId
@@ -183,7 +183,7 @@ watchEffect(async () =&gt; {
   //     // const foundFuncCategory = funcCategories.find(
   //     //   (func) => func.name === functionName
   //     // );
-  //
+
   //     // if (foundFuncCategory) {
   //     //   const funcCategoryId = foundFuncCategory.id;
   //     //   // 使用找到的 funcCategoryId
@@ -198,7 +198,7 @@ watchEffect(async () =&gt; {
   //     }
   //   }
   // } else
-    if (
+  if (
     Object.keys(route.query).length === 0 &&
     !route.path.includes("/products/detail")
   ) {
@@ -259,6 +259,35 @@
         <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
     </div>
+    <!-- Basic use -->
+    <div class="social-share-container">
+      <SocialShare
+        network="facebook"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="twitter"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="linkedin"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+    </div>
   </v-container>
 </template>
@@ -282,6 +311,7 @@ const href1 = ref(&quot;/products&quot;);
 const href2 = ref("/products");
 const routeQuery = useRouteQuery();
 const productStore = useProductListStore();
+const currentUrl = ref();
 // const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
 // const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
@@ -395,6 +425,7 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
 ]);
 watchEffect(() => {
   console.log(info, "5656info");
+  currentUrl.value = window.location.href;
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
@@ -503,6 +534,14 @@ watchEffect(() =&gt; {
   //   return ree;
   // });
 });
+function getTitle(network) {
+  const titles = {
+    facebook: "Facebook",
+    twitter: "Twitter",
+    linkedin: "LinkedIn",
+  };
+  return titles[network] || "Share";
+}
 </script>
 <style lang="scss" scoped>
@@ -536,4 +575,23 @@ watchEffect(() =&gt; {
 //   box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
 //   padding: 8px 0;
 // }
+.social-share-container {
+  display: flex;
+  flex-direction: row; /* 父容器横向排列 */
+  gap: 1rem; /* 设置每个分享项之间的间距 */
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.social-share-item {
+  display: flex;
+  flex-direction: row; /* 每个分享项横向排列 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 0.5rem; /* 标题与按钮之间的间距 */
+}
+
+.social-share-title {
+  font-size: 1rem;
+  font-weight: bold;
+}
 </style>
@@ -350,6 +350,54 @@
         <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
     </div>
+    <div class="social-share-container">
+      <SocialShare
+        network="facebook"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="twitter"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="linkedin"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+    </div>
+    <!-- <div class="social-share-container">
+      <div
+        v-for="network in ['facebook', 'twitter', 'linkedin']"
+        :key="network"
+        class="social-share-item"
+      >
+        <h3 class="social-share-title" style="color: #1e88e5">
+          {{ getTitle(network) }}
+        </h3>
+        <SocialShare
+          :network="network"
+          :styled="true"
+          style="color: #1e88e5"
+          :label="getTitle(network)"
+          :title="info.name"
+          :url="currentUrl"
+          class="p-4 rounded-none"
+        />
+      </div>
+    </div> -->
   </v-container>
 </template>
@@ -374,6 +422,7 @@ const href1 = ref(&quot;/products&quot;);
 const href2 = ref("/products");
 const idHref = ref("/products");
 const productStore = useProductListStore();
+const currentUrl = ref();
 // 定义单个 item 的接口
 interface BreadcrumbItem {
   title: string; // 标题
@@ -425,6 +474,7 @@ let { data: resData } = await useAsyncData(
   }
 );
 watchEffect(() => {
+  currentUrl.value = window.location.href;
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
@@ -506,6 +556,7 @@ watchEffect(() =&gt; {
     }
   }
   recommendList.value = resData.value.data.records;
+  console.log(resData.value, "5656resData.value.data");
   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
   recommendImages.value = Array.from({ length: 10 }).map((_, index) => {
@@ -670,4 +721,22 @@ button .recommendButton {
 .recommend-img-right:hover {
   cursor: pointer;
 }
+
+.social-share-container {
+  display: flex;
+  flex-direction: row; /* 父容器横向排列 */
+  gap: 1rem; /* 设置每个分享项之间的间距 */
+}
+
+.social-share-item {
+  display: flex;
+  flex-direction: row; /* 每个分享项横向排列 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 0.5rem; /* 标题与按钮之间的间距 */
+}
+
+.social-share-title {
+  font-size: 1rem;
+  font-weight: bold;
+}
 </style>
@@ -20,7 +20,16 @@ export default defineNuxtConfig({
   //      baseURL:  'http://47.89.254.121:8002/shop' || 'http://39.108.227.113:8002' // Exposed to the frontend as well.
   //   }
   // },
-  modules: ["vuetify-nuxt-module", "@pinia/nuxt", "@nuxtjs/i18n"],
+  modules: [
+    "vuetify-nuxt-module",
+    "@pinia/nuxt",
+    "@nuxtjs/i18n",
+    "@stefanobartoletti/nuxt-social-share",
+  ],
+  // optional configuration, should be added manually
+  socialShare: {
+    // module options
+  },
   vuetify: {
     moduleOptions: {
       /* module specific options */
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.5.1",
+        "@stefanobartoletti/nuxt-social-share": "^1.2.0",
         "lodash": "^4.17.21",
         "nuxt": "^3.11.2",
         "vue": "^3.4.27",
@@ -2440,6 +2441,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@stefanobartoletti/nuxt-social-share": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@stefanobartoletti/nuxt-social-share/-/nuxt-social-share-1.2.0.tgz",
+      "integrity": "sha512-iehssGh971g49CFU3A9leUpAgrLMb9gPFIO7OORyh6ghclc6HNr7QaGnOXihAM0VTJRIqiL3f3AEMiAvwT79Kg==",
+      "dependencies": {
+        "@nuxt/kit": "^3.13.2",
+        "defu": "^6.1.4"
+      }
+    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmmirror.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
+    "@stefanobartoletti/nuxt-social-share": "^1.2.0",
     "lodash": "^4.17.21",
     "nuxt": "^3.11.2",
     "vue": "^3.4.27",
@@ -25,4 +26,4 @@
     "sass": "^1.77.1",
     "tailwindcss": "^3.4.3"
   }
-}
 \ No newline at end of file
+}