refactor(dealer/team):精简团队页面组件结构

- 移除了团队总览、层级分布和最新成员等冗余组件
- 保留了成员列表的渲染逻辑
- 优化了代码格式和结构,提高了代码可读性
This commit is contained in:
2025-08-27 23:01:43 +08:00
parent 27ff0a8fe7
commit fe00d6dea9

View File

@@ -1,12 +1,12 @@
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, Avatar, Tag, Progress, Loading, PullToRefresh } from '@nutui/nutui-react-taro' import {Space, Tabs, Avatar, Tag, Progress, Loading, PullToRefresh} from '@nutui/nutui-react-taro'
import { User, Star, StarFill } from '@nutui/icons-react-taro' import {User, Star, StarFill} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import { useDealerUser } from '@/hooks/useDealerUser' import {useDealerUser} from '@/hooks/useDealerUser'
import { listShopDealerReferee } from '@/api/shop/shopDealerReferee' import {listShopDealerReferee} from '@/api/shop/shopDealerReferee'
import { pageShopDealerOrder } from '@/api/shop/shopDealerOrder' import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
import type { ShopDealerReferee } from '@/api/shop/shopDealerReferee/model' import type {ShopDealerReferee} from '@/api/shop/shopDealerReferee/model'
interface TeamMemberWithStats extends ShopDealerReferee { interface TeamMemberWithStats extends ShopDealerReferee {
name?: string name?: string
@@ -31,7 +31,7 @@ const DealerTeam: React.FC = () => {
monthlyCommission: '0.00' monthlyCommission: '0.00'
}) })
const { dealerUser } = useDealerUser() const {dealerUser} = useDealerUser()
// 获取团队数据 // 获取团队数据
const fetchTeamData = useCallback(async () => { const fetchTeamData = useCallback(async () => {
@@ -73,8 +73,8 @@ const DealerTeam: React.FC = () => {
const orderCount = orders.length const orderCount = orders.length
const commission = orders.reduce((sum, order) => { const commission = orders.reduce((sum, order) => {
const levelCommission = member.level === 1 ? order.firstMoney : const levelCommission = member.level === 1 ? order.firstMoney :
member.level === 2 ? order.secondMoney : member.level === 2 ? order.secondMoney :
order.thirdMoney order.thirdMoney
return sum + parseFloat(levelCommission || '0') return sum + parseFloat(levelCommission || '0')
}, 0).toFixed(2) }, 0).toFixed(2)
@@ -142,19 +142,27 @@ const DealerTeam: React.FC = () => {
const getLevelColor = (level: number) => { const getLevelColor = (level: number) => {
switch (level) { switch (level) {
case 1: return '#f59e0b' case 1:
case 2: return '#8b5cf6' return '#f59e0b'
case 3: return '#ec4899' case 2:
default: return '#6b7280' return '#8b5cf6'
case 3:
return '#ec4899'
default:
return '#6b7280'
} }
} }
const getLevelIcon = (level: number) => { const getLevelIcon = (level: number) => {
switch (level) { switch (level) {
case 1: return <StarFill color={getLevelColor(level)} size="16" /> case 1:
case 2: return <Star color={getLevelColor(level)} size="16" /> return <StarFill color={getLevelColor(level)} size="16"/>
case 3: return <User color={getLevelColor(level)} size="16" /> case 2:
default: return <User color={getLevelColor(level)} size="16" /> return <Star color={getLevelColor(level)} size="16"/>
case 3:
return <User color={getLevelColor(level)} size="16"/>
default:
return <User color={getLevelColor(level)} size="16"/>
} }
} }
@@ -164,7 +172,7 @@ const DealerTeam: React.FC = () => {
<Avatar <Avatar
size="40" size="40"
src={member.avatar} src={member.avatar}
icon={<User />} icon={<User/>}
className="mr-3" className="mr-3"
/> />
<View className="flex-1"> <View className="flex-1">
@@ -172,194 +180,65 @@ const DealerTeam: React.FC = () => {
<Text className="font-semibold text-gray-800 mr-2"> <Text className="font-semibold text-gray-800 mr-2">
{member.name} {member.name}
</Text> </Text>
{getLevelIcon(Number(member.level))} {/*{getLevelIcon(Number(member.level))}*/}
<Text className="text-xs text-gray-500 ml-1"> {/*<Text className="text-xs text-gray-500 ml-1">*/}
{member.level} {/* {member.level}级*/}
</Text> {/*</Text>*/}
</View> </View>
<Text className="text-xs text-gray-500"> <Text className="text-xs text-gray-500">
{member.joinTime} {member.joinTime}
</Text> </Text>
</View> </View>
<View className="text-right"> {/*<View className="text-right">*/}
<Tag {/* <Tag*/}
type={member.status === 'active' ? 'success' : 'default'} {/* type={member.status === 'active' ? 'success' : 'default'}*/}
> {/* >*/}
{member.status === 'active' ? '活跃' : '沉默'} {/* {member.status === 'active' ? '活跃' : '沉默'}*/}
</Tag> {/* </Tag>*/}
</View> {/*</View>*/}
</View> </View>
<View className="grid grid-cols-3 gap-4 text-center"> <View className="grid grid-cols-3 gap-4 text-center">
<View> <Space>
<Text className="text-xs text-gray-500"></Text>
<Text className="text-sm font-semibold text-blue-600"> <Text className="text-sm font-semibold text-blue-600">
{member.orderCount} {member.orderCount}
</Text> </Text>
<Text className="text-xs text-gray-500"></Text> </Space>
</View> <Space>
<View> <Text className="text-xs text-gray-500"></Text>
<Text className="text-sm font-semibold text-green-600"> <Text className="text-sm font-semibold text-green-600">
¥{member.commission} ¥{member.commission}
</Text> </Text>
<Text className="text-xs text-gray-500"></Text> </Space>
</View> <Space>
<View> <Text className="text-xs text-gray-500"></Text>
<Text className="text-sm font-semibold text-purple-600"> <Text className="text-sm font-semibold text-purple-600">
{member.subMembers} {member.subMembers}
</Text> </Text>
<Text className="text-xs text-gray-500"></Text> </Space>
</View>
</View> </View>
</View> </View>
) )
const renderOverview = () => ( const renderOverview = () => (
<View className="p-4"> <View className="rounded-xl p-4">
{/* 团队统计卡片 */} {teamMembers.slice(0, 3).map(renderMemberItem)}
<View className="rounded-xl p-6 mb-6 text-white relative overflow-hidden" style={{
background: 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)'
}}>
{/* 装饰背景 - 小程序兼容版本 */}
<View className="absolute w-32 h-32 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.1)',
top: '-16px',
right: '-16px'
}}></View>
<View className="absolute w-20 h-20 rounded-full" style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)',
bottom: '-10px',
left: '-10px'
}}></View>
<View className="relative z-10">
<Text className="text-lg font-bold mb-4 text-white"></Text>
<View className="grid grid-cols-2 gap-4">
<View>
<Text className="text-2xl font-bold mb-1 text-white">{teamStats.total}</Text>
<Text className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.8)' }}></Text>
</View>
<View>
<Text className="text-2xl font-bold mb-1 text-white">¥{teamStats.monthlyCommission}</Text>
<Text className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.8)' }}></Text>
</View>
</View>
</View>
</View>
{/* 层级分布 */}
<View className="bg-white rounded-xl p-4 mb-4">
<Text className="font-semibold mb-4 text-gray-800"></Text>
<View className="gap-2">
<View className="flex items-center justify-between">
<View className="flex items-center">
<StarFill color="#f59e0b" size="16" className="mr-2" />
<Text className="text-sm"></Text>
</View>
<View className="flex items-center">
<Text className="text-sm font-semibold mr-2">{teamStats.firstLevel}</Text>
<Progress
percent={(teamStats.firstLevel / teamStats.total) * 100}
strokeWidth="6"
background={'#f59e0b'}
className="w-20"
/>
</View>
</View>
<View className="flex items-center justify-between">
<View className="flex items-center">
<Star color="#8b5cf6" size="16" className="mr-2" />
<Text className="text-sm"></Text>
</View>
<View className="flex items-center">
<Text className="text-sm font-semibold mr-2">{teamStats.secondLevel}</Text>
<Progress
percent={(teamStats.secondLevel / teamStats.total) * 100}
strokeWidth="6"
background={'#8b5cf6'}
className="w-20"
/>
</View>
</View>
<View className="flex items-center justify-between">
<View className="flex items-center">
<User color="#ec4899" size="16" className="mr-2" />
<Text className="text-sm"></Text>
</View>
<View className="flex items-center">
<Text className="text-sm font-semibold mr-2">{teamStats.thirdLevel}</Text>
<Progress
percent={(teamStats.thirdLevel / teamStats.total) * 100}
strokeWidth="6"
background={'#ec4899'}
className="w-20"
/>
</View>
</View>
</View>
</View>
{/* 最新成员 */}
<View className="bg-white rounded-xl p-4">
<Text className="font-semibold mb-4 text-gray-800"></Text>
{teamMembers.slice(0, 3).map(renderMemberItem)}
</View>
</View> </View>
) )
const renderMemberList = (level?: number) => (
<PullToRefresh
disabled={refreshing}
onRefresh={handleRefresh}
>
<View className="p-4">
{loading ? (
<View className="text-center py-8">
<Loading />
<Text className="text-gray-500 mt-2">...</Text>
</View>
) : teamMembers
.filter(member => !level || member.level === level)
.length > 0 ? (
teamMembers
.filter(member => !level || member.level === level)
.map(renderMemberItem)
) : (
<Empty description={`暂无${level ? level + '级' : ''}团队成员`} />
)}
</View>
</PullToRefresh>
)
if (!dealerUser) { if (!dealerUser) {
return ( return (
<View className="bg-gray-50 min-h-screen flex items-center justify-center"> <View className="bg-gray-50 min-h-screen flex items-center justify-center">
<Loading /> <Loading/>
<Text className="text-gray-500 mt-2">...</Text> <Text className="text-gray-500 mt-2">...</Text>
</View> </View>
) )
} }
return ( return (
<View className="bg-gray-50 min-h-screen"> <View className="min-h-screen">
<Tabs value={activeTab} onChange={() => setActiveTab}> {renderOverview()}
<Tabs.TabPane title="团队总览" value="0">
{renderOverview()}
</Tabs.TabPane>
<Tabs.TabPane title="一级成员" value="1">
{renderMemberList(1)}
</Tabs.TabPane>
<Tabs.TabPane title="二级成员" value="2">
{renderMemberList(2)}
</Tabs.TabPane>
<Tabs.TabPane title="三级成员" value="3">
{renderMemberList(3)}
</Tabs.TabPane>
</Tabs>
</View> </View>
) )
} }