refactor(user/order): 优化订单列表筛选逻辑和性能
- 在设置状态栏高度时增加空值合并操作,避免潜在的 null错误 - 移除了未使用的导入语句,减少代码冗余 - 重构了订单列表的搜索和筛选逻辑: - 调整了搜索条件的合并方式,确保 tab 的 statusFilter 优先级最高 -优化了 useEffect 监听的搜索参数,只在关键词等其他条件变化时重新加载 -简化了 tab 切换逻辑,提高了代码可读性
This commit is contained in:
@@ -4,7 +4,7 @@ import {View} from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro';
|
||||
import {InfiniteLoading} from '@nutui/nutui-react-taro'
|
||||
import dayjs from "dayjs";
|
||||
import {pageShopOrder, removeShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
|
||||
import {pageShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
|
||||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
|
||||
import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
|
||||
@@ -171,10 +171,12 @@ function OrderList(props: OrderListProps) {
|
||||
setError(null); // 清除之前的错误
|
||||
const currentPage = resetPage ? 1 : (targetPage || page);
|
||||
const statusParams = getOrderStatusParams(tapIndex);
|
||||
// 合并搜索条件,tab的statusFilter优先级更高
|
||||
const searchConditions = {
|
||||
page: currentPage,
|
||||
...statusParams,
|
||||
...props.searchParams
|
||||
userId: statusParams.userId, // 用户ID
|
||||
...props.searchParams, // 搜索关键词等其他条件
|
||||
statusFilter: statusParams.statusFilter // tab的statusFilter优先级最高
|
||||
};
|
||||
console.log('订单筛选条件:', {
|
||||
tapIndex,
|
||||
@@ -305,32 +307,24 @@ function OrderList(props: OrderListProps) {
|
||||
}, [tapIndex]); // 监听tapIndex变化
|
||||
|
||||
useEffect(() => {
|
||||
// 当外部传入的statusFilter改变时,更新对应的tab索引
|
||||
if (props.searchParams?.statusFilter !== undefined) {
|
||||
let targetTabIndex = 0;
|
||||
// 当外部传入的搜索参数变化时(不包括statusFilter,因为tab切换会处理)
|
||||
// 只有当搜索关键词等其他条件变化时才重新加载
|
||||
const { statusFilter, ...otherParams } = props.searchParams || {};
|
||||
|
||||
// 如果statusFilter为-1,表示全部,对应index为0
|
||||
if (props.searchParams.statusFilter === -1) {
|
||||
targetTabIndex = 0;
|
||||
} else {
|
||||
const tab = tabs.find(t => t.statusFilter === props.searchParams?.statusFilter);
|
||||
targetTabIndex = tab ? tab.index : 0;
|
||||
}
|
||||
// 检查是否有除statusFilter外的其他搜索条件变化
|
||||
const hasOtherSearchParams = Object.keys(otherParams).some(key =>
|
||||
otherParams[key] !== undefined && otherParams[key] !== ''
|
||||
);
|
||||
|
||||
console.log('searchParams变化:', {
|
||||
statusFilter: props.searchParams.statusFilter,
|
||||
currentTapIndex: tapIndex,
|
||||
targetTabIndex,
|
||||
shouldUpdate: targetTabIndex !== tapIndex
|
||||
console.log('searchParams变化 (非statusFilter):', {
|
||||
otherParams,
|
||||
hasOtherSearchParams
|
||||
});
|
||||
|
||||
if (targetTabIndex !== tapIndex) {
|
||||
setTapIndex(targetTabIndex);
|
||||
return; // 避免重复调用reload
|
||||
if (hasOtherSearchParams) {
|
||||
reload(true).then(); // 只有其他搜索条件变化时才重新加载
|
||||
}
|
||||
}
|
||||
reload(true).then(); // 搜索参数变化时重置页码
|
||||
}, [props.searchParams]); // 监听搜索参数变化
|
||||
}, [props.searchParams?.keywords, props.searchParams?.orderNo]); // 只监听具体的搜索字段
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -347,12 +341,12 @@ function OrderList(props: OrderListProps) {
|
||||
}}
|
||||
value={tapIndex}
|
||||
onChange={(paneKey) => {
|
||||
console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title);
|
||||
console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title, 'statusFilter:', tabs[paneKey]?.statusFilter);
|
||||
setTapIndex(paneKey)
|
||||
}}
|
||||
>
|
||||
{
|
||||
tabs?.map((item, index) => {
|
||||
tabs?.map((item, _) => {
|
||||
return (
|
||||
<TabPane
|
||||
key={item.index}
|
||||
@@ -391,9 +385,9 @@ function OrderList(props: OrderListProps) {
|
||||
</>
|
||||
}
|
||||
loadMoreText={
|
||||
<>
|
||||
<View className={'h-24'}>
|
||||
没有更多了
|
||||
</>
|
||||
</View>
|
||||
}
|
||||
>
|
||||
{list?.map((item, index) => {
|
||||
|
||||
@@ -55,7 +55,7 @@ function Order() {
|
||||
// 获取状态栏高度
|
||||
Taro.getSystemInfo({
|
||||
success: (res) => {
|
||||
setStatusBarHeight(res.statusBarHeight)
|
||||
setStatusBarHeight(res.statusBarHeight ?? 0)
|
||||
},
|
||||
})
|
||||
// 设置导航栏标题
|
||||
|
||||
Reference in New Issue
Block a user