# 分享组件说明

## SpecialSharePage 组件

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

### 主要特性

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

### 使用方法

```vue
<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` 接口获取背景图片：

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

接口应返回以下格式：

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

### 调试

```javascript
// 生成分享图片
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. **组件内部和外部都会收到图片生成事件**，可根据需要在父组件中添加额外逻辑