feat: 开发分享按钮

boyang
1 parent 98a55296
Showing 6 changed files with 225 additions and 77 deletions
components/MobileCategoryList.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
nuxt.config.ts
package-lock.json
package.json
@@ -118,86 +118,87 @@ const CATEGORY_IMG = [
 ];
 watchEffect(async () => {
-  if (route.query.categories) {
-    // 1. 提取 query.category 的内容
-    productStore.updateKeyword("");
-    const categories = route.query.categories.split(",");
-    const mainCategory = categories[0].trim(); // 取第一个值
-    const subCategoryName = ref("");
-    subCategoryName.value = categories[1]
-      ? categories[1].trim()
-      : "Not specified"; // 取第二个值（如果存在）
+  // if (route.query.categories) {
+  //   // 1. 提取 query.category 的内容
+  //   productStore.updateKeyword("");
+  //   const categories = route.query.categories.split(",");
+  //   const mainCategory = categories[0].trim(); // 取第一个值
+  //   const subCategoryName = ref("");
+  //   subCategoryName.value = categories[1]
+  //     ? categories[1].trim()
+  //     : "Not specified"; // 取第二个值（如果存在）
-    // 2. 更新选中的主分类
-    categoryStore.updateCategory(mainCategory);
-    routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
-    // 3. 如果有子分类名称，查找其对应的 ID
-    if (subCategoryName.value) {
-      // if (subCategoryName.value && mainCategory !== "Energy materials") {
-      const subCategoryList = computed(() => {
-        if (categoryStore.selectedCategory) {
-          const tmp = categoryStore.list.filter(
-            (item) =>
-              item.categoryDisplayName === categoryStore.selectedCategory
-          );
-          return tmp?.[0]?.list || [];
-        }
-        return [];
-      });
+  //   // 2. 更新选中的主分类
+  //   categoryStore.updateCategory(mainCategory);
+  //   routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
+  //   // 3. 如果有子分类名称，查找其对应的 ID
+  //   if (subCategoryName.value) {
+  //     // if (subCategoryName.value && mainCategory !== "Energy materials") {
+  //     const subCategoryList = computed(() => {
+  //       if (categoryStore.selectedCategory) {
+  //         const tmp = categoryStore.list.filter(
+  //           (item) =>
+  //             item.categoryDisplayName === categoryStore.selectedCategory
+  //         );
+  //         return tmp?.[0]?.list || [];
+  //       }
+  //       return [];
+  //     });
-      // 4. 查找对应的子分类 ID
-      const foundFuncCategory = subCategoryList.value.find(
-        (func) => func.name === subCategoryName.value
-      );
+  //     // 4. 查找对应的子分类 ID
+  //     const foundFuncCategory = subCategoryList.value.find(
+  //       (func) => func.name === subCategoryName.value
+  //     );
-      if (foundFuncCategory) {
-        const funcCategoryId = foundFuncCategory.id;
-        // 你可以在这里使用找到的 funcCategoryId
-        categoryStore.updateSubCategory(funcCategoryId);
-      }
-    }
-    // 5. 判断 query 中是否存在 function，并查找对应的 ID
-    if (route.query.function) {
-      const functionName = route.query.function.trim();
-      routeQuery.updateFunction(functionName);
-      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;
+  //       // 你可以在这里使用找到的 funcCategoryId
+  //       categoryStore.updateSubCategory(funcCategoryId);
+  //     }
+  //   }
+  //   // 5. 判断 query 中是否存在 function，并查找对应的 ID
+  //   if (route.query.function) {
+  //     const functionName = route.query.function.trim();
+  //     routeQuery.updateFunction(functionName);
+  //     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;
-        // 你可以在这里使用找到的 funcCategoryId
-        categoryStore.updateFuncCategory(funcCategoryId);
-      }
-      // // 6. 查找对应的功能分类 ID
-      // const foundFuncCategory = funcCategories.find(
-      //   (func) => func.name === functionName
-      // );
+  //     if (foundFuncCategory) {
+  //       const funcCategoryId = foundFuncCategory.id;
+  //       // 你可以在这里使用找到的 funcCategoryId
+  //       categoryStore.updateFuncCategory(funcCategoryId);
+  //     }
+  //     // // 6. 查找对应的功能分类 ID
+  //     // const foundFuncCategory = funcCategories.find(
+  //     //   (func) => func.name === functionName
+  //     // );
-      // if (foundFuncCategory) {
-      //   const funcCategoryId = foundFuncCategory.id;
-      //   // 使用找到的 funcCategoryId
-      //   categoryStore.updateFuncCategory(funcCategoryId);
-      // }
-    } else if (route.query.categories.includes("Energy materials")) {
-      //没有function默认为第一个
-      const defaultCategory = categoryStore.list[0];
-      const defaultFuncCategory = defaultCategory.productFunctions[1];
-      if (defaultFuncCategory) {
-        categoryStore.updateFuncCategory(defaultFuncCategory.id);
-      }
-    }
-  } else if (
+  //     // if (foundFuncCategory) {
+  //     //   const funcCategoryId = foundFuncCategory.id;
+  //     //   // 使用找到的 funcCategoryId
+  //     //   categoryStore.updateFuncCategory(funcCategoryId);
+  //     // }
+  //   } else if (route.query.categories.includes("Energy materials")) {
+  //     //没有function默认为第一个
+  //     const defaultCategory = categoryStore.list[0];
+  //     const defaultFuncCategory = defaultCategory.productFunctions[1];
+  //     if (defaultFuncCategory) {
+  //       categoryStore.updateFuncCategory(defaultFuncCategory.id);
+  //     }
+  //   }
+  // } else
+  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
+}