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

<template>
  <view class="container">
    <!-- 报告数据 -->
    <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="section rec-section" v-if="recommendations.length > 0 && !recLoading">
      <view class="section-header">
        <text class="section-title">🎯 为你推荐</text>
        <text class="section-sub">基于你的心理画像匹配</text>
      </view>
      <view class="rec-list">
        <view class="rec-card" v-for="(item, idx) in recommendations" :key="idx" @click="goRecDetail(item)">
          <view class="rec-card-left">
            <text class="rec-card-icon">{{ item.type === 'article' ? '📖' : (item.type === 'activity' ? '🎯' : '🛒') }}</text>
            <view class="rec-card-info">
              <text class="rec-card-title">{{ item.title }}</text>
              <text class="rec-card-desc">{{ item.summary || item.reason }}</text>
            </view>
          </view>
          <text class="rec-card-score">⭐ {{ Math.round(item.recommendScore) }}</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 { getEmiReport } from '../../utils/api.js'

export default {
  components: { },
  data: function() {
    return {
      memberId: null,
      report: null,
      loading: true,
      recommendations: [],
      recLoading: false,
      dimensions: [
        { key: 'emotionStability', label: '情绪稳定性', icon: '\u{1F9E0}', color: '#FF6B35', 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
        }
      }).catch(function() {}).finally(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;
}

/* ===== 推荐卡片 ===== */
.rec-section { margin: 20rpx 30rpx; }
.rec-list { display: flex; flex-direction: column; gap: 16rpx; }
.rec-card {
  background: rgba(255,255,255,0.95);
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.rec-card-left { display: flex; align-items: center; flex: 1; min-width: 0; }
.rec-card-icon { font-size: 44rpx; margin-right: 16rpx; flex-shrink: 0; }
.rec-card-info { flex: 1; min-width: 0; }
.rec-card-title { font-size: 28rpx; font-weight: 600; color: #1a1a2e; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-card-desc { font-size: 22rpx; color: #94a3b8; margin-top: 4rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-card-score { font-size: 28rpx; font-weight: 700; color: #FF6B35; flex-shrink: 0; margin-left: 16rpx; }

/* ===== 加载中 ===== */
.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>