hookehuyr

feat(分享功能): 为活动和兑换券页面添加分享功能

为ActivitiesCover和RewardDetail页面添加微信分享功能配置
在ShareButton组件中使用原生分享按钮
实现onShareAppMessage方法定义分享内容
......@@ -12,8 +12,8 @@
<view v-if="showOptions" class="share-popover">
<view class="popover-arrow"></view>
<view class="popover-content">
<view @tap="handleShareActivity" class="popover-item">
<text>活动</text>
<view class="popover-item" style="padding: 0; padding-top: 8rpx;">
<button id="share" data-name="shareBtn" open-type="share" style="font-size: 28rpx;padding: 0; background-color: white; line-height: 2;">活动</button>
</view>
<view class="popover-divider"></view>
<view @tap="handleSharePoster" class="popover-item">
......
/*
* @Date: 2025-08-28 14:50:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 14:51:20
* @LastEditTime: 2025-09-04 12:07:53
* @FilePath: /lls_program/src/pages/ActivitiesCover/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '活动海报',
enableShareAppMessage: true,
enableShareTimeline: true,
usingComponents: {
},
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-03 15:54:59
* @LastEditTime: 2025-09-04 12:09:01
* @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
* @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
......@@ -267,10 +267,36 @@ const handleJoinActivity = async () => {
*/
const onShareActivity = () => {
console.log('分享活动海报')
show_post.value = true
startGeneratePoster()
// 分享给朋友
Taro.showToast({
title: '请点击右上角分享给朋友',
icon: 'none',
duration: 2000
});
}
/**
* 定义分享给朋友的内容
* @returns {Object} 分享配置对象
*/
const onShareAppMessage = () => {
return {
title: '分享活动海报',
path: '/pages/ActivitiesCover/index',
success: (res) => {
console.log('分享成功', res)
},
fail: (err) => {
console.error('分享失败', err)
}
}
}
// 导出分享方法供Taro使用
defineExpose({
onShareAppMessage,
})
/**
* 处理分享海报事件
*/
......
/*
* @Date: 2025-08-27 18:25:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 09:39:10
* @LastEditTime: 2025-09-04 12:07:38
* @FilePath: /lls_program/src/pages/RewardDetail/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '兑换券详情'
navigationBarTitleText: '兑换券详情',
enableShareAppMessage: true,
enableShareTimeline: true
}
......
<template>
<view class="min-h-screen bg-white pb-24">
<!-- <AppHeader title="优惠券详情" :showBack="true" /> -->
<!-- 分享按钮 -->
<button id="share" data-name="shareBtn" open-type="share" style="font-size: 1.05rem; padding: 0; position: fixed; right: 40rpx; top: 40rpx; z-index: 1000;color: white; width: 80rpx; height: 80rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.6);">分享</button>
<!-- Top Image -->
<view class="w-full h-48">
<image :src="reward.image" class="w-full h-full object-cover" />
......@@ -140,4 +141,46 @@ const initData = async () => {
useDidShow(() => {
initData();
});
/**
* 处理分享按钮点击事件
*/
const shareBtnClick = () => {
// 显示分享选项菜单
Taro.showActionSheet({
itemList: ['分享给朋友'],
success: (res) => {
if (res.tapIndex === 0) {
// 分享给朋友
Taro.showToast({
title: '请点击右上角分享给朋友',
icon: 'none',
duration: 2000
});
}
}
});
}
/**
* 定义分享给朋友的内容
* @returns {Object} 分享配置对象
*/
const onShareAppMessage = () => {
return {
title: `${reward.value.title} - 仅需${reward.value.points}积分`,
path: `/pages/RewardDetail/index?id=${reward.value.id}`,
imageUrl: reward.value.image
}
}
// 导出分享方法供Taro使用
defineExpose({
onShareAppMessage,
})
</script>
<style lang="less">
</style>
......