时里院子市集

5.5 KiB

Raw Blame History

订单筛选及查询功能实现说明

功能概述

为订单页面实现了完整的筛选及查询功能，包括关键词搜索、状态筛选、支付方式筛选等多种筛选条件。

实现的功能

1. 关键词搜索

支持按订单号搜索
支持按商品名称搜索
实时搜索，按回车键或点击搜索按钮触发

2. Tabs订单状态筛选 ✅ 已修复完成 + 排除已取消订单

全部订单 - 显示所有订单 (不添加筛选条件)
待付款 - 筛选未付款且未取消的订单 (payStatus = 0, 排除已取消)
待发货 - 筛选已付款但未发货且未取消的订单 (payStatus = 1, deliveryStatus = 10, 排除已取消)
待收货 - 筛选已发货且未取消的订单 (deliveryStatus = 20, 排除已取消)
已完成 - 筛选已完成订单 (orderStatus = 1)
已取消 - 筛选已取消/退款的订单 (orderStatus = 2,3,4,6,7)

3. 已取消订单状态说明

为了避免已取消的订单出现在正常流程的tab中，系统会自动排除以下状态的订单：

orderStatus = 2: 已取消
orderStatus = 3: 取消中
orderStatus = 4: 退款申请中
orderStatus = 6: 退款成功
orderStatus = 7: 客户端申请退款

4. 后端筛选逻辑对应关系

根据实际的API参数，各tab对应的筛选逻辑如下：

Tab索引	Tab名称	API参数	前端筛选	说明
0	全部订单	无额外参数	无	显示所有订单
1	待付款	`payStatus=0`	排除已取消	未付款且未取消的订单
2	待发货	`payStatus=1&deliveryStatus=10`	排除已取消	已付款但未发货且未取消
3	待收货	`deliveryStatus=20`	排除已取消	已发货且未取消
4	已完成	`orderStatus=1`	无	订单已完成
5	已取消	无额外参数	只显示已取消	已取消/退款的订单

4. Tabs功能特性

点击不同tab自动筛选对应状态的订单
使用后端标准的statusFilter参数
显示当前筛选状态和订单数量
加载状态指示器
平滑的切换动画效果

3. 支付状态筛选

全部
未付款
已付款

4. 支付方式筛选

全部
余额支付
微信支付
会员卡支付
支付宝
现金
POS机

文件结构

src/pages/order/
├── order.tsx                    # 主订单页面
├── components/
│   ├── OrderList.tsx           # 订单列表组件
│   ├── OrderSearch.tsx         # 搜索筛选组件
│   └── OrderSearch.scss        # 搜索组件样式
└── order.scss                  # 订单页面样式

主要修改

1. 扩展API接口参数

在 src/api/shop/shopOrder/model/index.ts 中扩展了 ShopOrderParam 接口
添加了 deliveryStatus 字段支持发货状态筛选

2. 更新订单页面 (order.tsx)

添加搜索状态管理
集成搜索组件
实现搜索和重置功能
将搜索参数传递给订单列表组件

3. 更新订单列表组件 (OrderList.tsx) ✅ 重点修复

修复tabs筛选逻辑 - 解决tapIndex类型不匹配问题
完善筛选参数映射 - 每个tab对应正确的API筛选条件
添加筛选状态提示 - 显示当前筛选的tab和订单数量
优化用户体验 - 添加加载状态和视觉反馈
支持搜索参数 - 监听搜索参数变化并重新加载数据
调试信息 - 添加console.log便于调试筛选逻辑

4. 创建搜索组件 (OrderSearch.tsx)

实现关键词搜索界面
实现高级筛选弹窗
支持多种筛选条件组合
响应式设计，适配移动端

5. 样式优化

优化tabs的视觉效果
添加筛选提示的动画效果
改进搜索框的样式和交互

使用方法

基础搜索

点击导航栏的搜索图标或筛选图标
在搜索框中输入订单号或商品名称
按回车键或点击搜索按钮

高级筛选

点击筛选图标打开筛选弹窗
选择需要的筛选条件：
- 输入具体订单号
- 输入手机号
- 选择订单状态
- 选择支付状态
- 选择支付方式
点击确定按钮应用筛选

重置搜索

点击重置按钮清空所有搜索条件
返回显示所有订单

技术特点

1. 类型安全

使用TypeScript确保类型安全
定义了完整的接口类型

2. 组件化设计

搜索功能独立封装为组件
便于维护和复用

3. 响应式设计

适配移动端界面
使用Tailwind CSS实现响应式布局

4. 用户体验优化

实时搜索反馈
清晰的筛选界面
便捷的重置功能

扩展建议

1. 日期范围筛选

可以添加订单创建时间、支付时间等日期范围筛选功能。

2. 金额范围筛选

支持按订单金额范围进行筛选。

3. 商户筛选

如果有多商户，可以添加按商户筛选的功能。

4. 搜索历史

保存用户的搜索历史，提供快速搜索选项。

5. 导出功能

支持将筛选结果导出为Excel或PDF格式。

注意事项

搜索功能依赖后端API支持相应的查询参数
筛选条件会影响分页加载，需要在切换筛选条件时重置页码
建议在生产环境中添加搜索防抖功能，避免频繁请求
可以考虑添加搜索结果缓存，提升用户体验

测试建议

测试各种搜索条件的组合
测试搜索结果的准确性
测试重置功能是否正常
测试在不同设备上的显示效果
测试搜索性能，特别是大数据量情况下

5.5 KiB Raw Blame History