cfc/cfc-frontend/pages/teacher/team.vue

<template>
  <view class="container">
    <view class="section">
      <view class="section-header">
        <text class="section-title">我的直属成员 ({{ teamMembers.length }}人)</text>
        <button class="btn-invite" @click="generateInviteCode">📋 邀请码</button>
      </view>
      <view class="member-list">
        <view class="member-card" v-for="member in teamMembers" :key="member.id" @click="viewMember(member)">
          <view class="member-avatar">
            <image :src="member.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
          </view>
          <view class="member-info">
            <text class="member-name">{{ member.nickname || '成长规划师' + member.id }}</text>
            <text class="member-level">{{ member.level || '高级成长规划师' }}</text>
          </view>
          <view class="member-stats">
            <text class="performance">{{ formatPriceWithSymbol(member.monthlySales || 0) }}</text>
            <text class="label">本月业绩</text>
          </view>
        </view>
        <view class="empty-tip" v-if="teamMembers.length === 0">
          <text>暂无团队成员</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-header">
        <text class="section-title">团队业绩统计</text>
      </view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ formatPriceWithSymbol(teamStats.totalSales) }}</text>
          <text class="stat-label">团队业绩</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ formatPriceWithSymbol(teamStats.myCommission) }}</text>
          <text class="stat-label">我的佣金</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ teamStats.familyCount }}</text>
          <text class="stat-label">服务家庭</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ teamStats.memberCount }}</text>
          <text class="stat-label">团队人数</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTeamMembers, getTeamStats, generateInviteCode } from '../../utils/api.js'

export default {
  data() {
    return {
      teamMembers: [],
      teamStats: {
        totalSales: 0,
        myCommission: 0,
        familyCount: 0,
        memberCount: 0
      }
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const [membersRes, statsRes] = await Promise.all([
          getTeamMembers(),
          getTeamStats()
        ])
        if (membersRes.data) {
          this.teamMembers = membersRes.data
        }
        if (statsRes.data) {
          this.teamStats = statsRes.data
        }
      } catch (e) {
        console.error(e)
      }
    },
    viewMember(member) {
      uni.navigateTo({
        url: `/pages/teacher/member-detail?id=${member.id}`
      })
    },
    async generateInviteCode() {
      try {
        const res = await generateInviteCode()
        const code = res && res.data ? res.data.code : null
        if (!code) {
          uni.showToast({ title: '生成失败，请重试', icon: 'none' })
          return
        }
        this.loadData()
        uni.showModal({
          title: '邀请码已生成',
          content: '邀请码：' + code + '\n新邀请码生成后，旧邀请码立即失效，成员需使用新码重新加入。',
          confirmText: '复制邀请码',
          success: (modalRes) => {
            if (modalRes.confirm) {
              uni.setClipboardData({ data: code })
            }
          }
        })
      } catch (e) {
        console.error(e)
        uni.showToast({ title: '生成失败，请重试', icon: 'none' })
      }
    }
  }
}
</script>

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

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

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.btn-invite {
  font-size: 26rpx;
  background: #667eea;
  color: #fff;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
}

.member-card {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.member-card:last-child {
  border-bottom: none;
}

.member-avatar {
  margin-right: 20rpx;
}

.member-avatar image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  display: block;
}

.member-level {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

.member-stats {
  text-align: right;
}

.performance {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 4rpx;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
}

.stat-item {
  width: 50%;
  text-align: center;
  padding: 20rpx 0;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-top: 8rpx;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 40rpx 0;
}
</style>