cfc/cfc-frontend/pages/assessment/results.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">测评报告</text>
      <text class="subtitle">查看下级成长规划师的测评报告</text>
    </view>

    <!-- 标签页 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ 'active': currentTab === 'my' }"
        @click="switchTab('my')"
      >
        <text class="tab-text">我的报告</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ 'active': currentTab === 'child' }"
        @click="switchTab('child')"
      >
        <text class="tab-text">下级报告</text>
      </view>
    </view>

    <!-- 我的报告列表 -->
    <view class="section" v-if="currentTab === 'my'">
      <view class="section-title">我的测评报告</view>
      <view class="report-list" v-if="myReports.length > 0">
        <view 
          class="report-item" 
          v-for="report in myReports" 
          :key="report.id"
          @click="viewReportDetail(report)"
        >
          <view class="report-header">
            <text class="report-child">{{ report.childName || '未命名' }}</text>
            <text class="report-date">{{ formatDate(report.assessmentDate) }}</text>
          </view>
          <view class="report-scores">
            <view class="score-item">
              <text class="score-label">综合得分</text>
              <text class="score-value">{{ report.overallScore }}</text>
            </view>
          </view>
          <view class="report-preview">
            <text class="preview-text">{{ report.analysisReport && report.analysisReport.substring(0, 50) || '' }}...</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="currentTab === 'child'">
      <view class="section-title">下级成长规划师的报告</view>
      <view class="report-list" v-if="childReports.length > 0">
        <view 
          class="report-item" 
          v-for="report in childReports" 
          :key="report.id"
          @click="viewReportDetail(report)"
        >
          <view class="report-header">
            <text class="report-child">{{ report.childName || '未命名' }}</text>
            <text class="report-date">{{ formatDate(report.assessmentDate) }}</text>
            <text class="report-guide">成长规划师: {{ report.guideName || '未知' }}</text>
          </view>
          <view class="report-scores">
            <view class="score-item">
              <text class="score-label">综合得分</text>
              <text class="score-value">{{ report.overallScore }}</text>
            </view>
          </view>
          <view class="report-preview">
            <text class="preview-text">{{ report.analysisReport && report.analysisReport.substring(0, 50) }}...</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="report-modal" v-if="showReportModal" @click="showReportModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">测评报告详情</text>
          <text class="modal-close" @click="showReportModal = false">✕</text>
        </view>
        
        <view class="report-detail">
          <view class="detail-section">
            <text class="detail-title">基本信息</text>
            <view class="detail-row">
              <text class="detail-label">孩子姓名</text>
              <text class="detail-value">{{ currentReport.childName || '未命名' }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">测评日期</text>
              <text class="detail-value">{{ formatDate(currentReport.assessmentDate) }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">测评时长</text>
              <text class="detail-value">{{ currentReport.durationMinutes }}分钟</text>
            </view>
          </view>

          <view class="detail-section">
            <text class="detail-title">DAN测评结果</text>
            <view class="detail-row">
              <text class="detail-label">注意力得分</text>
              <text class="detail-value">{{ currentReport.attentionScore }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">专注力得分</text>
              <text class="detail-value">{{ currentReport.focusScore }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">记忆力得分</text>
              <text class="detail-value">{{ currentReport.memoryScore }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">逻辑思维得分</text>
              <text class="detail-value">{{ currentReport.logicScore }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">综合得分</text>
              <text class="detail-value">{{ currentReport.overallScore }}</text>
            </view>
          </view>

          <view class="detail-section">
            <text class="detail-title">分析报告</text>
            <view class="detail-content">
              <text class="content-text">{{ currentReport.analysisReport }}</text>
            </view>
          </view>

          <view class="detail-section">
            <text class="detail-title">成长建议</text>
            <view class="detail-content">
              <text class="content-text">{{ currentReport.growthSuggestions }}</text>
            </view>
          </view>

          <view class="detail-section" v-if="currentReport.nextReviewDate">
            <text class="detail-title">下次复测日期</text>
            <view class="detail-row">
              <text class="detail-label">建议复测时间</text>
              <text class="detail-value">{{ formatDate(currentReport.nextReviewDate) }}</text>
            </view>
          </view>
        </view>

        <view class="modal-actions">
          <button class="btn-close" @click="showReportModal = false">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMyAssessmentResults, getChildAssessmentResults } from '../../utils/api.js'

export default {
  data() {
    return {
      currentTab: 'my',
      myReports: [],
      childReports: [],
      currentReport: null,
      showReportModal: false
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const userId = uni.getStorageSync('userId')
        
        // 并行获取数据
        const [myRes, childRes] = await Promise.all([
          getMyAssessmentResults(userId),
          getChildAssessmentResults(userId)
        ])

        if (myRes.code === 200) {
          this.myReports = myRes.data || []
        }

        if (childRes.code === 200) {
          this.childReports = childRes.data || []
        }
      } catch (e) {
        console.error('加载数据失败', e)
      }
    },

    switchTab(tab) {
      this.currentTab = tab
    },

    viewReportDetail(report) {
      this.currentReport = report
      this.showReportModal = true
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    }
  }
}
</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;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  padding: 10rpx;
  margin-bottom: 30rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.tab-item.active {
  background: #667eea;
  color: #fff;
}

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

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

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

.report-item {
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
}

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

.report-child {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.report-date {
  font-size: 24rpx;
  color: #999;
}

.report-guide {
  font-size: 24rpx;
  color: #667eea;
}

.report-scores {
  display: flex;
  gap: 20rpx;
  margin-bottom: 15rpx;
}

.score-item {
  background: #E8F5E9;
  padding: 10rpx 15rpx;
  border-radius: 10rpx;
}

.score-label {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.score-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.report-preview {
  font-size: 26rpx;
  color: #999;
  line-height: 1.5;
}

.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;
}

.report-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

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

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.report-detail {
  margin-bottom: 30rpx;
}

.detail-section {
  margin-bottom: 30rpx;
}

.detail-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.detail-label {
  font-size: 26rpx;
  color: #666;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}

.detail-content {
  background: #F8F8F8;
  padding: 20rpx;
  border-radius: 10rpx;
}

.content-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.btn-close {
  flex: 1;
  height: 80rpx;
  background: #F0F0F0;
  color: #333;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}
</style>