forked from gxwebsoft/mp-10550
258 lines
8.1 KiB
TypeScript
258 lines
8.1 KiB
TypeScript
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
|