增加联赛选择模态框

2026-01-14 10:04:42 +08:00
parent 7b8e0e7e32
commit 474a8d3805
4 changed files with 295 additions and 21 deletions
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -1,4 +1,5 @@
 import { HomeHeader } from "@/components/home-header";
+import { LeagueModal } from "@/components/league-modal";
 import { MatchCard } from "@/components/match-card";
 import { SelectionModal } from "@/components/selection-modal";
 import { CalendarModal } from "@/components/simple-calendar";
@@ -7,8 +8,8 @@ import { ThemedView } from "@/components/themed-view";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
-import { fetchSports, fetchTodayMatches } from "@/lib/api";
-import { Match, Sport } from "@/types/api";
+import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
+import { League, Match, Sport } from "@/types/api";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -27,6 +28,7 @@ export default function HomeScreen() {
  const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";

  const [sports, setSports] = useState<Sport[]>([]);
+  const [leagues, setLeagues] = useState<League[]>([]);
  const [matches, setMatches] = useState<Match[]>([]);
  const [loading, setLoading] = useState(true);

@@ -34,14 +36,18 @@ export default function HomeScreen() {
  // 默认足球
  const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
+  const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式

  // Modal Visibilities
  const [showSportModal, setShowSportModal] = useState(false);
  const [showCalendarModal, setShowCalendarModal] = useState(false);
+  const [showLeagueModal, setShowLeagueModal] = useState(false);

-  // Load Sports
+  // Load Sports and Leagues
  useEffect(() => {
    loadSports();
+    loadLeagues();
  }, []);

  // Load Matches when sport or date changes
@@ -51,6 +57,13 @@ export default function HomeScreen() {
    }
  }, [selectedSportId, selectedDate]);

+  // Load Leagues when sport changes
+  useEffect(() => {
+    if (selectedSportId !== null) {
+      loadLeagues();
+    }
+  }, [selectedSportId]);
+
  const loadSports = async () => {
    try {
      const apiList = await fetchSports();
@@ -102,6 +115,18 @@ export default function HomeScreen() {
    }
  };

+  // 加载联赛
+  const loadLeagues = async () => {
+    try {
+      if (selectedSportId !== null) {
+        const list = await fetchLeagues(selectedSportId, "");
+        setLeagues(list);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
  const loadMatches = async (sportId: number) => {
    setLoading(true);
    try {
@@ -134,14 +159,26 @@ export default function HomeScreen() {
    return t(`sports.${sportKey}`, { defaultValue: sport.name });
  };

+  const handleLeagueSelect = (leagueKey: string) => {
+    setSelectedLeagueKey(leagueKey);
+    console.log("Selected league:", leagueKey);
+  };
+
  const renderHeader = () => (
    <View style={styles.filterContainer}>
-      {/* Time Filter (Mock) */}
+      {/* Time/League Filter Toggle */}
      <TouchableOpacity
        style={[styles.filterBtn, { backgroundColor: filterBg }]}
+        onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
      >
-        <IconSymbol name="time-outline" size={18} color={iconColor} />
-        <ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
+        <IconSymbol 
+          name={filterMode === "time" ? "time-outline" : "trophy-outline"} 
+          size={18} 
+          color={iconColor} 
+        />
+        <ThemedText style={styles.filterText}>
+          {filterMode === "time" ? t("home.time") : t("home.league")}
+        </ThemedText>
      </TouchableOpacity>

      {/* Sport Selector */}
@@ -159,7 +196,8 @@ export default function HomeScreen() {
        </ThemedText>
      </TouchableOpacity>

-      {/* Date Selector */}
+      {/* Date/League Selector */}
+      {filterMode === "time" ? (
        <TouchableOpacity
          style={[styles.filterBtn, { backgroundColor: filterBg }]}
          onPress={() => setShowCalendarModal(true)}
@@ -172,6 +210,19 @@ export default function HomeScreen() {
            {selectedDate.getMinutes().toString().padStart(2, "0")}
          </ThemedText>
        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          style={[styles.filterBtn, { backgroundColor: filterBg }]}
+          onPress={() => setShowLeagueModal(true)}
+        >
+          <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.select_league")}
+          </ThemedText>
+        </TouchableOpacity>
+      )}
    </View>
  );

@@ -234,6 +285,14 @@ export default function HomeScreen() {
        selectedDate={selectedDate}
        onSelectDate={setSelectedDate}
      />
+
+      <LeagueModal
+        visible={showLeagueModal}
+        onClose={() => setShowLeagueModal(false)}
+        leagues={leagues}
+        selectedLeagueKey={selectedLeagueKey}
+        onSelect={handleLeagueSelect}
+      />
    </ThemedView>
  );
 }
--- a/components/league-modal.tsx
+++ b/components/league-modal.tsx
@@ -0,0 +1,209 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { League } from "@/types/api";
+import { Image } from "expo-image";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface LeagueModalProps {
+  visible: boolean;
+  onClose: () => void;
+  leagues: League[];
+  selectedLeagueKey: string | null;
+  onSelect: (leagueKey: string) => void;
+}
+
+export function LeagueModal({
+  visible,
+  onClose,
+  leagues,
+  selectedLeagueKey,
+  onSelect,
+}: LeagueModalProps) {
+  const { theme } = useTheme();
+  const { t } = useTranslation();
+  const isDark = theme === "dark";
+  const bg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const text = isDark ? "#FFFFFF" : "#000000";
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <View />
+      </Pressable>
+
+      <View style={[styles.sheet, { backgroundColor: bg }]}>
+        <SafeAreaView edges={["bottom"]}>
+          <View style={styles.header}>
+            <ThemedText type="subtitle" style={styles.title}>
+              {t("home.select_league")}
+            </ThemedText>
+            <Pressable onPress={onClose} style={styles.closeButton}>
+              <IconSymbol name="close" size={24} color={text} />
+            </Pressable>
+          </View>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+            {leagues.length === 0 ? (
+              <View style={styles.emptyContainer}>
+                <ThemedText style={styles.emptyText}>
+                  {t("home.no_leagues")}
+                </ThemedText>
+              </View>
+            ) : (
+              leagues.map((league) => {
+                const isSelected = selectedLeagueKey === league.key;
+                const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
+                const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";
+
+                return (
+                  <Pressable
+                    key={league.id}
+                    style={[
+                      styles.option,
+                      { backgroundColor: optionBg },
+                    ]}
+                    onPress={() => {
+                      onSelect(league.key);
+                      onClose();
+                    }}
+                  >
+                    {/* 左侧图标 */}
+                    <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
+                      {league.logo ? (
+                        <Image
+                          source={{ uri: league.logo }}
+                          style={styles.leagueLogo}
+                          contentFit="contain"
+                        />
+                      ) : (
+                        <IconSymbol name="trophy-outline" size={24} color={text} />
+                      )}
+                    </View>
+
+                    {/* 中间内容 */}
+                    <View style={styles.content}>
+                      <ThemedText
+                        style={[
+                          styles.leagueName,
+                          { fontWeight: isSelected ? "600" : "400" },
+                        ]}
+                      >
+                        {league.name}
+                      </ThemedText>
+                      {league.countryName && (
+                        <ThemedText style={styles.countryName}>
+                          {league.countryName}
+                        </ThemedText>
+                      )}
+                    </View>
+
+                    {/* 右侧指示点 */}
+                    <View
+                      style={[
+                        styles.indicator,
+                        {
+                          backgroundColor: isSelected
+                            ? Colors.light.tint
+                            : isDark
+                              ? "#666666"
+                              : "#CCCCCC",
+                        },
+                      ]}
+                    />
+                  </Pressable>
+                );
+              })
+            )}
+          </ScrollView>
+        </SafeAreaView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  sheet: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20,
+    height: "55%",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  scrollView: {
+    maxHeight: 400,
+  },
+  emptyContainer: {
+    padding: 40,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  emptyText: {
+    fontSize: 16,
+    opacity: 0.6,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  leagueLogo: {
+    width: 32,
+    height: 32,
+  },
+  content: {
+    flex: 1,
+  },
+  leagueName: {
+    fontSize: 16,
+    marginBottom: 4,
+  },
+  countryName: {
+    fontSize: 12,
+    opacity: 0.6,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 12,
+  },
+});
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -20,9 +20,12 @@
    "home": {
        "title": "ScoreNow",
        "time": "Time",
+        "league": "League",
        "select_sport": "Sport",
+        "select_league": "Select League",
        "loading": "Loading...",
-        "no_matches": "No matches found."
+        "no_matches": "No matches found.",
+        "no_leagues": "No leagues available"
    },
    "profile": {
        "title": "My Profile",
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -20,9 +20,12 @@
    "home": {
        "title": "ScoreNow",
        "time": "时间",
+        "league": "联赛",
        "select_sport": "运动",
+        "select_league": "选择联赛",
        "loading": "加载中...",
-        "no_matches": "暂无比赛"
+        "no_matches": "暂无比赛",
+        "no_leagues": "暂无联赛"
    },
    "profile": {
        "title": "我的",