优化详情显示
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
|
import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
|
||||||
|
import { FootballEvents } from "@/components/match-detail/football/football-events";
|
||||||
import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
|
import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
|
||||||
import { LeagueInfo } from "@/components/match-detail/league-info";
|
import { LeagueInfo } from "@/components/match-detail/league-info";
|
||||||
import { MatchInfoCard } from "@/components/match-detail/match-info-card";
|
import { MatchInfoCard } from "@/components/match-detail/match-info-card";
|
||||||
@@ -71,6 +72,8 @@ export default function MatchDetailScreen() {
|
|||||||
setError(null);
|
setError(null);
|
||||||
const result = await fetchMatchDetail(id as string);
|
const result = await fetchMatchDetail(id as string);
|
||||||
setData(result);
|
setData(result);
|
||||||
|
console.log("首发阵容" , result.match.players?.away_team);
|
||||||
|
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(err.message || t("detail.fetch_failed"));
|
setError(err.message || t("detail.fetch_failed"));
|
||||||
} finally {
|
} finally {
|
||||||
@@ -104,11 +107,12 @@ export default function MatchDetailScreen() {
|
|||||||
case "info":
|
case "info":
|
||||||
// 根据 sportId 显示不同的详情组件
|
// 根据 sportId 显示不同的详情组件
|
||||||
if (sportId === 1) {
|
if (sportId === 1) {
|
||||||
// 足球:显示 FootballScoreTable (半场/全场) 和 MatchInfoCard
|
// 足球:显示 FootballScoreTable (半场/全场)、MatchInfoCard 和 FootballEvents
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<FootballScoreTable data={data} isDark={isDark} />
|
<FootballScoreTable data={data} isDark={isDark} />
|
||||||
<MatchInfoCard data={data} isDark={isDark} />
|
<MatchInfoCard data={data} isDark={isDark} />
|
||||||
|
<FootballEvents data={data} isDark={isDark} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
} else if (sportId === 2) {
|
} else if (sportId === 2) {
|
||||||
@@ -125,6 +129,7 @@ export default function MatchDetailScreen() {
|
|||||||
<>
|
<>
|
||||||
<FootballScoreTable data={data} isDark={isDark} />
|
<FootballScoreTable data={data} isDark={isDark} />
|
||||||
<MatchInfoCard data={data} isDark={isDark} />
|
<MatchInfoCard data={data} isDark={isDark} />
|
||||||
|
<FootballEvents data={data} isDark={isDark} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
402
components/match-detail/football/football-events.tsx
Normal file
402
components/match-detail/football/football-events.tsx
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
import { ThemedText } from "@/components/themed-text";
|
||||||
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||||
|
import { CardEvent, GoalEvent, MatchDetailData, Player, SubstituteEvent } from "@/types/api";
|
||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { StyleSheet, View } from "react-native";
|
||||||
|
|
||||||
|
interface FootballEventsProps {
|
||||||
|
data: MatchDetailData;
|
||||||
|
isDark: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FootballEvents({ data, isDark }: FootballEventsProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { match } = data;
|
||||||
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
||||||
|
const borderColor = isDark ? "#2C2C2E" : "#EEE";
|
||||||
|
|
||||||
|
// events 可能在 data.events 或 match.events 中
|
||||||
|
const events = (data as any).events || (match as any).events;
|
||||||
|
|
||||||
|
// 调试:打印 events 数据
|
||||||
|
if (__DEV__) {
|
||||||
|
console.log("FootballEvents - events data:", events);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!events || typeof events !== "object") {
|
||||||
|
if (__DEV__) {
|
||||||
|
console.log("FootballEvents - No events data found");
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理数组格式的 events(如果 events 是数组)
|
||||||
|
let eventsObj = events;
|
||||||
|
if (Array.isArray(events) && events.length > 0) {
|
||||||
|
// 如果 events 是数组,取第一个元素
|
||||||
|
eventsObj = events[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
const goalscorers = eventsObj?.goalscorers || [];
|
||||||
|
const cards = eventsObj?.cards || [];
|
||||||
|
const substitutes = eventsObj?.substitutes || [];
|
||||||
|
const players = (match as any).players || null;
|
||||||
|
|
||||||
|
if (__DEV__) {
|
||||||
|
console.log("FootballEvents - goalscorers:", goalscorers.length, "cards:", cards.length, "substitutes:", substitutes.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasEvents = goalscorers.length > 0 || cards.length > 0 || substitutes.length > 0;
|
||||||
|
|
||||||
|
if (!hasEvents) {
|
||||||
|
if (__DEV__) {
|
||||||
|
console.log("FootballEvents - No events to display");
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderGoalEvent = (goal: GoalEvent, index: number) => {
|
||||||
|
const isHome = !!goal.home_scorer;
|
||||||
|
const scorerRaw = goal.home_scorer || goal.away_scorer || "";
|
||||||
|
const isPenalty = scorerRaw.includes("(pen.)");
|
||||||
|
const playerName = scorerRaw.replace("(pen.)", "").trim();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View key={index} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
|
||||||
|
<View style={styles.eventTime}>
|
||||||
|
<ThemedText style={styles.timeText}>
|
||||||
|
{goal.time ? `${goal.time}'` : ""}
|
||||||
|
</ThemedText>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
|
||||||
|
<IconSymbol name="football" size={16} color={isDark ? "#4CAF50" : "#2E7D32"} />
|
||||||
|
<View style={styles.goalContent}>
|
||||||
|
{playerName && (
|
||||||
|
<ThemedText style={styles.eventText} numberOfLines={1}>
|
||||||
|
{playerName}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
{isPenalty && (
|
||||||
|
<View style={styles.penaltyBadge}>
|
||||||
|
<ThemedText style={styles.penaltyText}>P</ThemedText>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{goal.score && (
|
||||||
|
<ThemedText style={styles.scoreText}>{goal.score}</ThemedText>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderCardEvent = (card: CardEvent, index: number) => {
|
||||||
|
const isHome = !!card.home_fault;
|
||||||
|
const cardType = card.card?.toLowerCase() || "";
|
||||||
|
const isRed = cardType.includes("red");
|
||||||
|
const isYellow = cardType.includes("yellow");
|
||||||
|
const cardColor = isRed ? "#F44336" : isYellow ? "#FFC107" : "#9E9E9E";
|
||||||
|
const playerName = card.home_fault || card.away_fault || "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View key={`card-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
|
||||||
|
<View style={styles.eventTime}>
|
||||||
|
<ThemedText style={styles.timeText}>
|
||||||
|
{card.time ? `${card.time}'` : ""}
|
||||||
|
</ThemedText>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
|
||||||
|
<View style={[styles.cardIcon, { backgroundColor: cardColor }]} />
|
||||||
|
<ThemedText style={styles.eventText} numberOfLines={1}>
|
||||||
|
{playerName}
|
||||||
|
</ThemedText>
|
||||||
|
{card.card && (
|
||||||
|
<View style={[styles.cardBadge, { backgroundColor: cardColor + "20" }]}>
|
||||||
|
<ThemedText style={[styles.cardTypeText, { color: cardColor }]}>
|
||||||
|
{isRed ? t("detail.events.red_card") : isYellow ? t("detail.events.yellow_card") : card.card}
|
||||||
|
</ThemedText>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderSubstituteEvent = (sub: SubstituteEvent, index: number) => {
|
||||||
|
const isHome = !!sub.home_scorer || !!sub.home_assist;
|
||||||
|
// 换人数据可能包含:home_scorer (换入), away_scorer (换出) 或相反
|
||||||
|
// 也可能有单独的字段如 home_assist, away_assist 等
|
||||||
|
const playerIn = sub.home_scorer || sub.home_assist || sub.away_scorer || "";
|
||||||
|
const playerOut = sub.away_scorer || sub.away_assist || sub.home_scorer_out || sub.away_scorer_out || "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View key={`sub-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
|
||||||
|
<View style={styles.eventTime}>
|
||||||
|
<ThemedText style={styles.timeText}>
|
||||||
|
{sub.time ? `${sub.time}'` : ""}
|
||||||
|
</ThemedText>
|
||||||
|
</View>
|
||||||
|
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
|
||||||
|
<IconSymbol name="swap-horizontal" size={16} color={isDark ? "#2196F3" : "#1976D2"} />
|
||||||
|
<View style={styles.substituteContent}>
|
||||||
|
{playerOut ? (
|
||||||
|
<>
|
||||||
|
<ThemedText style={[styles.substituteIn, { color: isDark ? "#4CAF50" : "#2E7D32" }]} numberOfLines={1}>
|
||||||
|
{playerIn}
|
||||||
|
</ThemedText>
|
||||||
|
<ThemedText style={styles.substituteArrow}>↔</ThemedText>
|
||||||
|
<ThemedText style={styles.substituteOut} numberOfLines={1}>
|
||||||
|
{playerOut}
|
||||||
|
</ThemedText>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<ThemedText style={styles.eventText} numberOfLines={1}>
|
||||||
|
{playerIn}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
|
||||||
|
{goalscorers.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<ThemedText style={styles.sectionTitle}>
|
||||||
|
{t("detail.events.goals")}
|
||||||
|
</ThemedText>
|
||||||
|
{goalscorers
|
||||||
|
.filter((goal: GoalEvent) => goal.home_scorer || goal.away_scorer)
|
||||||
|
.map((goal: GoalEvent, index: number) => renderGoalEvent(goal, index))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{cards.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<ThemedText style={styles.sectionTitle}>
|
||||||
|
{t("detail.events.cards")}
|
||||||
|
</ThemedText>
|
||||||
|
{cards
|
||||||
|
.filter((card: CardEvent) => card.home_fault || card.away_fault)
|
||||||
|
.map((card: CardEvent, index: number) => renderCardEvent(card, index))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{substitutes.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<ThemedText style={styles.sectionTitle}>
|
||||||
|
{t("detail.events.substitutes")}
|
||||||
|
</ThemedText>
|
||||||
|
{substitutes
|
||||||
|
.filter((sub: SubstituteEvent) => sub.home_scorer || sub.away_scorer || sub.home_assist || sub.away_assist)
|
||||||
|
.map((sub: SubstituteEvent, index: number) => renderSubstituteEvent(sub, index))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{players && (players.home_team || players.away_team) && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<ThemedText style={styles.sectionTitle}>
|
||||||
|
{t("detail.events.lineups")}
|
||||||
|
</ThemedText>
|
||||||
|
{players.home_team && Array.isArray(players.home_team) && players.home_team.length > 0 && (
|
||||||
|
<View style={styles.teamLineup}>
|
||||||
|
<ThemedText style={styles.teamName}>
|
||||||
|
{match.eventHomeTeam}
|
||||||
|
</ThemedText>
|
||||||
|
{players.home_team.slice(0, 11).map((player: Player, idx: number) => (
|
||||||
|
<View key={idx} style={styles.playerRow}>
|
||||||
|
<ThemedText style={styles.playerNumber}>
|
||||||
|
{player.player_number || player.number || idx + 1}
|
||||||
|
</ThemedText>
|
||||||
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||||
|
{player.player_name || player.player || player.name || ""}
|
||||||
|
</ThemedText>
|
||||||
|
{player.position && (
|
||||||
|
<ThemedText style={styles.playerPosition}>
|
||||||
|
{player.position}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0 && (
|
||||||
|
<View style={[styles.teamLineup, { marginTop: 16 }]}>
|
||||||
|
<ThemedText style={styles.teamName}>
|
||||||
|
{match.eventAwayTeam}
|
||||||
|
</ThemedText>
|
||||||
|
{players.away_team.slice(0, 11).map((player: Player, idx: number) => (
|
||||||
|
<View key={idx} style={styles.playerRow}>
|
||||||
|
<ThemedText style={styles.playerNumber}>
|
||||||
|
{player.player_number || player.number || idx + 1}
|
||||||
|
</ThemedText>
|
||||||
|
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||||
|
{player.player_name || player.player || player.name || ""}
|
||||||
|
</ThemedText>
|
||||||
|
{player.position && (
|
||||||
|
<ThemedText style={styles.playerPosition}>
|
||||||
|
{player.position}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
margin: 16,
|
||||||
|
marginTop: 0,
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 16,
|
||||||
|
borderWidth: 1,
|
||||||
|
elevation: 2,
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 4,
|
||||||
|
},
|
||||||
|
section: {
|
||||||
|
marginBottom: 20,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "600",
|
||||||
|
marginBottom: 12,
|
||||||
|
opacity: 0.7,
|
||||||
|
},
|
||||||
|
eventRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
|
},
|
||||||
|
eventTime: {
|
||||||
|
width: 40,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
timeText: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: "500",
|
||||||
|
opacity: 0.6,
|
||||||
|
},
|
||||||
|
eventContent: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 8,
|
||||||
|
paddingLeft: 12,
|
||||||
|
},
|
||||||
|
homeEvent: {
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
},
|
||||||
|
awayEvent: {
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
flexDirection: "row-reverse",
|
||||||
|
},
|
||||||
|
eventText: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "500",
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scoreText: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: "600",
|
||||||
|
opacity: 0.7,
|
||||||
|
},
|
||||||
|
cardIcon: {
|
||||||
|
width: 12,
|
||||||
|
height: 16,
|
||||||
|
borderRadius: 2,
|
||||||
|
},
|
||||||
|
cardTypeText: {
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: "600",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
},
|
||||||
|
cardBadge: {
|
||||||
|
paddingHorizontal: 6,
|
||||||
|
paddingVertical: 2,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
goalContent: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
penaltyBadge: {
|
||||||
|
width: 18,
|
||||||
|
height: 18,
|
||||||
|
borderRadius: 9,
|
||||||
|
backgroundColor: "#FF9800",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
penaltyText: {
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: "700",
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
substituteContent: {
|
||||||
|
flex: 1,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
substituteIn: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "500",
|
||||||
|
},
|
||||||
|
substituteArrow: {
|
||||||
|
fontSize: 12,
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
substituteOut: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "500",
|
||||||
|
opacity: 0.6,
|
||||||
|
textDecorationLine: "line-through",
|
||||||
|
},
|
||||||
|
teamLineup: {
|
||||||
|
marginTop: 8,
|
||||||
|
},
|
||||||
|
teamName: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "600",
|
||||||
|
marginBottom: 8,
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
playerRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingVertical: 4,
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
playerNumber: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: "600",
|
||||||
|
width: 24,
|
||||||
|
textAlign: "center",
|
||||||
|
opacity: 0.6,
|
||||||
|
},
|
||||||
|
playerName: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "500",
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
playerPosition: {
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: "500",
|
||||||
|
opacity: 0.5,
|
||||||
|
textTransform: "uppercase",
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -9,10 +9,11 @@ interface FootballScoreTableProps {
|
|||||||
isDark: boolean;
|
isDark: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 解析足球比分字符串,例如 "2-1" 或 "1-0"
|
// 解析足球比分字符串,例如 "2 - 1" 或 "1-0"
|
||||||
function parseFootballScore(scoreString: string): number[] {
|
function parseFootballScore(scoreString: string): number[] {
|
||||||
if (!scoreString || scoreString === "-") return [0, 0];
|
if (!scoreString || scoreString === "-" || scoreString.trim() === "") return [0, 0];
|
||||||
const parts = scoreString.split("-");
|
// 处理 "2 - 1" 或 "2-1" 格式
|
||||||
|
const parts = scoreString.replace(/\s+/g, "").split("-");
|
||||||
if (parts.length === 2) {
|
if (parts.length === 2) {
|
||||||
return [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0];
|
return [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0];
|
||||||
}
|
}
|
||||||
@@ -25,27 +26,42 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
|
|||||||
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
||||||
const headerTextColor = isDark ? "#666" : "#999";
|
const headerTextColor = isDark ? "#666" : "#999";
|
||||||
|
|
||||||
// 解析足球比分
|
// 解析各种比分
|
||||||
const finalScore = parseFootballScore(match.eventFinalResult || "-");
|
const finalScore = parseFootballScore(match.eventFinalResult || "-");
|
||||||
const halftimeScore = parseFootballScore(match.eventHalftimeResult || "-");
|
const halftimeScore = parseFootballScore(match.eventHalftimeResult || "-");
|
||||||
|
const ftScore = parseFootballScore(match.eventFtResult || "-");
|
||||||
|
const penaltyScore = parseFootballScore(match.eventPenaltyResult || "-");
|
||||||
|
|
||||||
const headers = [
|
// 判断是否有加时赛或点球
|
||||||
t("detail.score_table.team"),
|
const hasExtraTime = ftScore[0] !== finalScore[0] || ftScore[1] !== finalScore[1];
|
||||||
t("detail.score_table.total"),
|
const hasPenalty = penaltyScore[0] > 0 || penaltyScore[1] > 0;
|
||||||
t("detail.score_table.halftime"),
|
|
||||||
];
|
// 动态生成表头
|
||||||
|
const headers = [t("detail.score_table.team")];
|
||||||
|
if (hasPenalty) {
|
||||||
|
headers.push(t("detail.score_table.penalty"));
|
||||||
|
}
|
||||||
|
if (hasExtraTime) {
|
||||||
|
headers.push(t("detail.score_table.extra_time"));
|
||||||
|
}
|
||||||
|
headers.push(t("detail.score_table.full_time"));
|
||||||
|
headers.push(t("detail.score_table.halftime"));
|
||||||
|
|
||||||
const rows = [
|
const rows = [
|
||||||
{
|
{
|
||||||
logo: match.homeTeamLogo,
|
logo: match.homeTeamLogo,
|
||||||
name: match.eventHomeTeam,
|
name: match.eventHomeTeam,
|
||||||
total: finalScore[0],
|
penalty: hasPenalty ? penaltyScore[0] : null,
|
||||||
|
extraTime: hasExtraTime ? finalScore[0] : null,
|
||||||
|
fullTime: hasExtraTime ? ftScore[0] : finalScore[0],
|
||||||
halftime: halftimeScore[0],
|
halftime: halftimeScore[0],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
logo: match.awayTeamLogo,
|
logo: match.awayTeamLogo,
|
||||||
name: match.eventAwayTeam,
|
name: match.eventAwayTeam,
|
||||||
total: finalScore[1],
|
penalty: hasPenalty ? penaltyScore[1] : null,
|
||||||
|
extraTime: hasExtraTime ? finalScore[1] : null,
|
||||||
|
fullTime: hasExtraTime ? ftScore[1] : finalScore[1],
|
||||||
halftime: halftimeScore[1],
|
halftime: halftimeScore[1],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -78,7 +94,17 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
|
|||||||
{row.name}
|
{row.name}
|
||||||
</ThemedText>
|
</ThemedText>
|
||||||
</View>
|
</View>
|
||||||
<ThemedText style={styles.cellText}>{row.total}</ThemedText>
|
{hasPenalty && (
|
||||||
|
<ThemedText style={styles.cellText}>
|
||||||
|
{row.penalty !== null ? row.penalty : "-"}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
{hasExtraTime && (
|
||||||
|
<ThemedText style={styles.cellText}>
|
||||||
|
{row.extraTime !== null ? row.extraTime : "-"}
|
||||||
|
</ThemedText>
|
||||||
|
)}
|
||||||
|
<ThemedText style={styles.cellText}>{row.fullTime}</ThemedText>
|
||||||
<ThemedText style={styles.cellText}>{row.halftime}</ThemedText>
|
<ThemedText style={styles.cellText}>{row.halftime}</ThemedText>
|
||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -13,6 +13,17 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { match } = data;
|
const { match } = data;
|
||||||
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
||||||
|
const labelColor = isDark ? "#999" : "#666";
|
||||||
|
const valueColor = isDark ? "#FFF" : "#000";
|
||||||
|
|
||||||
|
const infoItems = [
|
||||||
|
{ label: t("detail.info_card.country"), value: match.countryName },
|
||||||
|
{ label: t("detail.info_card.league"), value: match.leagueName },
|
||||||
|
{ label: t("detail.info_card.stage"), value: match.stageName },
|
||||||
|
{ label: t("detail.info_card.stadium"), value: match.eventStadium },
|
||||||
|
{ label: t("detail.info_card.referee"), value: match.eventReferee },
|
||||||
|
{ label: t("detail.info_card.date"), value: `${match.eventDate} ${match.eventTime}` },
|
||||||
|
].filter((item) => item.value && item.value.trim() !== "");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
||||||
@@ -21,10 +32,16 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
|
|||||||
</ThemedText>
|
</ThemedText>
|
||||||
|
|
||||||
<View style={styles.content}>
|
<View style={styles.content}>
|
||||||
<ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
|
{infoItems.map((item, index) => (
|
||||||
<ThemedText style={styles.dateTime}>
|
<View key={index} style={styles.infoRow}>
|
||||||
{match.eventDate} • {match.eventTime}
|
<ThemedText style={[styles.label, { color: labelColor }]}>
|
||||||
</ThemedText>
|
{item.label}
|
||||||
|
</ThemedText>
|
||||||
|
<ThemedText style={[styles.value, { color: valueColor }]} numberOfLines={2}>
|
||||||
|
{item.value}
|
||||||
|
</ThemedText>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
@@ -49,14 +66,24 @@ const styles = StyleSheet.create({
|
|||||||
marginBottom: 16,
|
marginBottom: 16,
|
||||||
},
|
},
|
||||||
content: {
|
content: {
|
||||||
gap: 4,
|
gap: 12,
|
||||||
},
|
},
|
||||||
leagueName: {
|
infoRow: {
|
||||||
fontSize: 16,
|
flexDirection: "row",
|
||||||
fontWeight: "600",
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
gap: 12,
|
||||||
},
|
},
|
||||||
dateTime: {
|
label: {
|
||||||
fontSize: 14,
|
fontSize: 13,
|
||||||
opacity: 0.6,
|
fontWeight: "500",
|
||||||
|
opacity: 0.7,
|
||||||
|
minWidth: 80,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: "500",
|
||||||
|
flex: 1,
|
||||||
|
textAlign: "right",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export const API_CONFIG = {
|
export const API_CONFIG = {
|
||||||
BASE_URL: "http://192.168.1.111:8000", // Update this with your machine IP if running on device ex: http://192.168.1.5:8000
|
BASE_URL: "http://192.168.1.111:8000", // Update this with your machine IP if running on device ex: http://192.168.1.5:8000
|
||||||
TIMEOUT: 10000,
|
TIMEOUT: 100000,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const API_ENDPOINTS = {
|
export const API_ENDPOINTS = {
|
||||||
|
|||||||
@@ -48,18 +48,30 @@
|
|||||||
"league": "League",
|
"league": "League",
|
||||||
"stage": "Stage",
|
"stage": "Stage",
|
||||||
"stadium": "Stadium",
|
"stadium": "Stadium",
|
||||||
"referee": "Referee"
|
"referee": "Referee",
|
||||||
|
"date": "Date & Time"
|
||||||
},
|
},
|
||||||
"score_table": {
|
"score_table": {
|
||||||
"team": "Team",
|
"team": "Team",
|
||||||
"total": "Full Time",
|
"total": "Full Time",
|
||||||
"halftime": "Half Time"
|
"halftime": "Half Time",
|
||||||
|
"full_time": "90'",
|
||||||
|
"extra_time": "ET",
|
||||||
|
"penalty": "Pen"
|
||||||
},
|
},
|
||||||
"halftime": "Half: {{score}}",
|
"halftime": "Half: {{score}}",
|
||||||
"empty_stats": "No statistics data",
|
"empty_stats": "No statistics data",
|
||||||
"empty_odds": "No odds data",
|
"empty_odds": "No odds data",
|
||||||
"empty_h2h": "No H2H data",
|
"empty_h2h": "No H2H data",
|
||||||
"empty_chat": "Chat is not available"
|
"empty_chat": "Chat is not available",
|
||||||
|
"events": {
|
||||||
|
"goals": "Goals",
|
||||||
|
"cards": "Cards",
|
||||||
|
"substitutes": "Substitutes",
|
||||||
|
"lineups": "Lineups",
|
||||||
|
"red_card": "RED",
|
||||||
|
"yellow_card": "YELLOW"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"selection": {
|
"selection": {
|
||||||
"selected": "Selected",
|
"selected": "Selected",
|
||||||
|
|||||||
@@ -48,18 +48,30 @@
|
|||||||
"league": "赛事",
|
"league": "赛事",
|
||||||
"stage": "阶段",
|
"stage": "阶段",
|
||||||
"stadium": "场馆",
|
"stadium": "场馆",
|
||||||
"referee": "裁判"
|
"referee": "裁判",
|
||||||
|
"date": "日期时间"
|
||||||
},
|
},
|
||||||
"score_table": {
|
"score_table": {
|
||||||
"team": "球队",
|
"team": "球队",
|
||||||
"total": "全场",
|
"total": "全场",
|
||||||
"halftime": "半场"
|
"halftime": "半场",
|
||||||
|
"full_time": "90分钟",
|
||||||
|
"extra_time": "加时",
|
||||||
|
"penalty": "点球"
|
||||||
},
|
},
|
||||||
"halftime": "半场: {{score}}",
|
"halftime": "半场: {{score}}",
|
||||||
"empty_stats": "暂无统计数据",
|
"empty_stats": "暂无统计数据",
|
||||||
"empty_odds": "暂无赔率数据",
|
"empty_odds": "暂无赔率数据",
|
||||||
"empty_h2h": "暂无交锋数据",
|
"empty_h2h": "暂无交锋数据",
|
||||||
"empty_chat": "聊天功能暂未开启"
|
"empty_chat": "聊天功能暂未开启",
|
||||||
|
"events": {
|
||||||
|
"goals": "进球",
|
||||||
|
"cards": "红黄牌",
|
||||||
|
"substitutes": "换人",
|
||||||
|
"lineups": "首发阵容",
|
||||||
|
"red_card": "红牌",
|
||||||
|
"yellow_card": "黄牌"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"selection": {
|
"selection": {
|
||||||
"selected": "已选择",
|
"selected": "已选择",
|
||||||
|
|||||||
49
types/api.ts
49
types/api.ts
@@ -30,6 +30,50 @@ export interface ApiListResponse<T> {
|
|||||||
total: number;
|
total: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface GoalEvent {
|
||||||
|
time: string;
|
||||||
|
home_scorer?: string;
|
||||||
|
away_scorer?: string;
|
||||||
|
score?: string;
|
||||||
|
comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CardEvent {
|
||||||
|
time: string;
|
||||||
|
home_fault?: string;
|
||||||
|
away_fault?: string;
|
||||||
|
card?: string;
|
||||||
|
comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SubstituteEvent {
|
||||||
|
time: string;
|
||||||
|
home_scorer?: string;
|
||||||
|
away_scorer?: string;
|
||||||
|
home_assist?: string;
|
||||||
|
away_assist?: string;
|
||||||
|
home_scorer_out?: string;
|
||||||
|
away_scorer_out?: string;
|
||||||
|
comment?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MatchEvents {
|
||||||
|
goalscorers: GoalEvent[];
|
||||||
|
cards: CardEvent[];
|
||||||
|
substitutes: SubstituteEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Player {
|
||||||
|
// AllSports API 常见字段
|
||||||
|
player?: string; // 有些接口用 player
|
||||||
|
player_name?: string; // 有些接口用 player_name
|
||||||
|
name?: string; // 兜底
|
||||||
|
player_number?: number | string;
|
||||||
|
number?: number | string;
|
||||||
|
player_type?: string; // 位置/角色,例如 Goalkeepers
|
||||||
|
position?: string; // 兜底位置字段
|
||||||
|
}
|
||||||
|
|
||||||
export interface MatchDetailData {
|
export interface MatchDetailData {
|
||||||
events: any[];
|
events: any[];
|
||||||
match: {
|
match: {
|
||||||
@@ -73,5 +117,10 @@ export interface MatchDetailData {
|
|||||||
eventType: string;
|
eventType: string;
|
||||||
eventToss: string;
|
eventToss: string;
|
||||||
eventManOfMatch: string;
|
eventManOfMatch: string;
|
||||||
|
events?: MatchEvents;
|
||||||
|
players?: {
|
||||||
|
home_team?: Player[];
|
||||||
|
away_team?: Player[];
|
||||||
|
};
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user