tyapi-frontend/docs/充值功能前端说明.md

充值功能前端说明

概述

前端充值功能包含两个主要页面：

1. 钱包充值页面 (/finance/wallet) - 用户选择充值方式并进行充值
2. 充值成功页面 (/finance/wallet/success) - 支付宝充值成功后的重定向页面

页面功能

1. 钱包充值页面 (Wallet.vue)

功能特性

• 钱包余额展示 - 显示用户当前钱包余额
• 充值方式选择 - 支持支付宝充值和对公转账两种方式
• 支付宝充值 - 输入充值金额，跳转到支付宝支付（待接入）
• 对公转账 - 显示银行账户信息，支持转账记录提交

页面结构

钱包充值页面
├── 页面头部
│   ├── 标题：钱包充值
│   └── 返回按钮
├── 钱包余额信息
│   ├── 余额图标
│   └── 当前余额显示
├── 充值方式选择
│   ├── 支付宝充值卡片
│   └── 对公转账卡片
├── 支付宝充值表单（选中时显示）
│   ├── 充值金额输入
│   └── 立即充值按钮
└── 对公转账信息（选中时显示）
    ├── 银行账户信息
    ├── 转账说明
    └── 转账记录表单

交互流程

支付宝充值流程：

1. 用户选择"支付宝充值"
2. 输入充值金额（最低1元）
3. 点击"立即充值"
4. 确认充值金额
5. 跳转到支付宝支付页面（待实现）
6. 支付成功后跳转到充值成功页面

对公转账流程：

1. 用户选择"对公转账"
2. 查看银行账户信息
3. 复制银行账号（可选）
4. 进行银行转账
5. 填写转账记录表单
6. 提交转账记录
7. 等待人工确认（1-2个工作日）

2. 充值成功页面 (WalletSuccess.vue)

功能特性

• 成功状态展示 - 显示充值成功图标和标题
• 充值详情 - 显示充值金额、方式、时间、当前余额
• 操作按钮 - 提供多个后续操作选项
• 温馨提示 - 显示相关提示信息

页面结构

充值成功页面
├── 成功状态
│   ├── 成功图标
│   ├── 成功标题
│   └── 成功副标题
├── 充值详情
│   ├── 充值金额
│   ├── 充值方式
│   ├── 充值时间
│   └── 当前余额
├── 操作按钮
│   ├── 返回财务中心
│   ├── 去订阅产品
│   └── 开发者中心
└── 温馨提示
    └── 相关提示信息

API接口

财务相关接口

// 获取钱包信息
financeApi.getWallet()

// 对公转账充值
financeApi.transferRecharge({
  amount: 100.00,
  transfer_order_id: 'TR202412010001',
  bank_account: '6222021234567890123',
  bank_name: '中国工商银行',
  notes: '转账备注'
})

// 赠送充值（管理员使用）
financeApi.giftRecharge({
  amount: 50.00,
  gift_reason: '新用户注册奖励',
  notes: '系统自动赠送'
})

样式设计

设计风格

• 遵循项目整体设计风格
• 使用渐变色彩和卡片式布局
• 响应式设计，支持移动端
• 统一的颜色和字体规范

主要样式特点

• 渐变背景 - 钱包余额卡片使用紫色渐变
• 卡片布局 - 充值方式选择使用卡片式设计
• 悬停效果 - 充值方式卡片支持悬停动画
• 响应式 - 移动端适配，布局自适应

配置信息

对公转账信息配置

const transferInfo = {
  bankName: '中国工商银行',
  bankAccount: '6222021234567890123',
  accountName: '某某科技有限公司'
}

用户信息配置

const userInfo = {
  userId: 'USER123456' // 实际应从用户状态获取
}

路由配置

{
  path: '/finance',
  component: () => import('@/layouts/MainLayout.vue'),
  meta: { requiresAuth: true },
  children: [
    {
      path: 'wallet',
      name: 'Wallet',
      component: () => import('@/pages/finance/Wallet.vue'),
      meta: { title: '余额充值' }
    },
    {
      path: 'wallet/success',
      name: 'WalletSuccess',
      component: () => import('@/pages/finance/WalletSuccess.vue'),
      meta: { title: '充值成功' }
    }
  ]
}

后续开发计划

1. 支付宝支付集成

• 集成支付宝支付SDK
• 实现支付页面跳转
• 处理支付回调
• 添加支付状态查询

2. 充值记录页面

• 创建充值记录列表页面
• 支持按类型、状态筛选
• 显示充值详情和状态

3. 实时余额更新

• 实现WebSocket实时余额更新
• 添加余额变动通知

4. 移动端优化

• 优化移动端交互体验
• 添加手势操作支持

注意事项

1. 金额验证 - 充值金额必须大于等于1元
2. 表单验证 - 所有必填字段都有相应的验证规则
3. 错误处理 - 完善的错误提示和异常处理
4. 用户体验 - 加载状态、成功提示等交互反馈
5. 安全性 - 敏感信息（如银行账号）的显示和复制功能
6. 响应式 - 确保在不同设备上的良好显示效果