cfc/zxyj-frontend/pages/games/schulte.vue

<template>
  <view class="game-container">
    <view class="game-header">
      <text class="game-title">🎯 舒尔特方格</text>
      <view class="game-stats">
        <text>时间: {{ time }}秒</text>
        <text>得分: {{ score }}</text>
      </view>
    </view>
    
    <view class="grid-container">
      <view 
        class="grid-cell" 
        v-for="(num, index) in numbers" 
        :key="index"
        :class="{ correct: index + 1 === currentNumber }"
        @click="handleCellClick(num)"
      >
        {{ num }}
      </view>
    </view>
    
    <view class="game-controls" v-if="!isPlaying">
      <button class="start-btn" @click="startGame">开始游戏</button>
      <text class="tip">请按顺序点击1-25，计时开始后不可暂停</text>
    </view>
    
    <view class="result-modal" v-if="showResult">
      <view class="result-content">
        <text class="result-title">🎉 恭喜完成!</text>
        <text class="result-score">用时: {{ time }}秒</text>
        <text class="result-score">获得积分: {{ score }}</text>
        <button class="restart-btn" @click="startGame">再来一次</button>
      </view>
    </view>
  </view>
</template>

<script>
import { completeMiniGame, getChildren } from '../../utils/api.js'

export default {
  data() {
    return {
      numbers: [],
      currentNumber: 1,
      isPlaying: false,
      time: 0,
      timer: null,
      score: 0,
      showResult: false,
      childId: null,
      pointsEarned: 0,
      newBalance: 0
    }
  },
  onLoad() {
    this.loadChildId()
  },
  onUnload() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    initGrid() {
      // 生成1-25的随机排列
      let nums = []
      for (let i = 1; i <= 25; i++) {
        nums.push(i)
      }
      // 洗牌算法
      for (let i = nums.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[nums[i], nums[j]] = [nums[j], nums[i]]
      }
      this.numbers = nums
    },
    async loadChildId() {
      try {
        const res = await getChildren()
        if (res.data && res.data.length > 0) {
          this.childId = res.data[0].id
        }
      } catch (e) {
        console.error('获取孩子ID失败', e)
      }
    },
    startGame() {
      this.currentNumber = 1
      this.isPlaying = true
      this.time = 0
      this.score = 0
      this.showResult = false
      this.initGrid()
      
      this.timer = setInterval(() => {
        this.time++
      }, 1000)
    },
    handleCellClick(num) {
      if (!this.isPlaying) return
      
      if (num === this.currentNumber) {
        // 正确点击
        if (this.currentNumber === 25) {
          // 完成游戏
          this.finishGame()
        } else {
          this.currentNumber++
        }
      }
    },
    finishGame() {
      clearInterval(this.timer)
      this.isPlaying = false
      // 分数计算: 用时越短分数越高, 满分100
      this.score = Math.max(100 - Math.floor(this.time * 2), 60)
      this.showResult = true
      
      // 调用API记录积分
      if (this.childId) {
        this.submitScore()
      }
    },
    async submitScore() {
      try {
        const res = await completeMiniGame(this.childId, 'schulte', this.time, this.score)
        if (res.code === 200) {
          this.pointsEarned = res.data.pointsEarned
          this.newBalance = res.data.newBalance
          uni.showToast({
            title: `获得${this.pointsEarned}积分!`,
            icon: 'success'
          })
        }
      } catch (e) {
        console.error('提交成绩失败', e)
      }
    }
  }
}
</script>

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

.game-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.game-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #FFE66D;
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 60rpx;
  margin-top: 20rpx;
  color: #fff;
  font-size: 32rpx;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10rpx;
  margin: 40rpx 0;
}

.grid-cell {
  aspect-ratio: 1;
  background: #2a2a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
  border-radius: 10rpx;
  cursor: pointer;
}

.grid-cell:active {
  background: #4ECDC4;
}

.grid-cell.correct {
  background: #4ECDC4;
  color: #1a1a2e;
}

.game-controls {
  text-align: center;
}

.start-btn {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  font-size: 36rpx;
  border: none;
}

.tip {
  display: block;
  color: rgba(255,255,255,0.5);
  font-size: 24rpx;
  margin-top: 20rpx;
}

.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-content {
  background: #2a2a4a;
  padding: 60rpx;
  border-radius: 20rpx;
  text-align: center;
}

.result-title {
  display: block;
  font-size: 48rpx;
  color: #FFE66D;
  margin-bottom: 30rpx;
}

.result-score {
  display: block;
  color: #fff;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

.restart-btn {
  background: #4ECDC4;
  color: #1a1a2e;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  border: none;
  margin-top: 30rpx;
}
</style>