|
|
@@ -0,0 +1,511 @@
|
|
|
+<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>
|
E2E Test Bot