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>
        <text class="external-badge" v-if="record.externalSync">来自外部系统</text>
      </view>

      <view class="info-card">
        <text class="card-title">基本信息</text>
        <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">
          <text class="info-label">创建时间</text>
          <text class="info-value">{{ formatDate(record.createdAt) }}</text>
        </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="footer-actions">
        <button class="btn-delete" @click="handleDelete">删除档案</button>
      </view>
    </template>
  </view>
</template>

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

export default {
  data() {
    return {
      loading: true,
      record: null,
      recordId: null,
      gradeNames: {1:'一年级',2:'二年级',3:'三年级',4:'四年级',5:'五年级',6:'六年级',7:'初一',8:'初二',9:'初三',10:'高一',11:'高二',12:'高三'}
    }
  },
  onLoad(options) {
    this.recordId = options.recordId
    this.loadDetail()
  },
  methods: {
    async loadDetail() {
      this.loading = true
      try {
        const res = await getGrowthRecordDetail(this.recordId)
        if (res.code === 200) {
          this.record = res.data
        } else {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      } catch (e) {
        console.error(e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    viewAssessment() {
      uni.navigateTo({
        url: '/pages/growth/assessment-result?recordId=' + this.recordId + '&assessmentId=' + this.record.assessmentId
      })
    },
    handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '删除后无法恢复，确定要删除此成长档案吗？',
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' })
            try {
              const result = await deleteGrowthRecord(this.recordId)
              uni.hideLoading()
              if (result.code === 200) {
                uni.showToast({ title: '删除成功', icon: 'success' })
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              } else {
                uni.showToast({ title: result.message || '删除失败', icon: 'none' })
              }
            } catch (e) {
              uni.hideLoading()
              uni.showToast({ title: '删除失败', icon: 'none' })
            }
          }
        }
      })
    },
    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;
}
.external-badge {
  font-size: 22rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 10rpx;
  display: inline-block;
  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;
}
.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;
}
.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;
}
.footer-actions {
  padding: 30rpx 0;
}
.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>