增加提现相关的与打款相关逻辑

2026-06-06 13:16:44 +08:00
parent 8a2d2f2a18
commit 5c830fe1f4
32 changed files with 3835 additions and 72 deletions
@@ -0,0 +1,215 @@
+# 文件上传功能集成说明
+
+## ✅ 已完成的修复
+
+### 1. 钱包页面提现按钮（已修复）
+**文件**：`frontend/src/features/wallet/views/WalletView.vue`
+
+**修复内容**：
+- ✅ 移除了 `disabled` 属性
+- ✅ 添加了路由跳转功能
+- ✅ 移除了"待开发"标签
+- ✅ 改为 `type="primary"` 样式
+
+**现在的功能**：
+- 点击"申请提现"按钮会跳转到 `/wallet/withdrawal` 页面
+
+---
+
+### 2. 收款账号凭证上传（已集成）
+**文件**：`frontend/src/features/wallet/components/PaymentAccountDialog.vue`
+
+**集成内容**：
+- ✅ 导入文件上传 API (`uploadFile`)
+- ✅ 添加上传处理函数 (`handleUpload`)
+- ✅ 添加删除图片函数 (`removeImage`)
+- ✅ 更新模板，支持图片预览和删除
+- ✅ 添加完整样式
+
+**功能特性**：
+1. **图片预览** - 已上传的图片显示缩略图
+2. **删除功能** - 鼠标悬停显示删除按钮
+3. **数量限制** - 最多上传 3 张图片
+4. **文件验证**
+   - 只能上传图片文件
+   - 最大 5MB
+5. **上传状态** - 显示上传进度和 loading 图标
+6. **图片优化** - 自动压缩和优化图片（使用 WebP 格式）
+
+**使用场景**：
+- 支付宝/微信收款码截图
+- 银行卡照片
+- 其他支付凭证
+
+---
+
+## 🎯 使用说明
+
+### 用户端操作流程
+
+1. **进入收款账号管理**
+   - 访问：http://localhost:5173/wallet/payment-accounts
+   - 或从钱包页面点击"管理收款账号"
+
+2. **添加收款账号**
+   - 点击"添加收款账号"按钮
+   - 选择账号类型（支付宝/微信/银行卡）
+   - 填写必填信息
+   - 上传凭证图片（可选）：
+     - 点击"上传凭证"按钮
+     - 选择图片文件
+     - 等待上传完成
+     - 可以上传最多 3 张图片
+     - 点击图片上的删除按钮可以移除
+
+3. **申请提现**
+   - 在钱包页面点击"申请提现"
+   - 选择收款账号
+   - 输入金额
+   - 提交申请
+
+---
+
+## 📸 支持的图片格式
+
+- **输入格式**：JPEG, PNG, WebP
+- **输出格式**：WebP（自动转换）
+- **最大尺寸**：5MB
+- **图片处理**：
+  - 自动压缩
+  - 保持宽高比
+  - 优化文件大小
+
+---
+
+## 🔧 技术实现
+
+### 文件上传流程
+```
+1. 用户选择图片
+   ↓
+2. 验证文件类型和大小
+   ↓
+3. 调用 optimizeImageForUpload() 优化图片
+   ↓
+4. 上传到服务器 (/api/files/upload)
+   ↓
+5. 返回 URL 和元数据
+   ↓
+6. 保存 URL 到 certificate_urls 数组
+```
+
+### API 接口
+```typescript
+uploadFile(file: File, scene: string): Promise<UploadedFile>
+```
+
+**参数**：
+- `file`: File 对象
+- `scene`: 上传场景标识（使用 `'payment-cert'`）
+
+**返回**：
+```typescript
+{
+  object_key: string
+  url: string
+  thumbnail_url?: string
+  medium_url?: string
+  filename: string
+  content_type: string
+  size: number
+}
+```
+
+---
+
+## 🎨 UI 设计
+
+### 上传区域
+```
+┌─────────┬─────────┬─────────┐
+│  图片1  │  图片2  │  + 上传 │
+│  [删除] │  [删除] │  凭证   │
+└─────────┴─────────┴─────────┘
+```
+
+### 交互效果
+- ✅ 鼠标悬停显示删除按钮
+- ✅ 上传时显示 loading 图标
+- ✅ 上传按钮有 hover 效果
+- ✅ 图片预览（100x100px）
+- ✅ 响应式布局
+
+---
+
+## 🔒 安全说明
+
+1. **文件验证**
+   - 前端验证文件类型
+   - 前端验证文件大小
+   - 后端也会进行二次验证
+
+2. **图片处理**
+   - 自动压缩减小文件大小
+   - 统一转换为 WebP 格式
+   - 限制图片尺寸
+
+3. **存储**
+   - URL 存储在数据库
+   - 图片存储在 MinIO/OSS
+   - 支持私有访问控制
+
+---
+
+## 📋 测试建议
+
+### 功能测试
+- [ ] 上传 JPEG 图片
+- [ ] 上传 PNG 图片
+- [ ] 上传 WebP 图片
+- [ ] 上传超过 5MB 的图片（应该失败）
+- [ ] 上传非图片文件（应该失败）
+- [ ] 上传 3 张图片（达到上限）
+- [ ] 删除已上传的图片
+- [ ] 重新上传删除的图片
+
+### UI 测试
+- [ ] 图片预览显示正常
+- [ ] 删除按钮悬停显示
+- [ ] 上传中显示 loading
+- [ ] 上传成功提示
+- [ ] 上传失败提示
+- [ ] 布局响应式
+
+---
+
+## 🐛 已知限制
+
+1. **当前版本**：
+   - 只支持图片上传
+   - 最多 3 张图片
+   - 单个文件最大 5MB
+
+2. **未来优化**：
+   - 支持 PDF 文件
+   - 批量上传
+   - 拖拽上传
+   - 图片裁剪
+
+---
+
+## 🎉 总结
+
+✅ **文件上传功能已完全集成**
+
+两个主要修复：
+1. ✅ 钱包页面"申请提现"按钮可点击
+2. ✅ 收款账号凭证上传功能完整实现
+
+用户现在可以：
+- 正常使用提现功能
+- 上传收款账号凭证图片
+- 查看和管理已上传的图片
+- 删除不需要的图片
+
+系统功能完整，可以正常使用！