cfc/cfc-frontend/pages/growth/detail.vue

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

    <template v-if="record">
      <view class="header-card">
        <view class="header-top">
          <text class="record-title">{{ record.recordTitle || '成长记录' }}</text>
          <text class="record-tag" :class="record.status === 'completed' ? 'tag-completed' : 'tag-pending'">
            {{ record.status === 'completed' ? '已完成' : '待同步' }}
          </text>
        </view>
        <view class="header-badges">
          <text class="source-badge" v-if="record.sourceType">{{ sourceTypeLabel }}</text>
          <text class="external-badge" v-if="record.externalSync">来自外部系统</text>
        </view>
      </view>

      <view class="info-card">
        <text class="card-title">基本信息</text>
        <view class="info-row" v-if="record.reportDate">
          <text class="info-label">报告日期</text>
          <text class="info-value">{{ record.reportDate }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">综合得分</text>
          <text class="info-value">{{ record.overallScore != null ? record.overallScore : '暂无' }}</text>
        </view>
        <view class="info-row" v-if="record.childAge">
          <text class="info-label">评估年龄</text>
          <text class="info-value">{{ record.childAge }}个月</text>
        </view>
        <view class="info-row" v-if="record.height">
          <text class="info-label">身高</text>
          <text class="info-value">{{ record.height }} cm</text>
        </view>
        <view class="info-row" v-if="record.weight">
          <text class="info-label">体重</text>
          <text class="info-value">{{ record.weight }} kg</text>
        </view>
        <view class="info-row" v-if="record.school">
          <text class="info-label">学校</text>
          <text class="info-value">{{ record.school }}</text>
        </view>
        <view class="info-row" v-if="record.grade">
          <text class="info-label">年级</text>
          <text class="info-value">{{ gradeNames[record.grade] || record.grade }}</text>
        </view>
        <view class="info-row" v-if="record.academicPerformance">
          <text class="info-label">成绩表现</text>
          <text class="info-value">{{ record.academicPerformance }}</text>
        </view>
        <view class="info-row" v-if="record.schoolProvince || record.schoolCity || record.schoolDistrict">
          <text class="info-label">学校区域</text>
          <text class="info-value">{{ (record.schoolProvince||'') + (record.schoolCity||'') + (record.schoolDistrict||'') + (record.schoolStreet||'') }}</text>
        </view>
        <view class="info-row" v-if="record.sourceFileUrl">
          <text class="info-label">报告文件</text>
          <text class="info-value link" @click="copyFileUrl">复制链接</text>
        </view>
        <view class="info-row">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ formatDate(record.createdAt) }}</text>
        </view>
      </view>

      <view class="section-card" v-if="hasScores">
        <text class="card-title">测评维度</text>
        <view class="score-grid">
          <view class="score-item" v-if="record.overallScore">
            <text class="score-label">综合得分</text>
            <text class="score-value">{{ record.overallScore }}</text>
          </view>
          <view class="score-item" v-if="record.attentionScore">
            <text class="score-label">注意力</text>
            <text class="score-value">{{ record.attentionScore }}</text>
          </view>
          <view class="score-item" v-if="record.focusScore">
            <text class="score-label">专注力</text>
            <text class="score-value">{{ record.focusScore }}</text>
          </view>
          <view class="score-item" v-if="record.memoryScore">
            <text class="score-label">记忆力</text>
            <text class="score-value">{{ record.memoryScore }}</text>
          </view>
          <view class="score-item" v-if="record.logicScore">
            <text class="score-label">逻辑力</text>
            <text class="score-value">{{ record.logicScore }}</text>
          </view>
          <view class="score-item" v-if="record.perceptionScore">
            <text class="score-label">感知力</text>
            <text class="score-value">{{ record.perceptionScore }}</text>
          </view>
          <view class="score-item" v-if="record.spatialScore">
            <text class="score-label">空间力</text>
            <text class="score-value">{{ record.spatialScore }}</text>
          </view>
          <view class="score-item" v-if="record.processingSpeedScore">
            <text class="score-label">处理速度</text>
            <text class="score-value">{{ record.processingSpeedScore }}</text>
          </view>
          <view class="score-item" v-if="record.emotionScore">
            <text class="score-label">情绪力</text>
            <text class="score-value">{{ record.emotionScore }}</text>
          </view>
          <view class="score-item" v-if="record.resilienceScore">
            <text class="score-label">抗挫力</text>
            <text class="score-value">{{ record.resilienceScore }}</text>
          </view>
        </view>
      </view>

      <view class="section-card" v-if="record.assessmentSummary">
        <text class="card-title">测评摘要</text>
        <text class="card-content">{{ record.assessmentSummary }}</text>
        <button class="btn-link" v-if="record.assessmentId" @click="viewAssessment">查看完整报告</button>
      </view>

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

      <view class="section-card" v-if="record.taskRecommendations">
        <text class="card-title">任务推荐</text>
        <text class="card-content">{{ record.taskRecommendations }}</text>
      </view>

      <view class="section-card" v-if="supplements.length > 0">
        <view class="card-title-row">
          <text class="card-title">补充材料</text>
          <text class="supplement-count">{{ supplements.length }}条</text>
        </view>
        <view class="supplement-card" v-for="item in supplements" :key="item.id" @click="viewSupplement(item)">
          <view class="supplement-header">
            <text class="supplement-date">{{ item.reportDate || formatDate(item.createdAt) }}</text>
            <text class="supplement-source" v-if="item.sourceType">{{ sourceTypeLabelOf(item.sourceType) }}</text>
          </view>
          <view class="supplement-scores" v-if="item.overallScore">
            <text class="supplement-score" v-if="item.overallScore">得分: {{ item.overallScore }}</text>
          </view>
          <text class="supplement-summary" v-if="item.assessmentSummary">{{ item.assessmentSummary }}</text>
        </view>
      </view>

      <view class="footer-actions">
        <button class="btn-supplement" @click="goSupplement" v-if="record.sourceType !== 'supplement'">补充测评材料</button>
        <button class="btn-delete" @click="handleDelete">删除档案</button>
      </view>
    </template>
  </view>
</template>

<script>
import { getGrowthRecordDetail, deleteGrowthRecord, getGrowthSupplements } from '../../utils/api.js'

export default {
  data() {
    return {
      loading: true,
      record: null,
      recordId: null,
      supplements: [],
      gradeNames: {1:'一年级',2:'二年级',3:'三年级',4:'四年级',5:'五年级',6:'六年级',7:'初一',8:'初二',9:'初三',10:'高一',11:'高二',12:'高三'}
    }
  },
  computed: {
    sourceTypeLabel() {
      if (!this.record || !this.record.sourceType) return ''
      return this.sourceTypeLabelOf(this.record.sourceType)
    },
    hasScores() {
      if (!this.record) return false
      return this.record.attentionScore || this.record.focusScore ||
        this.record.memoryScore || this.record.logicScore || this.record.perceptionScore ||
        this.record.spatialScore || this.record.processingSpeedScore || this.record.emotionScore ||
        this.record.resilienceScore
    }
  },
  onLoad(options) {
    this.recordId = options.recordId
    this.loadDetail()
  },
  methods: {
    sourceTypeLabelOf(type) {
      var map = { 'manual': '手动创建', 'assessment': '测评录入', 'upload': '报告上传', 'supplement': '补充材料' }
      return map[type] || type
    },
    async loadDetail() {
      this.loading = true
      try {
        var res = await getGrowthRecordDetail(this.recordId)
        if (res.code === 200) {
          this.record = res.data
          this.loadSupplements()
        } else {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      } catch (e) {
        console.error(e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    async loadSupplements() {
      try {
        var res = await getGrowthSupplements(this.recordId)
        if (res.code === 200) {
          this.supplements = res.data || []
        }
      } catch (e) {
        console.error(e)
      }
    },
    viewAssessment() {
      uni.navigateTo({
        url: '/pages/growth/assessment-result?recordId=' + this.recordId + '&assessmentId=' + this.record.assessmentId
      })
    },
    viewSupplement(item) {
      uni.navigateTo({
        url: '/pages/growth/detail?recordId=' + item.id
      })
    },
    goSupplement() {
      var memberId = this.record && this.record.memberId ? this.record.memberId : ''
      uni.navigateTo({
        url: '/pages/growth/supplement?recordId=' + this.recordId + '&memberId=' + memberId
      })
    },
    copyFileUrl() {
      if (this.record && this.record.sourceFileUrl) {
        uni.setClipboardData({
          data: this.record.sourceFileUrl,
          success: function() {
            uni.showToast({ title: '链接已复制', icon: 'success' })
          }
        })
      }
    },
    handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复，确定要删除此成长记录吗？',
        success: async function(res) {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' })
            try {
              var result = await deleteGrowthRecord(this.recordId)
              uni.hideLoading()
              if (result.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'success' })
                setTimeout(function() {
                  uni.navigateBack()
                }, 500)
              } else {
                uni.showToast({ title: result.message || '删除失败', icon: 'none' })
              }
            } catch (e) {
              uni.hideLoading()
              uni.showToast({ title: '删除失败', icon: 'none' })
            }
          }
        }.bind(this)
      })
    },
    formatDate(date) {
      if (!date) return ''
      return date.substring(0, 19).replace('T', ' ')
    }
  }
}
</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: 30rpx;
  margin-bottom: 20rpx;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.record-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}
.record-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}
.tag-completed {
  background: rgba(255,255,255,0.3);
  color: #fff;
}
.tag-pending {
  background: rgba(255,152,0,0.3);
  color: #fff;
}
.header-badges {
  margin-top: 12rpx;
  display: flex;
  gap: 10rpx;
}
.source-badge {
  font-size: 22rpx;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.2);
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}
.external-badge {
  font-size: 22rpx;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.2);
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}
.info-card, .section-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;
}
.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.card-title-row .card-title {
  margin-bottom: 0;
}
.supplement-count {
  font-size: 24rpx;
  color: #999;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
.info-label {
  font-size: 28rpx;
  color: #999;
}
.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}
.info-value.link {
  color: #667eea;
}
.score-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.score-item {
  background: #f5f3ff;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  min-width: 140rpx;
  text-align: center;
}
.score-label {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-bottom: 4rpx;
}
.score-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
}
.card-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.btn-link {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  background: #f0f0ff;
  color: #667eea;
  border-radius: 10rpx;
  font-size: 26rpx;
  text-align: center;
  margin-top: 20rpx;
}
.supplement-card {
  background: #f9f9ff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
}
.supplement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}
.supplement-date {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}
.supplement-source {
  font-size: 22rpx;
  color: #667eea;
  background: #f0f0ff;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
}
.supplement-scores {
  display: flex;
  gap: 16rpx;
  margin-bottom: 8rpx;
}
.supplement-score {
  font-size: 24rpx;
  color: #666;
}
.supplement-summary {
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.footer-actions {
  padding: 30rpx 0;
}
.btn-supplement {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
  border-radius: 40rpx;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.btn-delete {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  color: #ff4444;
  border: 2rpx solid #ff4444;
  border-radius: 40rpx;
  font-size: 28rpx;
  text-align: center;
}
</style>