docs: 添加分销商相关功能说明文档
- 新增分销商提现弹窗优化说明文档 - 新增分销商申请页面异常修复说明文档 - 新增分销商设置弹窗优化说明文档 - 新增分销商资金流动弹窗优化说明文档 - 新增分销海报功能说明文档
This commit is contained in:
172
docs/分销海报功能说明.md
Normal file
172
docs/分销海报功能说明.md
Normal file
@@ -0,0 +1,172 @@
|
||||
# 分销海报功能说明
|
||||
|
||||
## 🎨 功能概述
|
||||
|
||||
分销海报功能是一个完整的海报设计和生成系统，允许管理员设置海报模板，分销商可以生成个性化的推广海报。
|
||||
|
||||
## ✨ 主要特性
|
||||
|
||||
### 1. **可视化编辑器**
|
||||
- 实时预览海报效果
|
||||
- 拖拽调整元素位置
|
||||
- 所见即所得的编辑体验
|
||||
|
||||
### 2. **预设模板系统**
|
||||
- 多种精美模板可选
|
||||
- 一键应用模板配置
|
||||
- 支持自定义模板
|
||||
|
||||
### 3. **元素自定义**
|
||||
- **头像设置**：支持圆形/方形，可调整大小
|
||||
- **昵称设置**：自定义字体大小和颜色
|
||||
- **二维码设置**：可调整大小和位置
|
||||
- **背景图片**：支持上传自定义背景
|
||||
|
||||
### 4. **智能布局**
|
||||
- 响应式设计，适配不同屏幕
|
||||
- 元素位置智能约束
|
||||
- 防止元素超出画布边界
|
||||
|
||||
## 📁 文件结构
|
||||
|
||||
```
|
||||
src/views/shop/shopDealerPoster/
|
||||
├── index.vue # 主页面组件
|
||||
src/api/shop/shopDealerPoster/
|
||||
├── index.ts # API接口
|
||||
└── model/
|
||||
└── index.ts # 数据模型
|
||||
```
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 核心组件
|
||||
- **Vue 3 Composition API**：响应式状态管理
|
||||
- **Ant Design Vue**：UI组件库
|
||||
- **Canvas API**：海报生成（预留）
|
||||
- **拖拽交互**：原生DOM事件处理
|
||||
|
||||
### 数据结构
|
||||
```typescript
|
||||
interface PosterConfig {
|
||||
backgroundImage: string; // 背景图片
|
||||
showAvatar: boolean; // 是否显示头像
|
||||
avatarWidth: number; // 头像宽度
|
||||
avatarShape: string; // 头像形状
|
||||
showNickname: boolean; // 是否显示昵称
|
||||
nicknameFontSize: number; // 昵称字体大小
|
||||
nicknameColor: string; // 昵称颜色
|
||||
showQrcode: boolean; // 是否显示二维码
|
||||
qrcodeWidth: number; // 二维码宽度
|
||||
elements: { // 元素位置
|
||||
avatar: { x: number; y: number };
|
||||
nickname: { x: number; y: number };
|
||||
qrcode: { x: number; y: number };
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 使用流程
|
||||
|
||||
### 管理员设置
|
||||
1. 进入分销海报设置页面
|
||||
2. 选择预设模板或自定义设计
|
||||
3. 调整元素位置和样式
|
||||
4. 上传背景图片
|
||||
5. 保存配置
|
||||
|
||||
### 分销商使用
|
||||
1. 进入分销中心
|
||||
2. 选择海报模板
|
||||
3. 系统自动填充个人信息
|
||||
4. 生成个性化海报
|
||||
5. 分享推广
|
||||
|
||||
## 🔌 API接口
|
||||
|
||||
### 配置管理
|
||||
```typescript
|
||||
// 获取当前配置
|
||||
getCurrentPosterConfig(): Promise<PosterConfig>
|
||||
|
||||
// 保存配置
|
||||
savePosterConfig(config: PosterConfig): Promise<string>
|
||||
|
||||
// 上传背景图片
|
||||
uploadPosterBackground(file: File): Promise<{url: string}>
|
||||
```
|
||||
|
||||
### 海报生成
|
||||
```typescript
|
||||
// 生成用户海报
|
||||
generatePoster(userId: number, config?: PosterConfig): Promise<{url: string}>
|
||||
```
|
||||
|
||||
## 🎨 预设模板
|
||||
|
||||
### 1. 经典模板
|
||||
- **风格**：橙色渐变背景
|
||||
- **布局**：左上角头像，居中二维码
|
||||
- **适用**：通用推广场景
|
||||
|
||||
### 2. 简约模板
|
||||
- **风格**：蓝色简洁背景
|
||||
- **布局**：居中对称布局
|
||||
- **适用**：专业商务场景
|
||||
|
||||
### 3. 活力模板
|
||||
- **风格**：绿色活力背景
|
||||
- **布局**：横向排列布局
|
||||
- **适用**：年轻时尚场景
|
||||
|
||||
## 🛠️ 自定义开发
|
||||
|
||||
### 添加新模板
|
||||
```typescript
|
||||
const newTemplate = {
|
||||
id: 4,
|
||||
name: '新模板',
|
||||
preview: 'template-preview.jpg',
|
||||
config: {
|
||||
backgroundImage: 'background.jpg',
|
||||
elements: {
|
||||
avatar: { x: 100, y: 100 },
|
||||
nickname: { x: 200, y: 120 },
|
||||
qrcode: { x: 300, y: 400 }
|
||||
},
|
||||
// 其他配置...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 扩展元素类型
|
||||
1. 在 `PosterConfig` 中添加新元素配置
|
||||
2. 在模板中添加新元素渲染
|
||||
3. 在设置面板中添加对应控制项
|
||||
4. 更新拖拽和样式处理逻辑
|
||||
|
||||
## 📱 响应式支持
|
||||
|
||||
- **桌面端**：完整功能，左右布局
|
||||
- **平板端**：上下布局，保持功能完整
|
||||
- **移动端**：简化操作，核心功能可用
|
||||
|
||||
## 🔍 性能优化
|
||||
|
||||
- **图片懒加载**：预览图片按需加载
|
||||
- **防抖处理**：拖拽操作防抖优化
|
||||
- **缓存机制**：配置数据本地缓存
|
||||
- **压缩上传**：图片自动压缩处理
|
||||
|
||||
## 🚀 未来扩展
|
||||
|
||||
- [ ] 更多元素类型（文字、图标、形状）
|
||||
- [ ] 动画效果支持
|
||||
- [ ] 批量生成功能
|
||||
- [ ] 模板市场
|
||||
- [ ] AI智能布局
|
||||
- [ ] 视频海报支持
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如有问题或建议，请联系开发团队。
|
||||
Reference in New Issue
Block a user