添加板球比赛详情
This commit is contained in:
yuchenglong
@@ -4,10 +4,10 @@ import { H2HData, H2HMatch, MatchDetailData } from "@/types/api";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
ActivityIndicator,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
interface H2HProps {
|
||||
@@ -21,11 +21,15 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
const [h2hData, setH2hData] = useState<H2HData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeSection, setActiveSection] = useState<"h2h" | "first" | "second">("h2h");
|
||||
const [activeSection, setActiveSection] = useState<
|
||||
"h2h" | "first" | "second"
|
||||
>("h2h");
|
||||
|
||||
const bgColor = isDark ? "#1C1C1E" : "#FFF";
|
||||
const borderColor = isDark ? "rgba(150,150,150,0.2)" : "rgba(150,150,150,0.2)";
|
||||
|
||||
const borderColor = isDark
|
||||
? "rgba(150,150,150,0.2)"
|
||||
: "rgba(150,150,150,0.2)";
|
||||
|
||||
// 颜色常量配置
|
||||
const colors = {
|
||||
bg: isDark ? "#000000" : "#F8F8F8",
|
||||
@@ -73,19 +77,31 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
const awayScore = parseInt(item.event_final_result?.split("-")[1] || "0");
|
||||
|
||||
// 确定当前视角球队名称
|
||||
const perspectiveTeam = activeSection === "first" ? match.eventHomeTeam :
|
||||
activeSection === "second" ? match.eventAwayTeam : null;
|
||||
const perspectiveTeam =
|
||||
activeSection === "first"
|
||||
? match.eventHomeTeam
|
||||
: activeSection === "second"
|
||||
? match.eventAwayTeam
|
||||
: null;
|
||||
|
||||
if (!perspectiveTeam) return { label: "", color: "transparent" };
|
||||
|
||||
const isHome = item.event_home_team === perspectiveTeam;
|
||||
if (homeScore === awayScore) return { label: "D", color: colors.draw };
|
||||
|
||||
|
||||
const isWin = isHome ? homeScore > awayScore : awayScore > homeScore;
|
||||
return isWin ? { label: "W", color: colors.win } : { label: "L", color: colors.loss };
|
||||
return isWin
|
||||
? { label: "W", color: colors.win }
|
||||
: { label: "L", color: colors.loss };
|
||||
};
|
||||
|
||||
const renderMatchItem = ({ item, index }: { item: H2HMatch; index: number }) => {
|
||||
const renderMatchItem = ({
|
||||
item,
|
||||
index,
|
||||
}: {
|
||||
item: H2HMatch;
|
||||
index: number;
|
||||
}) => {
|
||||
const homeScore = parseInt(item.event_final_result?.split("-")[0] || "0");
|
||||
const awayScore = parseInt(item.event_final_result?.split("-")[1] || "0");
|
||||
const { label, color } = getMatchResult(item);
|
||||
@@ -105,28 +121,28 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
{/* 中间：球队对阵 */}
|
||||
<View style={styles.centerCol}>
|
||||
<View style={styles.teamLine}>
|
||||
<ThemedText
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.teamName,
|
||||
styles.teamName,
|
||||
homeScore > awayScore && [
|
||||
styles.boldText,
|
||||
{ color: isDark ? "#FFF" : "#000" }
|
||||
]
|
||||
]}
|
||||
{ color: isDark ? "#FFF" : "#000" },
|
||||
],
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.event_home_team}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<View style={styles.teamLine}>
|
||||
<ThemedText
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.teamName,
|
||||
styles.teamName,
|
||||
awayScore > homeScore && [
|
||||
styles.boldText,
|
||||
{ color: isDark ? "#FFF" : "#000" }
|
||||
]
|
||||
]}
|
||||
{ color: isDark ? "#FFF" : "#000" },
|
||||
],
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{item.event_away_team}
|
||||
@@ -137,10 +153,20 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
{/* 右侧：比分与胜负角标 */}
|
||||
<View style={styles.rightCol}>
|
||||
<View style={styles.scoreContainer}>
|
||||
<ThemedText style={[styles.scoreText, homeScore > awayScore && { color: colors.scoreHighlight }]}>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.scoreText,
|
||||
homeScore > awayScore && { color: colors.scoreHighlight },
|
||||
]}
|
||||
>
|
||||
{homeScore}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.scoreText, awayScore > homeScore && { color: colors.scoreHighlight }]}>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.scoreText,
|
||||
awayScore > homeScore && { color: colors.scoreHighlight },
|
||||
]}
|
||||
>
|
||||
{awayScore}
|
||||
</ThemedText>
|
||||
</View>
|
||||
@@ -174,7 +200,14 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
<View style={styles.errorContainer}>
|
||||
<ThemedText style={styles.errorText}>{error}</ThemedText>
|
||||
<TouchableOpacity
|
||||
style={[styles.retryButton, { backgroundColor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)" }]}
|
||||
style={[
|
||||
styles.retryButton,
|
||||
{
|
||||
backgroundColor: isDark
|
||||
? "rgba(255,255,255,0.1)"
|
||||
: "rgba(0,0,0,0.05)",
|
||||
},
|
||||
]}
|
||||
onPress={loadH2H}
|
||||
>
|
||||
<ThemedText style={styles.retryText}>
|
||||
@@ -198,8 +231,12 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
);
|
||||
}
|
||||
|
||||
const currentData = activeSection === "h2h" ? h2hData?.H2H :
|
||||
activeSection === "first" ? h2hData?.firstTeamResults : h2hData?.secondTeamResults;
|
||||
const currentData =
|
||||
activeSection === "h2h"
|
||||
? h2hData?.H2H
|
||||
: activeSection === "first"
|
||||
? h2hData?.firstTeamResults
|
||||
: h2hData?.secondTeamResults;
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colors.card }]}>
|
||||
@@ -208,14 +245,28 @@ export function H2H({ data, isDark }: H2HProps) {
|
||||
{[
|
||||
{ id: "h2h", label: t("detail.h2h.h2h") },
|
||||
{ id: "first", label: match.eventHomeTeam },
|
||||
{ id: "second", label: match.eventAwayTeam }
|
||||
{ id: "second", label: match.eventAwayTeam },
|
||||
].map((tab) => (
|
||||
<TouchableOpacity
|
||||
key={tab.id}
|
||||
style={[styles.tab, activeSection === tab.id && styles.tabActive, { borderBottomColor: activeSection === tab.id ? colors.scoreHighlight : 'transparent' }]}
|
||||
style={[
|
||||
styles.tab,
|
||||
activeSection === tab.id && styles.tabActive,
|
||||
{
|
||||
borderBottomColor:
|
||||
activeSection === tab.id
|
||||
? colors.scoreHighlight
|
||||
: "transparent",
|
||||
},
|
||||
]}
|
||||
onPress={() => setActiveSection(tab.id as any)}
|
||||
>
|
||||
<ThemedText style={[styles.tabText, activeSection === tab.id && styles.tabTextActive]}>
|
||||
<ThemedText
|
||||
style={[
|
||||
styles.tabText,
|
||||
activeSection === tab.id && styles.tabTextActive,
|
||||
]}
|
||||
>
|
||||
{tab.label}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
@@ -310,7 +361,7 @@ const styles = StyleSheet.create({
|
||||
alignItems: "center",
|
||||
},
|
||||
leftCol: {
|
||||
width: 50,
|
||||
width: 40,
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
yearText: {
|
||||
@@ -326,6 +377,8 @@ const styles = StyleSheet.create({
|
||||
centerCol: {
|
||||
flex: 1,
|
||||
paddingLeft: 4,
|
||||
paddingRight: 8, // Add padding to separate from score
|
||||
overflow: "hidden", // Ensure no overflow
|
||||
},
|
||||
teamLine: {
|
||||
height: 24,
|
||||
@@ -374,4 +427,4 @@ const styles = StyleSheet.create({
|
||||
marginTop: 40,
|
||||
opacity: 0.5,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user