cfc/cfc-frontend/pages/games/list.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">🎮 益智小游戏</text>
      <text class="subtitle">完成游戏获得积分奖励</text>
    </view>

    <view class="nav-bar">
      <view class="nav-item" @click="goRecords">
        <text class="nav-icon">📋</text>
        <text class="nav-text">训练记录</text>
      </view>
      <view class="nav-item" @click="goStats">
        <text class="nav-icon">📊</text>
        <text class="nav-text">训练统计</text>
      </view>
    </view>

    <view class="game-list">
      <view 
        class="game-card" 
        v-for="game in gameList" 
        :key="game.id"
        @click="playGame(game)"
      >
        <view class="game-icon">{{ game.icon }}</view>
        <view class="game-info">
          <text class="game-name">{{ game.gameName }}</text>
          <text class="game-desc">{{ game.description }}</text>
          <view class="game-meta">
            <text class="duration">⏱️ {{ game.defaultDuration }}分钟</text>
            <text class="points">⭐ {{ game.defaultPoints }}积分</text>
          </view>
        </view>
      </view>
    </view>

    <view class="tips" v-if="gameList.length === 0">
      <text>暂无小游戏，请联系管理员添加</text>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      gameList: []
    }
  },
  onLoad() {
    this.loadGames()
  },
  methods: {
    async loadGames() {
      try {
        const res = await getMiniGameList()
        this.gameList = res.data || []
      } catch (e) {
        console.error('加载游戏列表失败', e)
      }
    },
    goRecords() {
      uni.navigateTo({ url: '/pages/games/records' })
    },
    goStats() {
      uni.navigateTo({ url: '/pages/games/stats' })
    },
    playGame(game) {
      // 跳转到对应的游戏页面
      const pageMap = {
        'schulte': '/pages/games/schulte',
        '1a2b': '/pages/games/1a2b',
        'sudoku': '/pages/games/sudoku'
      }
      
      const url = pageMap[game.gameCode]
      if (url) {
        uni.navigateTo({ url })
      } else {
        uni.showToast({
          title: '游戏页面开发中',
          icon: 'none'
        })
      }
    }
  }
}
</script>

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

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

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #FFE66D;
  text-shadow: 2rpx 2rpx 4rpx rgba(0,0,0,0.5);
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: rgba(255,255,255,0.7);
  margin-top: 10rpx;
}

.nav-bar {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}
.nav-item {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1rpx solid rgba(255,255,255,0.1);
}
.nav-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.nav-text {
  font-size: 24rpx;
  color: rgba(255,255,255,0.8);
}

.game-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.game-card {
  background: linear-gradient(135deg, #2a2a4a 0%, #1a1a3a 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.3);
  border: 1rpx solid rgba(255,255,255,0.1);
}

.game-icon {
  font-size: 80rpx;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 20rpx;
  margin-right: 30rpx;
}

.game-info {
  flex: 1;
}

.game-name {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
}

.game-desc {
  display: block;
  font-size: 26rpx;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16rpx;
}

.game-meta {
  display: flex;
  gap: 30rpx;
}

.duration, .points {
  font-size: 24rpx;
  color: #4ECDC4;
}

.tips {
  text-align: center;
  color: rgba(255,255,255,0.5);
  margin-top: 100rpx;
}
</style>