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

<template>
  <view class="records-container">
    <view class="header">
      <text class="back-btn" @click="goBack">‹ 返回</text>
      <text class="title">训练记录</text>
    </view>

    <view class="filter-bar">
      <view
        v-for="item in gameFilters"
        :key="item.code"
        :class="['filter-chip', currentFilter === item.code ? 'active' : '']"
        @click="onFilterChange(item.code)"
      >
        {{ item.label }}
      </view>
    </view>

    <view v-if="loading" class="loading-state">
      <text>加载中...</text>
    </view>

    <view v-else-if="records.length === 0" class="empty-state">
      <text class="empty-text">暂无训练记录</text>
      <text class="empty-desc">完成小游戏后记录将出现在这里</text>
    </view>

    <view v-else class="record-list">
      <view class="record-card" v-for="item in records" :key="item.id">
        <view class="record-left">
          <text class="game-icon">{{ iconMap[item.gameCode] || '🎮' }}</text>
        </view>
        <view class="record-mid">
          <text class="game-name">{{ gameNameMap[item.gameCode] || item.gameCode }}</text>
          <text class="record-meta">{{ formatTime(item.playedAt) }}</text>
        </view>
        <view class="record-right">
          <text class="score-text">{{ item.score }}分</text>
          <text class="points-text">+{{ item.pointsEarned }}积分</text>
        </view>
      </view>
    </view>

    <view class="load-more" v-if="hasMore">
      <text class="load-text" @click="loadMore">加载更多</text>
    </view>
  </view>
</template>

<script>
import { getGameHistory } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      records: [],
      currentFilter: '',
      page: 1,
      size: 20,
      hasMore: true,
      loading: false,
      gameFilters: [
        { code: '', label: '全部' },
        { code: 'schulte', label: '舒尔特' },
        { code: '1a2b', label: '猜数字' },
        { code: 'sudoku', label: '数独' }
      ],
      gameNameMap: {
        'schulte': '舒尔特方格',
        '1a2b': '猜数字',
        'sudoku': '数独'
      },
      iconMap: {
        'schulte': '🔢',
        '1a2b': '🔍',
        'sudoku': '🧩'
      }
    }
  },
  onLoad() {
    this.loadRecords()
  },
  methods: {
    async loadRecords() {
      const memberId = uni.getStorageSync('currentChildId')
      if (!memberId) return

      this.loading = true
      try {
        const params = { memberId, page: this.page, size: this.size }
        if (this.currentFilter) {
          params.gameCode = this.currentFilter
        }
        const res = await getGameHistory(params)
        const data = res.data || {}
        const newRecords = data.records || []
        this.records = this.page === 1 ? newRecords : [...this.records, ...newRecords]
        this.hasMore = newRecords.length >= this.size
      } catch (e) {
        console.error('加载记录失败', e)
      } finally {
        this.loading = false
      }
    },
    onFilterChange(code) {
      if (this.currentFilter === code) return
      this.currentFilter = code
      this.page = 1
      this.loadRecords()
    },
    loadMore() {
      this.page++
      this.loadRecords()
    },
    formatTime(dateStr) {
      if (!dateStr) return ''
      const d = parseDate(dateStr)
      if (!d) return ''
      const month = (d.getMonth() + 1).toString().padStart(2, '0')
      const day = d.getDate().toString().padStart(2, '0')
      const hour = d.getHours().toString().padStart(2, '0')
      const min = d.getMinutes().toString().padStart(2, '0')
      return month + '-' + day + ' ' + hour + ':' + min
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.records-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40rpx;
}
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}
.back-btn {
  font-size: 28rpx;
  color: #F97316;
  padding-right: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.filter-bar {
  display: flex;
  padding: 20rpx 30rpx;
  gap: 16rpx;
  background: #fff;
}
.filter-chip {
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background: #f5f5f5;
}
.filter-chip.active {
  color: #fff;
  background: #F97316;
}
.loading-state, .empty-state {
  text-align: center;
  padding: 120rpx 30rpx;
}
.empty-text {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 10rpx;
}
.empty-desc {
  display: block;
  font-size: 24rpx;
  color: #ccc;
}
.record-list {
  padding: 20rpx 30rpx;
}
.record-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.record-left {
  margin-right: 20rpx;
}
.game-icon {
  font-size: 48rpx;
}
.record-mid {
  flex: 1;
}
.game-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 4rpx;
}
.record-meta {
  display: block;
  font-size: 22rpx;
  color: #999;
}
.record-right {
  text-align: right;
}
.score-text {
  display: block;
  font-size: 32rpx;
  color: #F97316;
  font-weight: bold;
}
.points-text {
  display: block;
  font-size: 22rpx;
  color: #4ECDC4;
}
.load-more {
  text-align: center;
  padding: 30rpx;
}
.load-text {
  font-size: 26rpx;
  color: #F97316;
}
</style>