实现直播详情页
This commit is contained in:
yuchenglong
@@ -7,6 +7,7 @@ import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useAppState } from "@/context/AppStateContext";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { League, Match, Sport } from "@/types/api";
|
||||
@@ -27,6 +28,9 @@ export default function HomeScreen() {
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
|
||||
const { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
|
||||
useAppState();
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [leagues, setLeagues] = useState<League[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
@@ -36,18 +40,25 @@ export default function HomeScreen() {
|
||||
|
||||
const deviceTimeZone = useMemo(() => {
|
||||
try {
|
||||
console.log("deviceTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone);
|
||||
console.log(
|
||||
"deviceTimeZone",
|
||||
Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
);
|
||||
return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
|
||||
} catch {
|
||||
return "UTC";
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Selection States
|
||||
// 默认足球
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
|
||||
// 初始化时同步设备时区到 Context
|
||||
useEffect(() => {
|
||||
updateTimezone(deviceTimeZone);
|
||||
}, [deviceTimeZone]);
|
||||
|
||||
// Selection States - 从 Context 读取
|
||||
const selectedSportId = state.selectedSportId;
|
||||
const selectedDate = state.selectedDate;
|
||||
const selectedLeagueKey = state.selectedLeagueKey;
|
||||
const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
|
||||
|
||||
// Modal Visibilities
|
||||
@@ -103,29 +114,93 @@ export default function HomeScreen() {
|
||||
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: "" },
|
||||
{
|
||||
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);
|
||||
@@ -135,17 +210,80 @@ export default function HomeScreen() {
|
||||
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: "" },
|
||||
{
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -167,7 +305,11 @@ export default function HomeScreen() {
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const list = await fetchTodayMatches(sportId, selectedDate, deviceTimeZone);
|
||||
const list = await fetchTodayMatches(
|
||||
sportId,
|
||||
selectedDate,
|
||||
deviceTimeZone
|
||||
);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -177,7 +319,7 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
|
||||
// 获取当前运动的国际化名称
|
||||
const getSportName = (sport: Sport | undefined): string => {
|
||||
if (!sport) return t("home.select_sport");
|
||||
@@ -196,7 +338,7 @@ export default function HomeScreen() {
|
||||
};
|
||||
|
||||
const handleLeagueSelect = (leagueKey: string) => {
|
||||
setSelectedLeagueKey(leagueKey);
|
||||
updateLeagueKey(leagueKey);
|
||||
console.log("Selected league:", leagueKey);
|
||||
};
|
||||
|
||||
@@ -230,10 +372,10 @@ export default function HomeScreen() {
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
|
||||
>
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
<IconSymbol
|
||||
name={filterMode === "time" ? "time-outline" : "trophy-outline"}
|
||||
size={18}
|
||||
color={iconColor}
|
||||
/>
|
||||
<ThemedText style={styles.filterText}>
|
||||
{filterMode === "time" ? t("home.time") : t("home.league")}
|
||||
@@ -285,8 +427,9 @@ export default function HomeScreen() {
|
||||
>
|
||||
<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")
|
||||
{selectedLeagueKey
|
||||
? leagues.find((l) => l.key === selectedLeagueKey)?.name ||
|
||||
t("home.select_league")
|
||||
: t("home.select_league")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
@@ -327,7 +470,7 @@ export default function HomeScreen() {
|
||||
title={t("home.select_sport")}
|
||||
options={sportOptions}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
onSelect={updateSportId}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -336,7 +479,7 @@ export default function HomeScreen() {
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
onSelectDate={updateDate}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user