分离足球事件卡片

2026-01-14 14:32:59 +08:00
parent 98717b0716
commit d83ca038c7
6 changed files with 787 additions and 16 deletions
--- a/components/match-detail/football/cards-card.tsx
+++ b/components/match-detail/football/cards-card.tsx
@@ -0,0 +1,151 @@
+import { ThemedText } from "@/components/themed-text";
+import { CardEvent, MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface CardsCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function CardsCard({ data, isDark }: CardsCardProps) {
+  const { t } = useTranslation();
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "#EEE";
+
+  // events 可能在 data.events 或 match.events 中
+  const events = (data as any).events || (data.match as any).events;
+  if (!events || typeof events !== "object") {
+    return null;
+  }
+
+  // 处理数组格式的 events
+  let eventsObj = events;
+  if (Array.isArray(events) && events.length > 0) {
+    eventsObj = events[0];
+  }
+
+  const cards = eventsObj?.cards || [];
+  const filteredCards = cards.filter((card: CardEvent) => card.home_fault || card.away_fault);
+
+  if (filteredCards.length === 0) {
+    return null;
+  }
+
+  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>
+    );
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
+      <ThemedText style={styles.title}>
+        {t("detail.events.cards")}
+      </ThemedText>
+      <View style={styles.content}>
+        {filteredCards.map((card: CardEvent, index: number) => renderCardEvent(card, index))}
+      </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,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 12,
+    opacity: 0.7,
+  },
+  content: {
+    gap: 0,
+  },
+  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,
+  },
+  cardIcon: {
+    width: 12,
+    height: 16,
+    borderRadius: 2,
+  },
+  cardTypeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    textTransform: "uppercase",
+  },
+  cardBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+});