feat: 首页更新

pages/HomeScreen/components/HighPrizeGame.tsx

@@ -0,0 +1,164 @@
+/**
+ * 高奖金游戏组件
+ *
+ * 深色主题特有，展示高奖金游戏，使用真实数据
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Animated,
+  Image,
+} from 'react-native';
+import { createThemeStyles } from '@/theme';
+import Colors from '@/constants/Colors';
+import { mockHighPrizeGames } from '@/services/mockHomeService';
+import type { HighPrizeGame as HighPrizeGameType } from '@/types/home';
+
+/**
+ * 创建主题样式
+ */
+const styles = createThemeStyles((colors) => ({
+  container: {
+    backgroundColor: colors.background,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: colors.text,
+    marginBottom: 10,
+  },
+  scrollView: {
+    paddingHorizontal: 0,
+  },
+  gameItem: {
+    width: 110,
+    height: 110,
+    marginRight: 10,
+    borderRadius: 12,
+    backgroundColor: colors.card,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    elevation: 3,
+    shadowColor: colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+  },
+  gameIcon: {
+    fontSize: 44,
+    marginBottom: 4,
+  },
+  gameName: {
+    fontSize: 12,
+    color: colors.text,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  prizeTag: {
+    position: 'absolute',
+    top: 6,
+    right: 6,
+    backgroundColor: colors.error,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    elevation: 2,
+    shadowColor: colors.cardShadow,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+  },
+  prizeText: {
+    fontSize: 10,
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+  },
+}));
+
+interface HighPrizeGameProps {
+  theme: 'light' | 'dark';
+  games?: HighPrizeGameType[];
+  onGamePress?: (game: HighPrizeGameType) => void;
+}
+
+/**
+ * 高奖金游戏组件
+ */
+export default function HighPrizeGame({ theme, games: propGames, onGamePress }: HighPrizeGameProps) {
+  const s = styles[theme];
+  const [games, setGames] = useState<HighPrizeGameType[]>(propGames || []);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // 加载高奖金游戏数据
+  useEffect(() => {
+    if (propGames && propGames.length > 0) {
+      setGames(propGames);
+      return;
+    }
+
+    const loadGames = async () => {
+      try {
+        // const data = await getHighPrizeGames();
+        // setGames(data.length > 0 ? data : mockHighPrizeGames);
+      } catch (error) {
+        console.error('加载高奖金游戏失败:', error);
+        setGames(mockHighPrizeGames);
+      }
+    };
+    loadGames();
+  }, [propGames]);
+
+  if (games.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={s.container}>
+      <Text style={s.title}>🏆 实时爆奖</Text>
+      <ScrollView
+        style={s.scrollView}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+      >
+        {games.map((game) => (
+          <TouchableOpacity
+            key={game.id}
+            style={s.gameItem}
+            onPress={() => {
+              setSelectedId(game.id);
+              onGamePress?.(game);
+            }}
+            activeOpacity={0.7}
+          >
+            {game.icon ? (
+              <Image
+                source={{ uri: game.icon }}
+                style={{ width: '100%', height: '100%' }}
+                resizeMode="cover"
+              />
+            ) : (
+              <Text style={s.gameIcon}>🎰</Text>
+            )}
+            <Text style={s.gameName} numberOfLines={2}>
+              {game.play_up_name}
+            </Text>
+            <View style={s.prizeTag}>
+              <Text style={s.prizeText}>¥{Math.floor(game.payout_amount / 1000)}k</Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+