hookehuyr

feat(分享功能): 添加ShareButton测试页面并优化分享功能

添加ShareButtonTest测试页面用于验证分享功能
重构ShareButton组件,增加分享配置属性和默认值
优化RewardDetail页面的分享逻辑,增加错误处理
......@@ -35,6 +35,7 @@ export default {
'pages/FamilyRank/index',
'pages/PosterCheckin/index',
'pages/CheckinList/index',
'pages/ShareButtonTest/index',
],
window: {
backgroundTextStyle: 'light',
......
......@@ -3,9 +3,6 @@
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-15 12:52:03
* @FilePath: /lls_program/src/components/ShareButton/index.vue
* @Description: 文件描述
-->
<!--
* @Description: 分享按钮组件 - 点击后弹出分享选项
-->
<template>
......@@ -25,6 +22,7 @@
<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { addShareFlag } from '@/utils/authRedirect'
// 组件属性
const props = defineProps({
......@@ -32,6 +30,15 @@ const props = defineProps({
activityData: {
type: Object,
default: () => ({})
},
// 分享配置
shareConfig: {
type: Object,
default: () => ({
title: '精彩活动等你参与',
path: '/pages/ActivitiesCover/index',
imageUrl: ''
})
}
})
......@@ -44,6 +51,38 @@ const emit = defineEmits(['shareActivity', 'sharePoster'])
const handleSharePoster = () => {
emit('sharePoster', props.activityData)
}
/**
* 定义分享给朋友的内容
* @param {Object} res - 分享来源信息
* @returns {Object} 分享配置对象
*/
const onShareAppMessage = (res) => {
// 构建分享数据
const shareData = {
title: props.shareConfig.title || '精彩活动等你参与',
path: addShareFlag(props.shareConfig.path || '/pages/ActivitiesCover/index'),
imageUrl: props.shareConfig.imageUrl || props.activityData.banner || ''
}
// 触发分享事件
emit('shareActivity', {
...props.activityData,
shareData
})
return shareData
}
// 使用Taro的useShareAppMessage Hook来处理分享
Taro.useShareAppMessage((res) => {
return onShareAppMessage(res)
})
// 导出分享方法供Taro使用(保持兼容性)
defineExpose({
onShareAppMessage,
})
</script>
<style lang="less">
......
......@@ -255,20 +255,28 @@ useLoad((options) => {
* 定义分享给朋友的内容
* @returns {Object} 分享配置对象
*/
const onShareAppMessage = () => {
return {
title: `${reward.value.title} - 仅需${reward.value.points_cost}积分`,
path: addShareFlag(`/pages/RewardDetail/index?id=${reward.value.id}`),
imageUrl: reward.value.banner
}
const onShareAppMessage = (res) => {
// 确保数据已加载,提供默认值
const title = reward.value?.title ? `${reward.value.title} - 仅需${reward.value.points_cost || 0}积分` : '精彩优惠券等你来兑换';
const shareId = reward.value?.id || couponId.value || '';
// const imageUrl = reward.value?.banner || '';
const shareData = {
title: title,
path: addShareFlag(`/pages/RewardDetail/index?id=${shareId}`),
// imageUrl: imageUrl
};
return shareData;
}
// 导出分享方法供Taro使用
// 使用Taro的useShareAppMessage Hook来处理分享
Taro.useShareAppMessage((res) => {
return onShareAppMessage(res);
});
// 导出分享方法供Taro使用(保持兼容性)
defineExpose({
onShareAppMessage,
})
</script>
<style lang="less">
</style>
......
export default definePageConfig({
navigationBarTitleText: 'ShareButton测试',
enableShareAppMessage: true,
enableShareTimeline: true
})
\ No newline at end of file
<template>
<view class="test-page">
<view class="test-header">
<text class="test-title">ShareButton组件分享功能测试</text>
</view>
<view class="test-content">
<!-- 测试数据展示 -->
<view class="test-section">
<text class="section-title">测试数据:</text>
<view class="data-display">
<text>活动标题:{{ testActivityData.title }}</text>
<text>活动描述:{{ testActivityData.description }}</text>
<text>分享标题:{{ testShareConfig.title }}</text>
<text>分享路径:{{ testShareConfig.path }}</text>
</view>
</view>
<!-- ShareButton组件测试 -->
<view class="test-section">
<text class="section-title">ShareButton组件:</text>
<ShareButton
:activity-data="testActivityData"
:share-config="testShareConfig"
@share-activity="onShareActivity"
@share-poster="onSharePoster"
/>
</view>
<!-- 分享日志显示 -->
<view class="test-section">
<text class="section-title">分享日志:</text>
<view class="log-display">
<text v-for="(log, index) in shareLogs" :key="index" class="log-item">
{{ log }}
</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import ShareButton from '@/components/ShareButton/index.vue'
/**
* ShareButton组件分享功能测试页面
*/
// 测试用的活动数据
const testActivityData = ref({
id: 'test-activity-001',
title: '测试活动 - 南京路商圈时尚Citywalk',
description: '这是一个用于测试ShareButton组件分享功能的测试活动',
banner: 'https://img.yzcdn.cn/vant/cat.jpeg',
dateRange: '2024年1月15日 - 2024年1月31日'
})
// 测试用的分享配置
const testShareConfig = ref({
title: '精彩活动等你参与 - 测试分享',
path: '/pages/ShareButtonTest/index',
imageUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
})
// 分享日志
const shareLogs = ref([
'页面初始化完成',
'ShareButton组件已加载'
])
/**
* 处理分享活动事件
* @param {Object} data - 分享数据
*/
const onShareActivity = (data) => {
console.log('=== 测试页面收到分享活动事件 ===')
console.log('分享数据:', data)
const logMessage = `[${new Date().toLocaleTimeString()}] 分享活动事件触发 - 标题: ${data.shareData?.title || '未知'}`
shareLogs.value.push(logMessage)
Taro.showToast({
title: '分享活动事件已触发',
icon: 'success',
duration: 2000
})
}
/**
* 处理分享海报事件
* @param {Object} data - 活动数据
*/
const onSharePoster = (data) => {
console.log('=== 测试页面收到分享海报事件 ===')
console.log('活动数据:', data)
const logMessage = `[${new Date().toLocaleTimeString()}] 分享海报事件触发 - 活动: ${data.title || '未知'}`
shareLogs.value.push(logMessage)
Taro.showToast({
title: '分享海报事件已触发',
icon: 'success',
duration: 2000
})
}
/**
* 页面分享配置(用于测试页面本身的分享)
*/
const onShareAppMessage = () => {
const logMessage = `[${new Date().toLocaleTimeString()}] 页面分享函数被调用`
shareLogs.value.push(logMessage)
return {
title: 'ShareButton组件测试页面',
path: '/pages/ShareButtonTest/index'
}
}
// 导出分享方法供Taro使用
defineExpose({
onShareAppMessage
})
</script>
<style lang="less" scoped>
.test-page {
min-height: 100vh;
background: #f5f5f5;
padding: 40rpx;
}
.test-header {
text-align: center;
margin-bottom: 60rpx;
}
.test-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.test-content {
display: flex;
flex-direction: column;
gap: 40rpx;
}
.test-section {
background: white;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
display: block;
}
.data-display {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.data-display text {
font-size: 28rpx;
color: #666;
padding: 12rpx;
background: #f8f9fa;
border-radius: 8rpx;
}
.log-display {
max-height: 400rpx;
overflow-y: auto;
background: #f8f9fa;
border-radius: 8rpx;
padding: 20rpx;
}
.log-item {
display: block;
font-size: 24rpx;
color: #666;
margin-bottom: 8rpx;
padding: 8rpx;
background: white;
border-radius: 4rpx;
border-left: 4rpx solid #007aff;
}
</style>
\ No newline at end of file