feat(dealer/team): 实现经销商团队多层级查看功能

- 添加层级栈管理，支持返回上一层功能
- 增加加载状态显示
- 优化团队成员列表展示，增加可查看下级成员的提示
- 添加返回上一层按钮
- 修复了一些与团队成员数据相关的小问题

src/dealer/team/index.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useCallback} from 'react'
 import {View, Text} from '@tarojs/components'
-import {Space,Empty, Avatar} from '@nutui/nutui-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'
@@ -24,16 +24,29 @@ interface TeamMemberWithStats extends ShopDealerReferee {
   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 fetchTeamData = useCallback(async () => {
     if (!dealerUser?.userId && !dealerId) return
 
     try {
+      setLoading(true)
       console.log(dealerId, 'dealerId>>>>>>>>>')
       // 获取团队成员关系
       const refereeResult = await listShopDealerReferee({
@@ -52,20 +65,30 @@ const DealerTeam: React.FC = () => {
           joinTime: member.createTime
         }))
 
-        // 并行获取每个成员的订单统计
+        // 并行获取每个成员的订单统计和下级成员数量
         const memberStats = await Promise.all(
           processedMembers.map(async (member) => {
             try {
+              // 获取订单统计
               const orderResult = await pageShopDealerOrder({
                 page: 1,
                 limit: 100,
                 userId: member.userId
               })
 
+              // 获取下级成员数量
+              const subMembersResult = await listShopDealerReferee({
+                dealerId: member.userId
+              })
+
+              let orderCount = 0
+              let commission = '0.00'
+              let status: 'active' | 'inactive' = 'inactive'
+
               if (orderResult?.list) {
                 const orders = orderResult.list
-                const orderCount = orders.length
-                const commission = orders.reduce((sum, order) => {
+                orderCount = orders.length
+                commission = orders.reduce((sum, order) => {
                   const levelCommission = member.level === 1 ? order.firstMoney :
                     member.level === 2 ? order.secondMoney :
                       order.thirdMoney
@@ -78,17 +101,18 @@ const DealerTeam: React.FC = () => {
                 const hasRecentOrder = orders.some(order =>
                   new Date(order.createTime || '') > thirtyDaysAgo
                 )
-
-                return {
-                  ...member,
-                  orderCount,
-                  commission,
-                  status: hasRecentOrder ? 'active' as const : 'inactive' as const
-                }
+                status = hasRecentOrder ? 'active' : 'inactive'
+              }
+
+              return {
+                ...member,
+                orderCount,
+                commission,
+                status,
+                subMembers: subMembersResult?.length || 0
               }
-              return member
             } catch (error) {
-              console.error(`获取成员${member.userId}订单失败:`, error)
+              console.error(`获取成员${member.userId}数据失败:`, error)
               return member
             }
           })
@@ -103,12 +127,58 @@ const DealerTeam: React.FC = () => {
         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 || '')
+    }
   }
 
   // 监听数据变化，获取团队数据
@@ -118,8 +188,25 @@ const DealerTeam: React.FC = () => {
     }
   }, [fetchTeamData])
 
-  const renderMemberItem = (member: TeamMemberWithStats) => (
-    <View key={member.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm" onClick={() => getNextUser(member)}>
+  // 初始化当前用户名称
+  useEffect(() => {
+    if (!dealerId && dealerUser?.realName && !currentDealerName) {
+      setCurrentDealerName(dealerUser.realName)
+    }
+  }, [dealerUser, dealerId, currentDealerName])
+
+  const renderMemberItem = (member: TeamMemberWithStats) => {
+    // 判断是否可以点击：有下级成员且未达到层级限制
+    const canClick = member.subMembers && member.subMembers > 0 && levelStack.length < 1
+
+    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"
@@ -131,22 +218,17 @@ const DealerTeam: React.FC = () => {
             <Text className="font-semibold text-gray-800 mr-2">
               {member.nickname}
             </Text>
-            {/*{getLevelIcon(Number(member.level))}*/}
-            {/*<Text className="text-xs text-gray-500 ml-1">*/}
-            {/*  {member.level}级*/}
-            {/*</Text>*/}
+            {canClick && (
+              <Text className="text-xs text-blue-500">可查看下级</Text>
+            )}
+            {!canClick && member.subMembers && member.subMembers > 0 && levelStack.length >= 1 && (
+              <Text className="text-xs text-red-500">已达层级限制</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">
@@ -164,20 +246,48 @@ const DealerTeam: React.FC = () => {
         </Space>
         <Space>
           <Text className="text-xs text-gray-500">团队成员</Text>
-          <Text className="text-sm font-semibold text-purple-600">
-            {member.subMembers}
+          <Text className={`text-sm font-semibold ${
+            canClick ? 'text-purple-600' : 'text-gray-400'
+          }`}>
+            {member.subMembers || 0}
           </Text>
         </Space>
       </View>
     </View>
-  )
+    )
+  }
 
   const renderOverview = () => (
     <View className="rounded-xl p-4">
-      {teamMembers.slice(0, 3).map(renderMemberItem)}
+      {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="bg-gray-50 flex items-center justify-center">
@@ -191,7 +301,13 @@ const DealerTeam: React.FC = () => {
 
   return (
     <>
-      {teamMembers.length > 0 ? (
+      {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">
@@ -206,4 +322,4 @@ const DealerTeam: React.FC = () => {
   )
 }
 
-export default DealerTeam
+export default DealerTeam;