cfc/cfc-frontend/pages/assessment/record.vue

<template>
<view class="container">
  <view class="header">
    <text class="title">录入测评结果</text>
    <text class="subtitle">专业的DAN测评，记录孩子的专注力评估结果</text>
  </view>

  <!-- 孩子信息 -->
  <view class="section">
    <view class="section-title">孩子信息</view>
    <view class="info-card">
      <view class="info-row">
        <text class="info-label">姓名</text>
        <text class="info-value">{{ childName || '未填写' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">年龄</text>
        <text class="info-value">{{ age || '-' }}岁</text>
      </view>
      <view class="info-row">
        <text class="info-label">学校</text>
        <text class="info-value">{{ school || '-' }}</text>
      </view>
    </view>
  </view>

  <!-- 各项评分 -->
  <view class="section">
    <view class="section-title">各项评分</view>
    <view class="score-group">
      <view class="score-item">
        <view class="score-header">
          <text class="score-label">注意力</text>
          <text class="score-value">{{ form.attentionScore }}</text>
        </view>
        <slider
          :value="form.attentionScore"
          :min="0"
          :max="100"
          :step="1"
          activeColor="#667eea"
          backgroundColor="#E8E8E8"
          block-size="20"
          @change="onAttentionChange"
        />
      </view>
      <view class="score-item">
        <view class="score-header">
          <text class="score-label">专注力</text>
          <text class="score-value">{{ form.focusScore }}</text>
        </view>
        <slider
          :value="form.focusScore"
          :min="0"
          :max="100"
          :step="1"
          activeColor="#667eea"
          backgroundColor="#E8E8E8"
          block-size="20"
          @change="onFocusChange"
        />
      </view>
      <view class="score-item">
        <view class="score-header">
          <text class="score-label">记忆力</text>
          <text class="score-value">{{ form.memoryScore }}</text>
        </view>
        <slider
          :value="form.memoryScore"
          :min="0"
          :max="100"
          :step="1"
          activeColor="#667eea"
          backgroundColor="#E8E8E8"
          block-size="20"
          @change="onMemoryChange"
        />
      </view>
      <view class="score-item">
        <view class="score-header">
          <text class="score-label">逻辑力</text>
          <text class="score-value">{{ form.logicScore }}</text>
        </view>
        <slider
          :value="form.logicScore"
          :min="0"
          :max="100"
          :step="1"
          activeColor="#667eea"
          backgroundColor="#E8E8E8"
          block-size="20"
          @change="onLogicChange"
        />
      </view>
    </view>

    <!-- 综合评分 -->
    <view class="overall-score">
      <text class="overall-label">综合评分</text>
      <view class="overall-badge">
        <text class="overall-number">{{ overallScore }}</text>
      </view>
    </view>
  </view>

  <!-- 测评信息 -->
  <view class="section">
    <view class="section-title">测评信息</view>
    <view class="form-group">
      <text class="form-label">测评日期</text>
      <picker mode="date" :value="form.assessmentDate" @change="onAssessmentDateChange">
        <view class="picker-value">
          <text>{{ form.assessmentDate || '选择日期' }}</text>
          <text class="picker-arrow">›</text>
        </view>
      </picker>
    </view>
    <view class="form-group">
      <text class="form-label">测评时长（分钟）</text>
      <input
        class="form-input"
        type="number"
        v-model="form.durationMinutes"
        placeholder="请输入测评时长"
      />
    </view>
  </view>

  <!-- 媒体资料 -->
  <view class="section">
    <view class="section-title">媒体资料</view>
    <text class="form-hint">上传测评过程中的照片、视频或音频</text>
    <view class="media-grid">
      <view
        class="media-item"
        v-for="(img, index) in mediaList"
        :key="index"
      >
        <image class="media-image" :src="img" mode="aspectFill" />
        <view class="media-remove" @click="removeMedia(index)">✕</view>
      </view>
      <view class="media-add" @click="chooseMedia" v-if="mediaList.length < 9">
        <text class="media-add-icon">+</text>
        <text class="media-add-text">添加</text>
      </view>
    </view>
  </view>

  <!-- 分析报告 -->
  <view class="section">
    <view class="section-title">分析报告</view>
    <textarea
      class="form-textarea"
      v-model="form.analysisReport"
      placeholder="请输入详细的测评分析报告"
      :maxlength="2000"
    />
    <text class="char-count">{{ analysisReportLen }}/2000</text>
  </view>

  <!-- 成长建议 -->
  <view class="section">
    <view class="section-title">成长建议</view>
    <textarea
      class="form-textarea"
      v-model="form.growthSuggestions"
      placeholder="请输入针对孩子的成长建议"
      :maxlength="1000"
    />
    <text class="char-count">{{ growthSuggestionsLen }}/1000</text>
  </view>

  <!-- 下次复查 -->
  <view class="section">
    <view class="section-title">下次复查</view>
    <picker mode="date" :value="form.nextReviewDate" @change="onNextReviewDateChange">
      <view class="picker-value">
        <text>{{ form.nextReviewDate || '选择复查日期' }}</text>
        <text class="picker-arrow">›</text>
      </view>
    </picker>
  </view>

  <!-- 结果描述 -->
  <view class="section">
    <view class="section-title">结果描述</view>
    <textarea
      class="form-textarea form-textarea-short"
      v-model="form.resultDescription"
      placeholder="请简要描述测评结果"
      :maxlength="500"
    />
    <text class="char-count">{{ resultDescriptionLen }}/500</text>
  </view>

  <!-- 操作按钮 -->
  <view class="btn-group">
    <button class="btn-draft" @click="saveDraft" :disabled="submitting">保存草稿</button>
    <button class="btn-submit" @click="submit" :disabled="submitting">提交结果</button>
  </view>
</view>
</template>

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

export default {
  data() {
    return {
      appointmentId: '',
      childId: '',
      childName: '',
      age: '',
      school: '',
      mediaList: [],
      submitting: false,
      form: {
        attentionScore: 50,
        focusScore: 50,
        memoryScore: 50,
        logicScore: 50,
        assessmentDate: '',
        durationMinutes: '',
        analysisReport: '',
        growthSuggestions: '',
        nextReviewDate: '',
        resultDescription: ''
      }
    }
  },
  computed: {
    overallScore() {
      var total = this.form.attentionScore + this.form.focusScore + this.form.memoryScore + this.form.logicScore
      return Math.round(total / 4)
    },
    analysisReportLen() {
      return (this.form.analysisReport && this.form.analysisReport.length) || 0
    },
    growthSuggestionsLen() {
      return (this.form.growthSuggestions && this.form.growthSuggestions.length) || 0
    },
    resultDescriptionLen() {
      return (this.form.resultDescription && this.form.resultDescription.length) || 0
    }
  },
  onLoad(options) {
    if (options.appointmentId) {
      this.appointmentId = options.appointmentId
    }
    if (options.childId) {
      this.childId = options.childId
    }
    if (options.childName) {
      this.childName = decodeURIComponent(options.childName)
    }
    if (options.age) {
      this.age = options.age
    }
    if (options.school) {
      this.school = decodeURIComponent(options.school)
    }
    // 默认测评日期为今天
    var now = new Date()
    var year = now.getFullYear()
    var month = String(now.getMonth() + 1).padStart(2, '0')
    var day = String(now.getDate()).padStart(2, '0')
    this.form.assessmentDate = year + '-' + month + '-' + day
  },
  methods: {
    onAttentionChange(e) {
      this.form.attentionScore = e.detail.value
    },

    onFocusChange(e) {
      this.form.focusScore = e.detail.value
    },

    onMemoryChange(e) {
      this.form.memoryScore = e.detail.value
    },

    onLogicChange(e) {
      this.form.logicScore = e.detail.value
    },

    onAssessmentDateChange(e) {
      this.form.assessmentDate = e.detail.value
    },

    onNextReviewDateChange(e) {
      this.form.nextReviewDate = e.detail.value
    },

    chooseMedia() {
      var that = this
      uni.chooseImage({
        count: 9 - that.mediaList.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          that.mediaList = that.mediaList.concat(res.tempFilePaths)
        }
      })
    },

    removeMedia(index) {
      this.mediaList.splice(index, 1)
    },

    validateForm() {
      if (!this.form.assessmentDate) {
        uni.showToast({ title: '请选择测评日期', icon: 'none' })
        return false
      }
      if (!this.form.durationMinutes || this.form.durationMinutes <= 0) {
        uni.showToast({ title: '请输入有效的测评时长', icon: 'none' })
        return false
      }
      if (!this.form.analysisReport || !this.form.analysisReport.trim()) {
        uni.showToast({ title: '请填写分析报告', icon: 'none' })
        return false
      }
      return true
    },

    buildRequestData(status) {
      var teacherId = uni.getStorageSync('userId')
      return {
        childId: this.childId,
        teacherId: teacherId,
        appointmentId: this.appointmentId,
        attentionScore: this.form.attentionScore,
        focusScore: this.form.focusScore,
        memoryScore: this.form.memoryScore,
        logicScore: this.form.logicScore,
        overallScore: this.overallScore,
        assessmentDate: this.form.assessmentDate,
        durationMinutes: Number(this.form.durationMinutes),
        analysisReport: this.form.analysisReport,
        growthSuggestions: this.form.growthSuggestions,
        nextReviewDate: this.form.nextReviewDate,
        resultDescription: this.form.resultDescription,
        mediaUrls: this.mediaList.join(','),
        status: status
      }
    },

    async saveDraft() {
      if (!this.childId) {
        uni.showToast({ title: '缺少孩子信息', icon: 'none' })
        return
      }

      try {
        uni.showLoading({ title: '保存中...' })
        this.submitting = true

        var data = this.buildRequestData('draft')
        var res = await recordAssessmentResult(data)

        uni.hideLoading()
        this.submitting = false

        if (res.code === 200) {
          uni.showToast({ title: '草稿已保存', icon: 'success' })
        } else {
          uni.showToast({ title: res.message || '保存失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        this.submitting = false
        uni.showToast({ title: '保存失败', icon: 'none' })
      }
    },

    async submit() {
      if (!this.validateForm()) {
        return
      }

      try {
        uni.showLoading({ title: '提交中...' })
        this.submitting = true

        var data = this.buildRequestData('completed')
        var res = await recordAssessmentResult(data)

        uni.hideLoading()
        this.submitting = false

        if (res.code === 200) {
          uni.showModal({
            title: '提交成功',
            content: '测评结果已提交，家长将收到评估报告',
            showCancel: false,
            success: function() {
              uni.navigateBack()
            }
          })
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        this.submitting = false
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

/* 孩子信息 */
.info-card {
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

/* 评分 */
.score-group {
  margin-bottom: 20rpx;
}

.score-item {
  margin-bottom: 20rpx;
}

.score-item:last-child {
  margin-bottom: 0;
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.score-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.score-value {
  font-size: 32rpx;
  color: #667eea;
  font-weight: bold;
}

.overall-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10rpx;
  padding: 24rpx 30rpx;
  margin-top: 20rpx;
}

.overall-label {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
}

.overall-badge {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overall-number {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
}

/* 表单 */
.form-group {
  margin-bottom: 20rpx;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.form-hint {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 15rpx;
}

.form-input {
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.picker-value {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 40rpx;
  color: #999;
}

.form-textarea {
  width: 100%;
  height: 240rpx;
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
}

.form-textarea-short {
  height: 160rpx;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 媒体 */
.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.media-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.media-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.media-remove {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background: #F97316;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.media-add {
  width: 200rpx;
  height: 200rpx;
  background: #F8F8F8;
  border: 2rpx dashed #D0D0D0;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.media-add-icon {
  font-size: 60rpx;
  color: #999;
  line-height: 1;
}

.media-add-text {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 按钮 */
.btn-group {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
  padding-bottom: 60rpx;
}

.btn-draft {
  flex: 1;
  height: 90rpx;
  background: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
  border-radius: 45rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 90rpx;
}

.btn-submit {
  flex: 1;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 45rpx;
  font-size: 30rpx;
  font-weight: bold;
  line-height: 90rpx;
}

.btn-draft[disabled],
.btn-submit[disabled] {
  opacity: 0.6;
}
</style>