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

<template>
  <view class="page-container">
    <!-- 说明页 -->
    <view v-if="step === 'instruction'" class="step-wrap">
      <text class="title">加工速度测试</text>
      <text class="subtitle">符号匹配 · 反应速度</text>

      <view class="desc-card">
        <text class="desc-title">测试说明</text>
        <text class="desc-line">1. 先记住出现的符号</text>
        <text class="desc-line">2. 从 4 个候选中点出相同的符号</text>
        <text class="desc-line">3. 越快越准，得分越高</text>
        <text class="desc-line">共 10 轮，每轮限时 5 秒</text>
      </view>

      <button class="btn-primary" @click="startTest">开始测试</button>
    </view>

    <!-- 测试中 -->
    <view v-if="step === 'playing'" class="step-wrap">
      <view class="round-bar">
        <text class="round-text">第 {{ roundIndex }}/10</text>
        <view class="timer-track">
          <view class="timer-fill" :style="'width:' + timerPercent + '%'"></view>
        </view>
      </view>

      <!-- 记忆阶段：展示目标符号 -->
      <view v-if="phase === 'show'" class="show-area">
        <text class="phase-hint">记住这个符号</text>
        <view class="symbol-box" :style="'width:' + symbolBoxSize + 'px;height:' + symbolBoxSize + 'px'">
          <text class="symbol-big" :style="'font-size:' + symbolFontSize + 'px'">{{ currentTarget }}</text>
        </view>
      </view>

      <!-- 选择阶段：4 选 1 -->
      <view v-else class="choice-area">
        <text class="phase-hint">找出刚才的符号</text>
        <view class="choice-grid">
          <view
            v-for="(sym, idx) in currentOptions"
            :key="idx"
            :class="'choice-cell' + (selIndex === idx ? (roundCorrect ? ' cell-hit' : ' cell-miss') : '')"
            :style="'width:' + cellSize + 'px;height:' + cellSize + 'px'"
            @click="handleChoice(sym)"
          >
            <text class="symbol-opt" :style="'font-size:' + symbolFontSize + 'px'">{{ sym }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 结果页 -->
    <view v-if="step === 'result'" class="step-wrap">
      <view class="score-circle">
        <text class="score-num">{{ score }}</text>
        <text class="score-label">分</text>
      </view>

      <view class="result-stats">
        <view class="stat-item">
          <text class="stat-value">{{ correctCount }}/10</text>
          <text class="stat-label">答对</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ avgTimeText }}</text>
          <text class="stat-label">平均反应</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">+{{ speedBonus }}</text>
          <text class="stat-label">速度加分</text>
        </view>
      </view>

      <view class="dimension-tag">加工速度</view>

      <button class="btn-primary" :disabled="submitting" @click="submitScore">
        {{ submitting ? '提交中...' : '提交成绩' }}
      </button>
      <button class="btn-secondary" @click="startTest">再测一次</button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      SYMBOLS: ['★', '●', '■', '▲', '◆', '◇', '○', '△'],
      SYMBOL_PAIRS: [['★', '◆'], ['●', '○'], ['■', '◇'], ['▲', '△']],
      step: 'instruction',
      phase: 'show',
      roundIndex: 1,
      currentTarget: '',
      currentOptions: [],
      roundStartMs: 0,
      roundElapsed: 0,
      timerPercent: 0,
      locked: false,
      selIndex: -1,
      roundCorrect: false,
      results: [],
      correctCount: 0,
      avgTimeText: '0.00s',
      speedBonus: 0,
      score: 0,
      submitting: false,
      memberId: '',
      showTimer: null,
      roundTimer: null,
      windowWidth: 375,
      symbolFontSize: 75,
      symbolBoxSize: 150,
      cellSize: 112
    }
  },

  onLoad(options) {
    var win = uni.getWindowInfo()
    this.windowWidth = (win && win.windowWidth) || 375
    this.symbolFontSize = Math.round(this.windowWidth * 0.2)
    this.symbolBoxSize = Math.round(this.windowWidth * 0.4)
    this.cellSize = Math.round(this.windowWidth * 0.3)
    this.memberId = (options && options.memberId) || uni.getStorageSync('currentChildId') || ''
  },

  onUnload() {
    this.clearTimers()
  },

  methods: {
    clearTimers() {
      if (this.showTimer) {
        clearTimeout(this.showTimer)
        this.showTimer = null
      }
      if (this.roundTimer) {
        clearInterval(this.roundTimer)
        this.roundTimer = null
      }
    },

    startTest() {
      this.clearTimers()
      this.results = []
      this.roundIndex = 1
      this.submitting = false
      this.selIndex = -1
      this.timerPercent = 0
      this.step = 'playing'
      this.startRound()
    },

    // 生成一轮：从符号对中随机取目标，3 个干扰项 + 配对符号
    generateRound() {
      var pair = this.SYMBOL_PAIRS[Math.floor(Math.random() * this.SYMBOL_PAIRS.length)]
      var target = pair[Math.floor(Math.random() * 2)]
      var pairMate = target === pair[0] ? pair[1] : pair[0]
      var others = []
      for (var i = 0; i < this.SYMBOLS.length; i++) {
        if (this.SYMBOLS[i] !== target && this.SYMBOLS[i] !== pairMate) {
          others.push(this.SYMBOLS[i])
        }
      }
      this.shuffle(others)
      var options = [target, pairMate, others[0], others[1]]
      this.shuffle(options)
      return { target: target, options: options }
    },

    shuffle(arr) {
      for (var i = arr.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1))
        var tmp = arr[i]
        arr[i] = arr[j]
        arr[j] = tmp
      }
    },

    startRound() {
      this.clearTimers()
      this.phase = 'show'
      this.locked = false
      this.selIndex = -1
      this.roundElapsed = 0
      this.timerPercent = 0

      var round = this.generateRound()
      this.currentTarget = round.target
      this.currentOptions = round.options

      // 记忆阶段：展示 1 秒后进入选择
      var that = this
      this.showTimer = setTimeout(function () {
        that.phase = 'choice'
        that.roundStartMs = Date.now()
        that.roundTimer = setInterval(function () {
          that.tickRound()
        }, 100)
      }, 1000)
    },

    tickRound() {
      this.roundElapsed += 100
      this.timerPercent = Math.min(this.roundElapsed / 5000 * 100, 100)
      if (this.roundElapsed >= 5000) {
        // 超时未作答，记错
        this.finishRound()
      }
    },

    handleChoice(sym) {
      if (this.phase !== 'choice' || this.locked) return
      this.locked = true
      var isCorrect = sym === this.currentTarget
      this.selIndex = this.currentOptions.indexOf(sym)
      this.roundCorrect = isCorrect
      this.results.push({
        correct: isCorrect,
        timeMs: Date.now() - this.roundStartMs
      })
      if (this.roundTimer) {
        clearInterval(this.roundTimer)
        this.roundTimer = null
      }
      var that = this
      setTimeout(function () {
        that.nextRound()
      }, 450)
    },

    // 超时：timeMs 记 0（不计入平均反应时间）
    finishRound() {
      if (this.locked) return
      this.locked = true
      this.results.push({ correct: false, timeMs: 0 })
      if (this.roundTimer) {
        clearInterval(this.roundTimer)
        this.roundTimer = null
      }
      var that = this
      setTimeout(function () {
        that.nextRound()
      }, 300)
    },

    nextRound() {
      if (this.roundIndex >= 10) {
        this.finishTest()
      } else {
        this.roundIndex++
        this.startRound()
      }
    },

    finishTest() {
      this.clearTimers()
      this.step = 'result'
      this.computeResult()
    },

    computeResult() {
      var correct = 0
      var totalMs = 0
      var answered = 0
      for (var i = 0; i < this.results.length; i++) {
        var r = this.results[i]
        if (r.correct) correct++
        if (r.timeMs > 0) {
          totalMs += r.timeMs
          answered++
        }
      }
      this.correctCount = correct
      var avgMs = answered > 0 ? totalMs / answered : 5000
      this.avgTimeText = (avgMs / 1000).toFixed(2) + 's'

      var avgSec = avgMs / 1000
      var bonus = 5
      if (avgSec < 1) {
        bonus = 20
      } else if (avgSec < 2) {
        bonus = 17
      } else if (avgSec < 3) {
        bonus = 14
      } else if (avgSec < 4) {
        bonus = 10
      }
      this.speedBonus = bonus

      var total = Math.round(correct / 10 * 80 + bonus)
      this.score = Math.min(Math.max(total, 0), 100)
    },

    submitScore() {
      if (this.submitting) return
      var memberId = this.memberId || uni.getStorageSync('currentChildId') || ''
      if (!memberId) {
        uni.showToast({ title: '请先选择孩子', icon: 'none' })
        return
      }
      this.submitting = true
      var that = this
      submitCognitiveSelfTest(memberId, 'processingSpeedScore', this.score)
        .then(function () {
          uni.showToast({ title: '提交成功', icon: 'success' })
          setTimeout(function () {
            uni.navigateBack()
          }, 800)
        })
        .catch(function () {
          that.submitting = false
          uni.showToast({ title: '提交失败，请重试', icon: 'none' })
        })
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  padding: 40rpx 50rpx;
}

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

.title {
  font-size: 52rpx;
  font-weight: bold;
  color: #ffffff;
  margin-top: 40rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 16rpx;
}

.desc-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24rpx;
  padding: 40rpx;
  margin: 60rpx 0;
}

.desc-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
  margin-bottom: 24rpx;
}

.desc-line {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.9;
}

/* 按钮 */
.btn-primary {
  width: 70%;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #ffffff;
  font-size: 34rpx;
  border-radius: 50rpx;
  border: none;
  margin-top: 20rpx;
}

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

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

.btn-secondary {
  width: 70%;
  background: transparent;
  color: #F97316;
  font-size: 32rpx;
  border-radius: 50rpx;
  border: 2rpx solid #F97316;
  margin-top: 30rpx;
}

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

/* 测试中 */
.round-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30rpx;
}

.round-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.timer-track {
  width: 100%;
  height: 10rpx;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10rpx;
  overflow: hidden;
}

.timer-fill {
  height: 100%;
  border-radius: 10rpx;
  background: linear-gradient(90deg, #F97316, #FB923C);
  transition: width 0.1s linear;
}

.phase-hint {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.6);
  margin: 70rpx 0 40rpx;
}

/* 记忆阶段 */
.show-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.symbol-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 2rpx solid rgba(249, 115, 22, 0.4);
  border-radius: 24rpx;
  box-shadow: 0 0 40rpx rgba(249, 115, 22, 0.15);
}

.symbol-big {
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

/* 选择阶段 */
.choice-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.choice-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.choice-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a4a;
  border: 2rpx solid transparent;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.choice-cell:active {
  background: #36365c;
}

.choice-cell.cell-hit {
  background: #1e3a2f;
  border-color: #22c55e;
  box-shadow: 0 0 30rpx rgba(34, 197, 94, 0.3);
}

.choice-cell.cell-miss {
  background: #3a1f22;
  border-color: #ef4444;
  box-shadow: 0 0 30rpx rgba(239, 68, 68, 0.3);
}

.symbol-opt {
  color: #ffffff;
  font-weight: bold;
  line-height: 1;
}

/* 结果页 */
.score-circle {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #F97316, #FB923C);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 60rpx 0 50rpx;
  box-shadow: 0 0 60rpx rgba(249, 115, 22, 0.35);
}

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

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

.result-stats {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

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

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
}

.stat-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10rpx;
}

.dimension-tag {
  font-size: 28rpx;
  color: #F97316;
  background: rgba(249, 115, 22, 0.12);
  border: 2rpx solid rgba(249, 115, 22, 0.4);
  border-radius: 30rpx;
  padding: 12rpx 40rpx;
  margin-bottom: 50rpx;
}
</style>