Browse Source

refactor(dealer): 精简订单列表和统计展示

- 移除了复杂的订单统计和分层展示逻辑
- 简化了订单列表的渲染结构- 调整了佣金统计卡片的样式
- 删除了未使用的 Space 组件导入
demo
科技小王子 1 month ago
parent
commit
a18393f9d6
  1. 14
      src/dealer/index.tsx
  2. 228
      src/dealer/orders/index.tsx

14
src/dealer/index.tsx

@ -131,28 +131,28 @@ const DealerIndex: React.FC = () => {
<View className="mb-4"> <View className="mb-4">
<Text className="font-semibold text-gray-800"></Text> <Text className="font-semibold text-gray-800"></Text>
</View> </View>
<View className="grid grid-cols-3 gap-4">
<View className="grid grid-cols-3 gap-3">
<View className="text-center p-3 rounded-lg" style={{ <View className="text-center p-3 rounded-lg" style={{
background: businessGradients.money.available background: businessGradients.money.available
}}> }}>
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.money)}
<Text className="text-lg font-bold mb-1 text-white">
{formatMoney(dealerUser.money)}
</Text> </Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text> <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text>
</View> </View>
<View className="text-center p-3 rounded-lg" style={{ <View className="text-center p-3 rounded-lg" style={{
background: businessGradients.money.frozen background: businessGradients.money.frozen
}}> }}>
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.freezeMoney)}
<Text className="text-lg font-bold mb-1 text-white">
{formatMoney(dealerUser.freezeMoney)}
</Text> </Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text> <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text>
</View> </View>
<View className="text-center p-3 rounded-lg" style={{ <View className="text-center p-3 rounded-lg" style={{
background: businessGradients.money.total background: businessGradients.money.total
}}> }}>
<Text className="text-2xl font-bold mb-1 text-white">
¥{formatMoney(dealerUser.totalMoney)}
<Text className="text-lg font-bold mb-1 text-white">
{formatMoney(dealerUser.totalMoney)}
</Text> </Text>
<Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text> <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}></Text>
</View> </View>

228
src/dealer/orders/index.tsx

@ -1,6 +1,6 @@
import React, {useState, useEffect, useCallback} from 'react' import React, {useState, useEffect, useCallback} from 'react'
import {View, Text} from '@tarojs/components' import {View, Text} from '@tarojs/components'
import { Empty, Tabs, Tag, PullToRefresh, Loading } from '@nutui/nutui-react-taro'
import {Empty, Tag, Space, PullToRefresh, Loading} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder' import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
import {useDealerUser} from '@/hooks/useDealerUser' import {useDealerUser} from '@/hooks/useDealerUser'
@ -16,18 +16,8 @@ interface OrderWithDetails extends ShopDealerOrder {
} }
const DealerOrders: React.FC = () => { const DealerOrders: React.FC = () => {
const [activeTab, setActiveTab] = useState<string>('0')
const [loading, setLoading] = useState<boolean>(false) const [loading, setLoading] = useState<boolean>(false)
const [orders, setOrders] = useState<OrderWithDetails[]>([]) const [orders, setOrders] = useState<OrderWithDetails[]>([])
const [statistics, setStatistics] = useState({
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' }
})
const {dealerUser} = useDealerUser() const {dealerUser} = useDealerUser()
@ -39,24 +29,11 @@ const DealerOrders: React.FC = () => {
setLoading(true) setLoading(true)
// 并行查询三个层级的订单 // 并行查询三个层级的订单
const [level1Result, level2Result, level3Result] = await Promise.all([
const [level1Result] = await Promise.all([
// 一级分销商订单 // 一级分销商订单
pageShopDealerOrder({ pageShopDealerOrder({
page: 1, page: 1,
limit: 100,
firstUserId: dealerUser.userId
}),
// 二级分销商订单
pageShopDealerOrder({
page: 1,
limit: 100,
secondUserId: dealerUser.userId
}),
// 三级分销商订单
pageShopDealerOrder({
page: 1,
limit: 100,
thirdUserId: dealerUser.userId
limit: 10
}) })
]) ])
@ -74,7 +51,7 @@ const DealerOrders: React.FC = () => {
if (level1Result?.list) { if (level1Result?.list) {
const level1Orders = level1Result.list.map(order => ({ const level1Orders = level1Result.list.map(order => ({
...order, ...order,
orderNo: `DD${order.orderId}`,
orderNo: `${order.orderId}`,
customerName: `用户${order.userId}`, customerName: `用户${order.userId}`,
userLevel: 1 as const, userLevel: 1 as const,
userCommission: order.firstMoney || '0.00', userCommission: order.firstMoney || '0.00',
@ -92,50 +69,6 @@ const DealerOrders: React.FC = () => {
).toFixed(2) ).toFixed(2)
} }
// 处理二级分销订单
if (level2Result?.list) {
const level2Orders = level2Result.list.map(order => ({
...order,
orderNo: `DD${order.orderId}`,
customerName: `用户${order.userId}`,
userLevel: 2 as const,
userCommission: order.secondMoney || '0.00',
totalCommission: (
parseFloat(order.firstMoney || '0') +
parseFloat(order.secondMoney || '0') +
parseFloat(order.thirdMoney || '0')
).toFixed(2)
}))
allOrders.push(...level2Orders)
stats.level2.orders = level2Orders.length
stats.level2.commission = level2Orders.reduce((sum, order) =>
sum + parseFloat(order.userCommission || '0'), 0
).toFixed(2)
}
// 处理三级分销订单
if (level3Result?.list) {
const level3Orders = level3Result.list.map(order => ({
...order,
orderNo: `DD${order.orderId}`,
customerName: `用户${order.userId}`,
userLevel: 3 as const,
userCommission: order.thirdMoney || '0.00',
totalCommission: (
parseFloat(order.firstMoney || '0') +
parseFloat(order.secondMoney || '0') +
parseFloat(order.thirdMoney || '0')
).toFixed(2)
}))
allOrders.push(...level3Orders)
stats.level3.orders = level3Orders.length
stats.level3.commission = level3Orders.reduce((sum, order) =>
sum + parseFloat(order.userCommission || '0'), 0
).toFixed(2)
}
// 去重(同一个订单可能在多个层级中出现) // 去重(同一个订单可能在多个层级中出现)
const uniqueOrders = allOrders.filter((order, index, self) => const uniqueOrders = allOrders.filter((order, index, self) =>
index === self.findIndex(o => o.orderId === order.orderId) index === self.findIndex(o => o.orderId === order.orderId)
@ -154,7 +87,6 @@ const DealerOrders: React.FC = () => {
.toFixed(2) .toFixed(2)
setOrders(uniqueOrders) setOrders(uniqueOrders)
setStatistics(stats)
} catch (error) { } catch (error) {
console.error('获取分销订单失败:', error) console.error('获取分销订单失败:', error)
@ -193,39 +125,42 @@ const DealerOrders: React.FC = () => {
const renderOrderItem = (order: OrderWithDetails) => ( const renderOrderItem = (order: OrderWithDetails) => (
<View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm"> <View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
<View className="flex justify-between items-start mb-3">
<View>
<Text className="font-semibold text-gray-800 mb-1">
<View className="flex justify-between items-start mb-1">
<Space>
<Text className="font-semibold text-gray-800">
{order.orderNo} {order.orderNo}
</Text> </Text>
<Text className="text-sm text-gray-500">
{order.customerName}
</Text>
{/* 显示用户在此订单中的层级 */} {/* 显示用户在此订单中的层级 */}
<Text className="text-xs text-blue-500">
{order.userLevel === 1 && '一级分销'}
{order.userLevel === 2 && '二级分销'}
{order.userLevel === 3 && '三级分销'}
</Text>
</View>
{/*<Text className="text-xs text-blue-500">*/}
{/* {order.userLevel === 1 && '一级分销'}*/}
{/* {order.userLevel === 2 && '二级分销'}*/}
{/* {order.userLevel === 3 && '三级分销'}*/}
{/*</Text>*/}
</Space>
<Tag type={getStatusColor(order.isSettled, order.isInvalid)}> <Tag type={getStatusColor(order.isSettled, order.isInvalid)}>
{getStatusText(order.isSettled, order.isInvalid)} {getStatusText(order.isSettled, order.isInvalid)}
</Tag> </Tag>
</View> </View>
<View className="flex justify-between items-center">
<View>
<Text className="text-sm text-gray-600">
<View className="flex justify-between items-center mb-1">
<Space>
<Text className="text-sm text-gray-400">
¥{order.orderPrice || '0.00'} ¥{order.orderPrice || '0.00'}
</Text> </Text>
<Text className="text-sm text-orange-500 font-semibold"> <Text className="text-sm text-orange-500 font-semibold">
¥{order.userCommission} ¥{order.userCommission}
</Text> </Text>
<Text className="text-xs text-gray-400">
¥{order.totalCommission}
</Text>
{/*<Text className="text-xs text-gray-400">*/}
{/* 总佣金:¥{order.totalCommission}*/}
{/*</Text>*/}
</Space>
</View> </View>
<Text className="text-xs text-gray-400">
<View className="flex justify-between items-center">
<Text className="text-sm text-gray-400">
{order.customerName}
</Text>
<Text className="text-sm text-gray-400">
{order.createTime} {order.createTime}
</Text> </Text>
</View> </View>
@ -262,54 +197,8 @@ const DealerOrders: React.FC = () => {
} }
return ( return (
<View className="bg-gray-50 min-h-screen">
{/* 统计卡片 */}
<View className="bg-white p-4 mb-4">
{/* 总体统计 */}
<View className="grid grid-cols-3 gap-4 mb-4">
<View className="text-center">
<Text className="text-lg font-bold text-blue-500">{statistics.totalOrders}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
<View className="text-center">
<Text className="text-lg font-bold text-green-500">¥{statistics.totalCommission}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
<View className="text-center">
<Text className="text-lg font-bold text-orange-500">¥{statistics.pendingCommission}</Text>
<Text className="text-xs text-gray-500"></Text>
</View>
</View>
{/* 分层统计 */}
<View className="border-t pt-3">
<Text className="text-sm text-gray-600 mb-2"></Text>
<View className="grid grid-cols-3 gap-2">
<View className="text-center bg-gray-50 rounded p-2">
<Text className="text-sm font-semibold text-red-500">{statistics.level1.orders}</Text>
<Text className="text-xs text-gray-500"></Text>
<Text className="text-xs text-red-500">¥{statistics.level1.commission}</Text>
</View>
<View className="text-center bg-gray-50 rounded p-2">
<Text className="text-sm font-semibold text-blue-500">{statistics.level2.orders}</Text>
<Text className="text-xs text-gray-500"></Text>
<Text className="text-xs text-blue-500">¥{statistics.level2.commission}</Text>
</View>
<View className="text-center bg-gray-50 rounded p-2">
<Text className="text-sm font-semibold text-purple-500">{statistics.level3.orders}</Text>
<Text className="text-xs text-gray-500"></Text>
<Text className="text-xs text-purple-500">¥{statistics.level3.commission}</Text>
</View>
</View>
</View>
</View>
<View className="min-h-screen">
{/* 订单列表 */} {/* 订单列表 */}
<Tabs value={activeTab} onChange={() => setActiveTab}>
<Tabs.TabPane title="全部" value="0">
<PullToRefresh
onRefresh={handleRefresh}
>
<View className="p-4"> <View className="p-4">
{loading ? ( {loading ? (
<View className="text-center py-8"> <View className="text-center py-8">
@ -322,69 +211,6 @@ const DealerOrders: React.FC = () => {
<Empty description="暂无分销订单"/> <Empty description="暂无分销订单"/>
)} )}
</View> </View>
</PullToRefresh>
</Tabs.TabPane>
<Tabs.TabPane title="一级分销" value="1">
<View className="p-4">
{getFilteredOrders('1').length > 0 ? (
getFilteredOrders('1').map(renderOrderItem)
) : (
<Empty description="暂无一级分销订单" />
)}
</View>
</Tabs.TabPane>
<Tabs.TabPane title="二级分销" value="2">
<View className="p-4">
{getFilteredOrders('2').length > 0 ? (
getFilteredOrders('2').map(renderOrderItem)
) : (
<Empty description="暂无二级分销订单" />
)}
</View>
</Tabs.TabPane>
<Tabs.TabPane title="三级分销" value="3">
<View className="p-4">
{getFilteredOrders('3').length > 0 ? (
getFilteredOrders('3').map(renderOrderItem)
) : (
<Empty description="暂无三级分销订单" />
)}
</View>
</Tabs.TabPane>
<Tabs.TabPane title="待结算" value="4">
<View className="p-4">
{getFilteredOrders('4').length > 0 ? (
getFilteredOrders('4').map(renderOrderItem)
) : (
<Empty description="暂无待结算订单" />
)}
</View>
</Tabs.TabPane>
<Tabs.TabPane title="已结算" value="5">
<View className="p-4">
{getFilteredOrders('5').length > 0 ? (
getFilteredOrders('5').map(renderOrderItem)
) : (
<Empty description="暂无已结算订单" />
)}
</View>
</Tabs.TabPane>
<Tabs.TabPane title="已失效" value="6">
<View className="p-4">
{getFilteredOrders('6').length > 0 ? (
getFilteredOrders('6').map(renderOrderItem)
) : (
<Empty description="暂无失效订单" />
)}
</View>
</Tabs.TabPane>
</Tabs>
</View> </View>
) )
} }

Loading…
Cancel
Save