cfc/cfc-web/src/views/teacher/TeacherTeam.vue

<template>
  <div class="teacher-team admin-page">
    <!-- 页面标题区 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">我的团队</h2>
        <span class="page-desc">管理您的下级规划师和团队业绩</span>
      </div>
      <div class="header-actions">
        <el-button type="primary" class="primary-btn" @click="handleGenerateCode">
          <i class="el-icon-link"></i> 生成邀请码
        </el-button>
      </div>
    </div>

    <!-- 团队统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon blue">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ teamStats.memberCount }}</div>
            <div class="stat-label">团队人数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon green">
            <i class="el-icon-house"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ teamStats.familyCount }}</div>
            <div class="stat-label">服务家庭</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon orange">
            <i class="el-icon-s-goods"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ formatPriceWithSymbol(teamStats.totalSales) }}</div>
            <div class="stat-label">团队业绩</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon purple">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ formatPriceWithSymbol(teamStats.myCommission) }}</div>
            <div class="stat-label">我的佣金</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 邀请码卡片 -->
    <el-card class="invite-code-card" v-if="inviteCode">
      <div class="invite-code-content">
        <div class="invite-code-info">
          <span class="invite-label">邀请码</span>
          <span class="invite-code">{{ inviteCode.code }}</span>
          <span class="invite-expire">有效期至 {{ inviteCode.expireAt }}</span>
        </div>
        <div class="invite-actions">
          <el-button size="small" @click="handleCopyCode">复制</el-button>
          <el-button size="small" type="text" @click="handleDeleteCode">删除</el-button>
        </div>
      </div>
    </el-card>

    <!-- 团队成员列表 -->
    <el-card class="table-card">
      <div slot="header" class="card-header">
        <span class="card-title">团队成员</span>
        <el-input v-model="keyword" placeholder="搜索成员..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
        <span class="card-count">共 {{ filteredMembers.length }} 人</span>
    </div>
    <div style="overflow:auto;max-height:calc(100vh - 300px);">
      <el-table :data="filteredMembers" stripe style="width: 100%; max-height:calc(100vh - 300px);" v-loading="loading">
        <el-table-column label="成员信息" min-width="200">
          <template slot-scope="scope">
            <div class="member-cell">
              <div class="member-avatar" :style="{ background: getAvatarGradient(scope.row.level) }">
                <i class="el-icon-user"></i>
              </div>
              <div class="member-detail">
                <div class="member-name">{{ scope.row.nickname || '规划师' + scope.row.id }}</div>
                <div class="member-id">ID: {{ scope.row.id }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="级别" width="120">
          <template slot-scope="scope">
            <el-tag :type="getLevelType(scope.row.level)" effect="dark" size="small">
              {{ scope.row.level || '初级' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="familyCount" label="服务家庭" width="100">
          <template slot-scope="scope">
            <span class="family-count">{{ scope.row.familyCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="childrenCount" label="服务孩子" width="100">
          <template slot-scope="scope">
            <span class="children-count">{{ scope.row.childrenCount || 0 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="monthlySales" label="本月业绩" width="120">
          <template slot-scope="scope">
            <span class="sales-value">{{ formatPriceWithSymbol(scope.row.monthlySales || 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalSales" label="累计业绩" width="120">
          <template slot-scope="scope">
            <span class="total-value">{{ formatPriceWithSymbol(scope.row.totalSales || 0) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="commission" label="贡献佣金" width="100">
          <template slot-scope="scope">
            <span class="commission-value">+{{ formatPriceWithSymbol(Math.round((scope.row.monthlySales || 0) * 0.1)) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="view" icon="el-icon-view">查看详情</el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </el-card>

    <!-- 成员详情抽屉 -->
    <el-drawer :visible.sync="drawerVisible" title="成员详情" size="480px" direction="rtl">
      <div class="drawer-content" v-if="currentMember">
        <el-divider content-position="left">基本信息</el-divider>
        <div class="detail-row">
          <span class="detail-label">成员ID</span>
          <span class="detail-value">{{ currentMember.id }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">昵称</span>
          <span class="detail-value">{{ currentMember.nickname || '-' }}</span>
        </div>
        <div class="detail-row">
          <span class="detail-label">级别</span>
          <el-tag :type="getLevelType(currentMember.level)" size="small">{{ currentMember.level || '初级' }}</el-tag>
        </div>
        <div class="detail-row">
          <span class="detail-label">注册时间</span>
          <span class="detail-value">{{ currentMember.createdAt || '-' }}</span>
        </div>

        <el-divider content-position="left">业绩统计</el-divider>
        <el-row :gutter="12">
          <el-col :span="12">
            <div class="mini-stat">
              <div class="mini-stat-value" style="color: #3B82F6">{{ formatPriceWithSymbol(currentMember.monthlySales || 0) }}</div>
              <div class="mini-stat-label">本月业绩</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="mini-stat">
              <div class="mini-stat-value" style="color: #10B981">{{ formatPriceWithSymbol(currentMember.totalSales || 0) }}</div>
              <div class="mini-stat-label">累计业绩</div>
            </div>
          </el-col>
        </el-row>

        <el-divider content-position="left">服务概况</el-divider>
        <el-row :gutter="12">
          <el-col :span="8">
            <div class="mini-stat">
              <div class="mini-stat-value" style="color: #F59E0B">{{ currentMember.familyCount || 0 }}</div>
              <div class="mini-stat-label">服务家庭</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mini-stat">
              <div class="mini-stat-value" style="color: #8B5CF6">{{ currentMember.childrenCount || 0 }}</div>
              <div class="mini-stat-label">服务孩子</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="mini-stat">
              <div class="mini-stat-value" style="color: #10B981">{{ currentMember.taskCount || 0 }}</div>
              <div class="mini-stat-label">完成任务</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getTeamMembers, getTeamStats } from '@/api/guide'

export default {
  name: 'TeacherTeam',
  data() {
    return {
      teamMembers: [],
      keyword: '',
      teamStats: {
        totalSales: 0,
        myCommission: 0,
        familyCount: 0,
        memberCount: 0
      },
      inviteCode: null,
      drawerVisible: false,
      currentMember: null,
      loading: false
    }
  },
  computed: {
    filteredMembers() {
      if (!this.keyword) return this.teamMembers
      const kw = this.keyword.toLowerCase()
      return this.teamMembers.filter(m =>
        (m.nickname || '').toLowerCase().includes(kw) ||
        String(m.id).includes(kw)
      )
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      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)
      } finally {
        this.loading = false
      }
    },
    handleView(row) {
      this.currentMember = row
      this.drawerVisible = true
    },
    handleEdit(row) {
      this.handleView(row)
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'view': this.handleView(row); break
        case 'edit': this.handleEdit(row); break
        case 'delete': this.$confirm('确认删除该成员吗？', '提示', { type: 'warning' }).then(() => {}).catch(() => {}); break
      }
    },
    handleSearch() {
    },
    handleGenerateCode() {
      this.$prompt('请选择邀请码有效期', '生成邀请码', {
        confirmButtonText: '7天',
        cancelButtonText: '30天'
      }).then(({ value }) => {
        this.inviteCode = {
          code: Math.random().toString(36).substring(2, 10).toUpperCase(),
          expireAt: value ? new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toLocaleDateString() : new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toLocaleDateString()
        }
        this.$message.success('邀请码已生成')
      }).catch(() => {
        // 用户取消操作，不做任何处理
      })
    },
    handleCopyCode() {
      navigator.clipboard.writeText(this.inviteCode.code)
      this.$message.success('已复制到剪贴板')
    },
    handleDeleteCode() {
      this.inviteCode = null
      this.$message.success('已删除')
    },
    getLevelType(level) {
      const map = {
        '初级': '',
        '中级': 'success',
        '高级': 'warning'
      }
      return map[level] || ''
    },
    getAvatarGradient(level) {
      const gradients = {
        '初级': 'linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%)',
        '中级': 'linear-gradient(135deg, #10B981 0%, #34D399 100%)',
        '高级': 'linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)'
      }
      return gradients[level] || gradients['初级']
    }
  }
}
</script>

<style scoped>
.teacher-team {
  padding: 24px;
  background: #F0F7FF;
  min-height: calc(100vh - 120px);
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 4px 0;
}

.page-desc {
  font-size: 14px;
  color: #64748B;
}

.primary-btn {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
}

.primary-btn:hover {
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
}

/* 统计卡片 */
.stats-row {
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 22px;
  color: #FFFFFF;
}

.stat-icon.blue {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.stat-icon.green {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

.stat-icon.orange {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.stat-icon.purple {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1E293B;
}

.stat-label {
  font-size: 14px;
  color: #64748B;
  margin-top: 2px;
}

/* 邀请码卡片 */
.invite-code-card {
  border-radius: 16px;
  margin-bottom: 24px;
  border: none;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.06);
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.invite-code-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.invite-label {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.invite-code {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: 'Monaco', 'Menlo', monospace;
  letter-spacing: 2px;
}

.invite-expire {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.invite-actions {
  display: flex;
  gap: 8px;
}

/* 表格卡片 */
.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.06);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
}

.card-count {
  font-size: 13px;
  color: #64748B;
}

.member-cell {
  display: flex;
  align-items: center;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-right: 12px;
  font-size: 16px;
}

.member-name {
  font-weight: 600;
  font-size: 15px;
  color: #1E293B;
}

.member-id {
  font-size: 12px;
  color: #94A3B8;
  margin-top: 2px;
}

.family-count, .children-count {
  font-weight: 600;
  color: #3B82F6;
}

.sales-value {
  font-weight: 600;
  color: #F59E0B;
}

.total-value {
  font-weight: 600;
  color: #1E293B;
}

.commission-value {
  font-weight: 700;
  color: #10B981;
}

/* 抽屉样式 */
.drawer-content {
  padding: 0 24px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}

.detail-label {
  color: #64748B;
  font-size: 14px;
}

.detail-value {
  color: #1E293B;
  font-size: 14px;
  font-weight: 500;
}

.mini-stat {
  text-align: center;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 12px;
}

.mini-stat-value {
  font-size: 20px;
  font-weight: 700;
}

.mini-stat-label {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
}
</style>