245 lines
7.6 KiB
TypeScript
245 lines
7.6 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { View } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import { Avatar, Empty, Tabs, TabPane } from '@nutui/nutui-react-taro'
|
||
import './index.scss'
|
||
|
||
interface TeamMember {
|
||
id: string
|
||
nickname: string
|
||
avatar: string
|
||
joinTime: string
|
||
level: number
|
||
orderCount: number
|
||
totalCommission: number
|
||
status: 'active' | 'inactive'
|
||
}
|
||
|
||
interface TeamStats {
|
||
totalMembers: number
|
||
activeMembers: number
|
||
level1Members: number
|
||
level2Members: number
|
||
totalCommission: number
|
||
monthCommission: number
|
||
}
|
||
|
||
function MyTeam() {
|
||
const [activeTab, setActiveTab] = useState('0')
|
||
const [members, setMembers] = useState<TeamMember[]>([])
|
||
const [stats, setStats] = useState<TeamStats>({
|
||
totalMembers: 0,
|
||
activeMembers: 0,
|
||
level1Members: 0,
|
||
level2Members: 0,
|
||
totalCommission: 0,
|
||
monthCommission: 0
|
||
})
|
||
const [loading, setLoading] = useState(true)
|
||
|
||
useEffect(() => {
|
||
Taro.setNavigationBarTitle({
|
||
title: '我的团队'
|
||
})
|
||
loadTeamData()
|
||
}, [])
|
||
|
||
const loadTeamData = async () => {
|
||
try {
|
||
setLoading(true)
|
||
// 模拟数据
|
||
const mockMembers: TeamMember[] = [
|
||
{
|
||
id: '1',
|
||
nickname: '张小明',
|
||
avatar: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||
joinTime: '2024-01-15',
|
||
level: 1,
|
||
orderCount: 15,
|
||
totalCommission: 150.50,
|
||
status: 'active'
|
||
},
|
||
{
|
||
id: '2',
|
||
nickname: '李小红',
|
||
avatar: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||
joinTime: '2024-01-10',
|
||
level: 1,
|
||
orderCount: 8,
|
||
totalCommission: 89.20,
|
||
status: 'active'
|
||
},
|
||
{
|
||
id: '3',
|
||
nickname: '王小华',
|
||
avatar: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||
joinTime: '2024-01-08',
|
||
level: 2,
|
||
orderCount: 3,
|
||
totalCommission: 25.80,
|
||
status: 'inactive'
|
||
},
|
||
{
|
||
id: '4',
|
||
nickname: '赵小刚',
|
||
avatar: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||
joinTime: '2024-01-05',
|
||
level: 2,
|
||
orderCount: 12,
|
||
totalCommission: 98.60,
|
||
status: 'active'
|
||
}
|
||
]
|
||
|
||
// 计算统计数据
|
||
const totalMembers = mockMembers.length
|
||
const activeMembers = mockMembers.filter(m => m.status === 'active').length
|
||
const level1Members = mockMembers.filter(m => m.level === 1).length
|
||
const level2Members = mockMembers.filter(m => m.level === 2).length
|
||
const totalCommission = mockMembers.reduce((sum, m) => sum + m.totalCommission, 0)
|
||
|
||
setTimeout(() => {
|
||
setMembers(mockMembers)
|
||
setStats({
|
||
totalMembers,
|
||
activeMembers,
|
||
level1Members,
|
||
level2Members,
|
||
totalCommission,
|
||
monthCommission: totalCommission * 0.3 // 模拟本月佣金
|
||
})
|
||
setLoading(false)
|
||
}, 1000)
|
||
} catch (error) {
|
||
console.error('加载团队数据失败:', error)
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const getFilteredMembers = () => {
|
||
switch (activeTab) {
|
||
case '1':
|
||
return members.filter(member => member.level === 1)
|
||
case '2':
|
||
return members.filter(member => member.level === 2)
|
||
case '3':
|
||
return members.filter(member => member.status === 'active')
|
||
default:
|
||
return members
|
||
}
|
||
}
|
||
|
||
const handleMemberClick = (member: TeamMember) => {
|
||
Taro.showModal({
|
||
title: '成员详情',
|
||
content: `
|
||
昵称：${member.nickname}
|
||
加入时间：${member.joinTime}
|
||
等级：${member.level}级下线
|
||
订单数量：${member.orderCount}
|
||
累计佣金：¥${member.totalCommission.toFixed(2)}
|
||
状态：${member.status === 'active' ? '活跃' : '不活跃'}
|
||
`.trim(),
|
||
showCancel: false
|
||
})
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<View className="my-team-page">
|
||
<View className="loading-container">
|
||
<View className="text-center text-gray-500">加载中...</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<View className="my-team-page">
|
||
{/* 团队统计 */}
|
||
<View className="team-stats">
|
||
<View className="stats-grid">
|
||
<View className="stat-item">
|
||
<View className="stat-value">{stats.totalMembers}</View>
|
||
<View className="stat-label">团队总人数</View>
|
||
</View>
|
||
<View className="stat-item">
|
||
<View className="stat-value">{stats.activeMembers}</View>
|
||
<View className="stat-label">活跃成员</View>
|
||
</View>
|
||
<View className="stat-item">
|
||
<View className="stat-value">¥{stats.totalCommission.toFixed(2)}</View>
|
||
<View className="stat-label">累计佣金</View>
|
||
</View>
|
||
<View className="stat-item">
|
||
<View className="stat-value">¥{stats.monthCommission.toFixed(2)}</View>
|
||
<View className="stat-label">本月佣金</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 等级统计 */}
|
||
<View className="level-stats">
|
||
<View className="level-item">
|
||
<View className="level-info">
|
||
<View className="level-title">一级下线</View>
|
||
<View className="level-count">{stats.level1Members}人</View>
|
||
</View>
|
||
</View>
|
||
<View className="level-item">
|
||
<View className="level-info">
|
||
<View className="level-title">二级下线</View>
|
||
<View className="level-count">{stats.level2Members}人</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 成员列表 */}
|
||
<View className="members-container">
|
||
<Tabs value={activeTab} onChange={(value) => setActiveTab(value)}>
|
||
<TabPane title="全部" />
|
||
<TabPane title="一级" />
|
||
<TabPane title="二级" />
|
||
<TabPane title="活跃" />
|
||
</Tabs>
|
||
|
||
<View className="members-list">
|
||
{getFilteredMembers().length === 0 ? (
|
||
<View className="empty-container">
|
||
<Empty description="暂无团队成员" />
|
||
</View>
|
||
) : (
|
||
getFilteredMembers().map((member) => (
|
||
<View
|
||
key={member.id}
|
||
className="member-item"
|
||
onClick={() => handleMemberClick(member)}
|
||
>
|
||
<Avatar size="50" src={member.avatar} shape="round" />
|
||
<View className="member-info">
|
||
<View className="member-header">
|
||
<View className="member-name">{member.nickname}</View>
|
||
<View className={`member-level level-${member.level}`}>
|
||
{member.level}级
|
||
</View>
|
||
</View>
|
||
<View className="member-stats">
|
||
<View className="stat">订单：{member.orderCount}</View>
|
||
<View className="stat">佣金：¥{member.totalCommission.toFixed(2)}</View>
|
||
</View>
|
||
<View className="member-time">加入时间：{member.joinTime}</View>
|
||
</View>
|
||
<View className={`member-status ${member.status}`}>
|
||
{member.status === 'active' ? '活跃' : '不活跃'}
|
||
</View>
|
||
</View>
|
||
))
|
||
)}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default MyTeam
|