cfc/cfc-frontend/pages/service-center/index.vue

<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="header-title">服务中心</view>
      <view class="header-close" @click="close">
        <text>✕</text>
      </view>
    </view>

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

    <!-- 快捷功能 -->
    <view class="section" v-if="isTeacherApproved">
      <view class="section-title">快捷功能</view>
      <view class="menu-row">
        <view class="menu-item" @click="goToFamilies">
          <view class="menu-icon blue">👨‍👩‍👧</view>
          <text class="menu-label">服务家庭</text>
        </view>
        <view class="menu-item" @click="goToServiceTasks">
          <view class="menu-icon green">⚡</view>
          <text class="menu-label">待办任务</text>
        </view>
        <view class="menu-item" @click="goToMessages">
          <view class="menu-icon cyan">💬</view>
          <text class="menu-label">消息中心</text>
        </view>
        <view class="menu-item" @click="goToAssessmentResult">
          <view class="menu-icon purple">📊</view>
          <text class="menu-label">录入测评结果</text>
        </view>
      </view>
    </view>

    <!-- 无权限提示 -->
    <view class="section" v-else>
      <view class="section-title">服务中心</view>
      <view class="empty-tip" v-if="isTeacherPending">申请审核中，暂未开放服务中心功能</view>
      <view class="empty-tip" v-if="isTeacherRejected">申请未通过，请联系管理员</view>
      <view class="empty-tip" v-if="!isTeacher && !isTeacherPending && !isTeacherRejected">暂无服务中心权限</view>
    </view>
  </view>
</template>

<script>
import { getTeacherPendingTasks, getTeacherUnreadCount } from '@/utils/api.js'

export default {
  data() {
    return {
      isTeacher: false,
      isTeacherApproved: false,
      isTeacherPending: false,
      isTeacherRejected: false,
      serviceFamilyCount: 0,
      pendingTaskCount: 0,
      todayIncome: 0,
      teamCount: 0
    }
  },
  onLoad() {
    this.initRole()
    this.loadTeacherData()
  },
  methods: {
    initRole() {
      var role = uni.getStorageSync('role') || uni.getStorageSync('currentRole') || 'parent'
      this.isTeacher = role === 'teacher'
      var status = uni.getStorageSync('teacherStatus') || ''
      this.isTeacherPending = role === 'teacher' && status === 'pending'
      this.isTeacherRejected = role === 'teacher' && status === 'rejected'
      this.isTeacherApproved = role === 'teacher' && status === 'approved'
    },
    async loadTeacherData() {
      if (!this.isTeacherApproved) return
      try {
        var res = await getTeacherPendingTasks()
        if (res && res.data && Array.isArray(res.data)) {
          this.pendingTaskCount = res.data.length
        } else if (res && res.data && res.data.pendingCount != null) {
          this.pendingTaskCount = res.data.pendingCount
        }
      } catch (e) {
        this.pendingTaskCount = uni.getStorageSync('pendingTaskCount') || 0
      }
      // 今日收入/服务家庭/团队数：后端暂无专用接口，暂用存储兜底
      this.todayIncome = uni.getStorageSync('todayIncome') || 0
      this.serviceFamilyCount = uni.getStorageSync('serviceFamilyCount') || 0
      this.teamCount = uni.getStorageSync('teamCount') || 0
    },
    formatPriceWithSymbol(value) {
      if (!value) return '¥0'
      return '¥' + parseFloat(value).toFixed(2)
    },
    close() {
      uni.navigateBack()
    },
    goToFamilies() {
      uni.navigateTo({ url: '/pages/teacher/families' })
    },
    goToServiceTasks() {
      uni.navigateTo({ url: '/pages/teacher/service-tasks' })
    },
    goToMessages() {
      uni.navigateTo({ url: '/pages/teacher/messages' })
    },
    goToAssessmentResult() {
      uni.navigateTo({ url: '/pages/assessment/execution' })
    }
  }
}
</script>

<style scoped>
.container {
  background: #F8F4EF;
  min-height: 100vh;
  padding: 0 0 40rpx;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 24rpx 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #1E293B;
}

.header-close {
  font-size: 28rpx;
  color: #999;
}

/* 统计卡片横排（替代 grid，使用 flexbox） */
.stats-row {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding: 0 24rpx;
  margin-bottom: 16rpx;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.stat-card.blue { border-top: 4rpx solid #3B82F6; }
.stat-card.green { border-top: 4rpx solid #10B981; }
.stat-card.gold { border-top: 4rpx solid #F59E0B; }
.stat-card.purple { border-top: 4rpx solid #8B5CF6; }

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

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

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

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

/* 菜单横排（替代 grid，使用 flexbox） */
.menu-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx;
}

.menu-item {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  background: #F8F4EF;
  border-radius: 16rpx;
}

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

.menu-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.menu-icon.green { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.menu-icon.cyan { background: rgba(6, 182, 212, 0.15); color: #06B6D4; }
.menu-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }

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

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