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 76 additions and 25 deletions
<!--
* @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";
export default {
name: "indexPage",
onHide() {
console.warn('index onHide')
},
onShareAppMessage() {
let params = getCurrentPageParam();
// 分享功能
useShareAppMessage(() => {
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "xxx", // 默认是小程序的名称(可以写slogan等)
path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}&room_type=${params.room_type}`, // 默认是当前页面，必须是以'/'开头的完整路径
title: '捡个电驴-分享给好友', // 默认是小程序的名称(可以写slogan等)
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>
......
/*
* @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
}
......
<!--
* @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">
......