cfc/cfc-frontend/pages/mind/emotion-report.vue

<template>
  <view class="container">
    <PageBanner theme="mind-wisdom"
      tagline="EMI 心理报告"
      quote="知己知彼，百战不殆" />

    <!-- 报告数据 -->
    <view class="report-card" v-if="report">
      <view class="report-header">
        <text class="report-title">EMI 心理测评报告</text>
        <text class="report-date">测评日期: {{ report.assessmentDate || '-' }}</text>
      </view>

      <!-- 综合EQ分 -->
      <view class="overall-wrap">
        <text class="overall-label">综合EQ分</text>
        <text class="overall-value">{{ report.overallScore || 0 }}</text>
        <text :class="['overall-level', 'level-' + getScoreLevel(report.overallScore || 0)]">{{ getScoreLevelText(report.overallScore || 0) }}</text>
      </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>
            <view class="dimension-score-row">
              <text class="dimension-score">{{ report[dim.key] || 0 }}</text>
              <text :class="['dimension-level', 'level-' + getScoreLevel(report[dim.key] || 0)]">{{ getScoreLevelText(report[dim.key] || 0) }}</text>
            </view>
          </view>
          <view class="dimension-bar">
            <view class="dimension-bar-fill" :style="{ width: (report[dim.key] || 0) + '%', background: dim.color }"></view>
          </view>
          <text class="dimension-desc">{{ dim.desc }}</text>
        </view>
      </view>

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

      <!-- 成长建议 -->
      <view class="section-card suggestion-card" v-if="report.growthSuggestions">
        <view class="section-header-row">
          <text class="section-icon">&#x1F331;</text>
          <text class="section-title">成长建议</text>
        </view>
        <text class="section-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="goBack">
          <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">完成 EMI 心理测评后，可在此查看详细的心理分析报告</text>
      <view class="empty-btn" @click="goAssessment">预约测评</view>
    </view>
  </view>
</template>

<script>
import PageBanner from '../../components/PageBanner.vue'
import { getEmiReport } from '../../utils/api.js'

export default {
  components: { PageBanner },
  data: function() {
    return {
      memberId: null,
      report: null,
      loading: true,
      dimensions: [
        { key: 'emotionScore', label: '情绪商数', icon: '\u2764\uFE0F', color: '#FF6B35', desc: '识别、理解和管理自身及他人情绪的能力' },
        { key: 'resilienceScore', label: '心理韧性', icon: '\u{1F4AA}', color: '#F97316', desc: '面对压力和挫折时的适应与恢复能力' },
        { key: 'stressCopingScore', label: '压力应对', icon: '\u{1F64F}', color: '#FB923C', desc: '有效应对生活压力和心理负担的能力' },
        { key: 'selfAwarenessScore', label: '自我认知', icon: '\u{1F9EC}', color: '#FBBF24', 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
      getEmiReport(memberId).then(function(res) {
        if (res.code === 200 && res.data) {
          self.report = res.data
        }
        self.loading = false
      }).catch(function() {
        self.loading = false
      })
    },
    getScoreLevel: function(score) {
      if (score >= 85) return 'excellent'
      if (score >= 70) return 'good'
      if (score >= 55) return 'average'
      return 'low'
    },
    getScoreLevelText: function(score) {
      if (score >= 85) return '优秀'
      if (score >= 70) return '良好'
      if (score >= 55) return '一般'
      return '需提升'
    },
    goAssessment: function() {
      uni.navigateTo({ url: '/pages/assessment/apply' })
    },
    goBack: function() {
      uni.navigateBack({ delta: 1 })
    }
  }
}
</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;
}

/* ===== 综合EQ ===== */
.overall-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  background: linear-gradient(135deg, #FF6B35, #FFD700);
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  color: #fff;
}

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

.overall-value {
  font-size: 80rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.overall-level {
  font-size: 26rpx;
  padding: 4rpx 24rpx;
  border-radius: 20rpx;
  background: rgba(255,255,255,0.3);
}

/* ===== 四维条形图 ===== */
.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-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dimension-score {
  font-size: 32rpx;
  font-weight: bold;
  color: #FF6B35;
  margin-right: 12rpx;
}

.dimension-level {
  font-size: 22rpx;
  padding: 2rpx 14rpx;
  border-radius: 12rpx;
}

.level-excellent { color: #10B981; background: #ECFDF5; }
.level-good { color: #3B82F6; background: #EFF6FF; }
.level-average { color: #F97316; background: #FFF7ED; }
.level-low { color: #EF4444; background: #FEF2F2; }

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

.dimension-bar-fill {
  height: 100%;
  border-radius: 9rpx;
  transition: width 0.5s;
}

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

/* ===== 分析/建议卡 ===== */
.section-card {
  margin-top: 30rpx;
  padding: 28rpx;
  background: #f9f9f9;
  border-radius: 16rpx;
}

.suggestion-card {
  background: #FFFBEB;
}

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

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

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

.section-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, #FF6B35, #FFD700);
  margin-left: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,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, #FF6B35, #FFD700);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  padding: 16rpx 64rpx;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(255,107,53,0.3);
}
</style>