You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
8.1 KiB
257 lines
8.1 KiB
import React, { useState } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { Empty, Tabs, Avatar, Tag, Progress } from '@nutui/nutui-react-taro'
|
|
import { User, Star, StarFill } from '@nutui/icons-react-taro'
|
|
|
|
const DealerTeam: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState('0')
|
|
|
|
// 模拟团队数据
|
|
const teamStats = {
|
|
total: 28,
|
|
firstLevel: 12,
|
|
secondLevel: 10,
|
|
thirdLevel: 6,
|
|
monthlyCommission: '2,580.50'
|
|
}
|
|
|
|
const teamMembers = [
|
|
{
|
|
id: '1',
|
|
name: '张小明',
|
|
level: 1,
|
|
joinTime: '2024-11-15',
|
|
orderCount: 15,
|
|
commission: '580.50',
|
|
status: 'active',
|
|
avatar: '',
|
|
subMembers: 3
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '李小红',
|
|
level: 1,
|
|
joinTime: '2024-12-01',
|
|
orderCount: 8,
|
|
commission: '320.00',
|
|
status: 'active',
|
|
avatar: '',
|
|
subMembers: 2
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '王小华',
|
|
level: 2,
|
|
joinTime: '2024-12-10',
|
|
orderCount: 5,
|
|
commission: '150.00',
|
|
status: 'inactive',
|
|
avatar: '',
|
|
subMembers: 0
|
|
}
|
|
]
|
|
|
|
const getLevelColor = (level: number) => {
|
|
switch (level) {
|
|
case 1: return '#f59e0b'
|
|
case 2: return '#8b5cf6'
|
|
case 3: return '#ec4899'
|
|
default: return '#6b7280'
|
|
}
|
|
}
|
|
|
|
const getLevelIcon = (level: number) => {
|
|
switch (level) {
|
|
case 1: return <StarFill color={getLevelColor(level)} size="16" />
|
|
case 2: return <Star color={getLevelColor(level)} size="16" />
|
|
case 3: return <User color={getLevelColor(level)} size="16" />
|
|
default: return <User color={getLevelColor(level)} size="16" />
|
|
}
|
|
}
|
|
|
|
const renderMemberItem = (member: any) => (
|
|
<View key={member.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
|
|
<View className="flex items-center mb-3">
|
|
<Avatar
|
|
size="40"
|
|
src={member.avatar}
|
|
icon={<User />}
|
|
className="mr-3"
|
|
/>
|
|
<View className="flex-1">
|
|
<View className="flex items-center mb-1">
|
|
<Text className="font-semibold text-gray-800 mr-2">
|
|
{member.name}
|
|
</Text>
|
|
{getLevelIcon(member.level)}
|
|
<Text className="text-xs text-gray-500 ml-1">
|
|
{member.level}级
|
|
</Text>
|
|
</View>
|
|
<Text className="text-xs text-gray-500">
|
|
加入时间：{member.joinTime}
|
|
</Text>
|
|
</View>
|
|
<View className="text-right">
|
|
<Tag
|
|
type={member.status === 'active' ? 'success' : 'default'}
|
|
>
|
|
{member.status === 'active' ? '活跃' : '沉默'}
|
|
</Tag>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="grid grid-cols-3 gap-4 text-center">
|
|
<View>
|
|
<Text className="text-sm font-semibold text-blue-600">
|
|
{member.orderCount}
|
|
</Text>
|
|
<Text className="text-xs text-gray-500">订单数</Text>
|
|
</View>
|
|
<View>
|
|
<Text className="text-sm font-semibold text-green-600">
|
|
¥{member.commission}
|
|
</Text>
|
|
<Text className="text-xs text-gray-500">贡献佣金</Text>
|
|
</View>
|
|
<View>
|
|
<Text className="text-sm font-semibold text-purple-600">
|
|
{member.subMembers}
|
|
</Text>
|
|
<Text className="text-xs text-gray-500">下级成员</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
|
|
const renderOverview = () => (
|
|
<View className="p-4">
|
|
{/* 团队统计卡片 */}
|
|
<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>
|
|
)
|
|
|
|
const renderMemberList = (level?: number) => (
|
|
<View className="p-4">
|
|
{teamMembers
|
|
.filter(member => !level || member.level === level)
|
|
.map(renderMemberItem)}
|
|
|
|
{teamMembers.filter(member => !level || member.level === level).length === 0 && (
|
|
<Empty description={`暂无${level ? level + '级' : ''}团队成员`} />
|
|
)}
|
|
</View>
|
|
)
|
|
|
|
return (
|
|
<View className="bg-gray-50 min-h-screen">
|
|
<Tabs value={activeTab} onChange={() => setActiveTab}>
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default DealerTeam
|