cfc/cfc-frontend/pages/profile/team-tree.vue

<template>
  <view class="container">
    <!-- 顶部统计卡 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-value orange">{{ fenToYuan(consumption.totalConsumption) }}</text>
        <text class="stat-label">团队总消费</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value blue">{{ consumption.totalMembers }}</text>
        <text class="stat-label">团队人数</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value green">{{ currentMaxLevel }}</text>
        <text class="stat-label">统计层级</text>
      </view>
    </view>

    <view class="level-counts" v-if="!loading && levelCounts.length > 0">
      <view class="level-count-chip" v-for="lc in levelCounts" :key="lc.level">
        <text class="level-count-num">L{{ lc.level }}</text>
        <text class="level-count-people">{{ lc.count }}人</text>
      </view>
    </view>

    <!-- 层级切换 tabs -->
    <view class="level-tabs">
      <view class="level-tab" :class="{ active: currentMaxLevel === 1 }" @click="switchLevel(1)">1级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 2 }" @click="switchLevel(2)">2级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 3 }" @click="switchLevel(3)">3级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 4 }" @click="switchLevel(4)">4级</view>
      <view class="level-tab" :class="{ active: currentMaxLevel === 5 }" @click="switchLevel(5)">5级</view>
    </view>

    <!-- 树形区域：扁平渲染，depth 控制缩进 -->
    <view class="tree-wrapper">
      <view class="tree-container" v-if="displayNodes.length > 0">
        <view v-for="item in displayNodes" :key="item.userId" class="tree-node"
              :style="{ paddingLeft: (item.depth * 32) + 'rpx' }">
          <view class="node-main" @click="item.hasChildren && toggleExpand(item.userId)">
            <image v-if="item.avatar" class="node-avatar" :src="item.avatar" mode="aspectFill" />
            <text v-else class="node-avatar-text">{{ item.nickname ? item.nickname.charAt(0) : '?' }}</text>
            <text class="node-name">{{ item.nickname }}</text>
            <text class="node-tag" v-if="item.level > 1">L{{ item.level }}</text>
            <view class="node-stats">
              <text class="node-stat consumption">消费 ¥{{ fenToYuan(item.memberConsumption) }}</text>
              <text class="node-stat my-cf">得CF ¥{{ fenToYuan(item.myCfEarnedFromMember) }}</text>
            </view>
            <text class="node-arrow" v-if="item.hasChildren">{{ expandedMap[item.userId] ? '▲' : '▼' }}</text>
          </view>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && displayNodes.length === 0">
        <text>暂无团队成员</text>
      </view>
    </view>

    <view class="loading-overlay" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { getTeamTree, getTeamConsumption } from '@/utils/api.js'

export default {
  data() {
    return {
      nodes: [],
      levelCounts: [],
      consumption: { totalConsumption: 0, totalMembers: 0, maxLevel: 3 },
      currentMaxLevel: 3,
      loading: false,
      expandedMap: {}
    }
  },
  computed: {
    displayNodes() {
      var self = this
      if (this.nodes.length === 0) return []
      var nodeMap = {}
      var i, n, roots = [], result = []
      for (i = 0; i < this.nodes.length; i++) {
        n = this.nodes[i]
        nodeMap[n.userId] = {
          userId: n.userId, nickname: n.nickname, avatar: n.avatar,
          memberConsumption: n.memberConsumption, myCfEarnedFromMember: n.myCfEarnedFromMember,
          level: n.level, _children: []
        }
      }
      for (i = 0; i < this.nodes.length; i++) {
        n = this.nodes[i]
        if (n.parentId && nodeMap[n.parentId] && nodeMap[n.userId]) {
          nodeMap[n.parentId]._children.push(nodeMap[n.userId])
        }
      }
      for (i = 0; i < this.nodes.length; i++) {
        if (this.nodes[i].level === 1 && nodeMap[this.nodes[i].userId]) {
          roots.push(nodeMap[this.nodes[i].userId])
        }
      }
      function flatten(list, depth) {
        for (var j = 0; j < list.length; j++) {
          var node = list[j]
          var hasChildren = node._children.length > 0
          result.push({
            userId: node.userId, nickname: node.nickname, avatar: node.avatar,
            memberConsumption: node.memberConsumption, myCfEarnedFromMember: node.myCfEarnedFromMember,
            level: node.level, depth: depth, hasChildren: hasChildren, childCount: node._children.length
          })
          if (hasChildren && self.expandedMap[node.userId]) {
            flatten(node._children, depth + 1)
          }
        }
      }
      flatten(roots, 0)
      return result
    }
  },
  onLoad() {
    this.loadData()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        var self = this
        var treeRes = await getTeamTree(self.currentMaxLevel)
        var consumptionRes = await getTeamConsumption(self.currentMaxLevel)
        if (treeRes && treeRes.data && treeRes.data.nodes) {
          self.nodes = treeRes.data.nodes
        }
        if (consumptionRes && consumptionRes.data) {
          self.consumption = consumptionRes.data
          self.consumption.maxLevel = self.consumption.maxLevel || self.currentMaxLevel
        }
        self.buildLevelCounts()
      } catch (e) {
        console.error('加载团队树失败', e)
      }
      this.loading = false
    },
    buildLevelCounts() {
      var max = this.consumption.maxLevel || this.currentMaxLevel || 3
      var counts = []
      var i
      for (i = 1; i <= max; i++) counts.push({ level: i, count: 0 })
      this.nodes.forEach(function(n) {
        if (n && n.level && n.level >= 1 && n.level <= max) {
          counts[n.level - 1].count++
        }
      })
      this.levelCounts = counts
    },
    switchLevel(level) {
      if (this.currentMaxLevel === level) return
      this.currentMaxLevel = level
      this.loadData()
    },
    toggleExpand(userId) {
      this.$set(this.expandedMap, userId, !this.expandedMap[userId])
    },
    fenToYuan(fen) {
      if (fen === null || fen === undefined) return '0.00'
      var num = Number(fen)
      if (isNaN(num)) return '0.00'
      return (num / 100).toFixed(2)
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #FFF7ED; padding-bottom: 40rpx; }
.stats-card {
  background: #fff; border-radius: 20rpx; padding: 30rpx; margin: 20rpx 30rpx 16rpx;
  display: flex; align-items: center; box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.stat-item { flex: 1; text-align: center; }
.stat-value { font-size: 36rpx; font-weight: bold; display: block; }
.stat-value.orange { color: #F97316; }
.stat-value.blue { color: #0EA5E9; }
.stat-value.green { color: #10B981; }
.stat-label { font-size: 22rpx; color: #94A3B8; margin-top: 4rpx; display: block; }
.stat-divider { width: 1rpx; height: 48rpx; background: #FED7AA; }
.level-tabs {
  display: flex; padding: 0 30rpx; margin-bottom: 16rpx; overflow-x: auto; gap: 12rpx;
  white-space: nowrap;
}
.level-tab {
  flex-shrink: 0; padding: 12rpx 24rpx; border-radius: 20rpx;
  font-size: 24rpx; color: #64748B; background: #F1F5F9;
}
.level-tab.active { background: #F97316; color: #fff; font-weight: 600; }
.tree-wrapper { padding: 0 30rpx; }
.tree-container { min-height: 300rpx; }
.tree-node { margin-bottom: 16rpx; }
.node-main {
  display: flex; align-items: center; gap: 16rpx;
  background: #fff; border-radius: 16rpx; padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.node-avatar { width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7; flex-shrink: 0; }
.node-avatar-text {
  width: 60rpx; height: 60rpx; border-radius: 50%; background: #FEF3C7;
  display: flex; align-items: center; justify-content: center;
  font-size: 24rpx; color: #F97316; flex-shrink: 0;
}
.node-name { flex: 1; min-width: 0; font-size: 26rpx; color: #1E293B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-tag { font-size: 20rpx; background: #FFF7ED; color: #F97316; padding: 2rpx 8rpx; border-radius: 8rpx; flex-shrink: 0; }
.node-stats { flex-shrink: 0; text-align: right; margin-right: 8rpx; }
.node-stat { font-size: 20rpx; display: block; line-height: 1.5; }
.node-stat.consumption { color: #F97316; }
.node-stat.my-cf { color: #0EA5E9; }
.node-arrow { font-size: 20rpx; color: #94A3B8; flex-shrink: 0; }
.empty-state { text-align: center; padding: 80rpx; color: #94A3B8; font-size: 28rpx; }
.loading-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;
  z-index: 999; font-size: 28rpx; color: #94A3B8;
}
.level-counts {
  display: flex; padding: 0 30rpx; margin-bottom: 16rpx; gap: 12rpx;
  flex-wrap: wrap; align-items: center;
}
.level-count-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: 6rpx;
  background: #fff; border-radius: 16rpx; padding: 10rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.level-count-num { font-size: 24rpx; font-weight: 600; color: #F97316; }
.level-count-people { font-size: 24rpx; color: #64748B; }
</style>