篮球统计数据

This commit is contained in:
xianyi
2026-01-22 17:29:44 +08:00
parent a279083252
commit 3e9cc03217
5 changed files with 561 additions and 46 deletions

View File

@@ -1,5 +1,6 @@
import { OddsCard } from "@/components/live-detail/odds-card"; import { OddsCard } from "@/components/live-detail/odds-card";
import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table"; import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
import { BasketballStats } from "@/components/match-detail/basketball/basketball-stats";
import { CardsCard } from "@/components/match-detail/football/cards-card"; import { CardsCard } from "@/components/match-detail/football/cards-card";
import { FootballScoreTable } from "@/components/match-detail/football/football-score-table"; import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
import { GoalsCard } from "@/components/match-detail/football/goals-card"; import { GoalsCard } from "@/components/match-detail/football/goals-card";
@@ -59,7 +60,7 @@ export default function MatchDetailScreen() {
validTabs = ["info", "stats", "odds", "h2h", "chat"]; validTabs = ["info", "stats", "odds", "h2h", "chat"];
} else if (sportId === 2) { } else if (sportId === 2) {
// 篮球 // 篮球
validTabs = ["info", "h2h", "chat"]; validTabs = ["info", "stats", "h2h", "chat"];
} else if (sportId === 3) { } else if (sportId === 3) {
// 网球 // 网球
validTabs = ["info", "chat"]; validTabs = ["info", "chat"];
@@ -163,6 +164,9 @@ export default function MatchDetailScreen() {
<LineupsCard data={data} isDark={isDark} /> <LineupsCard data={data} isDark={isDark} />
</> </>
); );
} else if (sportId === 2) {
// 篮球:显示统计数据
return <BasketballStats data={data} isDark={isDark} />;
} else { } else {
// 其他运动暂时显示空状态 // 其他运动暂时显示空状态
return ( return (

View File

@@ -16,22 +16,81 @@ export function BasketballScoreTable({
const { t } = useTranslation(); const { t } = useTranslation();
const { match } = data; const { match } = data;
const bgColor = isDark ? "#1C1C1E" : "#FFF"; const bgColor = isDark ? "#1C1C1E" : "#FFF";
const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
const headerTextColor = isDark ? "#666" : "#999"; const headerTextColor = isDark ? "#666" : "#999";
const textColor = isDark ? "#FFF" : "#000";
// 解析比分 - 篮球通常是 4 节 // 解析篮球比分 - 从 scores 对象获取四节比分
const parseScore = (scoreString: string) => { const parseBasketballScores = () => {
if (!scoreString || scoreString === "-") return [0, 0, 0, 0, 0]; const scores = match.scores as any;
// 假设格式可能是 "25-20,30-28,22-25,28-26" 或类似 if (!scores || typeof scores !== "object") {
// 这里简化处理,实际需要根据 API 返回格式解析 // 如果没有 scores 对象,尝试从 eventFinalResult 解析
return [0, 0, 0, 0, 0]; // total, q1, q2, q3, q4 const finalResult = match.eventFinalResult || "-";
const matchResult = finalResult.match(/(\d+)\s*[-]\s*(\d+)/);
if (matchResult) {
return {
home: {
total: parseInt(matchResult[1], 10),
q1: 0,
q2: 0,
q3: 0,
q4: 0,
},
away: {
total: parseInt(matchResult[2], 10),
q1: 0,
q2: 0,
q3: 0,
q4: 0,
},
};
}
return {
home: { total: 0, q1: 0, q2: 0, q3: 0, q4: 0 },
away: { total: 0, q1: 0, q2: 0, q3: 0, q4: 0 },
};
}
const q1 = scores["1stQuarter"]?.[0] || { score_home: "0", score_away: "0" };
const q2 = scores["2ndQuarter"]?.[0] || { score_home: "0", score_away: "0" };
const q3 = scores["3rdQuarter"]?.[0] || { score_home: "0", score_away: "0" };
const q4 = scores["4thQuarter"]?.[0] || { score_home: "0", score_away: "0" };
const homeQ1 = parseInt(q1.score_home || "0", 10);
const homeQ2 = parseInt(q2.score_home || "0", 10);
const homeQ3 = parseInt(q3.score_home || "0", 10);
const homeQ4 = parseInt(q4.score_home || "0", 10);
const homeTotal = homeQ1 + homeQ2 + homeQ3 + homeQ4;
const awayQ1 = parseInt(q1.score_away || "0", 10);
const awayQ2 = parseInt(q2.score_away || "0", 10);
const awayQ3 = parseInt(q3.score_away || "0", 10);
const awayQ4 = parseInt(q4.score_away || "0", 10);
const awayTotal = awayQ1 + awayQ2 + awayQ3 + awayQ4;
return {
home: {
total: homeTotal,
q1: homeQ1,
q2: homeQ2,
q3: homeQ3,
q4: homeQ4,
},
away: {
total: awayTotal,
q1: awayQ1,
q2: awayQ2,
q3: awayQ3,
q4: awayQ4,
},
};
}; };
const homeScores = parseScore(match.eventFinalResult || "-"); const scoreData = parseBasketballScores();
const awayScores = parseScore(match.eventFinalResult || "-");
const headers = [ const headers = [
t("detail.score_table.team"), t("detail.score_table.team") || "Team",
t("detail.score_table.total"), t("detail.score_table.total") || "Total",
"1", "1",
"2", "2",
"3", "3",
@@ -42,26 +101,26 @@ export function BasketballScoreTable({
{ {
logo: match.homeTeamLogo, logo: match.homeTeamLogo,
name: match.eventHomeTeam, name: match.eventHomeTeam,
total: homeScores[0], total: scoreData.home.total,
q1: homeScores[1], q1: scoreData.home.q1,
q2: homeScores[2], q2: scoreData.home.q2,
q3: homeScores[3], q3: scoreData.home.q3,
q4: homeScores[4], q4: scoreData.home.q4,
}, },
{ {
logo: match.awayTeamLogo, logo: match.awayTeamLogo,
name: match.eventAwayTeam, name: match.eventAwayTeam,
total: awayScores[0], total: scoreData.away.total,
q1: awayScores[1], q1: scoreData.away.q1,
q2: awayScores[2], q2: scoreData.away.q2,
q3: awayScores[3], q3: scoreData.away.q3,
q4: awayScores[4], q4: scoreData.away.q4,
}, },
]; ];
return ( return (
<View style={[styles.container, { backgroundColor: bgColor }]}> <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
<View style={styles.header}> <View style={[styles.header, { borderBottomColor: borderColor }]}>
{headers.map((h, i) => ( {headers.map((h, i) => (
<ThemedText <ThemedText
key={h} key={h}
@@ -80,20 +139,22 @@ export function BasketballScoreTable({
</View> </View>
{rows.map((row, idx) => ( {rows.map((row, idx) => (
<View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}> <View key={idx} style={[styles.row, idx === 0 && { borderBottomColor: borderColor, borderBottomWidth: 1 }]}>
<View style={styles.teamCell}> <View style={styles.teamCell}>
{row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
<Image source={{ uri: row.logo }} style={styles.teamLogo} /> <Image source={{ uri: row.logo }} style={styles.teamLogo} />
<ThemedText style={styles.teamName} numberOfLines={1}> ) : null}
<ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
{row.name} {row.name}
</ThemedText> </ThemedText>
</View> </View>
<ThemedText style={[styles.cellText, styles.totalText]}> <ThemedText style={[styles.cellText, styles.totalText, { color: textColor }]}>
{row.total} {row.total}
</ThemedText> </ThemedText>
<ThemedText style={styles.cellText}>{row.q1}</ThemedText> <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q1}</ThemedText>
<ThemedText style={styles.cellText}>{row.q2}</ThemedText> <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q2}</ThemedText>
<ThemedText style={styles.cellText}>{row.q3}</ThemedText> <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q3}</ThemedText>
<ThemedText style={styles.cellText}>{row.q4}</ThemedText> <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q4}</ThemedText>
</View> </View>
))} ))}
</View> </View>
@@ -103,20 +164,16 @@ export function BasketballScoreTable({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginHorizontal: 16, marginHorizontal: 16,
marginBottom: 16, marginTop: 12,
borderRadius: 16, borderRadius: 16,
padding: 20, padding: 20,
elevation: 2, borderWidth: 1,
shadowColor: "#000", overflow: "hidden",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.05,
shadowRadius: 8,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
paddingBottom: 16, paddingBottom: 16,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "rgba(150,150,150,0.1)",
}, },
headerText: { headerText: {
fontSize: 12, fontSize: 12,
@@ -128,10 +185,6 @@ const styles = StyleSheet.create({
alignItems: "center", alignItems: "center",
paddingVertical: 14, paddingVertical: 14,
}, },
rowBorder: {
borderBottomWidth: 1,
borderBottomColor: "rgba(150,150,150,0.1)",
},
teamCell: { teamCell: {
flex: 3, flex: 3,
flexDirection: "row", flexDirection: "row",
@@ -146,7 +199,7 @@ const styles = StyleSheet.create({
teamName: { teamName: {
flex: 1, flex: 1,
fontSize: 14, fontSize: 14,
fontWeight: "700", fontWeight: "600",
}, },
cellText: { cellText: {
flex: 1, flex: 1,

View File

@@ -0,0 +1,407 @@
import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
import { MatchDetailData } from "@/types/api";
import { Image } from "expo-image";
import { LinearGradient } from "expo-linear-gradient";
import React, { useMemo, useState } from "react";
import {
ScrollView,
StyleSheet,
Switch,
TouchableOpacity,
View
} from "react-native";
interface BasketballStatsProps {
data: MatchDetailData;
isDark: boolean;
}
// 定义固定高度以保证左右对齐
const HEADER_HEIGHT = 40;
const ROW_HEIGHT = 60;
const LEFT_COLUMN_WIDTH = 150;
const COLUMNS_BASIC = [
{ key: "pts", label: "PTS", width: 50 },
{ key: "reb", label: "REB", width: 50 },
{ key: "ast", label: "AST", width: 50 },
];
const COLUMNS_DETAILED = [
{ key: "min", label: "MIN", width: 50 },
{ key: "pts", label: "PTS", width: 50 },
{ key: "reb", label: "REB", width: 50 },
{ key: "ast", label: "AST", width: 50 },
{ key: "blk", label: "BLK", width: 50 },
{ key: "stl", label: "STL", width: 50 },
{ key: "to", label: "TO", width: 50 },
{ key: "pf", label: "PF", width: 50 },
];
export function BasketballStats({ data, isDark }: BasketballStatsProps) {
const { match } = data;
const [activeTab, setActiveTab] = useState<"home" | "away">("home");
const [isDetailed, setIsDetailed] = useState(false);
// 获取当前展示的球员列表
const currentPlayers = useMemo(() => {
if (!match.players) return [];
return activeTab === "home"
? match.players.home_team
: match.players.away_team;
}, [match.players, activeTab]);
const columns = isDetailed ? COLUMNS_DETAILED : COLUMNS_BASIC;
const getPlayerStat = (player: any, statKey: string): string => {
const statMap: Record<string, string> = {
pts: player.player_points || "0",
reb: player.player_total_rebounds || "0",
ast: player.player_assists || "0",
min: player.player_minutes || "0",
blk: player.player_blocks || "0",
stl: player.player_steals || "0",
to: player.player_turnovers || "0",
pf: player.player_personal_fouls || "0",
};
const value = statMap[statKey] || "0";
return value === "-" || value === "" ? "0" : value;
};
const bgColor = isDark ? "#1C1C1E" : "#FFF";
const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
const textColor = isDark ? "#FFF" : "#000";
const secondaryText = isDark ? "#8E8E93" : "#6B7280";
// --- 渲染组件 ---
// 1. 左上角Player 表头
const renderLeftHeader = () => (
<View style={[styles.headerCell, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
<ThemedText style={[styles.headerText, { color: secondaryText }]}>
Player
</ThemedText>
<IconSymbol
name="information-circle-outline"
size={14}
color={secondaryText}
style={{ marginLeft: 4 }}
/>
</View>
);
// 2. 左侧列:球员信息行
const renderLeftPlayerRow = (player: any) => {
const playerName = player.player || "";
const playerPosition = player.player_position || "";
const gradient = getLogoGradient(playerName);
const initials = getInitials(playerName);
return (
<View style={[styles.playerRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
<View style={styles.avatarContainer}>
<LinearGradient
colors={[gradient.color1, gradient.color2]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.avatarGradient}
>
<ThemedText style={styles.avatarText}>{initials}</ThemedText>
</LinearGradient>
</View>
<View style={styles.playerInfo}>
<ThemedText
style={[styles.playerName, { color: textColor }]}
numberOfLines={1}
>
{playerName}
</ThemedText>
{playerPosition && (
<ThemedText style={[styles.playerNumPos, { color: secondaryText }]}>
{playerPosition}
</ThemedText>
)}
</View>
</View>
);
};
// 3. 右上角:数据表头
const renderRightHeader = () => (
<View style={[styles.dataHeaderRow, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
{columns.map((col) => (
<View key={col.key} style={{ width: col.width, alignItems: "center" }}>
<ThemedText style={[styles.headerText, { color: secondaryText }]}>
{col.label}
</ThemedText>
</View>
))}
</View>
);
// 4. 右侧列:数据行
const renderRightDataRow = (player: any) => (
<View style={[styles.dataRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
{columns.map((col) => (
<View key={col.key} style={{ width: col.width, alignItems: "center" }}>
<ThemedText style={[styles.statText, { color: textColor }]}>
{getPlayerStat(player, col.key)}
</ThemedText>
</View>
))}
</View>
);
// 队名/Logo逻辑
const homeTeamName = match.eventHomeTeam || "";
const awayTeamName = match.eventAwayTeam || "";
const homeTeamLogo = match.homeTeamLogo || "";
const awayTeamLogo = match.awayTeamLogo || "";
const hasHomeLogo = homeTeamLogo && homeTeamLogo.trim() !== "" && !homeTeamLogo.includes("placehold");
const hasAwayLogo = awayTeamLogo && awayTeamLogo.trim() !== "" && !awayTeamLogo.includes("placehold");
const homeGradient = getLogoGradient(homeTeamName);
const awayGradient = getLogoGradient(awayTeamName);
const homeInitials = getInitials(homeTeamName);
const awayInitials = getInitials(awayTeamName);
return (
<View style={[styles.container, { backgroundColor: bgColor }]}>
{/* 顶部控制栏 */}
<View style={styles.controlsHeader}>
<View>
<ThemedText style={[styles.controlTitle, { color: textColor }]}>
</ThemedText>
<ThemedText style={[styles.controlSubtitle, { color: secondaryText }]}>
</ThemedText>
</View>
<Switch
value={isDetailed}
onValueChange={setIsDetailed}
trackColor={{ false: isDark ? "#3e3e3e" : "#E5E5E5", true: "#FF9500" }}
thumbColor={"#fff"}
/>
</View>
{/* 队伍切换 Tab */}
<View style={[styles.teamTabsContainer, { backgroundColor: isDark ? "#2C2C2E" : "#F5F5F5" }]}>
<TouchableOpacity
style={[
styles.teamTab,
activeTab === "home" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
{ borderTopLeftRadius: 8, borderBottomLeftRadius: 8 },
]}
onPress={() => setActiveTab("home")}
>
{hasHomeLogo ? (
<Image source={{ uri: homeTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
) : (
<LinearGradient
colors={[homeGradient.color1, homeGradient.color2]}
style={styles.teamTabLogoGradient}
>
<ThemedText style={styles.teamTabLogoText}>{homeInitials}</ThemedText>
</LinearGradient>
)}
</TouchableOpacity>
<TouchableOpacity
style={[
styles.teamTab,
activeTab === "away" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
{ borderTopRightRadius: 8, borderBottomRightRadius: 8 },
]}
onPress={() => setActiveTab("away")}
>
{hasAwayLogo ? (
<Image source={{ uri: awayTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
) : (
<LinearGradient
colors={[awayGradient.color1, awayGradient.color2]}
style={styles.teamTabLogoGradient}
>
<ThemedText style={styles.teamTabLogoText}>{awayInitials}</ThemedText>
</LinearGradient>
)}
</TouchableOpacity>
</View>
{/* 核心表格区域Vertical ScrollView 包裹整个表格 */}
<ScrollView
style={[styles.tableContainer, { borderColor }]}
showsVerticalScrollIndicator={false}
>
<View style={{ flexDirection: "row" }}>
{/* 左侧区域:固定不横向滚动 */}
<View style={{ width: LEFT_COLUMN_WIDTH, borderRightWidth: StyleSheet.hairlineWidth, borderColor }}>
{/* Header */}
{renderLeftHeader()}
{/* Players List */}
<View>
{currentPlayers?.map((player, index) => (
<View key={`left-${player.player_id || index}`}>
{renderLeftPlayerRow(player)}
</View>
))}
</View>
</View>
{/* 右侧区域:整体横向滚动 */}
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View>
{/* Header */}
{renderRightHeader()}
{/* Data List */}
<View>
{currentPlayers?.map((player, index) => (
<View key={`right-${player.player_id || index}`}>
{renderRightDataRow(player)}
</View>
))}
</View>
</View>
</ScrollView>
</View>
{/* Empty State */}
{(!currentPlayers || currentPlayers.length === 0) && (
<View style={styles.emptyState}>
<ThemedText style={{ color: secondaryText }}></ThemedText>
</View>
)}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 12,
},
controlsHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 16,
marginBottom: 12,
},
controlTitle: {
fontSize: 14,
fontWeight: "600",
},
controlSubtitle: {
fontSize: 12,
marginTop: 2,
},
teamTabsContainer: {
flexDirection: "row",
marginHorizontal: 16,
marginBottom: 12,
borderRadius: 12,
height: 44,
borderWidth: 1,
overflow: "hidden",
},
teamTab: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
teamTabLogo: {
width: 24,
height: 24,
},
teamTabLogoGradient: {
width: 24,
height: 24,
borderRadius: 12,
alignItems: "center",
justifyContent: "center",
},
teamTabLogoText: {
fontSize: 10,
fontWeight: "700",
color: "rgba(255, 255, 255, 0.92)",
},
tableContainer: {
marginHorizontal: 16,
marginBottom: 20,
borderRadius: 16,
borderWidth: 1,
overflow: "hidden", // 确保圆角生效
},
// 左侧样式
headerCell: {
flexDirection: "row",
alignItems: "center",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 12,
width: "100%",
},
playerRow: {
flexDirection: "row",
alignItems: "center",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 8,
width: "100%",
},
// 右侧样式
dataHeaderRow: {
flexDirection: "row",
alignItems: "center",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 16, // 给右侧表头一些左右padding美观
},
dataRow: {
flexDirection: "row",
alignItems: "center",
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 16,
},
// 通用文本
headerText: {
fontSize: 12,
fontWeight: "700",
},
statText: {
fontSize: 14,
fontWeight: "500",
},
// 球员头像与信息
avatarContainer: {
marginRight: 8,
},
avatarGradient: {
width: 32,
height: 32,
borderRadius: 16,
alignItems: "center",
justifyContent: "center",
},
avatarText: {
fontSize: 12,
fontWeight: "700",
color: "rgba(255, 255, 255, 0.92)",
},
playerInfo: {
flex: 1,
justifyContent: "center",
},
playerName: {
fontSize: 13,
fontWeight: "600",
marginBottom: 2,
},
playerNumPos: {
fontSize: 11,
},
emptyState: {
padding: 40,
alignItems: "center",
},
});

View File

@@ -63,8 +63,29 @@ export function MatchTabs({
}, },
]; ];
} else if (sportId === 2) { } else if (sportId === 2) {
// 篮球 // 篮球: 详情、统计数据、交锋往绩、聊天
return commonTabs; return [
{
id: "info",
label: t("detail.tabs.info"),
icon: "document-text-outline",
},
{
id: "stats",
label: t("detail.tabs.stats"),
icon: "stats-chart-outline",
},
{
id: "h2h",
label: t("detail.tabs.h2h"),
icon: "swap-horizontal-outline",
},
{
id: "chat",
label: t("detail.tabs.chat"),
icon: "chatbubbles-outline",
},
];
} else if (sportId === 3) { } else if (sportId === 3) {
// 网球: 详情、聊天 // 网球: 详情、聊天
return [ return [

View File

@@ -213,6 +213,26 @@ export interface Player {
number?: number | string; number?: number | string;
player_type?: string; // 位置/角色,例如 Goalkeepers player_type?: string; // 位置/角色,例如 Goalkeepers
position?: string; // 兜底位置字段 position?: string; // 兜底位置字段
// 篮球相关字段
player_id?: number;
player_points?: string;
player_assists?: string;
player_minutes?: string;
player_blocks?: string;
player_steals?: string;
player_turnovers?: string;
player_plus_minus?: string;
player_personal_fouls?: string;
player_total_rebounds?: string;
player_defense_rebounds?: string;
player_offence_rebounds?: string;
player_field_goals_made?: string;
player_field_goals_attempts?: string;
player_freethrows_goals_made?: string;
player_freethrows_goals_attempts?: string;
player_threepoint_goals_made?: string;
player_threepoint_goals_attempts?: string;
player_oncourt?: string;
} }
export interface UpcomingMatch { export interface UpcomingMatch {
@@ -312,7 +332,17 @@ export interface MatchDetailData {
firstPlayerKey?: string; firstPlayerKey?: string;
secondPlayerKey?: string; secondPlayerKey?: string;
eventGameResult?: string; eventGameResult?: string;
scores?: any[]; scores?: any[] | {
"1stQuarter"?: Array<{ score_home: string; score_away: string }>;
"2ndQuarter"?: Array<{ score_home: string; score_away: string }>;
"3rdQuarter"?: Array<{ score_home: string; score_away: string }>;
"4thQuarter"?: Array<{ score_home: string; score_away: string }>;
};
stats?: Array<{
type: string;
home: string;
away: string;
}>;
events?: MatchEvents; events?: MatchEvents;
players?: { players?: {
home_team?: Player[]; home_team?: Player[];