164 lines
3.8 KiB
TypeScript
164 lines
3.8 KiB
TypeScript
/**
|
|
* 高奖金游戏组件
|
|
*
|
|
* 深色主题特有，展示高奖金游戏，使用真实数据
|
|
*/
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
Animated,
|
|
Image,
|
|
} from 'react-native';
|
|
import { createThemeStyles } from '@/theme';
|
|
import { useColorScheme } from '@/hooks';
|
|
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 {
|
|
games?: HighPrizeGameType[];
|
|
onGamePress?: (game: HighPrizeGameType) => void;
|
|
}
|
|
|
|
/**
|
|
* 高奖金游戏组件
|
|
*/
|
|
export default function HighPrizeGame({ games: propGames, onGamePress }: HighPrizeGameProps) {
|
|
const colorScheme = useColorScheme();
|
|
const s = styles[colorScheme];
|
|
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>
|
|
);
|
|
}
|