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

<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header">
      <view class="user-info">
        <image class="avatar" :src="teacherInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="info-text">
          <text class="nickname">{{ teacherInfo.nickname || '成长规划师' }}</text>
          <view class="status-badge" v-if="teacherStatus !== 'approved'">
            <text class="badge-text">{{ teacherStatus === 'pending' ? '审核中' : teacherStatus }}</text>
          </view>
        </view>
      </view>
      <view class="switch-btn" @click="switchToParent">
        <text class="switch-text">切换家长端</text>
      </view>
    </view>

    <!-- 审核进度提示 -->
    <view class="audit-section" v-if="teacherStatus === 'pending'">
      <view class="audit-card">
        <view class="audit-title">申请审核中</view>
        <view class="audit-steps">
          <view class="step completed">
            <view class="step-dot"></view>
            <text class="step-text">提交申请</text>
          </view>
          <view class="step-line completed"></view>
          <view class="step active">
            <view class="step-dot"></view>
            <text class="step-text">管理员审核</text>
          </view>
          <view class="step-line"></view>
          <view class="step">
            <view class="step-dot"></view>
            <text class="step-text">审核通过</text>
          </view>
        </view>
        <text class="audit-hint">您的成长规划师申请正在审核中，通常1-3个工作日内完成</text>
      </view>
    </view>

    <!-- 审核拒绝提示 -->
    <view class="audit-section" v-if="teacherStatus === 'rejected'">
      <view class="audit-card rejected">
        <view class="audit-title">申请未通过</view>
        <view class="reject-reason" v-if="teacherRejectReason">
          <text class="reason-label">拒绝原因：</text>
          <text class="reason-text">{{ teacherRejectReason }}</text>
        </view>
        <view class="reject-reason" v-else>
          <text class="reason-text">您的申请暂未通过审核</text>
        </view>
        <view class="reapply-btn" @click="reapply">
          <text class="reapply-text">重新申请</text>
        </view>
      </view>
    </view>

    <!-- 数据概览 -->
    <view class="stats-grid">
      <view class="stat-card blue">
        <text class="stat-value">{{ stats.serviceFamilyCount }}</text>
        <text class="stat-label">服务家庭</text>
      </view>
      <view class="stat-card green">
        <text class="stat-value">{{ stats.pendingTaskCount }}</text>
        <text class="stat-label">待处理任务</text>
      </view>
      <view class="stat-card gold">
        <text class="stat-value">{{ formatPriceWithSymbol(stats.todayIncome) }}</text>
        <text class="stat-label">今日收入</text>
      </view>
      <view class="stat-card purple">
        <text class="stat-value">{{ stats.teamCount }}</text>
        <text class="stat-label">团队成员</text>
      </view>
    </view>

    <!-- 快捷功能（仅审核通过后可使用） -->
      <view class="section" v-if="teacherStatus === 'approved'">
        <view class="section-title">快捷功能</view>
        <view class="menu-grid">
          <view class="menu-item" @click="goTo('families')">
            <view class="menu-icon blue">👨‍👩‍👧</view>
            <text class="menu-label">服务家庭</text>
          </view>
          <view class="menu-item" @click="goTo('packages')">
            <view class="menu-icon gold">📦</view>
            <text class="menu-label">任务模板管理</text>
          </view>
          <view class="menu-item" @click="goTo('team')">
            <view class="menu-icon purple">👥</view>
            <text class="menu-label">我的团队</text>
          </view>
          <view class="menu-item" @click="goTo('messages')">
            <view class="menu-icon green">💬</view>
            <text class="menu-label">消息中心</text>
          </view>
          <view class="menu-item" @click="goTo('orders')">
            <view class="menu-icon cyan">📊</view>
            <text class="menu-label">订单佣金</text>
          </view>
          <view class="menu-item" @click="goTo('growth')">
            <view class="menu-icon gray">📋</view>
            <text class="menu-label">成长记录</text>
          </view>
        </view>
      </view>
      <view class="section disabled-section" v-else>
        <view class="section-title">快捷功能</view>
        <view class="menu-grid disabled">
          <view class="menu-item">
            <view class="menu-icon blue disabled-icon">👨‍👩‍👧</view>
            <text class="menu-label disabled-label">服务家庭</text>
          </view>
          <view class="menu-item">
            <view class="menu-icon gold disabled-icon">📦</view>
            <text class="menu-label disabled-label">任务模板管理</text>
          </view>
          <view class="menu-item">
            <view class="menu-icon purple disabled-icon">👥</view>
            <text class="menu-label disabled-label">我的团队</text>
          </view>
          <view class="menu-item">
            <view class="menu-icon green disabled-icon">💬</view>
            <text class="menu-label disabled-label">消息中心</text>
          </view>
          <view class="menu-item">
            <view class="menu-icon cyan disabled-icon">📊</view>
            <text class="menu-label disabled-label">订单佣金</text>
          </view>
          <view class="menu-item">
            <view class="menu-icon gray disabled-icon">📋</view>
            <text class="menu-label disabled-label">成长记录</text>
          </view>
        </view>
      </view>

    <!-- 底部占位（TabBar高度） -->
    <view class="bottom-space"></view>
  </view>
</template>

<script>
import { switchRole } from '../../utils/api.js'

export default {
  data() {
    return {
      teacherInfo: {},
      stats: {
        serviceFamilyCount: 0,
        pendingTaskCount: 0,
        todayIncome: 0,
        teamCount: 0
      }
    }
  },
  computed: {
    teacherStatus() {
      return uni.getStorageSync('teacherStatus') || 'pending'
    },
    teacherRejectReason() {
      return uni.getStorageSync('teacherRejectReason') || ''
    }
  },
  onLoad() {
    this.loadData()
    this._onLoadFired = true
  },
  onShow() {
    if (this._onLoadFired) {
      this._onLoadFired = false
    } else {
      this.loadData()
    }
  },
  methods: {
    loadData() {
      const userInfo = uni.getStorageSync('userInfo')
      this.teacherInfo = userInfo || {}
    },
    reapply() {
      uni.navigateTo({ url: '/pages/guide/register/index' })
    },
    async switchToParent() {
      try {
        const result = await switchRole('parent')
        if (result.code === 200 && result.data) {
          const data = result.data
          uni.setStorageSync('token', data.token)
          uni.setStorageSync('role', data.role)
          uni.setStorageSync('currentRole', 'parent')
          uni.setStorageSync('isSwitchedChild', false)
          uni.setStorageSync('isSwitchedTeacher', false)
          uni.$emit('switchRole')
          uni.reLaunch({ url: '/pages/index-home/index' })
        }
      } catch (e) {
        uni.showToast({ title: e.message || '切换失败', icon: 'none' })
      }
    },
    goTo(page) {
      const routes = {
        families: '/pages/teacher/families',
        packages: '/pages/guide/packages/index',
        team: '/pages/teacher/team',
        messages: '/pages/teacher/messages',
        orders: '/pages/teacher/orders',
        growth: '/pages/growth-main/index'
      }
      uni.reLaunch({ url: routes[page] })
    }
  }
}
</script>

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

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
}

.status-badge {
  background: #FEF3C7;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-top: 8rpx;
}

.badge-text {
  font-size: 22rpx;
  color: #D97706;
}

.switch-btn {
  background: #3B82F6;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
}

.switch-text {
  color: #fff;
  font-size: 24rpx;
}

.audit-section {
  margin-bottom: 24rpx;
}

.audit-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
}

.audit-card.rejected {
  border-left: 6rpx solid #EF4444;
}

.audit-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1E293B;
  margin-bottom: 24rpx;
}

.audit-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.step-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #E2E8F0;
  margin-bottom: 8rpx;
}

.step.completed .step-dot {
  background: #10B981;
}

.step.active .step-dot {
  background: #3B82F6;
  box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.2);
}

.step-text {
  font-size: 22rpx;
  color: #94A3B8;
}

.step.completed .step-text {
  color: #10B981;
}

.step.active .step-text {
  color: #3B82F6;
  font-weight: bold;
}

.step-line {
  width: 60rpx;
  height: 4rpx;
  background: #E2E8F0;
  margin: 0 8rpx;
  margin-bottom: 28rpx;
}

.step-line.completed {
  background: #10B981;
}

.audit-hint {
  font-size: 24rpx;
  color: #64748B;
  text-align: center;
}

.reject-reason {
  background: #FEF2F2;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 20rpx;
}

.reason-label {
  font-size: 24rpx;
  color: #991B1B;
  font-weight: bold;
}

.reason-text {
  font-size: 24rpx;
  color: #DC2626;
}

.reapply-btn {
  background: #3B82F6;
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
}

.reapply-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.stat-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #64748B;
}

.stat-card.blue .stat-value { color: #3B82F6; }
.stat-card.green .stat-value { color: #10B981; }
.stat-card.gold .stat-value { color: #F59E0B; }
.stat-card.purple .stat-value { color: #8B5CF6; }

.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1E293B;
  margin-bottom: 20rpx;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  margin-bottom: 12rpx;
}

.menu-icon.blue { background: rgba(59, 130, 246, 0.15); }
.menu-icon.gold { background: rgba(245, 158, 11, 0.15); }
.menu-icon.purple { background: rgba(139, 92, 246, 0.15); }
.menu-icon.green { background: rgba(16, 185, 129, 0.15); }
.menu-icon.cyan { background: rgba(6, 182, 212, 0.15); }
.menu-icon.gray { background: rgba(100, 116, 139, 0.15); }

.menu-label {
  font-size: 24rpx;
  color: #64748B;
}

.bottom-space {
  height: 120rpx;
}

.disabled-section {
  opacity: 0.6;
}

.disabled .menu-item {
  pointer-events: none;
}

.disabled-icon {
  filter: grayscale(100%);
  opacity: 0.5;
}

.disabled-label {
  color: #94A3B8;
}
</style>