cfc/cfc-frontend/pages/wisdom/cognitive-report.vue

<template>
  <view class="container">
    <view class="report-card" v-if="report">
      <view class="report-header">
        <text class="report-title">认知测评报告</text>
        <text class="report-date">测评日期: {{ report.assessmentDate || '-' }}</text>
      </view>

      <!-- 综合认知评分 -->
      <view class="overall-score-wrap">
        <text class="overall-label">综合认知评分</text>
        <view class="overall-row">
          <text class="overall-value">{{ report.overallScore || 0 }}</text>
          
        </view>
      </view>

      <!-- 六维条形图 -->
      <view class="dimension-list">
        <view class="dimension-item" v-for="dim in dimensions" :key="dim.key">
          <view class="dimension-header">
            <view class="dimension-label-row">
              <text class="dimension-icon">{{ dim.icon }}</text>
              <text class="dimension-name">{{ dim.label }}</text>
            </view>
            <text class="dimension-score">{{ report[dim.key] || 0 }}</text>
          </view>
          <view class="dimension-bar">
            <view class="dimension-bar-fill" :style="{ width: (report[dim.key] || 0) + '%' }"></view>
          </view>
          <text class="dimension-desc">{{ dim.desc }}</text>
        </view>
      </view>

      <!-- 分析报告 -->
      <view class="report-analysis" v-if="report.analysisReport">
        <view class="analysis-header-row">
          <text class="analysis-icon">&#x1F4DD;</text>
          <text class="analysis-title">分析报告</text>
        </view>
        <text class="analysis-content">{{ report.analysisReport }}</text>
      </view>

      <!-- 成长建议 -->
      <view class="report-suggestions" v-if="report.growthSuggestions">
        <view class="analysis-header-row">
          <text class="analysis-icon">&#x1F331;</text>
          <text class="analysis-title">成长建议</text>
        </view>
        <text class="suggestion-content">{{ report.growthSuggestions }}</text>
      </view>

      <!-- 底部操作 -->
      <view class="action-row">
        <view class="action-btn secondary" @click="goAssessment">
          <text class="action-btn-text">预约测评</text>
        </view>
        <view class="action-btn primary" @click="goTraining">
          <text class="action-btn-text">认知训练</text>
        </view>
      </view>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 无数据 -->
    <view class="empty-state" v-if="!report && !loading">
      <text class="empty-icon">&#x1F9E0;</text>
      <text class="empty-title">暂无认知测评数据</text>
      <text class="empty-desc">完成认知能力游戏测评或DAN评估后，可在此查看详细的七维认知分析报告</text>
      <view class="empty-btn" @click="goAssessment">预约测评</view>
    </view>
  </view>
</template>

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

export default {
  components: { },
  data: function() {
    return {
      memberId: null,
      report: null,
      loading: true,
      dimensions: [
        { key: 'perceptionScore', label: '感知能力', icon: '\u{1F441}', desc: '感官信息处理能力' },
        { key: 'focusScore', label: '专注力', icon: '\u{1F3AF}', desc: '持续集中和抗干扰能力' },
        { key: 'memoryScore', label: '记忆力', icon: '\u{1F9E0}', desc: '信息编码和回忆能力' },
        { key: 'logicScore', label: '逻辑思维', icon: '\u{1F9E9}', desc: '推理和问题解决能力' },
        { key: 'spatialScore', label: '空间思维', icon: '\u{1F9CA}', desc: '空间想象和方位判断' },
        { key: 'processingSpeedScore', label: '加工速度', icon: '\u26A1', desc: '信息处理和反应速度' },
        { key: 'languageScore', label: '语言表达', icon: '\u{1F60B}', desc: '词汇理解与语言组织能力' }
      ]
    }
  },
  onLoad: function(options) {
    if (options && options.memberId) {
      this.memberId = options.memberId
    } else {
      this.memberId = uni.getStorageSync('currentChildId') || null
    }
    this.loadReport()
  },
  methods: {
    loadReport: function() {
      var self = this
      var memberId = self.memberId
      if (!memberId) {
        self.loading = false
        return
      }
      self.loading = true
      getAssessmentLatestResult(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.report = res.data
        }
        self.loading = false
      }).catch(function() {
        self.loading = false
      })
    },
    goAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goTraining: function() {
      uni.navigateTo({ url: '/pages/mind/training?memberId=' + (this.memberId || '') })
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

/* ===== 报告卡 ===== */
.report-card {
  margin: 20rpx 30rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
}

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

.report-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

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

/* ===== 综合评分 ===== */
.overall-score-wrap {
  text-align: center;
  padding: 40rpx 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  color: #fff;
}

.overall-label {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
  margin-bottom: 16rpx;
}

.overall-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.overall-value {
  font-size: 80rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.dan-badge {
  background: rgba(255,255,255,0.25);
  border-radius: 12rpx;
  padding: 6rpx 20rpx;
}

.dan-level {
  font-size: 28rpx;
  font-weight: bold;
  color: #FFD700;
}

/* ===== 七维条形图 ===== */
.dimension-list {
  margin-bottom: 30rpx;
}

.dimension-item {
  margin-bottom: 28rpx;
}

.dimension-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.dimension-label-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dimension-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

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

.dimension-score {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
}

.dimension-bar {
  height: 16rpx;
  background: #f0f0f0;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 8rpx;
}

.dimension-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 8rpx;
  transition: width 0.5s;
}

.dimension-desc {
  font-size: 22rpx;
  color: #999;
  line-height: 1.4;
}

/* ===== 分析/建议 ===== */
.report-analysis, .report-suggestions {
  margin-top: 30rpx;
  padding: 28rpx;
  border-radius: 16rpx;
}

.report-analysis {
  background: #f9f9ff;
}

.report-suggestions {
  background: #f0fdf4;
}

.analysis-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}

.analysis-icon {
  font-size: 30rpx;
  margin-right: 10rpx;
}

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

.analysis-content, .suggestion-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.7;
  display: block;
}

/* ===== 底部操作 ===== */
.action-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 40rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 40rpx;
}

.action-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  margin-left: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(102,126,234,0.3);
}

.action-btn.secondary {
  background: #fff;
  border: 2rpx solid #ddd;
  margin-right: 16rpx;
}

.action-btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

.action-btn.secondary .action-btn-text {
  color: #666;
}

/* ===== 加载中 ===== */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* ===== 空状态 ===== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 40rpx 80rpx;
}

.empty-icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}

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

.empty-desc {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.empty-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(102,126,234,0.3);
}
</style>