179 lines
5.3 KiB
Markdown
179 lines
5.3 KiB
Markdown
|
# 分享组件说明
|
|||
|
|
|
|||
|
|
## 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. **组件内部和外部都会收到图片生成事件**，可根据需要在父组件中添加额外逻辑
|