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

添加ShareButtonTest测试页面用于验证分享功能
重构ShareButton组件，增加分享配置属性和默认值
优化RewardDetail页面的分享逻辑，增加错误处理

@@ -35,6 +35,7 @@ export default {
     'pages/FamilyRank/index',
     'pages/FamilyRank/index',
     'pages/PosterCheckin/index',
     'pages/PosterCheckin/index',
     'pages/CheckinList/index',
     'pages/CheckinList/index',
+    'pages/ShareButtonTest/index',
   ],
   ],
   window: {
   window: {
     backgroundTextStyle: 'light',
     backgroundTextStyle: 'light',

@@ -3,9 +3,6 @@
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditTime: 2025-09-15 12:52:03
  * @LastEditTime: 2025-09-15 12:52:03
  * @FilePath: /lls_program/src/components/ShareButton/index.vue
  * @FilePath: /lls_program/src/components/ShareButton/index.vue
- * @Description: 文件描述
--->
-<!--
  * @Description: 分享按钮组件 - 点击后弹出分享选项
  * @Description: 分享按钮组件 - 点击后弹出分享选项
 -->
 -->
 <template>
 <template>
@@ -25,6 +22,7 @@
 <script setup>
 <script setup>
 import { ref } from 'vue'
 import { ref } from 'vue'
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
+import { addShareFlag } from '@/utils/authRedirect'
 
 
 // 组件属性
 // 组件属性
 const props = defineProps({
 const props = defineProps({
@@ -32,6 +30,15 @@ const props = defineProps({
   activityData: {
   activityData: {
     type: Object,
     type: Object,
     default: () => ({})
     default: () => ({})
+  },
+  // 分享配置
+  shareConfig: {
+    type: Object,
+    default: () => ({
+      title: '精彩活动等你参与',
+      path: '/pages/ActivitiesCover/index',
+      imageUrl: ''
+    })
   }
   }
 })
 })
 
 
@@ -44,6 +51,38 @@ const emit = defineEmits(['shareActivity', 'sharePoster'])
 const handleSharePoster = () => {
 const handleSharePoster = () => {
   emit('sharePoster', props.activityData)
   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>
 </script>
 
 
 <style lang="less">
 <style lang="less">

@@ -255,20 +255,28 @@ useLoad((options) => {
  * 定义分享给朋友的内容
  * 定义分享给朋友的内容
  * @returns {Object} 分享配置对象
  * @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({
 defineExpose({
     onShareAppMessage,
     onShareAppMessage,
 })
 })
 </script>
 </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