feat(admin): 添加成员管理功能
- 新增成员管理页面，实现团队成员展示和统计功能 - 集成经销商用户数据，显示成员基本信息和业绩数据 - 实现多层级团队浏览，支持查看下级成员和返回上层操作 - 添加成员详情统计，包括订单数、贡献佣金、团队规模等指标 - 实现成员联系方式管理，支持一键拨打电话和发送消息 - 添加成员别名备注功能，方便用户识别和管理 -
This commit is contained in:
3
src/admin/users/index.config.ts
Normal file
3
src/admin/users/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default definePageConfig({
|
||||||
|
navigationBarTitleText: '成员管理'
|
||||||
|
})
|
||||||
@@ -0,0 +1,444 @@
|
|||||||
|
import React, {useState, useEffect, useCallback} from 'react'
|
||||||
|
import {View, Text} from '@tarojs/components'
|
||||||
|
import {Phone, Edit, Message} from '@nutui/icons-react-taro'
|
||||||
|
import {Space, Empty, Avatar, Button} from '@nutui/nutui-react-taro'
|
||||||
|
import Taro from '@tarojs/taro'
|
||||||
|
import {useDealerUser} from '@/hooks/useDealerUser'
|
||||||
|
import {listShopDealerReferee} from '@/api/shop/shopDealerReferee'
|
||||||
|
import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
|
||||||
|
import type {ShopDealerReferee} from '@/api/shop/shopDealerReferee/model'
|
||||||
|
import FixedButton from "@/components/FixedButton";
|
||||||
|
import navTo from "@/utils/common";
|
||||||
|
import {updateUser} from "@/api/system/user";
|
||||||
|
|
||||||
|
interface TeamMemberWithStats extends ShopDealerReferee {
|
||||||
|
name?: string
|
||||||
|
avatar?: string
|
||||||
|
nickname?: string;
|
||||||
|
alias?: string;
|
||||||
|
phone?: string;
|
||||||
|
orderCount?: number
|
||||||
|
commission?: string
|
||||||
|
status?: 'active' | 'inactive'
|
||||||
|
subMembers?: number
|
||||||
|
joinTime?: string
|
||||||
|
dealerAvatar?: string;
|
||||||
|
dealerName?: string;
|
||||||
|
dealerPhone?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 层级信息接口
|
||||||
|
interface LevelInfo {
|
||||||
|
dealerId: number
|
||||||
|
dealerName?: string
|
||||||
|
level: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const DealerTeam: React.FC = () => {
|
||||||
|
const [teamMembers, setTeamMembers] = useState<TeamMemberWithStats[]>([])
|
||||||
|
const {dealerUser} = useDealerUser()
|
||||||
|
const [dealerId, setDealerId] = useState<number>()
|
||||||
|
// 层级栈，用于支持返回上一层
|
||||||
|
const [levelStack, setLevelStack] = useState<LevelInfo[]>([])
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
// 当前查看的用户名称
|
||||||
|
const [currentDealerName, setCurrentDealerName] = useState<string>('')
|
||||||
|
|
||||||
|
// 异步加载成员统计数据
|
||||||
|
const loadMemberStats = async (members: TeamMemberWithStats[]) => {
|
||||||
|
// 分批处理，避免过多并发请求
|
||||||
|
const batchSize = 3
|
||||||
|
for (let i = 0; i < members.length; i += batchSize) {
|
||||||
|
const batch = members.slice(i, i + batchSize)
|
||||||
|
|
||||||
|
const batchStats = await Promise.all(
|
||||||
|
batch.map(async (member) => {
|
||||||
|
try {
|
||||||
|
// 并行获取订单统计和下级成员数量
|
||||||
|
const [orderResult, subMembersResult] = await Promise.all([
|
||||||
|
pageShopDealerOrder({
|
||||||
|
page: 1,
|
||||||
|
userId: member.userId
|
||||||
|
}),
|
||||||
|
listShopDealerReferee({
|
||||||
|
dealerId: member.userId,
|
||||||
|
deleted: 0
|
||||||
|
})
|
||||||
|
])
|
||||||
|
|
||||||
|
let orderCount = 0
|
||||||
|
let commission = '0.00'
|
||||||
|
let status: 'active' | 'inactive' = 'inactive'
|
||||||
|
|
||||||
|
if (orderResult?.list) {
|
||||||
|
const orders = orderResult.list
|
||||||
|
orderCount = orders.length
|
||||||
|
commission = orders.reduce((sum, order) => {
|
||||||
|
const levelCommission = member.level === 1 ? order.firstMoney :
|
||||||
|
member.level === 2 ? order.secondMoney :
|
||||||
|
order.thirdMoney
|
||||||
|
return sum + parseFloat(levelCommission || '0')
|
||||||
|
}, 0).toFixed(2)
|
||||||
|
|
||||||
|
// 判断活跃状态（30天内有订单为活跃）
|
||||||
|
const thirtyDaysAgo = new Date()
|
||||||
|
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||||
|
const hasRecentOrder = orders.some(order =>
|
||||||
|
new Date(order.createTime || '') > thirtyDaysAgo
|
||||||
|
)
|
||||||
|
status = hasRecentOrder ? 'active' : 'inactive'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
orderCount,
|
||||||
|
commission,
|
||||||
|
status,
|
||||||
|
subMembers: subMembersResult?.length || 0
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`获取成员${member.userId}数据失败:`, error)
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
orderCount: 0,
|
||||||
|
commission: '0.00',
|
||||||
|
status: 'inactive' as const,
|
||||||
|
subMembers: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
// 更新这一批成员的数据
|
||||||
|
setTeamMembers(prevMembers => {
|
||||||
|
const updatedMembers = [...prevMembers]
|
||||||
|
batchStats.forEach(updatedMember => {
|
||||||
|
const index = updatedMembers.findIndex(m => m.userId === updatedMember.userId)
|
||||||
|
if (index !== -1) {
|
||||||
|
updatedMembers[index] = updatedMember
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return updatedMembers
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加小延迟，避免请求过于密集
|
||||||
|
if (i + batchSize < members.length) {
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 100))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取团队数据
|
||||||
|
const fetchTeamData = useCallback(async () => {
|
||||||
|
if (!dealerUser?.userId && !dealerId) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true)
|
||||||
|
console.log(dealerId, 'dealerId>>>>>>>>>')
|
||||||
|
// 获取团队成员关系
|
||||||
|
const refereeResult = await listShopDealerReferee({
|
||||||
|
dealerId: dealerId ? dealerId : dealerUser?.userId
|
||||||
|
})
|
||||||
|
|
||||||
|
if (refereeResult) {
|
||||||
|
console.log('团队成员原始数据:', refereeResult)
|
||||||
|
// 处理团队成员数据
|
||||||
|
const processedMembers: TeamMemberWithStats[] = refereeResult.map(member => ({
|
||||||
|
...member,
|
||||||
|
name: `${member.userId}`,
|
||||||
|
orderCount: 0,
|
||||||
|
commission: '0.00',
|
||||||
|
status: 'active' as const,
|
||||||
|
subMembers: 0,
|
||||||
|
joinTime: member.createTime
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 先显示基础数据，然后异步加载详细统计
|
||||||
|
setTeamMembers(processedMembers)
|
||||||
|
setLoading(false)
|
||||||
|
|
||||||
|
// 异步加载每个成员的详细统计数据
|
||||||
|
loadMemberStats(processedMembers)
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取团队数据失败:', error)
|
||||||
|
Taro.showToast({
|
||||||
|
title: '获取团队数据失败',
|
||||||
|
icon: 'error'
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}, [dealerUser?.userId, dealerId])
|
||||||
|
|
||||||
|
// 查看下级成员
|
||||||
|
const getNextUser = (item: TeamMemberWithStats) => {
|
||||||
|
// 检查层级限制：最多只能查看2层（levelStack.length >= 1 表示已经是第2层了）
|
||||||
|
if (levelStack.length >= 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果没有下级成员，不允许点击
|
||||||
|
if (!item.subMembers || item.subMembers === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('点击用户:', item.userId, item.name)
|
||||||
|
|
||||||
|
// 将当前层级信息推入栈中
|
||||||
|
const currentLevel: LevelInfo = {
|
||||||
|
dealerId: dealerId || dealerUser?.userId || 0,
|
||||||
|
dealerName: currentDealerName || (dealerId ? '上级' : dealerUser?.realName || '我'),
|
||||||
|
level: levelStack.length
|
||||||
|
}
|
||||||
|
setLevelStack(prev => [...prev, currentLevel])
|
||||||
|
|
||||||
|
// 切换到下级
|
||||||
|
setDealerId(item.userId)
|
||||||
|
setCurrentDealerName(item.nickname || item.dealerName || `用户${item.userId}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回上一层
|
||||||
|
const goBack = () => {
|
||||||
|
if (levelStack.length === 0) {
|
||||||
|
// 如果栈为空，返回首页或上一页
|
||||||
|
Taro.navigateBack()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从栈中弹出上一层信息
|
||||||
|
const prevLevel = levelStack[levelStack.length - 1]
|
||||||
|
setLevelStack(prev => prev.slice(0, -1))
|
||||||
|
|
||||||
|
if (prevLevel.dealerId === (dealerUser?.userId || 0)) {
|
||||||
|
// 返回到根层级
|
||||||
|
setDealerId(undefined)
|
||||||
|
setCurrentDealerName('')
|
||||||
|
} else {
|
||||||
|
setDealerId(prevLevel.dealerId)
|
||||||
|
setCurrentDealerName(prevLevel.dealerName || '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 一键拨打
|
||||||
|
const makePhoneCall = (phone: string) => {
|
||||||
|
Taro.makePhoneCall({
|
||||||
|
phoneNumber: phone,
|
||||||
|
fail: () => {
|
||||||
|
Taro.showToast({
|
||||||
|
title: '拨打取消',
|
||||||
|
icon: 'error'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 别名备注
|
||||||
|
const editAlias = (item: any, index: number) => {
|
||||||
|
Taro.showModal({
|
||||||
|
title: '备注',
|
||||||
|
// @ts-ignore
|
||||||
|
editable: true,
|
||||||
|
placeholderText: '真实姓名',
|
||||||
|
content: item.alias || '',
|
||||||
|
success: async (res: any) => {
|
||||||
|
if (res.confirm && res.content !== undefined) {
|
||||||
|
try {
|
||||||
|
// 更新跟进情况
|
||||||
|
await updateUser({
|
||||||
|
userId: item.userId,
|
||||||
|
alias: res.content.trim()
|
||||||
|
});
|
||||||
|
teamMembers[index].alias = res.content.trim()
|
||||||
|
setTeamMembers(teamMembers)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('备注失败:', error);
|
||||||
|
Taro.showToast({
|
||||||
|
title: '备注失败，请重试',
|
||||||
|
icon: 'error'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
const sendMessage = (item: TeamMemberWithStats) => {
|
||||||
|
return navTo(`/user/chat/message/add?id=${item.userId}`, true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听数据变化，获取团队数据
|
||||||
|
useEffect(() => {
|
||||||
|
if (dealerUser?.userId || dealerId) {
|
||||||
|
fetchTeamData().then()
|
||||||
|
}
|
||||||
|
}, [fetchTeamData])
|
||||||
|
|
||||||
|
// 初始化当前用户名称
|
||||||
|
useEffect(() => {
|
||||||
|
if (!dealerId && dealerUser?.realName && !currentDealerName) {
|
||||||
|
setCurrentDealerName(dealerUser.realName)
|
||||||
|
}
|
||||||
|
}, [dealerUser, dealerId, currentDealerName])
|
||||||
|
|
||||||
|
const renderMemberItem = (member: TeamMemberWithStats, index: number) => {
|
||||||
|
// 判断是否可以点击：有下级成员且未达到层级限制
|
||||||
|
const canClick = member.subMembers && member.subMembers > 0 && levelStack.length < 1
|
||||||
|
// 判断是否显示手机号：只有本级（levelStack.length === 0）才显示
|
||||||
|
const showPhone = levelStack.length === 0
|
||||||
|
// 判断数据是否还在加载中（初始值都是0或'0.00'）
|
||||||
|
const isStatsLoading = member.orderCount === 0 && member.commission === '0.00' && member.subMembers === 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View
|
||||||
|
key={member.id}
|
||||||
|
className={`bg-white rounded-lg p-4 mb-3 shadow-sm ${
|
||||||
|
canClick ? 'cursor-pointer' : 'cursor-default opacity-75'
|
||||||
|
}`}
|
||||||
|
onClick={() => getNextUser(member)}
|
||||||
|
>
|
||||||
|
<View className="flex items-center mb-3">
|
||||||
|
<Avatar
|
||||||
|
size="40"
|
||||||
|
src={member.avatar}
|
||||||
|
className="mr-3"
|
||||||
|
/>
|
||||||
|
<View className="flex-1">
|
||||||
|
<View className="flex items-center justify-between mb-1">
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Space>
|
||||||
|
{member.alias ? <Text className="font-semibold text-blue-700 mr-2">{member.alias}</Text> :
|
||||||
|
<Text className="font-semibold text-gray-800 mr-2">{member.nickname}</Text>}
|
||||||
|
{/*别名备注*/}
|
||||||
|
<Edit size={16} className={'text-blue-500 mr-2'} onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
editAlias(member, index)
|
||||||
|
}}/>
|
||||||
|
{/*发送消息*/}
|
||||||
|
<Message size={16} className={'text-orange-500 mr-2'} onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
sendMessage(member)
|
||||||
|
}}/>
|
||||||
|
</Space>
|
||||||
|
</View>
|
||||||
|
{/* 显示手机号（仅本级可见） */}
|
||||||
|
{showPhone && member.phone && (
|
||||||
|
<Text className="text-sm text-gray-500" onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
makePhoneCall(member.phone || '');
|
||||||
|
}}>
|
||||||
|
{member.phone}
|
||||||
|
<Phone size={12} className="ml-1 text-green-500"/>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Space>
|
||||||
|
<Text>
|
||||||
|
<Text className="text-xs text-gray-500">UID：{member.userId}</Text>
|
||||||
|
</Text>
|
||||||
|
<Text className="text-xs text-gray-500">
|
||||||
|
加入时间：{member.joinTime}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View className="grid grid-cols-3 gap-4 text-center">
|
||||||
|
<Space>
|
||||||
|
<Text className="text-xs text-gray-500">订单数</Text>
|
||||||
|
<Text className="text-sm font-semibold text-blue-600">
|
||||||
|
{isStatsLoading ? '-' : member.orderCount}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<Space>
|
||||||
|
<Text className="text-xs text-gray-500">贡献佣金</Text>
|
||||||
|
<Text className="text-sm font-semibold text-green-600">
|
||||||
|
{isStatsLoading ? '-' : `¥${member.commission}`}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<Space>
|
||||||
|
<Text className="text-xs text-gray-500">团队成员</Text>
|
||||||
|
<Text className={`text-sm font-semibold ${
|
||||||
|
canClick ? 'text-purple-600' : 'text-gray-400'
|
||||||
|
}`}>
|
||||||
|
{isStatsLoading ? '-' : (member.subMembers || 0)}
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderOverview = () => (
|
||||||
|
<View className="rounded-xl p-4">
|
||||||
|
<View
|
||||||
|
className={'bg-white rounded-lg py-2 px-4 mb-3 shadow-sm text-right text-sm font-medium flex justify-between items-center'}>
|
||||||
|
<Text className="text-lg font-semibold">我的团队成员</Text>
|
||||||
|
<Text className={'text-gray-500 '}>成员数：{teamMembers.length}</Text>
|
||||||
|
</View>
|
||||||
|
{teamMembers.map(renderMemberItem)}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
|
||||||
|
// 渲染顶部导航栏
|
||||||
|
const renderHeader = () => {
|
||||||
|
if (levelStack.length === 0) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className="bg-white p-4 mb-3 shadow-sm">
|
||||||
|
<View className="flex items-center justify-between">
|
||||||
|
<View className="flex items-center">
|
||||||
|
<Text className="text-lg font-semibold">
|
||||||
|
{currentDealerName}的团队成员
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
onClick={goBack}
|
||||||
|
className="bg-blue-500"
|
||||||
|
>
|
||||||
|
返回上一层
|
||||||
|
</Button>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dealerUser) {
|
||||||
|
return (
|
||||||
|
<Space className="flex items-center justify-center">
|
||||||
|
<Empty description="您还不是业务人员" style={{
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}} actions={[{text: '立即申请', onClick: () => navTo(`/dealer/apply/add`, true)}]}
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{renderHeader()}
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<View className="flex items-center justify-center mt-20">
|
||||||
|
<Text className="text-gray-500">加载中...</Text>
|
||||||
|
</View>
|
||||||
|
) : teamMembers.length > 0 ? (
|
||||||
|
renderOverview()
|
||||||
|
) : (
|
||||||
|
<View className="flex items-center justify-center mt-20">
|
||||||
|
<Empty description="暂无成员" style={{
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}}/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FixedButton text={'立即邀请'} onClick={() => navTo(`/dealer/qrcode/index`, true)}/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DealerTeam;
|
||||||
|
|||||||
Reference in New Issue
Block a user