template-10560/docs/客户交易页面上拉加载功能实现说明.md

客户交易页面上拉加载更多功能实现说明

概述

为 src/dealer/customer/trading.tsx 页面添加了完善的上拉加载更多功能，参考了客户管理模块和订单管理模块的成熟实现。

主要修改内容

1. 导入必要的组件

import Taro from '@tarojs/taro'
import {Loading, InfiniteLoading, Empty, Space, SearchBar} from '@nutui/nutui-react-taro'

2. 添加状态管理

const [page, setPage] = useState(1)
const [hasMore, setHasMore] = useState(true)

3. 优化数据获取函数 fetchCustomerData

• 新增参数：
  • resetPage: 是否重置页码（用于初始化或搜索）
  • targetPage: 目标页码（用于加载更多）
  • searchKeyword: 搜索关键词（支持服务端搜索）
• 改进逻辑：
  • 支持重置页面和追加数据两种模式
  • 正确处理页码状态
  • 添加错误处理和用户提示
  • 支持服务端搜索功能

4. 实现 reloadMore 函数

const reloadMore = async () => {
  if (loading || !hasMore) return; // 防止重复加载
  const nextPage = page + 1;
  await fetchCustomerData(false, nextPage, searchValue);
}

5. 优化搜索功能

• 服务端搜索：将搜索逻辑从客户端过滤改为服务端搜索
• 搜索处理函数：

  const handleSearch = (keyword: string) => {
    setSearchValue(keyword);
    setList([]);
    setPage(1);
    setHasMore(true);
    fetchCustomerData(true, 1, keyword);
  };
  

• 清空搜索：

  const handleClearSearch = () => {
    setSearchValue('');
    setList([]);
    setPage(1);
    setHasMore(true);
    fetchCustomerData(true, 1, '');
  };
  

6. 改进UI渲染

• InfiniteLoading组件：
  • 设置合适的容器高度（75vh）
  • 优化加载状态显示
  • 改进空数据状态展示
  • 添加滚动容器样式

7. 简化数据过滤

由于现在使用服务端搜索，简化了 getFilteredList 函数：

const getFilteredList = () => {
  return list; // 直接返回列表，不需要客户端过滤
};

核心功能特性

✅ 上拉加载更多

• 滚动到底部自动触发加载下一页数据
• 防止重复加载机制
• 正确的页码管理

✅ 服务端搜索

• 搜索关键词通过API参数传递给后端
• 搜索时重置列表和页码
• 支持清空搜索功能

✅ 错误处理

• 网络请求失败时显示错误提示
• 加载失败时不影响现有数据

✅ 加载状态

• 首次加载显示loading状态
• 加载更多时显示"加载中..."
• 无更多数据时显示"没有更多了"

✅ 空数据处理

• 无数据时显示友好的空状态提示
• 区分加载中和真正的无数据状态

与其他页面的区别

相比客户管理模块

• 搜索方式：使用服务端搜索而非客户端过滤
• 数据类型：专门处理交易客户数据（type: 3）
• 无Tab切换：简化了状态管理逻辑

相比订单管理模块

• 更简洁的实现：没有复杂的状态筛选
• 专注搜索：主要功能是搜索和分页

API参数说明

const params: any = {
  type: 3,           // 交易客户类型
  page: currentPage, // 当前页码
  keywords: searchKeyword // 搜索关键词（可选）
};

使用方式

1. 进入客户交易页面
2. 滚动到列表底部自动加载更多数据
3. 使用搜索框搜索特定客户
4. 点击清空按钮清除搜索条件

技术栈

• React + TypeScript
• Taro框架
• NutUI组件库
• InfiniteLoading组件实现上拉加载
• SearchBar组件实现搜索功能

注意事项

• 每页默认加载10条数据
• 当返回数据少于10条时认为没有更多数据
• 搜索功能使用服务端搜索，提高性能
• 所有状态变化都会正确重置页码和列表数据