赵忠林
3d5b77ae51
- 新增文章添加/编辑页面（add.tsx） - 新增用户地址添加/编辑页面（add.tsx） - 新增经销商申请页面（add.tsx） - 添加相关配置文件（.editorconfig, .eslintrc, .gitignore）
177 lines
5.5 KiB
Markdown
177 lines
5.5 KiB
Markdown
# 订单筛选及查询功能实现说明
|
||
|
||
## 功能概述
|
||
|
||
为订单页面实现了完整的筛选及查询功能，包括关键词搜索、状态筛选、支付方式筛选等多种筛选条件。
|
||
|
||
## 实现的功能
|
||
|
||
### 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. 点击导航栏的搜索图标或筛选图标
|
||
2. 在搜索框中输入订单号或商品名称
|
||
3. 按回车键或点击搜索按钮
|
||
|
||
### 高级筛选
|
||
1. 点击筛选图标打开筛选弹窗
|
||
2. 选择需要的筛选条件：
|
||
- 输入具体订单号
|
||
- 输入手机号
|
||
- 选择订单状态
|
||
- 选择支付状态
|
||
- 选择支付方式
|
||
3. 点击确定按钮应用筛选
|
||
|
||
### 重置搜索
|
||
- 点击重置按钮清空所有搜索条件
|
||
- 返回显示所有订单
|
||
|
||
## 技术特点
|
||
|
||
### 1. 类型安全
|
||
- 使用TypeScript确保类型安全
|
||
- 定义了完整的接口类型
|
||
|
||
### 2. 组件化设计
|
||
- 搜索功能独立封装为组件
|
||
- 便于维护和复用
|
||
|
||
### 3. 响应式设计
|
||
- 适配移动端界面
|
||
- 使用Tailwind CSS实现响应式布局
|
||
|
||
### 4. 用户体验优化
|
||
- 实时搜索反馈
|
||
- 清晰的筛选界面
|
||
- 便捷的重置功能
|
||
|
||
## 扩展建议
|
||
|
||
### 1. 日期范围筛选
|
||
可以添加订单创建时间、支付时间等日期范围筛选功能。
|
||
|
||
### 2. 金额范围筛选
|
||
支持按订单金额范围进行筛选。
|
||
|
||
### 3. 商户筛选
|
||
如果有多商户，可以添加按商户筛选的功能。
|
||
|
||
### 4. 搜索历史
|
||
保存用户的搜索历史，提供快速搜索选项。
|
||
|
||
### 5. 导出功能
|
||
支持将筛选结果导出为Excel或PDF格式。
|
||
|
||
## 注意事项
|
||
|
||
1. 搜索功能依赖后端API支持相应的查询参数
|
||
2. 筛选条件会影响分页加载，需要在切换筛选条件时重置页码
|
||
3. 建议在生产环境中添加搜索防抖功能，避免频繁请求
|
||
4. 可以考虑添加搜索结果缓存，提升用户体验
|
||
|
||
## 测试建议
|
||
|
||
1. 测试各种搜索条件的组合
|
||
2. 测试搜索结果的准确性
|
||
3. 测试重置功能是否正常
|
||
4. 测试在不同设备上的显示效果
|
||
5. 测试搜索性能，特别是大数据量情况下
|