cfc/cfc-frontend/pages/growth/assessment-result.vue

<template>
  <view class="container">
    <view class="loading" v-if="loading">加载中...</view>

    <template v-if="result">
      <view class="header-card">
        <text class="title">DAN测评报告</text>
      </view>

      <view class="score-card">
        <text class="card-title">各维度得分</text>
        <view class="score-grid">
          <view class="score-item">
            <text class="score-label">注意力</text>
            <text class="score-value">{{ result.attentionScore || 0 }}</text>
          </view>
          <view class="score-item">
            <text class="score-label">专注力</text>
            <text class="score-value">{{ result.focusScore || 0 }}</text>
          </view>
          <view class="score-item">
            <text class="score-label">记忆力</text>
            <text class="score-value">{{ result.memoryScore || 0 }}</text>
          </view>
          <view class="score-item">
            <text class="score-label">逻辑思维</text>
            <text class="score-value">{{ result.logicScore || 0 }}</text>
          </view>
        </view>
        <view class="overall-score">
          <text class="overall-label">综合得分</text>
          <text class="overall-value">{{ result.overallScore || 0 }}</text>
        </view>
      </view>

      <view class="section-card" v-if="result.analysisReport">
        <text class="card-title">分析报告</text>
        <text class="card-content">{{ result.analysisReport }}</text>
      </view>

      <view class="section-card" v-if="result.growthSuggestions">
        <text class="card-title">成长建议</text>
        <text class="card-content">{{ result.growthSuggestions }}</text>
      </view>

      <view class="meta-card">
        <text class="card-title">测评信息</text>
        <view class="info-row" v-if="result.assessmentDate">
          <text class="info-label">测评日期</text>
          <text class="info-value">{{ result.assessmentDate }}</text>
        </view>
        <view class="info-row" v-if="result.durationMinutes">
          <text class="info-label">测评时长</text>
          <text class="info-value">{{ result.durationMinutes }}分钟</text>
        </view>
        <view class="info-row" v-if="result.nextReviewDate">
          <text class="info-label">建议复测</text>
          <text class="info-value">{{ result.nextReviewDate }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      result: null
    }
  },
  onLoad(options) {
    const recordId = options.recordId
    const assessmentId = options.assessmentId
    this.loadAssessment(recordId, assessmentId)
  },
  methods: {
    async loadAssessment(recordId, assessmentId) {
      this.loading = true
      try {
        const res = await getAssessmentResult(assessmentId)
        if (res.code === 200) {
          this.result = res.data
        } else {
          uni.showToast({ title: res.message || '加载失败', icon: 'none' })
        }
      } catch (e) {
        console.error(e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}
.loading {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}
.header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 10rpx;
}
.dan-level {
  font-size: 28rpx;
  color: rgba(255,255,255,0.9);
  display: block;
}
.score-card, .section-card, .meta-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}
.score-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.score-item {
  width: calc(50% - 10rpx);
  text-align: center;
  padding: 20rpx;
  background: #f8f8ff;
  border-radius: 12rpx;
}
.score-label {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}
.score-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #667eea;
  display: block;
}
.overall-score {
  text-align: center;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}
.overall-label {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 6rpx;
}
.overall-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
}
.card-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.info-label {
  font-size: 26rpx;
  color: #999;
}
.info-value {
  font-size: 26rpx;
  color: #333;
}
</style>