web-retail-h5/components/share/README.md

分享组件说明

SpecialSharePage 组件

特殊场景分享页面组件，通过接口获取base64格式的背景图片。

主要特性

• 📱 响应式：适配各种屏幕尺寸
• 🎨 可定制：支持样式自定义
• 🔄 重试机制：支持接口调用失败时的重试
• 🌐 接口获取：自动通过接口获取背景图片
• 🖼️ Base64支持：接口返回base64格式的背景图片

使用方法

<template>
  <SpecialSharePage
    :qrCodeImage="base64QrCodeImage"
    :userInfo="userInfo"
    :isLoaded="true"
    @share-generated="handleShareGenerated"
    @background-image-error="handleError"
    @background-image-retry="handleRetry"
  />
</template>

<script>
import SpecialSharePage from '@/components/share/SpecialSharePage.vue'

export default {
  components: {
    SpecialSharePage,
  },
  data() {
    return {
      base64QrCodeImage:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQAAAADK...',
      userInfo: {
        memberCode: '12345678',
      },
    }
  },
  methods: {
    handleShareGenerated(dataUrl) {
      console.log('生成的分享图片:', dataUrl)
      // 处理生成的图片
    },
    handleError(error) {
      console.error('背景图片错误:', error)
    },
    handleRetry(retryCount) {
      console.log('背景图片重试:', retryCount)
    },
  },
}
</script>

Props

参数	类型	默认值	说明
qrCodeImage	String	''	二维码图片（base64格式）
userInfo	Object	{}	用户信息对象
isWechat	Boolean	false	是否为微信环境
isLoaded	Boolean	false	是否加载完成
skipImageVerification	Boolean	false	跳过图片验证（调试用）

Events

事件名	参数	说明
share-generated	dataUrl	分享图片生成成功
background-image-error	error	背景图片加载错误
background-image-retry	retryCount	背景图片重试

方法

方法名	说明
generateShareImage()	生成分享图片
retryGetBackgroundImage()	手动重试获取背景图
getStatusInfo()	获取当前状态信息（调试用）
handleShareGenerated(dataUrl)	处理图片生成成功后的逻辑（内部方法）

接口配置

组件使用 getSharedImg 接口获取背景图片：

// 在 config/login.js 中配置接口
export const getSharedImg = () => {
  return http.get('/api/share/background')
}

接口应返回以下格式：

{
  code: 200,
  data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...',
  message: 'success'
}

调试

// 生成分享图片
this.$refs.specialSharePage.generateShareImage()

// 手动重试获取背景图
this.$refs.specialSharePage.retryGetBackgroundImage()

// 获取当前状态信息
const status = this.$refs.specialSharePage.getStatusInfo()
console.log('组件状态:', status)
/*
输出示例：
{
  specialBackgroundImage: '123456 bytes',
  qrCodeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEU...',
  backgroundImageLoaded: true,
  isLoadingBackground: false,
  imageLoadRetryCount: 0,
  isReady: true
}
*/

工作流程

1. 组件挂载：自动调用 getSharedImg 接口获取背景图
2. 显示加载：显示"正在获取背景图片..."状态
3. 接口响应：处理接口返回的base64背景图数据
4. 准备就绪：背景图和二维码都准备好后可以生成分享图片
5. 生成图片：使用html2canvas截取页面生成分享图片
6. 处理结果：
   • 关闭loading状态
   • 显示成功提示（"图片生成成功，请长按保存"）
   • 调用内部 handleShareGenerated 方法处理
   • 通过 share-generated 事件通知父组件

图片生成流程

用户点击生成按钮
       ↓
检查前置条件（二维码、背景图）
       ↓
显示 "生成图片中..." loading
       ↓
使用 html2canvas 截取页面
       ↓
生成成功 → 关闭loading → 显示成功提示 → 发送事件
       ↓
生成失败 → 关闭loading → 显示错误提示

错误处理

• 接口调用失败：自动重试最多3次
• 重试机制：通过 background-image-retry 事件通知重试状态
• 最终失败：通过 background-image-error 事件通知错误

注意事项

1. 确保 getSharedImg 接口返回完整的base64格式图片
2. 组件会在mounted生命周期自动调用接口
3. 支持手动重试机制，适用于网络不稳定的情况
4. 生成的图片为JPEG格式，质量为100%
5. 组件支持长按保存分享图片
6. 接口失败时会显示相应的错误状态
7. 图片生成成功后会自动显示提示信息，无需在父组件中重复处理
8. 组件内部和外部都会收到图片生成事件，可根据需要在父组件中添加额外逻辑