cfc/cfc-frontend/pages/cognitive-test/spatial-test.vue

<template>
  <view class="page" :style="{ '--font-scale': fontScale }">
    <!-- 开始引导 -->
    <view v-if="step === 'instruction'" class="container">
      <view class="hero-icon">
        <text class="hero-symbol">↻</text>
      </view>
      <text class="hero-title">空间思维测试</text>
      <text class="hero-desc">观察箭头的初始方向，想象它按提示旋转后的样子，从四个选项中选出正确的方向。</text>
      <view class="rule-list">
        <view class="rule-item">
          <view class="rule-dot"></view>
          <text class="rule-text">共 8 题，每题限时 10 秒</text>
        </view>
        <view class="rule-item">
          <view class="rule-dot"></view>
          <text class="rule-text">超时未作答按答错处理</text>
        </view>
        <view class="rule-item">
          <view class="rule-dot"></view>
          <text class="rule-text">答题结束后自动计算得分</text>
        </view>
      </view>
      <button class="btn btn-primary" @tap="startTest">开始测试</button>
    </view>

    <!-- 答题中 -->
    <view v-else-if="step === 'playing'" class="container">
      <view class="progress-row">
        <text class="progress-text">第 {{ currentIndex + 1 }}/{{ questions.length }} 题</text>
        <text class="timer-text">{{ timeLeft }}s</text>
      </view>
      <view class="timer-bar">
        <view class="timer-bar-fill" :style="timerBarStyle"></view>
      </view>

      <view class="question-box">
        <text class="direction-label">初始方向</text>
        <text class="direction-arrow">{{ currentQuestion.direction }}</text>
        <text class="rotation-tip">顺时针旋转 {{ currentQuestion.rotation }}°</text>
      </view>

      <view class="options-wrap">
        <view
          v-for="(opt, oi) in currentQuestion.options"
          :key="oi"
          class="option-btn"
          :class="selected === opt ? 'option-selected' : ''"
          @tap="handleOptionTap(opt)"
        >
          <text class="option-arrow">{{ opt }}</text>
        </view>
      </view>

      <view v-if="feedback" class="feedback-row">
        <text class="feedback-text" :class="'feedback-' + feedback">{{ feedbackText }}</text>
      </view>
    </view>

    <!-- 结果 -->
    <view v-else class="container">
      <text class="result-title">测试完成</text>
      <view class="score-circle">
        <text class="score-number">{{ score }}</text>
        <text class="score-unit">分</text>
      </view>
      <text class="score-detail">答对 {{ correctCount }}/{{ questions.length }} 题</text>
      <view class="dimension-tag">
        <text class="dimension-name">空间思维</text>
      </view>

      <button class="btn btn-primary" :disabled="submitting" @tap="submitScore">提交成绩</button>
      <button class="btn btn-secondary" @tap="restartTest">再测一次</button>
    </view>
  </view>
</template>

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

const TOTAL_TIME = 10
const TOTAL_QUESTIONS = 8
const DIRECTIONS = ['↑', '→', '↓', '←']
// 顺时针旋转 90° 的方向映射
const ROTATE_CW = { '↑': '→', '→': '↓', '↓': '←', '←': '↑' }

function shuffleArray(arr) {
  var a = arr.slice()
  var i = a.length - 1
  while (i > 0) {
    var j = Math.floor(Math.random() * (i + 1))
    var tmp = a[i]
    a[i] = a[j]
    a[j] = tmp
    i -= 1
  }
  return a
}

function rotateDirection(direction, degrees) {
  var result = direction
  var times = degrees / 90
  for (var i = 0; i < times; i++) {
    result = ROTATE_CW[result]
  }
  return result
}

function buildQuestionBank() {
  var bank = []
  var rotations = [90, 180, 270]
  for (var d = 0; d < DIRECTIONS.length; d++) {
    var dir = DIRECTIONS[d]
    for (var r = 0; r < rotations.length; r++) {
      var rot = rotations[r]
      var answer = rotateDirection(dir, rot)
      // 每个 方向×角度 组合生成 2 题，共 24 题
      bank.push({ direction: dir, rotation: rot, answer: answer, options: shuffleArray(DIRECTIONS) })
      bank.push({ direction: dir, rotation: rot, answer: answer, options: shuffleArray(DIRECTIONS) })
    }
  }
  return bank
}

const QUESTION_BANK = buildQuestionBank()
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data() {
    return {
      memberId: '',
      step: 'instruction', // instruction | playing | result
      questions: [],
      currentIndex: 0,
      selected: '',
      answered: false,
      feedback: '', // '' | correct | wrong | timeout
      correctCount: 0,
      timeLeft: TOTAL_TIME,
      score: 0,
      submitting: false,
      timer: null,
      timeoutJump: null
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex] || {}
    },
    timerBarStyle() {
      return 'width:' + (this.timeLeft / TOTAL_TIME * 100) + '%'
    },
    feedbackText() {
      if (this.feedback === 'correct') return '回答正确'
      if (this.feedback === 'wrong') return '回答错误'
      if (this.feedback === 'timeout') return '时间到，未作答'
      return ''
    }
  },
  onLoad() {
    this.memberId = uni.getStorageSync('currentChildId') || ''
  },
  onUnload() {
    this.stopTimer()
    if (this.timeoutJump) {
      clearTimeout(this.timeoutJump)
      this.timeoutJump = null
    }
  },
  methods: {
    generateQuestions() {
      var shuffled = shuffleArray(QUESTION_BANK)
      return shuffled.slice(0, TOTAL_QUESTIONS)
    },
    startTest() {
      this.questions = this.generateQuestions()
      this.currentIndex = 0
      this.selected = ''
      this.answered = false
      this.feedback = ''
      this.correctCount = 0
      this.score = 0
      this.submitting = false
      this.step = 'playing'
      this.startTimer()
    },
    startTimer() {
      this.stopTimer()
      this.timeLeft = TOTAL_TIME
      this.timer = setInterval(() => {
        this.timeLeft -= 1
        if (this.timeLeft <= 0) {
          this.handleTimeout()
        }
      }, 1000)
    },
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handleOptionTap(opt) {
      if (this.answered) {
        return
      }
      this.answered = true
      this.selected = opt
      this.stopTimer()
      if (opt === this.currentQuestion.answer) {
        this.correctCount += 1
        this.feedback = 'correct'
      } else {
        this.feedback = 'wrong'
      }
      this.scheduleNext()
    },
    handleTimeout() {
      this.stopTimer()
      this.answered = true
      this.feedback = 'timeout'
      this.scheduleNext()
    },
    scheduleNext() {
      var self = this
      this.timeoutJump = setTimeout(function () {
        self.nextQuestion()
      }, 800)
    },
    nextQuestion() {
      if (this.timeoutJump) {
        clearTimeout(this.timeoutJump)
        this.timeoutJump = null
      }
      if (this.currentIndex >= this.questions.length - 1) {
        this.finishTest()
        return
      }
      this.currentIndex += 1
      this.selected = ''
      this.answered = false
      this.feedback = ''
      this.startTimer()
    },
    finishTest() {
      this.stopTimer()
      this.score = Math.round(this.correctCount / this.questions.length * 100)
      this.step = 'result'
    },
    submitScore() {
      if (this.submitting) {
        return
      }
      this.submitting = true
      var memberId = this.memberId || uni.getStorageSync('currentChildId') || ''
      submitCognitiveSelfTest(memberId, 'spatialScore', this.score)
        .then(() => {
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        })
        .catch(() => {
          this.submitting = false
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
        })
    },
    restartTest() {
      this.startTest()
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, $app-ink-night 0%, $app-ink-night-2 100%);
  padding: 60rpx 40rpx;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- 引导页 --- */
.hero-icon {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  border: 2rpx solid rgba(59, 130, 246, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
  margin-bottom: 40rpx;
}
.hero-symbol {
  font-size: calc(80rpx * var(--font-scale, 1));
  color: $status-info;
  line-height: 1;
}
.hero-title {
  font-size: calc(44rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
  margin-bottom: 24rpx;
}
.hero-desc {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 48rpx;
}
.rule-list {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24rpx;
  padding: $uni-space-lg;
  margin-bottom: 80rpx;
  box-sizing: border-box;
}
.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.rule-item:last-child {
  margin-bottom: 0;
}
.rule-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: $status-info;
  margin-right: 16rpx;
}
.rule-text {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.8);
}

/* --- 答题页 --- */
.progress-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.progress-text {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.85);
}
.timer-text {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: #60A5FA;
  font-weight: bold;
}
.timer-bar {
  width: 100%;
  height: 12rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 80rpx;
}
.timer-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, $status-info, #60A5FA);
  border-radius: 8rpx;
  transition: width 1s linear;
}
.question-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24rpx;
  padding: 50rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}
.direction-label {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20rpx;
}
.direction-arrow {
  font-size: calc(100rpx * var(--font-scale, 1));
  color: $app-surface;
  line-height: 1.2;
  margin-bottom: 20rpx;
}
.rotation-tip {
  font-size: calc(30rpx * var(--font-scale, 1));
  color: $tint-blue-300;
}
.options-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.option-btn {
  width: 300rpx;
  height: 220rpx;
  background: rgba(255, 255, 255, 0.08);
  border: 2rpx solid rgba(255, 255, 255, 0.15);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $uni-space-lg;
  box-sizing: border-box;
}
.option-selected {
  border-color: $status-info;
  background: rgba(59, 130, 246, 0.2);
}
.option-arrow {
  font-size: calc(72rpx * var(--font-scale, 1));
  color: $app-surface;
}
.feedback-row {
  margin-top: 10rpx;
}
.feedback-text {
  font-size: calc(30rpx * var(--font-scale, 1));
}
.feedback-correct {
  color: $status-success-light-3;
}
.feedback-wrong {
  color: $status-danger-light;
}
.feedback-timeout {
  color: rgba(255, 255, 255, 0.5);
}

/* --- 结果页 --- */
.result-title {
  font-size: calc(36rpx * var(--font-scale, 1));
  color: $app-surface;
  margin-top: 60rpx;
  margin-bottom: 20rpx;
}
.score-circle {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  border: 10rpx solid $status-info;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0;
}
.score-number {
  font-size: calc(80rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
  line-height: 1.1;
}
.score-unit {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.6);
}
.score-detail {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: $uni-space-lg;
}
.dimension-tag {
  padding: 10rpx 32rpx;
  background: rgba(59, 130, 246, 0.15);
  border: 2rpx solid rgba(59, 130, 246, 0.5);
  border-radius: 24rpx;
  margin-bottom: 80rpx;
}
.dimension-name {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $tint-blue-300;
}

/* --- 按钮 --- */
.btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 24rpx;
  font-size: calc(32rpx * var(--font-scale, 1));
  text-align: center;
  margin-bottom: $uni-space-lg;
  padding: 0;
}
.btn::after {
  border: none;
}
.btn-primary {
  background: $status-info;
  color: $app-surface;
}
.btn-secondary {
  background: transparent;
  border: 2rpx solid $status-info;
  color: $status-info;
  box-sizing: border-box;
}
</style>