修复已知问题
This commit is contained in:
47
src/pages/order/components/OrderSearch.scss
Normal file
47
src/pages/order/components/OrderSearch.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.order-search {
|
||||
.search-bar {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.filter-popup {
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修复Radio按钮样式
|
||||
.nut-radio {
|
||||
&.nut-radio--button {
|
||||
margin: 2px;
|
||||
|
||||
.nut-radio__label {
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 修复Input样式
|
||||
.nut-input {
|
||||
&.bg-transparent {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.border-none {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
266
src/pages/order/components/OrderSearch.tsx
Normal file
266
src/pages/order/components/OrderSearch.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from '@tarojs/components';
|
||||
import {
|
||||
Input,
|
||||
Button,
|
||||
Popup,
|
||||
Cell,
|
||||
CellGroup,
|
||||
Radio,
|
||||
Space,
|
||||
DatePicker,
|
||||
Picker
|
||||
} from '@nutui/nutui-react-taro';
|
||||
import { Search, Filter, Close } from '@nutui/icons-react-taro';
|
||||
import { ShopOrderParam } from '@/api/shop/shopOrder/model';
|
||||
import dayjs from 'dayjs';
|
||||
import './OrderSearch.scss';
|
||||
|
||||
interface OrderSearchProps {
|
||||
onSearch: (params: ShopOrderParam) => void;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
// 订单状态选项
|
||||
const orderStatusOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '未使用', value: 0 },
|
||||
{ text: '已完成', value: 1 },
|
||||
{ text: '已取消', value: 2 },
|
||||
{ text: '取消中', value: 3 },
|
||||
{ text: '退款申请中', value: 4 },
|
||||
{ text: '退款被拒绝', value: 5 },
|
||||
{ text: '退款成功', value: 6 },
|
||||
{ text: '客户端申请退款', value: 7 }
|
||||
];
|
||||
|
||||
// 支付状态选项
|
||||
const payStatusOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '未付款', value: 0 },
|
||||
{ text: '已付款', value: 1 }
|
||||
];
|
||||
|
||||
// 支付方式选项
|
||||
const payTypeOptions = [
|
||||
{ text: '全部', value: '' },
|
||||
{ text: '余额支付', value: 0 },
|
||||
{ text: '微信支付', value: 1 },
|
||||
{ text: '会员卡支付', value: 2 },
|
||||
{ text: '支付宝', value: 3 },
|
||||
{ text: '现金', value: 4 },
|
||||
{ text: 'POS机', value: 5 }
|
||||
];
|
||||
|
||||
const OrderSearch: React.FC<OrderSearchProps> = ({ onSearch, onReset }) => {
|
||||
const [showFilter, setShowFilter] = useState(false);
|
||||
const [searchParams, setSearchParams] = useState<ShopOrderParam>({
|
||||
keywords: '',
|
||||
orderNo: '',
|
||||
phone: '',
|
||||
orderStatus: undefined,
|
||||
payStatus: undefined,
|
||||
payType: undefined
|
||||
});
|
||||
|
||||
// 搜索关键词
|
||||
const handleKeywordSearch = () => {
|
||||
if (!searchParams.keywords?.trim()) {
|
||||
return;
|
||||
}
|
||||
onSearch({ keywords: searchParams.keywords.trim() });
|
||||
};
|
||||
|
||||
// 重置搜索条件
|
||||
const handleReset = () => {
|
||||
setSearchParams({
|
||||
keywords: '',
|
||||
orderNo: '',
|
||||
phone: '',
|
||||
orderStatus: undefined,
|
||||
payStatus: undefined,
|
||||
payType: undefined
|
||||
});
|
||||
onReset();
|
||||
};
|
||||
|
||||
// 应用筛选条件
|
||||
const handleFilter = () => {
|
||||
const filterParams: ShopOrderParam = {};
|
||||
|
||||
if (searchParams.orderNo?.trim()) {
|
||||
filterParams.orderNo = searchParams.orderNo.trim();
|
||||
}
|
||||
if (searchParams.phone?.trim()) {
|
||||
filterParams.phone = searchParams.phone.trim();
|
||||
}
|
||||
if (searchParams.orderStatus !== undefined && searchParams.orderStatus !== '') {
|
||||
filterParams.orderStatus = Number(searchParams.orderStatus);
|
||||
}
|
||||
if (searchParams.payStatus !== undefined && searchParams.payStatus !== '') {
|
||||
filterParams.payStatus = Number(searchParams.payStatus);
|
||||
}
|
||||
if (searchParams.payType !== undefined && searchParams.payType !== '') {
|
||||
filterParams.payType = Number(searchParams.payType);
|
||||
}
|
||||
|
||||
onSearch(filterParams);
|
||||
setShowFilter(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="order-search">
|
||||
{/* 搜索栏 */}
|
||||
<View className="search-bar flex items-center p-3 bg-white">
|
||||
<View className="flex-1 flex items-center bg-gray-100 rounded-full px-3 py-2">
|
||||
<Search size={16} className="text-gray-400 mr-2" />
|
||||
<Input
|
||||
placeholder="搜索订单号、商品名称"
|
||||
value={searchParams.keywords}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, keywords: value }))}
|
||||
onConfirm={handleKeywordSearch}
|
||||
className="flex-1 bg-transparent border-none"
|
||||
style={{ padding: 0 }}
|
||||
/>
|
||||
</View>
|
||||
<Button
|
||||
type="primary"
|
||||
size={'large'}
|
||||
className="ml-2"
|
||||
onClick={handleKeywordSearch}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<View
|
||||
className="ml-2 p-2 flex items-center justify-center"
|
||||
onClick={() => setShowFilter(true)}
|
||||
>
|
||||
<Filter size={18} className="text-gray-600" />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 筛选弹窗 */}
|
||||
<Popup
|
||||
visible={showFilter}
|
||||
position="right"
|
||||
onClose={() => setShowFilter(false)}
|
||||
style={{ width: '80%', height: '100%' }}
|
||||
>
|
||||
<View className="filter-popup h-full flex flex-col">
|
||||
{/* 头部 */}
|
||||
<View className="flex items-center justify-between p-4 border-b">
|
||||
<View className="text-lg font-medium">筛选条件</View>
|
||||
<Close size={20} onClick={() => setShowFilter(false)} />
|
||||
</View>
|
||||
|
||||
{/* 筛选内容 */}
|
||||
<View className="flex-1 overflow-y-auto">
|
||||
<CellGroup>
|
||||
{/* 订单号 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">订单号</View>
|
||||
<Input
|
||||
placeholder="请输入订单号"
|
||||
value={searchParams.orderNo}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, orderNo: value }))}
|
||||
/>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 手机号 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">手机号</View>
|
||||
<Input
|
||||
placeholder="请输入手机号"
|
||||
value={searchParams.phone}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, phone: value }))}
|
||||
/>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 订单状态 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">订单状态</View>
|
||||
<Radio.Group
|
||||
value={searchParams.orderStatus}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, orderStatus: value }))}
|
||||
>
|
||||
<View className="grid grid-cols-2 gap-2">
|
||||
{orderStatusOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 支付状态 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">支付状态</View>
|
||||
<Radio.Group
|
||||
value={searchParams.payStatus}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, payStatus: value }))}
|
||||
>
|
||||
<View className="flex flex-wrap gap-2">
|
||||
{payStatusOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
|
||||
{/* 支付方式 */}
|
||||
<Cell>
|
||||
<View className="w-full">
|
||||
<View className="text-sm text-gray-600 mb-2">支付方式</View>
|
||||
<Radio.Group
|
||||
value={searchParams.payType}
|
||||
onChange={(value) => setSearchParams(prev => ({ ...prev, payType: value }))}
|
||||
>
|
||||
<View className="grid grid-cols-2 gap-2">
|
||||
{payTypeOptions.map((option) => (
|
||||
<Radio key={option.value} value={option.value} shape="button">
|
||||
{option.text}
|
||||
</Radio>
|
||||
))}
|
||||
</View>
|
||||
</Radio.Group>
|
||||
</View>
|
||||
</Cell>
|
||||
</CellGroup>
|
||||
</View>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<View className="p-4 border-t">
|
||||
<Space className="w-full">
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={handleReset}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
className="flex-1"
|
||||
onClick={handleFilter}
|
||||
>
|
||||
确定
|
||||
</Button>
|
||||
</Space>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderSearch;
|
||||
176
订单筛选查询功能说明.md
Normal file
176
订单筛选查询功能说明.md
Normal file
@@ -0,0 +1,176 @@
|
||||
# 订单筛选及查询功能实现说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
为订单页面实现了完整的筛选及查询功能，包括关键词搜索、状态筛选、支付方式筛选等多种筛选条件。
|
||||
|
||||
## 实现的功能
|
||||
|
||||
### 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. 测试搜索性能，特别是大数据量情况下
|
||||
Reference in New Issue
Block a user