使用新赔率组件

app/match-detail/[id].tsx

@@ -1,3 +1,4 @@
+import { OddsCard } from "@/components/live-detail/odds-card";
 import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
 import { CardsCard } from "@/components/match-detail/football/cards-card";
 import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
@@ -7,7 +8,6 @@ import { SubstitutesCard } from "@/components/match-detail/football/substitutes-
 import { LeagueInfo } from "@/components/match-detail/league-info";
 import { MatchInfoCard } from "@/components/match-detail/match-info-card";
 import { MatchTabs } from "@/components/match-detail/match-tabs";
-import { OddsView } from "@/components/match-detail/odds/odds-view";
 import { ScoreHeader } from "@/components/match-detail/score-header";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
@@ -161,7 +161,31 @@ export default function MatchDetailScreen() {
           );
         }
       case "odds":
-        return <OddsView sportId={sportId} matchId={data.match.ID} />;
+        // 将 MatchDetailData.match 转换为 LiveScoreMatch 格式
+        const matchForOdds = {
+          event_key: parseInt(data.match.eventKey) || 0,
+          event_date: data.match.eventDate,
+          event_time: data.match.eventTime,
+          event_home_team: data.match.eventHomeTeam,
+          home_team_key: parseInt(data.match.homeTeamKey) || 0,
+          home_team_logo: data.match.homeTeamLogo,
+          event_away_team: data.match.eventAwayTeam,
+          away_team_key: parseInt(data.match.awayTeamKey) || 0,
+          away_team_logo: data.match.awayTeamLogo,
+          event_final_result: data.match.eventFinalResult,
+          event_halftime_result: data.match.eventHalftimeResult,
+          event_status: data.match.eventStatus,
+          event_live: data.match.eventLive,
+          league_key: parseInt(data.match.leagueKey) || 0,
+          league_name: data.match.leagueName,
+          league_logo: data.match.leagueLogo,
+          league_round: data.match.leagueRound,
+          league_season: data.match.leagueSeason,
+          country_name: data.match.countryName,
+          country_logo: data.match.countryLogo,
+          event_country_key: parseInt(data.match.eventCountryKey) || 0,
+        };
+        return <OddsCard sportId={sportId} match={matchForOdds} isDark={isDark} />;
       case "h2h":
         return (
           <View style={styles.emptyContent}>

components/match-detail/odds/odds-view.tsx

@@ -1,84 +0,0 @@
-import { ThemedText } from "@/components/themed-text";
-import { Colors } from "@/constants/theme";
-import { useTheme } from "@/context/ThemeContext";
-import { fetchOdds } from "@/lib/api";
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
-
-interface OddsViewProps {
-  sportId: number;
-  matchId: number;
-}
-
-export function OddsView({ sportId, matchId }: OddsViewProps) {
-  const { theme } = useTheme();
-  const { t } = useTranslation();
-  const isDark = theme === "dark";
-  const bgColor = isDark ? "#1C1C1E" : "#FFF";
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const run = async () => {
-      try {
-        setLoading(true);
-        setError(null);
-        const data = await fetchOdds(sportId, matchId);
-        if (cancelled) return;
-        console.log("odds", { sportId, matchId, data });
-      } catch (e: any) {
-        if (cancelled) return;
-        setError(e?.message || "fetchOdds failed");
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    };
-
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, [sportId, matchId]);
-
-  return (
-    <View style={[styles.container, { backgroundColor: bgColor }]}>
-      {loading ? (
-        <View style={styles.center}>
-          <ActivityIndicator size="small" color={Colors[theme].tint} />
-          <ThemedText style={styles.text}>{t("detail.loading")}</ThemedText>
-        </View>
-      ) : error ? (
-        <ThemedText style={styles.text}>{error}</ThemedText>
-      ) : (
-        <ThemedText style={styles.text}>{t("detail.empty_odds")}</ThemedText>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    margin: 16,
-    marginTop: 0,
-    borderRadius: 12,
-    padding: 16,
-    elevation: 2,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-  },
-  center: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-  },
-  text: {
-    opacity: 0.7,
-  },
-});
-