Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e387a38b 1 parent 3e7516f9

feat(分享功能): 添加商品详情页和首页的分享功能 

- 在商品详情页和首页配置中启用分享功能
- 使用useShareAppMessage实现分享逻辑
- 添加分享成功、失败和取消的反馈提示
- 更新分享菜单配置和分享内容参数
Inline Side-by-side
Showing 3 changed files with 94 additions and 43 deletions
1 <!-- 1 <!--
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-04 17:47:22 4 + * @LastEditTime: 2025-07-07 15:34:42
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
...@@ -160,10 +160,9 @@ ...@@ -160,10 +160,9 @@
160 </template> 160 </template>
161 161
162 <script setup> 162 <script setup>
163 -import Taro from '@tarojs/taro' 163 +import Taro, { useShareAppMessage, useDidShow, useReady } from '@tarojs/taro'
164 import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突? 164 import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突?
165 import { ref, onMounted } from 'vue' 165 import { ref, onMounted } from 'vue'
166 -import { useDidShow, useReady } from '@tarojs/taro'
167 import { Clock, Star, RectRight, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro' 166 import { Clock, Star, RectRight, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro'
168 import TabBar from '@/components/TabBar.vue' 167 import TabBar from '@/components/TabBar.vue'
169 import SearchPopup from '@/components/SearchPopup.vue' 168 import SearchPopup from '@/components/SearchPopup.vue'
...@@ -389,41 +388,43 @@ onMounted(() => { ...@@ -389,41 +388,43 @@ onMounted(() => {
389 wx.showShareMenu({ 388 wx.showShareMenu({
390 withShareTicket: true, 389 withShareTicket: true,
391 menus: ['shareAppMessage', 'shareTimeline'] 390 menus: ['shareAppMessage', 'shareTimeline']
392 -}) 391 +});
393 -</script>
394 -
395 -<script>
396 -import { getCurrentPageParam } from "@/utils/weapp";
397 392
398 -export default { 393 +// 分享功能
399 - name: "indexPage", 394 +useShareAppMessage(() => {
400 - onHide() {
401 - console.warn('index onHide')
402 - },
403 - onShareAppMessage() {
404 - let params = getCurrentPageParam();
405 // 设置菜单中的转发按钮触发转发事件时的转发内容 395 // 设置菜单中的转发按钮触发转发事件时的转发内容
406 var shareObj = { 396 var shareObj = {
407 - title: "xxx", // 默认是小程序的名称(可以写slogan等) 397 + title: '捡个电驴-分享给好友', // 默认是小程序的名称(可以写slogan等)
408 - path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}&room_type=${params.room_type}`, // 默认是当前页面，必须是以'/'开头的完整路径 398 + path: `pages/index/index`, // 默认是当前页面，必须是以'/'开头的完整路径
409 - imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 399 + imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
410 - success: function (res) { 400 + success: function (res) {
411 - // 转发成功之后的回调 401 + // 转发成功之后的回调
412 - if (res.errMsg == 'shareAppMessage:ok') { 402 + if (res.errMsg == 'shareAppMessage:ok') {
413 - // 403 + Taro.showToast({
414 - } 404 + title: '分享成功',
415 - }, 405 + icon: 'success'
416 - fail: function () { 406 + })
417 - // 转发失败之后的回调 407 + }
418 - if (res.errMsg == 'shareAppMessage:fail cancel') { 408 + },
419 - // 用户取消转发 409 + fail: function () {
420 - } else if (res.errMsg == 'shareAppMessage:fail') { 410 + // 转发失败之后的回调
421 - // 转发失败，其中 detail message 为详细失败信息 411 + if (res.errMsg == 'shareAppMessage:fail cancel') {
412 + // 用户取消转发
413 + Taro.showToast({
414 + title: '分享取消',
415 + icon: 'none'
416 + })
417 + } else if (res.errMsg == 'shareAppMessage:fail') {
418 + // 转发失败，其中 detail message 为详细失败信息
419 + Taro.showToast({
420 + title: '分享失败',
421 + icon: 'none'
422 + })
423 + }
424 + },
425 + complete: function () {
426 + // 转发结束之后的回调（转发成不成功都会执行）
422 } 427 }
423 - },
424 - complete: function () {
425 - // 转发结束之后的回调（转发成不成功都会执行）
426 - }
427 } 428 }
428 // 来自页面内的按钮的转发 429 // 来自页面内的按钮的转发
429 // if (options.from == 'button') { 430 // if (options.from == 'button') {
...@@ -433,6 +434,5 @@ export default { ...@@ -433,6 +434,5 @@ export default {
433 // } 434 // }
434 // 返回shareObj 435 // 返回shareObj
435 return shareObj; 436 return shareObj;
436 - } 437 +})
437 -};
438 </script> 438 </script>
......
1 /* 1 /*
2 * @Date: 2025-07-03 09:34:12 2 * @Date: 2025-07-03 09:34:12
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 09:34:43 4 + * @LastEditTime: 2025-07-07 15:25:55
5 * @FilePath: /jgdl/src/pages/productDetail/index.config.js 5 * @FilePath: /jgdl/src/pages/productDetail/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -9,4 +9,5 @@ export default { ...@@ -9,4 +9,5 @@ export default {
9 navigationBarTitleText: '商品详情', 9 navigationBarTitleText: '商品详情',
10 usingComponents: { 10 usingComponents: {
11 }, 11 },
12 + enableShareAppMessage: true
12 } 13 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-04 21:29:23 4 + * @LastEditTime: 2025-07-07 15:24:05
5 * @FilePath: /jgdl/src/pages/productDetail/index.vue 5 * @FilePath: /jgdl/src/pages/productDetail/index.vue
6 * @Description: 商品详情页 6 * @Description: 商品详情页
7 --> 7 -->
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
26 <view class="w-8 h-8 bg-gray-100 rounded-full relative"> 26 <view class="w-8 h-8 bg-gray-100 rounded-full relative">
27 <button open-type="share" class="absolute inset-0 w-full h-full" style="border-radius: 50%;"> 27 <button open-type="share" class="absolute inset-0 w-full h-full" style="border-radius: 50%;">
28 <view class="absolute inset-0 flex items-center justify-center" @tap="handleShare"> 28 <view class="absolute inset-0 flex items-center justify-center" @tap="handleShare">
29 - <Share size="16" color="#666" /> 29 + <Share size="16" color="#666" />
30 - </view> 30 + </view>
31 </button> 31 </button>
32 </view> 32 </view>
33 <view @tap="toggleFavorite" 33 <view @tap="toggleFavorite"
...@@ -191,7 +191,8 @@ ...@@ -191,7 +191,8 @@
191 </nut-dialog> 191 </nut-dialog>
192 192
193 <!-- 联系卖家弹框 --> 193 <!-- 联系卖家弹框 -->
194 - <nut-popup v-model:visible="showContactModal" position="bottom" :style="{ height: '70%' }" round :catch-move="true"> 194 + <nut-popup v-model:visible="showContactModal" position="bottom" :style="{ height: '70%' }" round
195 + :catch-move="true">
195 <view class="contact-modal p-4"> 196 <view class="contact-modal p-4">
196 <view class="text-center mb-4"> 197 <view class="text-center mb-4">
197 <text class="text-lg font-medium">联系卖家</text> 198 <text class="text-lg font-medium">联系卖家</text>
...@@ -226,7 +227,8 @@ ...@@ -226,7 +227,8 @@
226 227
227 <!-- 发送按钮 --> 228 <!-- 发送按钮 -->
228 <nut-button @click="sendMessageToSeller" block type="primary" shape="round" color="orange" 229 <nut-button @click="sendMessageToSeller" block type="primary" shape="round" color="orange"
229 - style="background-color: #f97316; border-color: #f97316; margin-top: 2rem;" :disabled="!messageText.trim()"> 230 + style="background-color: #f97316; border-color: #f97316; margin-top: 2rem;"
231 + :disabled="!messageText.trim()">
230 发送消息 232 发送消息
231 </nut-button> 233 </nut-button>
232 </view> 234 </view>
...@@ -239,10 +241,11 @@ ...@@ -239,10 +241,11 @@
239 241
240 <script setup> 242 <script setup>
241 import { ref } from 'vue' 243 import { ref } from 'vue'
242 -import Taro from '@tarojs/taro' 244 +import Taro, { useShareAppMessage } from '@tarojs/taro'
243 import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro' 245 import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
244 import payCard from '@/components/payCard.vue' 246 import payCard from '@/components/payCard.vue'
245 import avatarImg from '@/assets/images/avatar.png' 247 import avatarImg from '@/assets/images/avatar.png'
248 +import { getCurrentPageParam } from "@/utils/weapp"
246 249
247 // 默认头像 250 // 默认头像
248 const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' 251 const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
...@@ -483,6 +486,53 @@ const onImageError = (e) => { ...@@ -483,6 +486,53 @@ const onImageError = (e) => {
483 duration: 2000 486 duration: 2000
484 }) 487 })
485 } 488 }
489 +
490 +// 分享功能
491 +useShareAppMessage(() => {
492 + let params = getCurrentPageParam();
493 + // 设置菜单中的转发按钮触发转发事件时的转发内容
494 + var shareObj = {
495 + title: product.value.name, // 默认是小程序的名称(可以写slogan等)
496 + path: `pages/productDetail/index?id=${params.id}`, // 默认是当前页面，必须是以'/'开头的完整路径
497 + imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
498 + success: function (res) {
499 + // 转发成功之后的回调
500 + if (res.errMsg == 'shareAppMessage:ok') {
501 + Taro.showToast({
502 + title: '分享成功',
503 + icon: 'success'
504 + })
505 + }
506 + },
507 + fail: function () {
508 + // 转发失败之后的回调
509 + if (res.errMsg == 'shareAppMessage:fail cancel') {
510 + // 用户取消转发
511 + Taro.showToast({
512 + title: '分享取消',
513 + icon: 'none'
514 + })
515 + } else if (res.errMsg == 'shareAppMessage:fail') {
516 + // 转发失败，其中 detail message 为详细失败信息
517 + Taro.showToast({
518 + title: '分享失败',
519 + icon: 'none'
520 + })
521 + }
522 + },
523 + complete: function () {
524 + // 转发结束之后的回调（转发成不成功都会执行）
525 + }
526 + }
527 + // 来自页面内的按钮的转发
528 + // if (options.from == 'button') {
529 + // var eData = options.target.dataset;
530 + // // 此处可以修改 shareObj 中的内容
531 + // shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
532 + // }
533 + // 返回shareObj
534 + return shareObj;
535 +})
486 </script> 536 </script>
487 537
488 <style lang="less"> 538 <style lang="less">
......