196 lines
5.0 KiB
Markdown
196 lines
5.0 KiB
Markdown
# 充值功能前端说明
|
||
|
||
## 概述
|
||
|
||
前端充值功能包含两个主要页面：
|
||
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接口
|
||
|
||
### 财务相关接口
|
||
|
||
```javascript
|
||
// 获取钱包信息
|
||
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: '系统自动赠送'
|
||
})
|
||
```
|
||
|
||
## 样式设计
|
||
|
||
### 设计风格
|
||
- 遵循项目整体设计风格
|
||
- 使用渐变色彩和卡片式布局
|
||
- 响应式设计，支持移动端
|
||
- 统一的颜色和字体规范
|
||
|
||
### 主要样式特点
|
||
- **渐变背景** - 钱包余额卡片使用紫色渐变
|
||
- **卡片布局** - 充值方式选择使用卡片式设计
|
||
- **悬停效果** - 充值方式卡片支持悬停动画
|
||
- **响应式** - 移动端适配，布局自适应
|
||
|
||
## 配置信息
|
||
|
||
### 对公转账信息配置
|
||
```javascript
|
||
const transferInfo = {
|
||
bankName: '中国工商银行',
|
||
bankAccount: '6222021234567890123',
|
||
accountName: '某某科技有限公司'
|
||
}
|
||
```
|
||
|
||
### 用户信息配置
|
||
```javascript
|
||
const userInfo = {
|
||
userId: 'USER123456' // 实际应从用户状态获取
|
||
}
|
||
```
|
||
|
||
## 路由配置
|
||
|
||
```javascript
|
||
{
|
||
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. **响应式** - 确保在不同设备上的良好显示效果 |