physical/physical-expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 MatchCard 组件，简化赔率数据处理逻辑，添加占位符以提升用户体验

Browse Source
This commit is contained in:
yuchenglong
2026-01-21 11:18:44 +08:00
parent 6b59dcc855
commit 7ec05878fd
1 changed files with 64 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
components/match-card.tsx
View File

@@ -275,7 +275,8 @@ export function MatchCard({
if (!oddsSettings.enabled || !bookmakerName) return null; if (!oddsSettings.enabled || !bookmakerName) return null;
const item = odds.find((o) => o.odd_bookmakers === bookmakerName); const item = odds.find((o) => o.odd_bookmakers === bookmakerName);
const hasOdds = !!item; // 如果没有找到该博彩公司的赔率数据，直接返回 null，不进行占位
if (!item) return null;
const val1 = item?.odd_1 || item?.ah0_1 || "-"; const val1 = item?.odd_1 || item?.ah0_1 || "-";
const val2 = item?.odd_x || "0" || "-"; const val2 = item?.odd_x || "0" || "-";
@@ -283,45 +284,39 @@ export function MatchCard({
return ( return (
<View style={styles.bookmakerOddsRow}> <View style={styles.bookmakerOddsRow}>
{hasOdds ? ( <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
<> <ThemedText
<View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}> style={[
<ThemedText styles.oddText,
style={[ { color: isDark ? "#fff" : "#333" },
styles.oddText, isHighlight && styles.oddTextHighlight,
{ color: isDark ? "#fff" : "#333" }, ]}
isHighlight && styles.oddTextHighlight, >
]} {val1}
> </ThemedText>
{val1} </View>
</ThemedText> <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
</View> <ThemedText
<View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}> style={[
<ThemedText styles.oddText,
style={[ { color: isDark ? "#fff" : "#333" },
styles.oddText, isHighlight && styles.oddTextHighlight,
{ color: isDark ? "#fff" : "#333" }, ]}
isHighlight && styles.oddTextHighlight, >
]} {val2}
> </ThemedText>
{val2} </View>
</ThemedText> <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
</View> <ThemedText
<View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}> style={[
<ThemedText styles.oddText,
style={[ { color: isDark ? "#fff" : "#333" },
styles.oddText, isHighlight && styles.oddTextHighlight,
{ color: isDark ? "#fff" : "#333" }, ]}
isHighlight && styles.oddTextHighlight, >
]} {val3}
> </ThemedText>
{val3} </View>
</ThemedText>
</View>
</>
) : (
<View style={{ width: 98 }} />
)}
</View> </View>
); );
}; };
@@ -388,13 +383,15 @@ export function MatchCard({
<View style={styles.middle}> <View style={styles.middle}>
<View style={styles.contentRow}> <View style={styles.contentRow}>
<View style={styles.teamInfo}> <View style={styles.teamInfo}>
{match.homeTeamLogo && ( <View style={styles.teamLogoPlaceholder}>
<Image <Image
source={{ uri: match.homeTeamLogo }} source={{
uri: match.homeTeamLogo,
}}
style={styles.teamLogo} style={styles.teamLogo}
contentFit="contain" contentFit="contain"
/> />
)} </View>
<ThemedText <ThemedText
type="defaultSemiBold" type="defaultSemiBold"
style={styles.teamName} style={styles.teamName}
@@ -410,13 +407,15 @@ export function MatchCard({
<View style={styles.contentRow}> <View style={styles.contentRow}>
<View style={styles.teamInfo}> <View style={styles.teamInfo}>
{match.awayTeamLogo && ( <View style={styles.teamLogoPlaceholder}>
<Image <Image
source={{ uri: match.awayTeamLogo }} source={{
uri: match.awayTeamLogo,
}}
style={styles.teamLogo} style={styles.teamLogo}
contentFit="contain" contentFit="contain"
/> />
)} </View>
<ThemedText <ThemedText
type="defaultSemiBold" type="defaultSemiBold"
style={styles.teamName} style={styles.teamName}
@@ -433,8 +432,8 @@ export function MatchCard({
{/* Right: Score box + extra stats + favorite */} {/* Right: Score box + extra stats + favorite */}
<View style={styles.right}> <View style={styles.right}>
<View style={styles.scoreContainer}> {scoreParts.hasScore ? (
{scoreParts.hasScore ? ( <View style={styles.scoreContainer}>
<View <View
style={[ style={[
styles.scoreBox, styles.scoreBox,
@@ -481,13 +480,15 @@ export function MatchCard({
</ThemedText> </ThemedText>
</View> </View>
</View> </View>
) : ( </View>
) : (
<View style={styles.scoreContainer}>
<View style={styles.scoreBoxPlaceholder} /> <View style={styles.scoreBoxPlaceholder} />
)} </View>
</View> )}
<View style={styles.extraStatsContainer}> {extraStats.home !== "" || extraStats.away !== "" ? (
{extraStats.home !== "" || extraStats.away !== "" ? ( <View style={styles.extraStatsContainer}>
<View style={styles.extraStatsColumn}> <View style={styles.extraStatsColumn}>
<ThemedText style={styles.extraStatText}> <ThemedText style={styles.extraStatText}>
{extraStats.home} {extraStats.home}
@@ -496,8 +497,10 @@ export function MatchCard({
{extraStats.away} {extraStats.away}
</ThemedText> </ThemedText>
</View> </View>
) : null} </View>
</View> ) : (
<View style={styles.extraStatsContainer} />
)}
<View style={styles.favoriteContainer}> <View style={styles.favoriteContainer}>
<TouchableOpacity <TouchableOpacity
@@ -582,6 +585,12 @@ const styles = StyleSheet.create({
width: 18, width: 18,
height: 18, height: 18,
}, },
teamLogoPlaceholder: {
width: 18,
height: 18,
justifyContent: "center",
alignItems: "center",
},
teamName: { teamName: {
fontSize: 12, fontSize: 12,
fontWeight: "600", fontWeight: "600",