template-10560/src/dealer/customer

客户管理页面

功能概述

这是一个完整的客户管理页面，支持客户数据的展示、筛选和搜索功能。

主要功能

1. 数据源

• 使用 pageUsers API 从 User 表读取客户数据
• 支持按状态筛选用户（status: 0 表示正常状态）

2. 状态管理

客户状态包括：

• 全部 - 显示所有客户
• 跟进中 - 正在跟进的潜在客户
• 已签约 - 已经签约的客户
• 已取消 - 已取消合作的客户

3. 顶部Tabs筛选

• 支持按客户状态筛选
• 显示每个状态的客户数量统计
• 实时更新统计数据

4. 搜索功能

支持多字段搜索：

• 客户姓名（realName）
• 昵称（nickname）
• 用户名（username）
• 手机号（phone）
• 用户ID（userId）

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  # 客户状态工具函数