yml/hfb_sys

Fork 0

Files

T

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

2026-06-06 13:16:44 +08:00

4.7 KiB

Raw Blame History

文件上传功能集成说明

✅ 已完成的修复

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)
✅ 更新模板，支持图片预览和删除
✅ 添加完整样式

功能特性：

图片预览 - 已上传的图片显示缩略图
删除功能 - 鼠标悬停显示删除按钮
数量限制 - 最多上传 3 张图片
文件验证
- 只能上传图片文件
- 最大 5MB
上传状态 - 显示上传进度和 loading 图标
图片优化 - 自动压缩和优化图片（使用 WebP 格式）

使用场景：

支付宝/微信收款码截图
银行卡照片
其他支付凭证

🎯 使用说明

用户端操作流程

进入收款账号管理
- 访问：http://localhost:5173/wallet/payment-accounts
- 或从钱包页面点击"管理收款账号"
添加收款账号
- 点击"添加收款账号"按钮
- 选择账号类型（支付宝/微信/银行卡）
- 填写必填信息
- 上传凭证图片（可选）：
  - 点击"上传凭证"按钮
  - 选择图片文件
  - 等待上传完成
  - 可以上传最多 3 张图片
  - 点击图片上的删除按钮可以移除
申请提现
- 在钱包页面点击"申请提现"
- 选择收款账号
- 输入金额
- 提交申请

📸 支持的图片格式

输入格式：JPEG, PNG, WebP
输出格式：WebP（自动转换）
最大尺寸：5MB
图片处理：
- 自动压缩
- 保持宽高比
- 优化文件大小

🔧 技术实现

文件上传流程

1. 用户选择图片
   ↓
2. 验证文件类型和大小
   ↓
3. 调用 optimizeImageForUpload() 优化图片
   ↓
4. 上传到服务器 (/api/files/upload)
   ↓
5. 返回 URL 和元数据
   ↓
6. 保存 URL 到 certificate_urls 数组

API 接口

uploadFile(file: File, scene: string): Promise<UploadedFile>

参数：

file: File 对象
scene: 上传场景标识（使用 'payment-cert'）

{
  object_key: string
  url: string
  thumbnail_url?: string
  medium_url?: string
  filename: string
  content_type: string
  size: number
}

🎨 UI 设计

上传区域

┌─────────┬─────────┬─────────┐
│  图片1  │  图片2  │  + 上传 │
│  [删除] │  [删除] │  凭证   │
└─────────┴─────────┴─────────┘

交互效果

✅ 鼠标悬停显示删除按钮
✅ 上传时显示 loading 图标
✅ 上传按钮有 hover 效果
✅ 图片预览（100x100px）
✅ 响应式布局

🔒 安全说明

文件验证
- 前端验证文件类型
- 前端验证文件大小
- 后端也会进行二次验证
图片处理
- 自动压缩减小文件大小
- 统一转换为 WebP 格式
- 限制图片尺寸
存储
- URL 存储在数据库
- 图片存储在 MinIO/OSS
- 支持私有访问控制

📋 测试建议

功能测试

上传 JPEG 图片
上传 PNG 图片
上传 WebP 图片
上传超过 5MB 的图片（应该失败）
上传非图片文件（应该失败）
上传 3 张图片（达到上限）
删除已上传的图片
重新上传删除的图片

UI 测试

图片预览显示正常
删除按钮悬停显示
上传中显示 loading
上传成功提示
上传失败提示
布局响应式

🐛 已知限制

当前版本：
- 只支持图片上传
- 最多 3 张图片
- 单个文件最大 5MB
未来优化：
- 支持 PDF 文件
- 批量上传
- 拖拽上传
- 图片裁剪

🎉 总结

✅ 文件上传功能已完全集成

两个主要修复：

✅ 钱包页面"申请提现"按钮可点击
✅ 收款账号凭证上传功能完整实现

用户现在可以：

正常使用提现功能
上传收款账号凭证图片
查看和管理已上传的图片
删除不需要的图片

系统功能完整，可以正常使用！

4.7 KiB Raw Blame History Unescape Escape