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

- 在商品详情页和首页配置中启用分享功能 - 使用useShareAppMessage实现分享逻辑 - 添加分享成功、失败和取消的反馈提示 - 更新分享菜单配置和分享内容参数

feat(分享功能): 添加商品详情页和首页的分享功能
- 在商品详情页和首页配置中启用分享功能 - 使用useShareAppMessage实现分享逻辑 - 添加分享成功、失败和取消的反馈提示 - 更新分享菜单配置和分享内容参数
hookehuyr
Commit e387a38b9980d9f36d2622cd42a7229ac31eaa39 e387a38b 1 parent 3e7516f9
Showing 3 changed files with 76 additions and 25 deletions
src/pages/index/index.vue
src/pages/productDetail/index.config.js
src/pages/productDetail/index.vue
--- a/src/pages/index/index.vue
View file @e387a38
+++ b/src/pages/index/index.vue
View file @e387a38
 <!--
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-04 17:47:22
+ * @LastEditTime: 2025-07-07 15:34:42
  * @FilePath: /jgdl/src/pages/index/index.vue
  * @Description: 捡个电驴首页
 -->
@@ -160,10 +160,9 @@
 </template>
 <script setup>
-import Taro from '@tarojs/taro'
+import Taro, { useShareAppMessage, useDidShow, useReady } from '@tarojs/taro'
 import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突?
 import { ref, onMounted } from 'vue'
-import { useDidShow, useReady } from '@tarojs/taro'
 import { Clock, Star, RectRight, Check, Search2, Shop, Heart1, HeartFill } from '@nutui/icons-vue-taro'
 import TabBar from '@/components/TabBar.vue'
 import SearchPopup from '@/components/SearchPopup.vue'
@@ -389,36 +388,38 @@ onMounted(() => {
 wx.showShareMenu({
   withShareTicket: true,
   menus: ['shareAppMessage', 'shareTimeline']
-})
+});
-</script>
-<script>
+// 分享功能
-import { getCurrentPageParam } from "@/utils/weapp";
+useShareAppMessage(() => {
-
-export default {
-  name: "indexPage",
-  onHide() {
-    console.warn('index onHide')
-  },
-  onShareAppMessage() {
-    let params = getCurrentPageParam();
     // 设置菜单中的转发按钮触发转发事件时的转发内容
     var shareObj = {
-      title: "xxx",    // 默认是小程序的名称(可以写slogan等)
+        title: '捡个电驴-分享给好友',    // 默认是小程序的名称(可以写slogan等)
-      path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}&room_type=${params.room_type}`,    // 默认是当前页面，必须是以'/'开头的完整路径
+        path: `pages/index/index`,    // 默认是当前页面，必须是以'/'开头的完整路径
         imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
         success: function (res) {
             // 转发成功之后的回调
             if (res.errMsg == 'shareAppMessage:ok') {
-          //
+                Taro.showToast({
+                    title: '分享成功',
+                    icon: 'success'
+                })
             }
         },
         fail: function () {
             // 转发失败之后的回调
             if (res.errMsg == 'shareAppMessage:fail cancel') {
                 // 用户取消转发
+                Taro.showToast({
+                    title: '分享取消',
+                    icon: 'none'
+                })
             } else if (res.errMsg == 'shareAppMessage:fail') {
                 // 转发失败，其中 detail message 为详细失败信息
+                Taro.showToast({
+                    title: '分享失败',
+                    icon: 'none'
+                })
             }
         },
         complete: function () {
@@ -433,6 +434,5 @@ export default {
     // }
     // 返回shareObj
     return shareObj;
-  }
+})
-};
 </script>
--- a/src/pages/productDetail/index.config.js
View file @e387a38
+++ b/src/pages/productDetail/index.config.js
View file @e387a38
 /*
  * @Date: 2025-07-03 09:34:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-03 09:34:43
+ * @LastEditTime: 2025-07-07 15:25:55
  * @FilePath: /jgdl/src/pages/productDetail/index.config.js
  * @Description: 文件描述
  */
@@ -9,4 +9,5 @@ export default {
   navigationBarTitleText: '商品详情',
   usingComponents: {
   },
+  enableShareAppMessage: true
 }
--- a/src/pages/productDetail/index.vue
View file @e387a38
+++ b/src/pages/productDetail/index.vue
View file @e387a38
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-04 21:29:23
+ * @LastEditTime: 2025-07-07 15:24:05
  * @FilePath: /jgdl/src/pages/productDetail/index.vue
  * @Description: 商品详情页
 -->
@@ -191,7 +191,8 @@
         </nut-dialog>
         <!-- 联系卖家弹框 -->
-        <nut-popup v-model:visible="showContactModal" position="bottom" :style="{ height: '70%' }" round :catch-move="true">
+        <nut-popup v-model:visible="showContactModal" position="bottom" :style="{ height: '70%' }" round
+            :catch-move="true">
             <view class="contact-modal p-4">
                 <view class="text-center mb-4">
                     <text class="text-lg font-medium">联系卖家</text>
@@ -226,7 +227,8 @@
                 <!-- 发送按钮 -->
                 <nut-button @click="sendMessageToSeller" block type="primary" shape="round" color="orange"
-                    style="background-color: #f97316; border-color: #f97316; margin-top: 2rem;" :disabled="!messageText.trim()">
+                    style="background-color: #f97316; border-color: #f97316; margin-top: 2rem;"
+                    :disabled="!messageText.trim()">
                     发送消息
                 </nut-button>
             </view>
@@ -239,10 +241,11 @@
 <script setup>
 import { ref } from 'vue'
-import Taro from '@tarojs/taro'
+import Taro, { useShareAppMessage } from '@tarojs/taro'
 import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
 import payCard from '@/components/payCard.vue'
 import avatarImg from '@/assets/images/avatar.png'
+import { getCurrentPageParam } from "@/utils/weapp"
 // 默认头像
 const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
@@ -483,6 +486,53 @@ const onImageError = (e) => {
         duration: 2000
     })
 }
+
+// 分享功能
+useShareAppMessage(() => {
+    let params = getCurrentPageParam();
+    // 设置菜单中的转发按钮触发转发事件时的转发内容
+    var shareObj = {
+        title: product.value.name,    // 默认是小程序的名称(可以写slogan等)
+        path: `pages/productDetail/index?id=${params.id}`,    // 默认是当前页面，必须是以'/'开头的完整路径
+        imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
+        success: function (res) {
+            // 转发成功之后的回调
+            if (res.errMsg == 'shareAppMessage:ok') {
+                Taro.showToast({
+                    title: '分享成功',
+                    icon: 'success'
+                })
+            }
+        },
+        fail: function () {
+            // 转发失败之后的回调
+            if (res.errMsg == 'shareAppMessage:fail cancel') {
+                // 用户取消转发
+                Taro.showToast({
+                    title: '分享取消',
+                    icon: 'none'
+                })
+            } else if (res.errMsg == 'shareAppMessage:fail') {
+                // 转发失败，其中 detail message 为详细失败信息
+                Taro.showToast({
+                    title: '分享失败',
+                    icon: 'none'
+                })
+            }
+        },
+        complete: function () {
+            // 转发结束之后的回调（转发成不成功都会执行）
+        }
+    }
+    // 来自页面内的按钮的转发
+    // if (options.from == 'button') {
+    //   var eData = options.target.dataset;
+    //   // 此处可以修改 shareObj 中的内容
+    //   shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
+    // }
+    // 返回shareObj
+    return shareObj;
+})
 </script>
 <style lang="less">