feat(dealer): 添加客户列表功能并优化邀请流程

- 新增客户列表页面,实现客户数据获取和筛选功能
- 添加客户状态管理工具函数
- 优化邀请流程,支持绑定推荐关系
- 调整提现功能,增加调试组件
- 修复申请经销商功能中的推荐人ID逻辑
This commit is contained in:
2025-09-03 10:41:06 +08:00
parent 7834124095
commit 0b43a3bc92
18 changed files with 1286 additions and 934 deletions

View File

@@ -0,0 +1,108 @@
# 客户管理页面
## 功能概述
这是一个完整的客户管理页面,支持客户数据的展示、筛选和搜索功能。
## 主要功能
### 1. 数据源
- 使用 `pageUsers` API 从 User 表读取客户数据
- 支持按状态筛选用户status: 0 表示正常状态)
### 2. 状态管理
客户状态包括:
- **全部** - 显示所有客户
- **跟进中** - 正在跟进的潜在客户
- **已签约** - 已经签约的客户
- **已取消** - 已取消合作的客户
### 3. 顶部Tabs筛选
- 支持按客户状态筛选
- 显示每个状态的客户数量统计
- 实时更新统计数据
### 4. 搜索功能
支持多字段搜索:
- 客户姓名realName
- 昵称nickname
- 用户名username
- 手机号phone
- 用户IDuserId
### 5. 客户信息展示
每个客户卡片显示:
- 客户姓名和状态标签
- 手机号码
- 注册时间
- 用户ID、余额、积分等统计信息
## 技术实现
### 组件结构
```
CustomerManagement
├── 搜索栏 (SearchBar)
├── 状态筛选Tabs
└── 客户列表
└── 客户卡片项
```
### 主要状态
- `list`: 客户数据列表
- `loading`: 加载状态
- `activeTab`: 当前选中的状态Tab
- `searchValue`: 搜索关键词
### 工具函数
使用 `@/utils/customerStatus` 工具函数管理客户状态:
- `getStatusText()`: 获取状态文本
- `getStatusTagType()`: 获取状态标签类型
- `getStatusOptions()`: 获取状态选项列表
## 使用的组件
### NutUI 组件
- `Tabs` / `TabPane`: 状态筛选标签页
- `SearchBar`: 搜索输入框
- `Tag`: 状态标签
- `Loading`: 加载指示器
- `Space`: 间距布局
### 图标
- `Phone`: 手机号图标
- `User`: 用户图标
## 数据流
1. 页面初始化时调用 `fetchCustomerData()` 获取用户数据
2. 为每个用户添加客户状态(目前使用随机状态,实际项目中应从数据库获取)
3. 根据当前Tab和搜索条件筛选数据
4. 渲染客户列表
## 注意事项
### 临时实现
- 当前使用 `getRandomStatus()` 生成随机客户状态
- 实际项目中应该:
1. 在数据库中添加客户状态字段
2. 修改后端API返回真实的客户状态
3. 删除随机状态生成函数
### 扩展建议
1. 添加客户详情页面
2. 支持客户状态的修改操作
3. 添加客户添加/编辑功能
4. 支持批量操作
5. 添加导出功能
6. 支持更多筛选条件(注册时间、地区等)
## 文件结构
```
src/dealer/customer/
├── index.tsx # 主页面组件
└── README.md # 说明文档
src/utils/
└── customerStatus.ts # 客户状态工具函数
```