From e4e66597528d885bab2d8055ec2e47fd2847b9ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 28 Aug 2025 00:37:29 +0800 Subject: [PATCH] =?UTF-8?q?refactor(dealer/orders):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2=E6=94=AF=E6=8C=81=E5=88=86?= =?UTF-8?q?=E9=A1=B5=E5=92=8C=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加下拉刷新和上拉加载更多功能 -优化订单数据获取逻辑，支持分页请求 - 移除不必要的订单统计和层级信息 -调整订单列表渲染方式，提高性能 --- src/dealer/orders/index.tsx | 210 ++++++++++++++++-------------------- 1 file changed, 92 insertions(+), 118 deletions(-) diff --git a/src/dealer/orders/index.tsx b/src/dealer/orders/index.tsx index b6d7a88..f3b6bbf 100644 --- a/src/dealer/orders/index.tsx +++ b/src/dealer/orders/index.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect, useCallback} from 'react' -import {View, Text} from '@tarojs/components' -import {Empty, Tag, Space, PullToRefresh, Loading} from '@nutui/nutui-react-taro' +import {View, Text, ScrollView} from '@tarojs/components' +import {Empty, Tag, PullToRefresh, Loading} from '@nutui/nutui-react-taro' import Taro from '@tarojs/taro' import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder' import {useDealerUser} from '@/hooks/useDealerUser' @@ -9,84 +9,54 @@ import type {ShopDealerOrder} from '@/api/shop/shopDealerOrder/model' interface OrderWithDetails extends ShopDealerOrder { orderNo?: string customerName?: string - totalCommission?: string - // 当前用户在此订单中的层级和佣金 - userLevel?: 1 | 2 | 3 userCommission?: string } const DealerOrders: React.FC = () => { const [loading, setLoading] = useState(false) + const [refreshing, setRefreshing] = useState(false) + const [loadingMore, setLoadingMore] = useState(false) const [orders, setOrders] = useState([]) + const [currentPage, setCurrentPage] = useState(1) + const [hasMore, setHasMore] = useState(true) const {dealerUser} = useDealerUser() - // 获取订单数据 - 查询当前用户作为各层级分销商的所有订单 - const fetchOrders = useCallback(async () => { + // 获取订单数据 + const fetchOrders = useCallback(async (page: number = 1, isRefresh: boolean = false) => { if (!dealerUser?.userId) return try { - setLoading(true) - - // 并行查询三个层级的订单 - const [level1Result] = await Promise.all([ - // 一级分销商订单 - pageShopDealerOrder({ - page: 1, - limit: 10 - }) - ]) - - const allOrders: OrderWithDetails[] = [] - const stats = { - totalOrders: 0, - totalCommission: '0.00', - pendingCommission: '0.00', - level1: {orders: 0, commission: '0.00'}, - level2: {orders: 0, commission: '0.00'}, - level3: {orders: 0, commission: '0.00'} + if (isRefresh) { + setRefreshing(true) + } else if (page === 1) { + setLoading(true) + } else { + setLoadingMore(true) } - // 处理一级分销订单 - if (level1Result?.list) { - const level1Orders = level1Result.list.map(order => ({ + const result = await pageShopDealerOrder({ + page, + limit: 10 + }) + + if (result?.list) { + const newOrders = result.list.map(order => ({ ...order, orderNo: `${order.orderId}`, customerName: `用户${order.userId}`, - userLevel: 1 as const, - userCommission: order.firstMoney || '0.00', - totalCommission: ( - parseFloat(order.firstMoney || '0') + - parseFloat(order.secondMoney || '0') + - parseFloat(order.thirdMoney || '0') - ).toFixed(2) + userCommission: order.firstMoney || '0.00' })) - allOrders.push(...level1Orders) - stats.level1.orders = level1Orders.length - stats.level1.commission = level1Orders.reduce((sum, order) => - sum + parseFloat(order.userCommission || '0'), 0 - ).toFixed(2) - } + if (page === 1) { + setOrders(newOrders) + } else { + setOrders(prev => [...prev, ...newOrders]) + } - // 去重（同一个订单可能在多个层级中出现） - const uniqueOrders = allOrders.filter((order, index, self) => - index === self.findIndex(o => o.orderId === order.orderId) - ) - - // 计算总统计 - stats.totalOrders = uniqueOrders.length - stats.totalCommission = ( - parseFloat(stats.level1.commission) + - parseFloat(stats.level2.commission) + - parseFloat(stats.level3.commission) - ).toFixed(2) - stats.pendingCommission = allOrders - .filter(order => order.isSettled === 0) - .reduce((sum, order) => sum + parseFloat(order.userCommission || '0'), 0) - .toFixed(2) - - setOrders(uniqueOrders) + setHasMore(newOrders.length === 10) + setCurrentPage(page) + } } catch (error) { console.error('获取分销订单失败:', error) @@ -96,18 +66,27 @@ const DealerOrders: React.FC = () => { }) } finally { setLoading(false) + setRefreshing(false) + setLoadingMore(false) } }, [dealerUser?.userId]) - // 刷新数据 + // 下拉刷新 const handleRefresh = async () => { - await fetchOrders() + await fetchOrders(1, true) + } + + // 加载更多 + const handleLoadMore = async () => { + if (!loadingMore && hasMore) { + await fetchOrders(currentPage + 1) + } } // 初始化加载数据 useEffect(() => { if (dealerUser?.userId) { - fetchOrders().then() + fetchOrders(1) } }, [fetchOrders]) @@ -126,34 +105,21 @@ const DealerOrders: React.FC = () => { const renderOrderItem = (order: OrderWithDetails) => ( - - - 订单号：{order.orderNo} - - {/* 显示用户在此订单中的层级 */} - {/**/} - {/* {order.userLevel === 1 && '一级分销'}*/} - {/* {order.userLevel === 2 && '二级分销'}*/} - {/* {order.userLevel === 3 && '三级分销'}*/} - {/**/} - + + 订单号：{order.orderNo} + {getStatusText(order.isSettled, order.isInvalid)} - - - 订单金额：¥{order.orderPrice || '0.00'} - - - 我的佣金：¥{order.userCommission} - - {/**/} - {/* 总佣金：¥{order.totalCommission}*/} - {/**/} - + + 订单金额：¥{order.orderPrice || '0.00'} + + + 我的佣金：¥{order.userCommission} + @@ -167,26 +133,6 @@ const DealerOrders: React.FC = () => { ) - // 根据状态和层级过滤订单 - const getFilteredOrders = (filter: string) => { - switch (filter) { - case '1': // 一级分销 - return orders.filter(order => order.userLevel === 1) - case '2': // 二级分销 - return orders.filter(order => order.userLevel === 2) - case '3': // 三级分销 - return orders.filter(order => order.userLevel === 3) - case '4': // 待结算 - return orders.filter(order => order.isSettled === 0 && order.isInvalid === 0) - case '5': // 已结算 - return orders.filter(order => order.isSettled === 1) - case '6': // 已失效 - return orders.filter(order => order.isInvalid === 1) - default: // 全部 - return orders - } - } - if (!dealerUser) { return ( @@ -197,20 +143,48 @@ const DealerOrders: React.FC = () => { } return ( - - {/* 订单列表 */} - - {loading ? ( - - - 加载中... + + + + + {loading && orders.length === 0 ? ( + + + 加载中... + + ) : orders.length > 0 ? ( + <> + {orders.map(renderOrderItem)} + {loadingMore && ( + + + 加载更多... + + )} + {!hasMore && orders.length > 0 && ( + + 没有更多数据了 + + )} + + ) : ( + + )} - ) : getFilteredOrders('0').length > 0 ? ( - getFilteredOrders('0').map(renderOrderItem) - ) : ( - - )} - + + ) }