canrd-main / canrud-nuxt-front · Commits

Commit b350e5238b513bc99638701333cc8d0b691d6fcf

Authored by boyang
1 parent 98a55296
build: skipped

feat: 开发分享按钮

Inline Side-by-side
Showing 6 changed files with 225 additions and 77 deletions
components/MobileCategoryList.vue
  View file @b350e52
... ... @@ -118,86 +118,87 @@ const CATEGORY_IMG = [
118 118 ];
119 119  
120 120 watchEffect(async () => {
121   - if (route.query.categories) {
122   - // 1. 提取 query.category 的内容
123   - productStore.updateKeyword("");
124   - const categories = route.query.categories.split(",");
125   - const mainCategory = categories[0].trim(); // 取第一个值
126   - const subCategoryName = ref("");
127   - subCategoryName.value = categories[1]
128   - ? categories[1].trim()
129   - : "Not specified"; // 取第二个值（如果存在）
  121 + // if (route.query.categories) {
  122 + // // 1. 提取 query.category 的内容
  123 + // productStore.updateKeyword("");
  124 + // const categories = route.query.categories.split(",");
  125 + // const mainCategory = categories[0].trim(); // 取第一个值
  126 + // const subCategoryName = ref("");
  127 + // subCategoryName.value = categories[1]
  128 + // ? categories[1].trim()
  129 + // : "Not specified"; // 取第二个值（如果存在）
130 130  
131   - // 2. 更新选中的主分类
132   - categoryStore.updateCategory(mainCategory);
133   - routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
134   - // 3. 如果有子分类名称，查找其对应的 ID
135   - if (subCategoryName.value) {
136   - // if (subCategoryName.value && mainCategory !== "Energy materials") {
137   - const subCategoryList = computed(() => {
138   - if (categoryStore.selectedCategory) {
139   - const tmp = categoryStore.list.filter(
140   - (item) =>
141   - item.categoryDisplayName === categoryStore.selectedCategory
142   - );
143   - return tmp?.[0]?.list || [];
144   - }
145   - return [];
146   - });
  131 + // // 2. 更新选中的主分类
  132 + // categoryStore.updateCategory(mainCategory);
  133 + // routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
  134 + // // 3. 如果有子分类名称，查找其对应的 ID
  135 + // if (subCategoryName.value) {
  136 + // // if (subCategoryName.value && mainCategory !== "Energy materials") {
  137 + // const subCategoryList = computed(() => {
  138 + // if (categoryStore.selectedCategory) {
  139 + // const tmp = categoryStore.list.filter(
  140 + // (item) =>
  141 + // item.categoryDisplayName === categoryStore.selectedCategory
  142 + // );
  143 + // return tmp?.[0]?.list || [];
  144 + // }
  145 + // return [];
  146 + // });
147 147  
148   - // 4. 查找对应的子分类 ID
149   - const foundFuncCategory = subCategoryList.value.find(
150   - (func) => func.name === subCategoryName.value
151   - );
  148 + // // 4. 查找对应的子分类 ID
  149 + // const foundFuncCategory = subCategoryList.value.find(
  150 + // (func) => func.name === subCategoryName.value
  151 + // );
152 152  
153   - if (foundFuncCategory) {
154   - const funcCategoryId = foundFuncCategory.id;
155   - // 你可以在这里使用找到的 funcCategoryId
156   - categoryStore.updateSubCategory(funcCategoryId);
157   - }
158   - }
159   - // 5. 判断 query 中是否存在 function，并查找对应的 ID
160   - if (route.query.function) {
161   - const functionName = route.query.function.trim();
162   - routeQuery.updateFunction(functionName);
163   - const funcCategoryList = computed(() => {
164   - if (categoryStore.selectedCategory) {
165   - const tmp = categoryStore.list.filter(
166   - (item) =>
167   - item.categoryDisplayName === categoryStore.selectedCategory
168   - );
169   - return tmp?.[0]?.productFunctions || [];
170   - }
171   - return [];
172   - });
173   - const foundFuncCategory = funcCategoryList.value.find(
174   - (func) => func.name === functionName
175   - );
  153 + // if (foundFuncCategory) {
  154 + // const funcCategoryId = foundFuncCategory.id;
  155 + // // 你可以在这里使用找到的 funcCategoryId
  156 + // categoryStore.updateSubCategory(funcCategoryId);
  157 + // }
  158 + // }
  159 + // // 5. 判断 query 中是否存在 function，并查找对应的 ID
  160 + // if (route.query.function) {
  161 + // const functionName = route.query.function.trim();
  162 + // routeQuery.updateFunction(functionName);
  163 + // const funcCategoryList = computed(() => {
  164 + // if (categoryStore.selectedCategory) {
  165 + // const tmp = categoryStore.list.filter(
  166 + // (item) =>
  167 + // item.categoryDisplayName === categoryStore.selectedCategory
  168 + // );
  169 + // return tmp?.[0]?.productFunctions || [];
  170 + // }
  171 + // return [];
  172 + // });
  173 + // const foundFuncCategory = funcCategoryList.value.find(
  174 + // (func) => func.name === functionName
  175 + // );
176 176  
177   - if (foundFuncCategory) {
178   - const funcCategoryId = foundFuncCategory.id;
179   - // 你可以在这里使用找到的 funcCategoryId
180   - categoryStore.updateFuncCategory(funcCategoryId);
181   - }
182   - // // 6. 查找对应的功能分类 ID
183   - // const foundFuncCategory = funcCategories.find(
184   - // (func) => func.name === functionName
185   - // );
  177 + // if (foundFuncCategory) {
  178 + // const funcCategoryId = foundFuncCategory.id;
  179 + // // 你可以在这里使用找到的 funcCategoryId
  180 + // categoryStore.updateFuncCategory(funcCategoryId);
  181 + // }
  182 + // // // 6. 查找对应的功能分类 ID
  183 + // // const foundFuncCategory = funcCategories.find(
  184 + // // (func) => func.name === functionName
  185 + // // );
186 186  
187   - // if (foundFuncCategory) {
188   - // const funcCategoryId = foundFuncCategory.id;
189   - // // 使用找到的 funcCategoryId
190   - // categoryStore.updateFuncCategory(funcCategoryId);
191   - // }
192   - } else if (route.query.categories.includes("Energy materials")) {
193   - //没有function默认为第一个
194   - const defaultCategory = categoryStore.list[0];
195   - const defaultFuncCategory = defaultCategory.productFunctions[1];
196   - if (defaultFuncCategory) {
197   - categoryStore.updateFuncCategory(defaultFuncCategory.id);
198   - }
199   - }
200   - } else if (
  187 + // // if (foundFuncCategory) {
  188 + // // const funcCategoryId = foundFuncCategory.id;
  189 + // // // 使用找到的 funcCategoryId
  190 + // // categoryStore.updateFuncCategory(funcCategoryId);
  191 + // // }
  192 + // } else if (route.query.categories.includes("Energy materials")) {
  193 + // //没有function默认为第一个
  194 + // const defaultCategory = categoryStore.list[0];
  195 + // const defaultFuncCategory = defaultCategory.productFunctions[1];
  196 + // if (defaultFuncCategory) {
  197 + // categoryStore.updateFuncCategory(defaultFuncCategory.id);
  198 + // }
  199 + // }
  200 + // } else
  201 + if (
201 202 Object.keys(route.query).length === 0 &&
202 203 !route.path.includes("/products/detail")
203 204 ) {
... ...
components/MobileProductDetail.vue
  View file @b350e52
... ... @@ -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 @b350e52
... ... @@ -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 @b350e52
... ... @@ -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 @b350e52
... ... @@ -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 @b350e52
... ... @@ -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 +}
... ...