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

<template>
  <view class="page" :style="{ '--font-scale': fontScale }">

    <!-- ============ 1. 说明页 ============ -->
    <view class="intro" v-if="step === 'intro'">
      <view class="intro-icon">
        <text class="intro-icon-text">🧠</text>
      </view>
      <text class="intro-title">记忆力测试</text>
      <text class="intro-desc">屏幕上会快速闪现一串数字，数字消失后，用下方数字键盘把它重新输入出来。每答对一关，数字就会增加一位，看看你能记住多少位！</text>
      <view class="intro-rule">
        <text class="rule-item">起始位数：3 位</text>
        <text class="rule-item">最高位数：8 位</text>
        <text class="rule-item">共 6 关</text>
      </view>
      <button class="primary-btn" @click="startTest">开始测试</button>
    </view>

    <!-- ============ 2. 测试中 ============ -->
    <view class="playing" v-if="step === 'playing'">
      <view class="progress-header">
        <text class="progress-level">第 {{ levelIndex }} 关</text>
        <text class="progress-digit">{{ digitCount }} 位数</text>
      </view>
      <view class="progress-track">
        <view class="progress-fill" :style="{ width: progressPct + '%' }"></view>
      </view>

      <!-- 展示阶段：数字闪现 + 计时条 -->
      <view class="show-area" v-if="phase === 'show'">
        <text class="show-hint">记住这串数字</text>
        <view class="digit-row">
          <view class="show-digit" v-for="(d, i) in showDigits" :key="i">
            <text>{{ d }}</text>
          </view>
        </view>
        <view class="timer-bar-wrap">
          <view class="timer-bar" :style="{ width: timerProgress * 100 + '%' }"></view>
        </view>
      </view>

      <!-- 输入阶段：数字键盘 -->
      <view class="input-area" v-if="phase === 'input'">
        <text class="input-hint">请输入刚才的数字</text>
        <view class="input-display">
          <view
            class="input-cell"
            v-for="(c, i) in inputCells"
            :key="i"
            :class="{ filled: i < userInput.length }"
          ></view>
        </view>
        <view class="pad">
          <view class="pad-row" v-for="(row, ri) in padRows" :key="ri">
            <view
              class="pad-key"
              :class="{ 'pad-key-ctrl': key.ctrl }"
              v-for="(key, ci) in row"
              :key="ci"
              @click="onPadPress(key)"
            >
              <text>{{ key.v }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 反馈动画 -->
      <view class="feedback feedback-correct" v-if="feedback === 'correct'">
        <text class="feedback-text">回答正确</text>
      </view>
      <view class="feedback feedback-wrong" v-if="feedback === 'wrong'">
        <text class="feedback-text">回答错误</text>
      </view>
    </view>

    <!-- ============ 3. 结果页 ============ -->
    <view class="result" v-if="step === 'result'">
      <view class="score-circle">
        <text class="score-num">{{ score }}</text>
        <text class="score-unit">分</text>
      </view>
      <view class="max-level">
        <text class="max-level-label">最高记忆</text>
        <text class="max-level-value">{{ maxLevel === 0 ? 3 : maxLevel }}位数</text>
      </view>
      <view class="dimension-tag">
        <text>记忆力</text>
      </view>
      <button class="primary-btn submit-btn" :disabled="submitting" @click="submitScore">
        {{ submitting ? '提交中...' : '提交成绩' }}
      </button>
      <button class="ghost-btn" @click="startTest">再测一次</button>
    </view>

  </view>
</template>

<script>
import { submitCognitiveSelfTest } from '../../utils/api.js'
import fontScaleMixin from '@/mixins/font-scale.js'

export default {
  mixins: [fontScaleMixin],
  data() {
    return {
      step: 'intro',          // intro | playing | result
      phase: 'show',          // show | input
      digitCount: 3,          // 当前关卡位数 3-8
      currentNumber: '',      // 需要记忆的数字串
      userInput: [],          // 用户已输入的数字
      inputLocked: false,     // 反馈期间锁定键盘
      feedback: '',           // '' | correct | wrong
      showStart: 0,           // 数字展示开始时间戳
      showDuration: 0,        // 数字展示时长(ms)
      timerProgress: 1,       // 计时条剩余比例 0-1
      showTimer: null,
      correctTimer: null,
      wrongTimer: null,
      submitTimer: null,
      maxLevel: 0,            // 成功记住的最高位数
      score: 0,
      submitting: false,
      memberId: '',
      padRows: [
        [{ v: 1 }, { v: 2 }, { v: 3 }],
        [{ v: 4 }, { v: 5 }, { v: 6 }],
        [{ v: 7 }, { v: 8 }, { v: 9 }],
        [{ v: '清除', ctrl: true }, { v: 0 }, { v: '确认', ctrl: true }]
      ]
    }
  },
  computed: {
    levelIndex() {
      return this.digitCount - 2
    },
    progressPct() {
      return (this.levelIndex / 6) * 100
    },
    showDigits() {
      return (this.currentNumber || '').split('')
    },
    inputCells() {
      var arr = []
      for (var i = 0; i < this.digitCount; i++) {
        arr.push(i)
      }
      return arr
    }
  },
  onLoad(options) {
    var id = (options && options.memberId) || uni.getStorageSync('currentChildId') || ''
    this.memberId = id
  },
  onUnload() {
    this.clearAllTimers()
  },
  methods: {
    clearAllTimers() {
      if (this.showTimer) {
        clearInterval(this.showTimer)
        this.showTimer = null
      }
      if (this.correctTimer) {
        clearTimeout(this.correctTimer)
        this.correctTimer = null
      }
      if (this.wrongTimer) {
        clearTimeout(this.wrongTimer)
        this.wrongTimer = null
      }
      if (this.submitTimer) {
        clearTimeout(this.submitTimer)
        this.submitTimer = null
      }
    },
    startTest() {
      this.clearAllTimers()
      this.digitCount = 3
      this.maxLevel = 0
      this.score = 0
      this.userInput = []
      this.inputLocked = false
      this.feedback = ''
      this.step = 'playing'
      this.startRound()
    },
    startRound() {
      this.phase = 'show'
      this.userInput = []
      this.inputLocked = false
      this.feedback = ''
      // 生成随机数字串
      var num = ''
      for (var i = 0; i < this.digitCount; i++) {
        num += Math.floor(Math.random() * 10)
      }
      this.currentNumber = num
      this.showStart = Date.now()
      this.showDuration = Math.max(1.5, this.digitCount * 0.5) * 1000
      this.timerProgress = 1
      if (this.showTimer) {
        clearInterval(this.showTimer)
        this.showTimer = null
      }
      this.showTimer = setInterval(() => {
        var remaining = this.showDuration - (Date.now() - this.showStart)
        if (remaining <= 0) {
          if (this.showTimer) {
            clearInterval(this.showTimer)
            this.showTimer = null
          }
          this.timerProgress = 0
          this.phase = 'input'
          return
        }
        this.timerProgress = remaining / this.showDuration
      }, 50)
    },
    onPadPress(key) {
      if (this.feedback || this.inputLocked) return
      var v = key.v
      if (typeof v === 'number') {
        if (this.userInput.length < this.digitCount) {
          this.userInput.push(v)
        }
      } else if (v === '清除') {
        this.userInput.pop()
      } else if (v === '确认') {
        this.confirmInput()
      }
    },
    confirmInput() {
      if (this.userInput.length < this.digitCount) return
      this.inputLocked = true
      var entered = this.userInput.join('')
      if (entered === this.currentNumber) {
        this.feedback = 'correct'
        this.correctTimer = setTimeout(() => {
          this.correctTimer = null
          this.feedback = ''
          this.maxLevel = this.digitCount
          if (this.digitCount >= 8) {
            // 最高关卡已通过，测试结束
            this.endGame()
          } else {
            this.digitCount++
            this.startRound()
          }
        }, 700)
      } else {
        this.feedback = 'wrong'
        this.wrongTimer = setTimeout(() => {
          this.wrongTimer = null
          this.feedback = ''
          this.endGame()
        }, 900)
      }
    },
    endGame() {
      this.clearAllTimers()
      // 按最高成功记住的位数映射得分
      var score = 100
      if (this.maxLevel === 0) {
        score = 40
      } else if (this.maxLevel === 3) {
        score = 55
      } else if (this.maxLevel === 4) {
        score = 70
      } else if (this.maxLevel === 5) {
        score = 82
      } else if (this.maxLevel === 6) {
        score = 92
      }
      this.score = score
      this.step = 'result'
    },
    submitScore() {
      if (this.submitting) return
      var memberId = this.memberId
      if (!memberId) {
        uni.showToast({ title: '未找到测评成员', icon: 'none' })
        return
      }
      this.submitting = true
      submitCognitiveSelfTest(memberId, 'memoryScore', this.score)
        .then(() => {
          uni.showToast({ title: '提交成功', icon: 'success' })
          this.submitTimer = setTimeout(() => {
            var pages = getCurrentPages()
            if (pages.length > 1) {
              uni.navigateBack()
            } else {
              uni.reLaunch({ url: '/pages/index/index' })
            }
          }, 800)
        })
        .catch(() => {
          // request() 已自动弹出失败提示，这里只需恢复按钮状态
          this.submitting = false
        })
    }
  }
}
</script>

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

/* ---------- 通用按钮 ---------- */
.primary-btn {
  margin-top: 60rpx;
  width: 480rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
  color: $app-surface;
  font-size: calc(34rpx * var(--font-scale, 1));
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
}
.primary-btn::after {
  border: none;
}
.primary-btn[disabled] {
  opacity: 0.6;
  color: $app-surface;
  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
}

.ghost-btn {
  margin-top: $uni-space-lg;
  width: 480rpx;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 24rpx;
  background: transparent;
  color: $indigo-light;
  font-size: calc(32rpx * var(--font-scale, 1));
  border: 2rpx solid rgba(99, 102, 241, 0.5);
}
.ghost-btn::after {
  border: none;
}

/* ---------- 说明页 ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 80rpx;
}
.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: calc(80rpx * var(--font-scale, 1));
}
.intro-title {
  font-size: calc(48rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
  margin-bottom: $uni-space-lg;
}
.intro-desc {
  font-size: calc(30rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  text-align: center;
  padding: 0 20rpx;
}
.intro-rule {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40rpx;
}
.rule-item {
  font-size: calc(24rpx * var(--font-scale, 1));
  color: $indigo-light;
  background: rgba(99, 102, 241, 0.12);
  border-radius: 24rpx;
  padding: 10rpx 24rpx;
  margin: 8rpx 12rpx;
}

/* ---------- 测试中 ---------- */
.playing {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.progress-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
}
.progress-level {
  font-size: calc(44rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
}
.progress-digit {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $indigo-light;
  margin-top: 8rpx;
}
.progress-track {
  width: 480rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 24rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 8rpx;
  background: linear-gradient(90deg, $dim-wisdom, $dim-wisdom-light);
  transition: width 0.3s ease;
}

/* 展示阶段：数字闪现 */
.show-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 120rpx;
}
.show-hint {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 60rpx;
}
.digit-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.show-digit {
  width: 76rpx;
  height: 140rpx;
  margin: 0 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16rpx;
}
.show-digit text {
  font-size: calc(120rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
}
.timer-bar-wrap {
  width: 480rpx;
  height: 12rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 60rpx;
}
.timer-bar {
  height: 100%;
  border-radius: 8rpx;
  background: linear-gradient(90deg, $dim-wisdom, $dim-wisdom-light);
  transition: width 0.05s linear;
}

/* 输入阶段：数字键盘 */
.input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 60rpx;
}
.input-hint {
  font-size: calc(26rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 50rpx;
}
.input-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 100rpx;
  margin-bottom: 40rpx;
}
.input-cell {
  width: 76rpx;
  height: 100rpx;
  margin: 0 4rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.04);
  border: 2rpx solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}
.input-cell.filled {
  background: rgba(99, 102, 241, 0.5);
  border-color: $dim-wisdom;
}
.pad {
  width: 100%;
  max-width: 620rpx;
}
.pad-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.pad-key {
  width: 180rpx;
  height: 108rpx;
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 0.06);
  border: 2rpx solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pad-key text {
  font-size: calc(44rpx * var(--font-scale, 1));
  color: $app-surface;
  font-weight: 500;
}
.pad-key:active {
  border-color: $dim-wisdom;
  background: rgba(99, 102, 241, 0.2);
}
.pad-key-ctrl {
  background: rgba(255, 255, 255, 0.03);
}
.pad-key-ctrl text {
  font-size: calc(32rpx * var(--font-scale, 1));
  color: $indigo-light;
}

/* 反馈动画 */
.feedback {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  animation: feedbackFade 0.7s ease both;
}
.feedback-correct {
  background: rgba(16, 185, 129, 0.3);
}
.feedback-wrong {
  background: rgba(239, 68, 68, 0.3);
}
.feedback-text {
  font-size: calc(48rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
  padding: 24rpx 60rpx;
  border-radius: 24rpx;
  background: rgba(0, 0, 0, 0.35);
}
@keyframes feedbackFade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- 结果页 ---------- */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 100rpx;
}
.score-circle {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12rpx 40rpx rgba(99, 102, 241, 0.45);
}
.score-num {
  font-size: calc(100rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
  line-height: 1;
}
.score-unit {
  font-size: calc(28rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.8);
  margin-top: 8rpx;
}
.max-level {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 60rpx;
}
.max-level-label {
  font-size: calc(30rpx * var(--font-scale, 1));
  color: rgba(255, 255, 255, 0.6);
  margin-right: 16rpx;
}
.max-level-value {
  font-size: calc(40rpx * var(--font-scale, 1));
  font-weight: bold;
  color: $app-surface;
}
.dimension-tag {
  margin-top: 24rpx;
  font-size: calc(26rpx * var(--font-scale, 1));
  color: $indigo-light;
  background: rgba(99, 102, 241, 0.15);
  border: 2rpx solid rgba(99, 102, 241, 0.4);
  border-radius: 24rpx;
  padding: 8rpx 28rpx;
}
.submit-btn {
  margin-top: 80rpx;
}
</style>