cfc/cfc-frontend/pages/health/report-survey.vue

<template>
  <view class="survey-container">
    <!-- 导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">健康调研问卷</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 进度条 -->
    <view class="progress-bar">
      <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
    </view>

    <!-- 提示说明 -->
    <view class="tip-banner">
      <text class="tip-icon">💡</text>
      <text class="tip-text">请根据孩子最近的实际情况填写，帮助AI更准确地解读报告并提供个性化方案</text>
    </view>

    <!-- 表单 -->
    <view class="form-section">
      <!-- Q1: 饮食情况 -->
      <view class="question-card">
        <text class="q-number">1/6</text>
        <text class="q-title">孩子平时的饮食结构是怎样的？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'balanced' }" @click="survey.diet = 'balanced'">
            <text class="q-icon">🥗</text>
            <text class="q-text">均衡饮食，荤素搭配</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'meat' }" @click="survey.diet = 'meat'">
            <text class="q-icon">🥩</text>
            <text class="q-text">偏荤食，爱吃肉</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'veggie' }" @click="survey.diet = 'veggie'">
            <text class="q-icon">🥬</text>
            <text class="q-text">偏素食，不爱吃肉</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.diet === 'junk' }" @click="survey.diet = 'junk'">
            <text class="q-icon">🍟</text>
            <text class="q-text">偏好零食/快餐</text>
          </view>
        </view>
      </view>

      <!-- Q2: 消化状况 -->
      <view class="question-card">
        <text class="q-number">2/6</text>
        <text class="q-title">孩子近期消化状况如何？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'good' }" @click="survey.digestion = 'good'">
            <text class="q-icon">😊</text>
            <text class="q-text">正常，消化良好</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'constipation' }" @click="survey.digestion = 'constipation'">
            <text class="q-icon">😣</text>
            <text class="q-text">容易便秘</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'diarrhea' }" @click="survey.digestion = 'diarrhea'">
            <text class="q-icon">😟</text>
            <text class="q-text">容易腹泻</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.digestion === 'irregular' }" @click="survey.digestion = 'irregular'">
            <text class="q-icon">🤔</text>
            <text class="q-text">不太规律</text>
          </view>
        </view>
      </view>

      <!-- Q3: 睡眠质量 -->
      <view class="question-card">
        <text class="q-number">3/6</text>
        <text class="q-title">孩子近期的睡眠质量如何？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'good' }" @click="survey.sleep = 'good'">
            <text class="q-icon">😴</text>
            <text class="q-text">睡得好，作息规律</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'late' }" @click="survey.sleep = 'late'">
            <text class="q-icon">🦉</text>
            <text class="q-text">睡得太晚</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'restless' }" @click="survey.sleep = 'restless'">
            <text class="q-icon">😰</text>
            <text class="q-text">翻来覆去睡不安稳</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.sleep === 'short' }" @click="survey.sleep = 'short'">
            <text class="q-icon">⏰</text>
            <text class="q-text">睡眠时间不足</text>
          </view>
        </view>
      </view>

      <!-- Q4: 运动习惯 -->
      <view class="question-card">
        <text class="q-number">4/6</text>
        <text class="q-title">孩子每周运动情况？</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'frequent' }" @click="survey.exercise = 'frequent'">
            <text class="q-icon">🏃</text>
            <text class="q-text">经常运动（3次以上/周）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'moderate' }" @click="survey.exercise = 'moderate'">
            <text class="q-icon">🚶</text>
            <text class="q-text">偶尔运动（1-2次/周）</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.exercise === 'rare' }" @click="survey.exercise = 'rare'">
            <text class="q-icon">🪑</text>
            <text class="q-text">很少运动</text>
          </view>
        </view>
      </view>

      <!-- Q5: 过敏/不适 -->
      <view class="question-card">
        <text class="q-number">5/6</text>
        <text class="q-title">孩子是否有以下过敏或不适症状？（可多选）</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('food') !== -1 }" @click="toggleAllergy('food')">
            <text class="q-text">食物过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('pollen') !== -1 }" @click="toggleAllergy('pollen')">
            <text class="q-text">花粉/尘螨过敏</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('skin') !== -1 }" @click="toggleAllergy('skin')">
            <text class="q-text">皮肤湿疹/皮疹</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.allergies.indexOf('none') !== -1 }" @click="toggleAllergy('none')">
            <text class="q-text">无明显过敏</text>
          </view>
        </view>
      </view>

      <!-- Q6: 健康目标 -->
      <view class="question-card">
        <text class="q-number">6/6</text>
        <text class="q-title">您希望通过精准营养改善什么？（可多选）</text>
        <view class="q-options">
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('immunity') !== -1 }" @click="toggleGoal('immunity')">
            <text class="q-icon">🛡️</text>
            <text class="q-text">增强免疫力</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('digestion') !== -1 }" @click="toggleGoal('digestion')">
            <text class="q-icon">🌿</text>
            <text class="q-text">改善消化</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('growth') !== -1 }" @click="toggleGoal('growth')">
            <text class="q-icon">📈</text>
            <text class="q-text">促进生长发育</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('focus') !== -1 }" @click="toggleGoal('focus')">
            <text class="q-icon">🎯</text>
            <text class="q-text">提升专注力</text>
          </view>
          <view class="q-option" :class="{ 'q-selected': survey.goals.indexOf('weight') !== -1 }" @click="toggleGoal('weight')">
            <text class="q-icon">⚖️</text>
            <text class="q-text">体重管理</text>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" :class="{ 'btn-disabled': !canSubmit }" @click="doSubmit">
        <text v-if="submitting">提交中...</text>
        <text v-else>提交并进入 AI 解读</text>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

<script>
import { createReportSurvey, submitReportSurvey, getSurveyStatus } from '../../utils/api.js'

export default {
  data() {
    return {
      reportId: null,
      childId: null,
      surveyId: null,
      survey: {
        diet: '',
        digestion: '',
        sleep: '',
        exercise: '',
        allergies: [],
        goals: []
      },
      submitting: false
    }
  },
  computed: {
    progressPercent: function() {
      var answered = 0
      if (this.survey.diet) answered++
      if (this.survey.digestion) answered++
      if (this.survey.sleep) answered++
      if (this.survey.exercise) answered++
      if (this.survey.allergies.length > 0) answered++
      if (this.survey.goals.length > 0) answered++
      return Math.round((answered / 6) * 100)
    },
    canSubmit: function() {
      return this.survey.diet && this.survey.digestion && this.survey.sleep && this.survey.exercise
    }
  },
  onLoad: function(options) {
    this.reportId = options.reportId ? parseInt(options.reportId) : null
    this.childId = options.childId ? parseInt(options.childId) : null
    this.initSurvey()
  },
  methods: {
    initSurvey: function() {
      var self = this
      if (!self.reportId) return
      // 先查状态
      getSurveyStatus(self.reportId).then(function(res) {
        if (res.code === 200 && res.data) {
          if (res.data.completed) {
            uni.showToast({ title: '该报告问卷已提交', icon: 'none' })
            return
          }
          if (res.data.pendingSurveyId) {
            self.surveyId = res.data.pendingSurveyId
            return
          }
        }
        // 未创建，则创建
        return createReportSurvey(self.reportId, self.childId || 0)
      }).then(function(res) {
        if (res && res.code === 200 && res.data && res.data.id) {
          self.surveyId = res.data.id
        }
      }).catch(function(e) {
        console.log('初始化问卷失败', e)
      })
    },
    toggleAllergy: function(val) {
      var idx = this.survey.allergies.indexOf(val)
      if (val === 'none') {
        this.survey.allergies = ['none']
      } else {
        // 移除 none
        var noneIdx = this.survey.allergies.indexOf('none')
        if (noneIdx !== -1) this.survey.allergies.splice(noneIdx, 1)
        if (idx === -1) {
          this.survey.allergies.push(val)
        } else {
          this.survey.allergies.splice(idx, 1)
        }
        // 如果全删了，恢复 none
        if (this.survey.allergies.length === 0) {
          this.survey.allergies.push('none')
        }
      }
    },
    toggleGoal: function(val) {
      var idx = this.survey.goals.indexOf(val)
      if (idx === -1) {
        this.survey.goals.push(val)
      } else {
        this.survey.goals.splice(idx, 1)
      }
    },
    goBack: function() {
      uni.navigateBack()
    },
    doSubmit: function() {
      if (!this.canSubmit || this.submitting) return
      var self = this
      self.submitting = true
      uni.showLoading({ title: '提交中...' })

      // 确保 surveyId 存在
      var doSubmit = function() {
        submitReportSurvey(self.surveyId, JSON.stringify(self.survey)).then(function(res) {
          uni.hideLoading()
          if (res.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' })
            // 跳转到 AI 对话页，带入报告和问卷数据
            setTimeout(function() {
              var params = 'reportId=' + self.reportId + '&surveyId=' + self.surveyId + '&firstMessage=' + encodeURIComponent('请帮我解读孩子的健康报告')
              uni.redirectTo({ url: '/pages/ai/chat?' + params })
            }, 500)
          } else {
            uni.showToast({ title: res.message || '提交失败', icon: 'none' })
            self.submitting = false
          }
        }).catch(function(e) {
          uni.hideLoading()
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
          console.log('提交问卷失败', e)
          self.submitting = false
        })
      }

      if (this.surveyId) {
        doSubmit()
      } else {
        // 先创建再提交
        createReportSurvey(this.reportId, this.childId || 0).then(function(res) {
          if (res.code === 200 && res.data && res.data.id) {
            self.surveyId = res.data.id
            doSubmit()
          } else {
            uni.hideLoading()
            uni.showToast({ title: '创建问卷失败', icon: 'none' })
            self.submitting = false
          }
        }).catch(function(e) {
          uni.hideLoading()
          uni.showToast({ title: '创建问卷失败', icon: 'none' })
          self.submitting = false
          console.log('创建问卷失败', e)
        })
      }
    }
  }
}
</script>

<style scoped>
.survey-container {
  min-height: 100vh;
  background: #F3F7FA;
}
.nav-bar {
  position: sticky;
  top: 0;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  z-index: 100;
}
.nav-back { font-size: 32rpx; color: #5B9BD5; }
.nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
.nav-placeholder { width: 80rpx; }

.progress-bar {
  height: 6rpx;
  background: #E2E8F0;
  margin: 0 30rpx;
  border-radius: 3rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #66BB6A, #43A047);
  border-radius: 3rpx;
  transition: width 0.3s;
}

.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #FFF8E1;
  margin: 16rpx 30rpx;
  padding: 16rpx 20rpx;
  border-radius: 12rpx;
}
.tip-icon { font-size: 28rpx; margin-right: 12rpx; flex-shrink: 0; }
.tip-text { font-size: 22rpx; color: #F57F17; line-height: 1.5; }

.form-section { margin: 10rpx 30rpx 30rpx; }

.question-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.q-number {
  font-size: 20rpx;
  color: #66BB6A;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}
.q-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}
.q-options {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.q-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 18rpx;
  border-radius: 14rpx;
  background: #F5F7FA;
  border: 2rpx solid transparent;
}
.q-selected {
  background: #E8F5E9;
  border-color: #66BB6A;
}
.q-option:active { opacity: 0.7; }
.q-icon { font-size: 32rpx; }
.q-text { font-size: 26rpx; color: #333; }

.submit-btn {
  background: linear-gradient(135deg, #43A047, #2E7D32);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  padding: 28rpx;
  border-radius: 16rpx;
  margin-top: 20rpx;
}
.submit-btn:active { opacity: 0.85; }
.btn-disabled { opacity: 0.5; }

.bottom-spacer { height: 60rpx; }
</style>