cfc/cfc-frontend/pages/psych-assessment/quiz.vue

<template>
  <view class="page">
    <!-- 介绍页 -->
    <view class="intro" v-if="!started">
      <view class="intro-icon">
        <text class="intro-icon-text">{{ scaleIcon }}</text>
      </view>
      <text class="intro-title">{{ scaleTitle }}</text>
      <text class="intro-desc">{{ scaleDesc }}</text>
      <view class="intro-info">
        <view class="info-row">
          <text class="info-label">题目数量</text>
          <text class="info-value">{{ totalQuestions }} 题</text>
        </view>
        <view class="info-row">
          <text class="info-label">每题时限</text>
          <text class="info-value">无限制</text>
        </view>
      </view>
      <button class="btn-primary" @click="startQuiz">开始测评</button>
    </view>

    <!-- 答题页 -->
    <view class="quiz" v-else-if="!showResult">
      <view class="quiz-header">
        <text class="quiz-progress">第 {{ currentQ + 1 }} / {{ totalQuestions }} 题</text>
      </view>
      <view class="progress-track">
        <view class="progress-fill" :style="{ width: progressPct + '%' }"></view>
      </view>
      
      <view class="question-card">
        <text class="question-text">{{ currentQuestion && currentQuestion.text }}</text>
        <view class="options">
          <view
            class="option"
            v-for="(opt, oi) in currentQuestion && currentQuestion.options"
            :key="oi"
            :class="{ 'option-selected': selectedIndex === oi }"
            @click="selectOption(oi)"
          >
            <text class="option-text">{{ opt }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 结果页 -->
    <view class="result" v-else>
      <view class="score-circle">
        <text class="score-num">{{ score }}</text>
        <text class="score-unit">分</text>
      </view>
      <text class="score-comment">{{ scoreComment }}</text>
      <view class="result-info">
        <view class="info-row">
          <text class="info-label">答对题数</text>
          <text class="info-value">{{ correctCount }} / {{ totalQuestions }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">测评维度</text>
          <view class="dim-tag">
            <text class="dim-tag-text">{{ scaleLabel }}</text>
          </view>
        </view>
      </view>
      <button class="btn-primary" :disabled="submitting" @click="submitScore">
        {{ submitting ? '提交中...' : '提交成绩' }}
      </button>
      <button class="btn-secondary" @click="restartQuiz">重新测评</button>
    </view>
  </view>
</template>

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

// PHQ-9 题目（得分：完全不会=0, 好几天=1, 一半天数=2, 几乎每天=3）
var PHQ9_QUESTIONS = [
  { text: '做事时提不起劲或没有兴趣', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '感到心情低落、沮丧或绝望', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '入睡困难、睡不安稳或睡眠过多', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '感觉疲倦或没有活力', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '食欲不振或吃太多', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '觉得自己很糟糕，或觉得自己很失败，让自己或家人失望', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '对事物专注有困难，例如看报纸或看电视时', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '动作或说话速度缓慢到别人已经察觉，或正好相反，坐立不安或比平时更激动', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] },
  { text: '有不如死掉或用某种方式伤害自己的念头', options: ['完全不会', '好几天', '一半以上的天数', '几乎每天'] }
]

// RSES-7 题目（反向计分，得分：非常不符合=1, 比较不符合=2, 比较符合=3, 完全符合=4）
var RSES_QUESTIONS = [
  { text: '我觉得自己是一个有价值的人，至少与其他人一样', options: ['非常不符合', '比较不符合', '比较符合', '完全符合'] },
  { text: '我感到自己有许多优点', options: ['非常不符合', '比较不符合', '比较符合', '完全符合'] },
  { text: '我对自己持肯定的态度', options: ['非常不符合', '比较不符合', '比较符合', '完全符合'] },
  { text: '我能够像大多数人一样把事情做好', options: ['非常不符合', '比较不符合', '比较符合', '完全符合'] },
  { text: '我对自己的人生态度感到满意', options: ['非常不符合', '比较不符合', '比较符合', '完全符合'] },
  { text: '我觉得我并没有什么值得自豪的地方', options: ['完全符合', '比较符合', '比较不符合', '非常不符合'] },
  { text: '总的来说，我倾向于认为自己是一个失败者', options: ['完全符合', '比较符合', '比较不符合', '非常不符合'] }
]

export default {
  data() {
    return {
      scale: '',
      memberId: '',
      started: false,
      showResult: false,
      questions: [],
      currentQ: 0,
      selectedIndex: -1,
      correctCount: 0,
      score: 0,
      submitting: false
    }
  },
  computed: {
    currentQuestion: function() {
      if (this.questions.length === 0) return null
      return this.questions[this.currentQ]
    },
    totalQuestions: function() {
      return this.questions.length
    },
    progressPct: function() {
      return ((this.currentQ + 1) / this.totalQuestions) * 100
    },
    scaleIcon: function() {
      return this.scale === 'phq9' ? '💙' : '⭐'
    },
    scaleTitle: function() {
      return this.scale === 'phq9' ? '情绪健康筛查' : '自尊水平评估'
    },
    scaleDesc: function() {
      return this.scale === 'phq9' 
        ? 'PHQ-9 是国际通用的抑郁症状筛查量表，过去两周内有以下症状的频率？'
        : 'RSES-7 是国际通用的自尊水平评估量表，请根据实际情况选择最符合的选项'
    },
    scaleLabel: function() {
      return this.scale === 'phq9' ? '情绪健康' : '自尊水平'
    },
    scoreComment: function() {
      if (this.scale === 'phq9') {
        if (this.score <= 4) return '情绪状态良好，建议定期监测'
        if (this.score <= 9) return '轻度情绪困扰，建议关注并适当调节'
        if (this.score <= 14) return '中度情绪困扰，建议寻求专业咨询'
        return '建议尽快寻求专业帮助'
      } else {
        if (this.score >= 28) return '自尊水平较高，自信心强'
        if (this.score >= 21) return '自尊水平中等，建议持续提升自我价值感'
        return '自尊水平较低，建议寻求专业支持'
      }
    }
  },
  onLoad: function(options) {
    if (options && options.scale) {
      this.scale = options.scale
      this.memberId = options.memberId || uni.getStorageSync('currentChildId') || ''
      this.initQuestions()
    }
  },
  methods: {
    initQuestions: function() {
      if (this.scale === 'phq9') {
        this.questions = PHQ9_QUESTIONS.slice()
      } else if (this.scale === 'reses') {
        this.questions = RSES_QUESTIONS.slice()
      }
    },
    startQuiz: function() {
      this.started = true
      this.currentQ = 0
      this.selectedIndex = -1
      this.correctCount = 0
      this.score = 0
    },
    selectOption: function(idx) {
      this.selectedIndex = idx
      var points = this.scale === 'phq9' ? idx : idx + 1
      this.correctCount += points
      var self = this
      setTimeout(function() {
        if (self.currentQ < self.totalQuestions - 1) {
          self.currentQ++
          self.selectedIndex = -1
        } else {
          self.finishQuiz()
        }
      }, 400)
    },
    finishQuiz: function() {
      this.score = this.scale === 'phq9' ? this.correctCount : this.correctCount
      this.showResult = true
    },
    submitScore: function() {
      if (this.submitting) return
      if (!this.memberId) {
        uni.showToast({ title: '未获取到成员信息', icon: 'none' })
        return
      }
      this.submitting = true
      var dimension = this.scale === 'phq9' ? 'phq9_score' : 'reses_score'
      submitCognitiveSelfTest(this.memberId, dimension, this.score)
        .then(function(res) {
          if (res && res.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' })
            setTimeout(function() {
              uni.navigateBack()
            }, 800)
          }
        })
        .catch(function() {
          uni.showToast({ title: '提交失败', icon: 'none' })
        })
        .finally(function() {
          this.submitting = false
        }.bind(this))
    },
    restartQuiz: function() {
      this.showResult = false
      this.currentQ = 0
      this.selectedIndex = -1
      this.correctCount = 0
      this.score = 0
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx 80rpx;
  box-sizing: border-box;
}

/* 介绍页 */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.intro-icon {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: rgba(99,102,241,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.intro-icon-text {
  font-size: 80rpx;
}

.intro-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16rpx;
}

.intro-desc {
  font-size: 28rpx;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
}

.intro-info {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 60rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
}

.info-row + .info-row {
  border-top: 1rpx solid rgba(255,255,255,0.08);
}

.info-label {
  font-size: 26rpx;
  color: rgba(255,255,255,0.7);
}

.info-value {
  font-size: 26rpx;
  color: #6366f1;
  font-weight: bold;
}

/* 答题页 */
.quiz {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quiz-header {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.progress-track {
  width: 100%;
  max-width: 620rpx;
  height: 12rpx;
  background: rgba(255,255,255,0.1);
  border-radius: 6rpx;
  overflow: hidden;
  margin-bottom: 50rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.question-card {
  background: rgba(255,255,255,0.06);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  width: 100%;
  max-width: 620rpx;
  box-sizing: border-box;
}

.question-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: bold;
  text-align: center;
  display: block;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

.options {
  display: flex;
  flex-direction: column;
}

.option {
  padding: 26rpx 0;
  border-radius: 16rpx;
  border: 3rpx solid rgba(255,255,255,0.2);
  background: #24243e;
  text-align: center;
  margin-bottom: 20rpx;
  transition: all 0.2s;
}

.option:last-child {
  margin-bottom: 0;
}

.option-selected {
  border-color: #6366f1;
  background: rgba(99,102,241,0.12);
}

.option:active {
  transform: scale(0.98);
}

.option-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

.option-selected .option-text {
  color: #a5b4fc;
}

/* 结果页 */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 100rpx;
}

.score-circle {
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 40rpx rgba(99,102,241,0.35);
}

.score-num {
  font-size: 80rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.score-unit {
  font-size: 28rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 8rpx;
}

.score-comment {
  font-size: 30rpx;
  color: #a5b4fc;
  margin-top: 30rpx;
  margin-bottom: 50rpx;
}

.result-info {
  width: 100%;
  max-width: 620rpx;
  background: rgba(255,255,255,0.06);
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 60rpx;
}

.result-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
}

.result-info .info-row + .info-row {
  border-top: 1rpx solid rgba(255,255,255,0.08);
}

.dim-tag {
  padding: 6rpx 24rpx;
  border-radius: 24rpx;
  border: 3rpx solid #6366f1;
  background: rgba(99,102,241,0.12);
}

.dim-tag-text {
  font-size: 24rpx;
  color: #a5b4fc;
  font-weight: bold;
}

/* 按钮 */
.btn-primary {
  margin-top: 60rpx;
  width: 480rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 34rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(99,102,241,0.35);
}

.btn-primary::after {
  border: none;
}

.btn-primary[disabled] {
  opacity: 0.6;
}

.btn-secondary {
  margin-top: 30rpx;
  width: 480rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 48rpx;
  background: transparent;
  color: #a5b4fc;
  font-size: 32rpx;
  border: 2rpx solid rgba(99,102,241,0.5);
}

.btn-secondary::after {
  border: none;
}
</style>