cfc/cfc-frontend/pages/guide/hierarchy/index.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">我的下级成长规划师</text>
      <text class="subtitle">查看和管理下级成长规划师</text>
    </view>

    <!-- 下级成长规划师列表 -->
    <view class="section">
      <view class="section-title">直接下级</view>
      <view class="guide-list" v-if="childGuides.length > 0">
        <view 
          class="guide-item" 
          v-for="guide in childGuides" 
          :key="guide.id"
          @click="viewGuideDetail(guide)"
        >
          <image class="guide-avatar" :src="guide.avatar || '/static/default-avatar.png'" />
          <view class="guide-info">
            <text class="guide-name">{{ guide.nickname || '未命名' }}</text>
            <text class="guide-stats">服务家庭: {{ guide.familyCount || 0 }}</text>
            <text class="guide-stats">测评次数: {{ guide.assessmentCount || 0 }}</text>
          </view>
          <view class="guide-actions">
            <text class="action-btn" @click.stop="viewReports(guide)">查看报告</text>
          </view>
        </view>
      </view>
      <view class="empty-state" v-else>
        <text class="empty-icon">👥</text>
        <text class="empty-text">还没有下级成长规划师</text>
        <text class="empty-hint">分享邀请码邀请其他成长规划师加入</text>
      </view>
    </view>

    <!-- 所有下级成长规划师 -->
    <view class="section" v-if="allChildGuides.length > 0">
      <view class="section-title">所有下级（含间接）</view>
      <view class="guide-list">
        <view 
          class="guide-item" 
          v-for="guide in allChildGuides" 
          :key="guide.id"
          @click="viewGuideDetail(guide)"
        >
          <image class="guide-avatar" :src="guide.avatar || '/static/default-avatar.png'" />
          <view class="guide-info">
            <text class="guide-name">{{ guide.nickname || '未命名' }}</text>
            <text class="guide-stats">服务家庭: {{ guide.familyCount || 0 }}</text>
            <text class="guide-stats">测评次数: {{ guide.assessmentCount || 0 }}</text>
          </view>
          <view class="guide-actions">
            <text class="action-btn" @click.stop="viewReports(guide)">查看报告</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 上级成长规划师 -->
    <view class="section" v-if="parentGuide">
      <view class="section-title">我的上级成长规划师</view>
      <view class="parent-guide-card">
        <image class="guide-avatar" :src="parentGuide.avatar || '/static/default-avatar.png'" />
        <view class="guide-info">
          <text class="guide-name">{{ parentGuide.nickname || '未命名' }}</text>
          <text class="guide-desc">我的上级成长规划师</text>
        </view>
      </view>
    </view>

    <!-- 邀请码分享 -->
    <view class="section">
      <view class="section-title">邀请下级成长规划师</view>
      <button class="btn-share" @click="goToShare">
        <text class="btn-icon">📤</text>
        <text class="btn-text">分享邀请码</text>
      </button>
    </view>
  </view>
</template>

<script>
import { getChildGuides, getAllChildGuides, getParentGuide } from '../../../utils/api.js'

export default {
  data() {
    return {
      childGuides: [],
      allChildGuides: [],
      parentGuide: null
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const userId = uni.getStorageSync('userId')
        
        // 并行获取数据
        const [childRes, allChildRes, parentRes] = await Promise.all([
          getChildGuides(userId),
          getAllChildGuides(userId),
          getParentGuide(userId)
        ])

        if (childRes.code === 200) {
          this.childGuides = childRes.data || []
        }

        if (allChildRes.code === 200) {
          this.allChildGuides = allChildRes.data || []
        }

        if (parentRes.code === 200) {
          this.parentGuide = parentRes.data
        }
      } catch (e) {
        console.error('加载数据失败', e)
      }
    },

    viewGuideDetail(guide) {
      uni.showModal({
        title: '成长规划师详情',
        content: `姓名: ${guide.nickname || '未命名'}\n服务家庭: ${guide.familyCount || 0}\n测评次数: ${guide.assessmentCount || 0}`,
        showCancel: false
      })
    },

    viewReports(guide) {
      uni.navigateTo({
        url: `/pages/assessment/results?guideId=${guide.id}`
      })
    },

    goToShare() {
      uni.navigateTo({
        url: '/pages/guide/invite/share'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.guide-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.guide-item {
  display: flex;
  align-items: center;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
}

.guide-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20rpx;
}

.guide-info {
  flex: 1;
}

.guide-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.guide-stats {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 4rpx;
}

.guide-actions {
  display: flex;
  gap: 10rpx;
}

.action-btn {
  font-size: 24rpx;
  color: #667eea;
  padding: 8rpx 16rpx;
  background: #F0F4FF;
  border-radius: 20rpx;
}

.empty-state {
  text-align: center;
  padding: 60rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 10rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: #CCC;
}

.parent-guide-card {
  display: flex;
  align-items: center;
  background: #F0F4FF;
  border-radius: 10rpx;
  padding: 20rpx;
}

.btn-share {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.btn-icon {
  font-size: 32rpx;
}

.btn-text {
  font-size: 28rpx;
}
</style>