127 lines
5.1 KiB
Markdown
127 lines
5.1 KiB
Markdown
# 用户详情数据面板 - 实现方案
|
||
|
||
## 需求概述
|
||
在管理后台用户管理页面，点击用户详情时展示全面的数据分析视图，包括：充值记录、累计充值/提现、推广人数信息、领取福利信息等。
|
||
|
||
## 方案设计
|
||
|
||
### 一、后端：新增用户详情聚合接口
|
||
|
||
**文件**: `AdminController.java`
|
||
|
||
新增 `GET /admin/user/stats?userId=xxx` 接口，一次性返回所有统计数据：
|
||
|
||
```json
|
||
{
|
||
"code": "0000",
|
||
"data": {
|
||
"user": { ... }, // 用户基本信息
|
||
"fundAccount": { ... }, // 资金账户（余额、冻结、累计充值、累计提现）
|
||
"tradeAccounts": [...], // 交易账户持仓列表
|
||
"depositStats": { // 充值统计
|
||
"totalCount": 5,
|
||
"totalAmount": 10000.00,
|
||
"successCount": 4,
|
||
"successAmount": 8000.00
|
||
},
|
||
"withdrawStats": { // 提现统计
|
||
"totalCount": 3,
|
||
"totalAmount": 3000.00,
|
||
"successCount": 2,
|
||
"successAmount": 2000.00,
|
||
"totalFee": 200.00
|
||
},
|
||
"referralStats": { // 推广统计
|
||
"directCount": 5, // 直接推广人数
|
||
"indirectCount": 8, // 间接推广人数
|
||
"referrals": [ // 直接推广人列表
|
||
{ "userId": 10, "username": "user1", "nickname": "用户1", "createTime": "...", "deposited": true }
|
||
]
|
||
},
|
||
"bonusStats": { // 福利统计
|
||
"newUserBonusClaimed": true,
|
||
"totalBonusClaimed": 500.00,
|
||
"records": [ // 领取记录
|
||
{ "type": "新人首充福利", "amount": 100, "time": "..." },
|
||
{ "type": "邀请奖励-10-1", "amount": 100, "time": "..." }
|
||
]
|
||
},
|
||
"recentOrders": [...], // 最近10笔充提订单
|
||
"recentTrades": [...] // 最近10笔交易订单
|
||
}
|
||
}
|
||
```
|
||
|
||
**实现要点**:
|
||
- 在 `AssetService` 或新建 `AdminDataService` 中封装聚合查询逻辑
|
||
- 使用已有的 `AccountFundMapper`、`OrderFundMapper`、`AccountFlowMapper`、`OrderTradeMapper` 进行数据查询
|
||
- 推广人列表通过 `UserMapper` 查询 `referredBy = userId` 获取
|
||
- 福利记录通过 `AccountFlow` 查询 `flowType=7` (福利类型) 或通过 `remark` LIKE 匹配福利关键词
|
||
|
||
### 二、前端：用户详情弹窗升级为多标签页
|
||
|
||
**文件**: `monisuo-admin/src/pages/monisuo/users.vue`
|
||
|
||
将现有的简单详情弹窗升级为多标签页数据面板：
|
||
|
||
#### 弹窗布局
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ 用户详情 - username │
|
||
├──────────────────────────────────────────────┤
|
||
│ [概览] [充提记录] [推广信息] [福利记录] [交易记录] │
|
||
├──────────────────────────────────────────────┤
|
||
│ │
|
||
│ (各标签页内容区) │
|
||
│ │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
#### 标签页内容设计
|
||
|
||
**1. 概览 Tab**
|
||
- 用户基本信息卡片（用户名、昵称、手机、邮箱、注册时间、最后登录）
|
||
- KPI 统计卡片行（4列网格）：
|
||
- 资金账户余额 / 冻结金额
|
||
- 累计充值 / 累计提现
|
||
- 直接推广人数 / 间接推广人数
|
||
- 累计领取福利金额
|
||
- 交易持仓列表（当前持有的币种）
|
||
|
||
**2. 充提记录 Tab**
|
||
- 充提统计摘要（总充值笔数/金额、总提现笔数/金额、手续费总计）
|
||
- 充提订单列表表格（时间、类型、金额、手续费、到账金额、状态）
|
||
|
||
**3. 推广信息 Tab**
|
||
- 推广概览卡片（推广码、直接推广人数、间接推广人数）
|
||
- 直接推广人列表表格（用户名、昵称、注册时间、是否已充值）
|
||
|
||
**4. 福利记录 Tab**
|
||
- 福利统计摘要（已领取总额、各类型数量）
|
||
- 福利领取记录表格（类型、金额、时间）
|
||
|
||
**5. 交易记录 Tab**
|
||
- 最近交易订单列表（时间、币种、方向、价格、数量、金额）
|
||
|
||
### 三、前端 API 层
|
||
|
||
**文件**: `monisuo-admin/src/services/api/monisuo-admin.api.ts`
|
||
|
||
新增 `useGetUserStatsQuery(userId)` composable，调用 `/admin/user/stats` 接口。
|
||
|
||
## 实现步骤
|
||
|
||
1. **后端** - 在 `AssetService` 中新增 `getUserStats(userId)` 方法
|
||
2. **后端** - 在 `AdminController` 中新增 `/admin/user/stats` 接口
|
||
3. **前端** - 在 `monisuo-admin.api.ts` 中新增 API composable
|
||
4. **前端** - 重构 `users.vue` 详情弹窗为多标签页数据面板
|
||
|
||
## 文件变更清单
|
||
|
||
| 文件 | 操作 |
|
||
|------|------|
|
||
| `src/.../service/AssetService.java` | 新增 `getUserStats()` 方法 |
|
||
| `src/.../controller/AdminController.java` | 新增 `/admin/user/stats` 接口 |
|
||
| `monisuo-admin/src/services/api/monisuo-admin.api.ts` | 新增 `useGetUserStatsQuery` |
|
||
| `monisuo-admin/src/pages/monisuo/users.vue` | 重构详情弹窗 |
|