即将到来页面
This commit is contained in:
xianyi
@@ -1,11 +1,285 @@
|
||||
import { HomeHeader } from "@/components/home-header";
|
||||
import { LeagueModal } from "@/components/league-modal";
|
||||
import { SelectionModal } from "@/components/selection-modal";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { UpcomingMatchCard } from "@/components/upcoming-match-card";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchUpcomingMatches } from "@/lib/api";
|
||||
import { League, Sport, UpcomingMatch } from "@/types/api";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const { theme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<UpcomingMatch[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingLeagues, setLoadingLeagues] = useState(false);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string>(""); // 默认空字符串
|
||||
|
||||
// Modal Visibilities
|
||||
const [showSportModal, setShowSportModal] = useState(false);
|
||||
const [showLeagueModal, setShowLeagueModal] = useState(false);
|
||||
|
||||
// Load Sports and Leagues
|
||||
useEffect(() => {
|
||||
loadSports();
|
||||
loadLeagues();
|
||||
}, []);
|
||||
|
||||
// Load Matches when sport or league changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadMatches();
|
||||
}
|
||||
}, [selectedSportId, selectedLeagueKey]);
|
||||
|
||||
// Load Leagues when sport changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadLeagues();
|
||||
}
|
||||
}, [selectedSportId]);
|
||||
|
||||
const loadSports = async () => {
|
||||
try {
|
||||
const apiList = await fetchSports();
|
||||
// 创建8个运动的完整列表
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
|
||||
// 合并API返回的运动和默认列表
|
||||
const sportsMap = new Map<number, Sport>();
|
||||
apiList.forEach((sport) => {
|
||||
sportsMap.set(sport.id, sport);
|
||||
});
|
||||
|
||||
// 补充默认运动到8个
|
||||
defaultSports.forEach((sport) => {
|
||||
if (!sportsMap.has(sport.id)) {
|
||||
sportsMap.set(sport.id, sport);
|
||||
}
|
||||
});
|
||||
|
||||
const allSports = Array.from(sportsMap.values())
|
||||
.sort((a, b) => a.id - b.id)
|
||||
.slice(0, 8);
|
||||
|
||||
setSports(allSports);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
// API失败时使用默认8个运动
|
||||
const defaultSports: Sport[] = [
|
||||
{ id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
{ id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
|
||||
];
|
||||
setSports(defaultSports);
|
||||
setSelectedSportId(1);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载联赛
|
||||
const loadLeagues = async () => {
|
||||
try {
|
||||
if (selectedSportId !== null) {
|
||||
setLoadingLeagues(true);
|
||||
const list = await fetchLeagues(selectedSportId, "");
|
||||
setLeagues(list);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoadingLeagues(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMatches = async () => {
|
||||
if (selectedSportId === null) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// 使用 fetchUpcomingMatches，默认 leagueKey 为空字符串
|
||||
const list = await fetchUpcomingMatches(selectedSportId, selectedLeagueKey || "");
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
// 获取当前运动的国际化名称
|
||||
const getSportName = (sport: Sport | undefined): string => {
|
||||
if (!sport) return t("home.select_sport");
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
|
||||
return t(`sports.${sportKey}`, { defaultValue: sport.name });
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
const renderHeader = () => (
|
||||
<View style={styles.filterContainer}>
|
||||
{/* League Filter (Fixed) */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
disabled
|
||||
>
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>
|
||||
{t("home.league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Sport Selector */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.filterBtn,
|
||||
styles.mainFilterBtn,
|
||||
{ backgroundColor: filterBg },
|
||||
]}
|
||||
onPress={() => setShowSportModal(true)}
|
||||
>
|
||||
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>
|
||||
{getSportName(currentSport)}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* League Selector */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => {
|
||||
// 立即显示弹窗
|
||||
setShowLeagueModal(true);
|
||||
// 如果联赛列表为空，立即设置loading状态并加载
|
||||
if (selectedSportId !== null) {
|
||||
if (leagues.length === 0) {
|
||||
setLoadingLeagues(true);
|
||||
}
|
||||
loadLeagues();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconSymbol name="trophy-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText} numberOfLines={1}>
|
||||
{selectedLeagueKey
|
||||
? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
|
||||
: t("home.all_leagues")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
|
||||
export default function UpcomingScreen() {
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText type="title">Upcoming Events</ThemedText>
|
||||
<HomeHeader />
|
||||
|
||||
{renderHeader()}
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
<ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={matches}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
renderItem={({ item }) => <UpcomingMatchCard match={item} />}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.center}>
|
||||
<ThemedText>{t("home.no_matches")}</ThemedText>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<SelectionModal
|
||||
visible={showSportModal}
|
||||
onClose={() => setShowSportModal(false)}
|
||||
title={t("home.select_sport")}
|
||||
options={sports.map((s) => {
|
||||
const sportKeyMap: { [key: number]: string } = {
|
||||
1: "football",
|
||||
2: "basketball",
|
||||
3: "tennis",
|
||||
4: "cricket",
|
||||
5: "baseball",
|
||||
6: "badminton",
|
||||
7: "snooker",
|
||||
8: "volleyball",
|
||||
};
|
||||
const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
|
||||
return {
|
||||
id: s.id,
|
||||
label: s.name, // 保留原始名称用于图标识别
|
||||
value: s.id,
|
||||
icon: s.icon,
|
||||
};
|
||||
})}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
/>
|
||||
|
||||
<LeagueModal
|
||||
visible={showLeagueModal}
|
||||
onClose={() => setShowLeagueModal(false)}
|
||||
leagues={leagues}
|
||||
selectedLeagueKey={selectedLeagueKey}
|
||||
loading={loadingLeagues}
|
||||
onSelect={handleLeagueSelect}
|
||||
/>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
@@ -13,7 +287,53 @@ export default function UpcomingScreen() {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingTop: 50,
|
||||
},
|
||||
filterContainer: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
filterBtn: {
|
||||
flex: 1,
|
||||
height: 44, // Increased from 36
|
||||
flexDirection: "column", // Stacked logic for Date, or Row for others
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 8, // Rounded corners
|
||||
// iOS shadow
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
// Android elevation
|
||||
elevation: 2,
|
||||
},
|
||||
mainFilterBtn: {
|
||||
flex: 2, // Wider for sport
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
},
|
||||
filterText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
dateDayText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
dateMonthText: {
|
||||
fontSize: 10,
|
||||
opacity: 0.6,
|
||||
},
|
||||
listContent: {
|
||||
padding: 16,
|
||||
paddingTop: 8,
|
||||
},
|
||||
});
|
||||
|
||||
194
components/upcoming-match-card.tsx
Normal file
194
components/upcoming-match-card.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { UpcomingMatch } from "@/types/api";
|
||||
import { Image } from "expo-image";
|
||||
import { useRouter } from "expo-router";
|
||||
import React from "react";
|
||||
import { Pressable, StyleSheet, View } from "react-native";
|
||||
|
||||
interface UpcomingMatchCardProps {
|
||||
match: UpcomingMatch;
|
||||
}
|
||||
|
||||
export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
|
||||
const router = useRouter();
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
const borderColor = isDark ? "#38383A" : "#E5E5EA";
|
||||
|
||||
const handlePress = () => {
|
||||
router.push(`/match-detail/${match.eventKey}`);
|
||||
};
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDateTime = () => {
|
||||
if (match.eventDate && match.eventTime) {
|
||||
return `${match.eventDate} ${match.eventTime}`;
|
||||
}
|
||||
return match.eventDate || match.eventTime || "";
|
||||
};
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={handlePress}
|
||||
style={({ pressed }) => [
|
||||
styles.card,
|
||||
{ backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
|
||||
]}
|
||||
>
|
||||
<View style={styles.header}>
|
||||
<View
|
||||
style={[
|
||||
styles.leagueBadge,
|
||||
{ backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
|
||||
]}
|
||||
>
|
||||
{match.leagueLogo && (
|
||||
<Image
|
||||
source={{ uri: match.leagueLogo }}
|
||||
style={styles.leagueLogo}
|
||||
contentFit="contain"
|
||||
/>
|
||||
)}
|
||||
<ThemedText style={styles.leagueText} numberOfLines={1}>
|
||||
{match.leagueName}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.teamsContainer}>
|
||||
<View style={styles.team}>
|
||||
{match.homeTeamLogo && (
|
||||
<Image
|
||||
source={{ uri: match.homeTeamLogo }}
|
||||
style={styles.teamLogo}
|
||||
contentFit="contain"
|
||||
/>
|
||||
)}
|
||||
<ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
|
||||
{match.homeTeamName}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.vsContainer}>
|
||||
<ThemedText style={styles.vsText}>VS</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.team}>
|
||||
{match.awayTeamLogo && (
|
||||
<Image
|
||||
source={{ uri: match.awayTeamLogo }}
|
||||
style={styles.teamLogo}
|
||||
contentFit="contain"
|
||||
/>
|
||||
)}
|
||||
<ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
|
||||
{match.awayTeamName}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{(match.venue || match.round) && (
|
||||
<View style={styles.metaContainer}>
|
||||
{match.venue && (
|
||||
<View style={styles.metaItem}>
|
||||
<IconSymbol name="location-outline" size={12} color={iconColor} />
|
||||
<ThemedText style={styles.metaText}>{match.venue}</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
{match.round && (
|
||||
<View style={styles.metaItem}>
|
||||
<ThemedText style={styles.metaText}>{match.round}</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
padding: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 12,
|
||||
},
|
||||
leagueBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 4,
|
||||
flex: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
leagueLogo: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
marginRight: 4,
|
||||
},
|
||||
leagueText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.7,
|
||||
flex: 1,
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.5,
|
||||
},
|
||||
teamsContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
team: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
teamLogo: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
marginRight: 8,
|
||||
},
|
||||
teamName: {
|
||||
fontSize: 14,
|
||||
flex: 1,
|
||||
},
|
||||
vsContainer: {
|
||||
paddingHorizontal: 12,
|
||||
},
|
||||
vsText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.5,
|
||||
fontWeight: "600",
|
||||
},
|
||||
metaContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
gap: 8,
|
||||
marginTop: 4,
|
||||
},
|
||||
metaItem: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
},
|
||||
metaText: {
|
||||
fontSize: 11,
|
||||
opacity: 0.5,
|
||||
},
|
||||
});
|
||||
@@ -23,6 +23,7 @@
|
||||
"league": "League",
|
||||
"select_sport": "Sport",
|
||||
"select_league": "Select League",
|
||||
"all_leagues": "All Leagues",
|
||||
"loading": "Loading...",
|
||||
"no_matches": "No matches found.",
|
||||
"no_leagues": "No leagues available"
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"league": "联赛",
|
||||
"select_sport": "运动",
|
||||
"select_league": "选择联赛",
|
||||
"all_leagues": "全部联赛",
|
||||
"loading": "加载中...",
|
||||
"no_matches": "暂无比赛",
|
||||
"no_leagues": "暂无联赛"
|
||||
|
||||
Reference in New Issue
Block a user