feat(dealer/customer): 实现客户列表的无限滚动和搜索功能- 在客户列表页面添加 InfiniteLoading 组件,实现无限滚动加载- 添加搜索功能,支持按关键词搜索客户

- 优化数据加载逻辑,解决重复请求问题
- 在 Header 组件中增加用户登录状态和信息的检查
This commit is contained in:
2025-09-06 10:29:58 +08:00
parent 6f799e6775
commit 3077b44344
5 changed files with 278 additions and 22 deletions

View File

@@ -0,0 +1,84 @@
# 客户管理模块上拉加载更多功能实现说明
## 概述
参考订单管理模块 `src/user/order/order.tsx` 的实现,为客户管理模块 `src/dealer/customer/index.tsx` 添加了完善的上拉加载更多功能。
## 主要修改内容
### 1. 优化数据获取函数 `fetchCustomerData`
- **新增参数**
- `resetPage`: 是否重置页码用于切换tab或刷新
- `targetPage`: 目标页码(用于加载更多)
- **改进逻辑**
- 支持重置页面和追加数据两种模式
- 正确处理页码状态
- 添加错误处理和用户提示
### 2. 改进 `reloadMore` 函数
- 防止重复加载(检查 `loading``hasMore` 状态)
- 正确计算下一页页码
- 调用优化后的 `fetchCustomerData` 函数
### 3. 优化状态管理
- **初始化数据**:使用 `resetPage=true` 确保从第一页开始
- **Tab切换**:清空列表、重置页码和加载状态,然后重新获取数据
- **取消操作**操作成功后重新加载当前tab数据
### 4. 改进UI渲染
- **InfiniteLoading组件**
- 设置合适的容器高度75vh
- 优化加载状态显示
- 改进空数据状态展示
- 添加滚动容器样式
### 5. 修复依赖问题
- 移除 `fetchCustomerData` 函数中的 `page``list` 依赖,避免无限循环
## 核心功能特性
### ✅ 上拉加载更多
- 滚动到底部自动触发加载下一页数据
- 防止重复加载机制
- 正确的页码管理
### ✅ Tab切换支持
- 切换tab时重置列表和页码
- 每个tab独立的数据加载
### ✅ 错误处理
- 网络请求失败时显示错误提示
- 加载失败时不影响现有数据
### ✅ 加载状态
- 首次加载显示loading状态
- 加载更多时显示"加载中..."
- 无更多数据时显示"没有更多了"
### ✅ 空数据处理
- 无数据时显示友好的空状态提示
- 区分加载中和真正的无数据状态
## 参考实现
本实现参考了订单管理模块 `src/user/order/components/OrderList.tsx` 的以下核心特性:
- `reload` 函数的 `resetPage``targetPage` 参数设计
- `reloadMore` 函数的防重复加载逻辑
- `InfiniteLoading` 组件的配置和样式
- 状态管理和错误处理机制
## 使用方式
1. 进入客户管理页面
2. 滚动到列表底部自动加载更多数据
3. 切换不同状态tab查看对应客户
4. 支持搜索功能(原有功能保持不变)
## 技术栈
- React + TypeScript
- Taro框架
- NutUI组件库
- InfiniteLoading组件实现上拉加载
## 注意事项
- 每页默认加载10条数据
- 当返回数据少于10条时认为没有更多数据
- 所有状态切换都会重置页码和列表数据
- 保持了原有的搜索和筛选功能