Browse Source

refactor(user/order): 优化订单列表筛选逻辑和性能

- 在设置状态栏高度时增加空值合并操作,避免潜在的 null错误
- 移除了未使用的导入语句,减少代码冗余
- 重构了订单列表的搜索和筛选逻辑:
  - 调整了搜索条件的合并方式,确保 tab 的 statusFilter 优先级最高
  -优化了 useEffect 监听的搜索参数,只在关键词等其他条件变化时重新加载
  -简化了 tab 切换逻辑,提高了代码可读性
master
科技小王子 2 weeks ago
parent
commit
f564703e51
  1. 56
      src/user/order/components/OrderList.tsx
  2. 2
      src/user/order/order.tsx

56
src/user/order/components/OrderList.tsx

@ -4,7 +4,7 @@ import {View} from '@tarojs/components'
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import {InfiniteLoading} from '@nutui/nutui-react-taro' import {InfiniteLoading} from '@nutui/nutui-react-taro'
import dayjs from "dayjs"; 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 {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
import {listShopOrderGoods} from "@/api/shop/shopOrderGoods"; import {listShopOrderGoods} from "@/api/shop/shopOrderGoods";
import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model"; import {ShopOrderGoods} from "@/api/shop/shopOrderGoods/model";
@ -171,10 +171,12 @@ function OrderList(props: OrderListProps) {
setError(null); // 清除之前的错误 setError(null); // 清除之前的错误
const currentPage = resetPage ? 1 : (targetPage || page); const currentPage = resetPage ? 1 : (targetPage || page);
const statusParams = getOrderStatusParams(tapIndex); const statusParams = getOrderStatusParams(tapIndex);
// 合并搜索条件,tab的statusFilter优先级更高
const searchConditions = { const searchConditions = {
page: currentPage, page: currentPage,
...statusParams,
...props.searchParams
userId: statusParams.userId, // 用户ID
...props.searchParams, // 搜索关键词等其他条件
statusFilter: statusParams.statusFilter // tab的statusFilter优先级最高
}; };
console.log('订单筛选条件:', { console.log('订单筛选条件:', {
tapIndex, tapIndex,
@ -305,32 +307,24 @@ function OrderList(props: OrderListProps) {
}, [tapIndex]); // 监听tapIndex变化 }, [tapIndex]); // 监听tapIndex变化
useEffect(() => { useEffect(() => {
// 当外部传入的statusFilter改变时,更新对应的tab索引
if (props.searchParams?.statusFilter !== undefined) {
let targetTabIndex = 0;
// 如果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;
}
console.log('searchParams变化:', {
statusFilter: props.searchParams.statusFilter,
currentTapIndex: tapIndex,
targetTabIndex,
shouldUpdate: targetTabIndex !== tapIndex
});
// 当外部传入的搜索参数变化时(不包括statusFilter,因为tab切换会处理)
// 只有当搜索关键词等其他条件变化时才重新加载
const { statusFilter, ...otherParams } = props.searchParams || {};
// 检查是否有除statusFilter外的其他搜索条件变化
const hasOtherSearchParams = Object.keys(otherParams).some(key =>
otherParams[key] !== undefined && otherParams[key] !== ''
);
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 ( return (
<> <>
@ -347,12 +341,12 @@ function OrderList(props: OrderListProps) {
}} }}
value={tapIndex} value={tapIndex}
onChange={(paneKey) => { onChange={(paneKey) => {
console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title);
console.log('Tab切换到:', paneKey, '对应状态:', tabs[paneKey]?.title, 'statusFilter:', tabs[paneKey]?.statusFilter);
setTapIndex(paneKey) setTapIndex(paneKey)
}} }}
> >
{ {
tabs?.map((item, index) => {
tabs?.map((item, _) => {
return ( return (
<TabPane <TabPane
key={item.index} key={item.index}
@ -391,9 +385,9 @@ function OrderList(props: OrderListProps) {
</> </>
} }
loadMoreText={ loadMoreText={
<>
<View className={'h-24'}>
</>
</View>
} }
> >
{list?.map((item, index) => { {list?.map((item, index) => {

2
src/user/order/order.tsx

@ -55,7 +55,7 @@ function Order() {
// 获取状态栏高度 // 获取状态栏高度
Taro.getSystemInfo({ Taro.getSystemInfo({
success: (res) => { success: (res) => {
setStatusBarHeight(res.statusBarHeight)
setStatusBarHeight(res.statusBarHeight ?? 0)
}, },
}) })
// 设置导航栏标题 // 设置导航栏标题

Loading…
Cancel
Save