实现首页功能，添加体育项目和今日比赛数据的加载，更新国际化文本，新增选择和日历模态框组件
This commit is contained in:
yuchenglong
@@ -1,15 +1,168 @@
|
||||
import { HomeHeader } from "@/components/home-header";
|
||||
import { MatchCard } from "@/components/match-card";
|
||||
import { SelectionModal } from "@/components/selection-modal";
|
||||
import { CalendarModal } from "@/components/simple-calendar";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import React from "react";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { fetchSports, fetchTodayMatches } from "@/lib/api";
|
||||
import { Match, Sport } from "@/types/api";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const { theme } = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
|
||||
|
||||
const [sports, setSports] = useState<Sport[]>([]);
|
||||
const [matches, setMatches] = useState<Match[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Selection States
|
||||
const [selectedSportId, setSelectedSportId] = useState<number | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
|
||||
// Modal Visibilities
|
||||
const [showSportModal, setShowSportModal] = useState(false);
|
||||
const [showCalendarModal, setShowCalendarModal] = useState(false);
|
||||
|
||||
// Load Sports
|
||||
useEffect(() => {
|
||||
loadSports();
|
||||
}, []);
|
||||
|
||||
// Load Matches when sport or date changes
|
||||
useEffect(() => {
|
||||
if (selectedSportId !== null) {
|
||||
loadMatches(selectedSportId);
|
||||
}
|
||||
}, [selectedSportId, selectedDate]);
|
||||
|
||||
const loadSports = async () => {
|
||||
try {
|
||||
const list = await fetchSports();
|
||||
setSports(list);
|
||||
if (list.length > 0) {
|
||||
setSelectedSportId(list[0].id);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMatches = async (sportId: number) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Pass selectedDate if API supported it
|
||||
const list = await fetchTodayMatches(sportId);
|
||||
setMatches(list);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentSport = sports.find((s) => s.id === selectedSportId);
|
||||
|
||||
const renderHeader = () => (
|
||||
<View style={styles.filterContainer}>
|
||||
{/* Time Filter (Mock) */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
>
|
||||
<IconSymbol name="time-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Sport Selector */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.filterBtn,
|
||||
styles.mainFilterBtn,
|
||||
{ backgroundColor: filterBg },
|
||||
]}
|
||||
onPress={() => setShowSportModal(true)}
|
||||
>
|
||||
<IconSymbol name="football-outline" size={18} color={iconColor} />
|
||||
<ThemedText style={styles.filterText}>
|
||||
{currentSport ? currentSport.name : t("home.select_sport")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Date Selector */}
|
||||
<TouchableOpacity
|
||||
style={[styles.filterBtn, { backgroundColor: filterBg }]}
|
||||
onPress={() => setShowCalendarModal(true)}
|
||||
>
|
||||
<ThemedText style={styles.dateDayText}>
|
||||
{selectedDate.getDate()}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.dateMonthText}>
|
||||
{selectedDate.getHours()}:
|
||||
{selectedDate.getMinutes().toString().padStart(2, "0")}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<HomeHeader />
|
||||
<ScrollView contentContainerStyle={styles.content}>
|
||||
{/* Placeholder for future content */}
|
||||
</ScrollView>
|
||||
|
||||
{renderHeader()}
|
||||
|
||||
{loading ? (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color={Colors[theme].tint} />
|
||||
<ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={matches}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => <MatchCard match={item} />}
|
||||
contentContainerStyle={styles.listContent}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.center}>
|
||||
<ThemedText>{t("home.no_matches")}</ThemedText>
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<SelectionModal
|
||||
visible={showSportModal}
|
||||
onClose={() => setShowSportModal(false)}
|
||||
title={t("home.select_sport")}
|
||||
options={sports.map((s) => ({
|
||||
id: s.id,
|
||||
label: s.name,
|
||||
value: s.id,
|
||||
}))}
|
||||
selectedValue={selectedSportId}
|
||||
onSelect={setSelectedSportId}
|
||||
/>
|
||||
|
||||
<CalendarModal
|
||||
visible={showCalendarModal}
|
||||
onClose={() => setShowCalendarModal(false)}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
/>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
@@ -18,7 +171,52 @@ const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
center: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingTop: 50,
|
||||
},
|
||||
filterContainer: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
gap: 12,
|
||||
},
|
||||
filterBtn: {
|
||||
flex: 1,
|
||||
height: 44, // Increased from 36
|
||||
flexDirection: "column", // Stacked logic for Date, or Row for others
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 8, // Rounded corners
|
||||
// iOS shadow
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 2,
|
||||
// Android elevation
|
||||
elevation: 2,
|
||||
},
|
||||
mainFilterBtn: {
|
||||
flex: 2, // Wider for sport
|
||||
flexDirection: "row",
|
||||
gap: 8,
|
||||
},
|
||||
filterText: {
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
},
|
||||
dateDayText: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
dateMonthText: {
|
||||
fontSize: 10,
|
||||
opacity: 0.6,
|
||||
},
|
||||
listContent: {
|
||||
padding: 16,
|
||||
paddingTop: 8,
|
||||
},
|
||||
});
|
||||
|
||||
110
components/match-card.tsx
Normal file
110
components/match-card.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import { Match } from "@/types/api";
|
||||
import React from "react";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
|
||||
interface MatchCardProps {
|
||||
match: Match;
|
||||
}
|
||||
|
||||
export function MatchCard({ match }: MatchCardProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
|
||||
const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
const borderColor = isDark ? "#38383A" : "#E5E5EA";
|
||||
|
||||
return (
|
||||
<View style={[styles.card, { backgroundColor: cardBg, borderColor }]}>
|
||||
<View style={styles.header}>
|
||||
<View
|
||||
style={[
|
||||
styles.leagueBadge,
|
||||
{ backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
|
||||
]}
|
||||
>
|
||||
<ThemedText style={styles.leagueText} numberOfLines={1}>
|
||||
{match.league}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.timeText}>{match.time}</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.teamsContainer}>
|
||||
<ThemedText type="defaultSemiBold" style={styles.teamsText}>
|
||||
{match.home} vs {match.away}
|
||||
</ThemedText>
|
||||
<View style={styles.scoreContainer}>
|
||||
<ThemedText type="defaultSemiBold" style={styles.scoreText}>
|
||||
{match.scoreText}
|
||||
</ThemedText>
|
||||
<IconSymbol
|
||||
name={match.fav ? "star" : "star-outline"}
|
||||
size={20}
|
||||
color={match.fav ? "#FFD700" : iconColor}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{match.meta && (
|
||||
<ThemedText style={styles.metaText}>{match.meta}</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
padding: 12,
|
||||
marginBottom: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
leagueBadge: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 4,
|
||||
marginRight: 8,
|
||||
maxWidth: "70%",
|
||||
},
|
||||
leagueText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.7,
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.5,
|
||||
},
|
||||
teamsContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 4,
|
||||
},
|
||||
teamsText: {
|
||||
fontSize: 16,
|
||||
flex: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
scoreContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 12,
|
||||
},
|
||||
scoreText: {
|
||||
fontSize: 16,
|
||||
},
|
||||
metaText: {
|
||||
fontSize: 12,
|
||||
opacity: 0.5,
|
||||
marginTop: 4,
|
||||
},
|
||||
});
|
||||
111
components/selection-modal.tsx
Normal file
111
components/selection-modal.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import React from "react";
|
||||
import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
interface SelectionOption {
|
||||
id: number | string;
|
||||
label: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
interface SelectionModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
options: SelectionOption[];
|
||||
onSelect: (value: any) => void;
|
||||
selectedValue: any;
|
||||
}
|
||||
|
||||
export function SelectionModal({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
options,
|
||||
onSelect,
|
||||
selectedValue,
|
||||
}: SelectionModalProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const bg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
const text = isDark ? "#FFFFFF" : "#000000";
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="slide"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Pressable style={styles.overlay} onPress={onClose}>
|
||||
<View />
|
||||
</Pressable>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: bg }]}>
|
||||
<SafeAreaView edges={["bottom"]}>
|
||||
<View style={styles.header}>
|
||||
<ThemedText type="subtitle">{title}</ThemedText>
|
||||
<Pressable onPress={onClose}>
|
||||
<ThemedText style={{ color: Colors[theme].tint }}>
|
||||
Done
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
<ScrollView style={{ maxHeight: 300 }}>
|
||||
{options.map((opt) => (
|
||||
<Pressable
|
||||
key={opt.id}
|
||||
style={[
|
||||
styles.option,
|
||||
selectedValue === opt.value && {
|
||||
backgroundColor: isDark ? "#333" : "#F0F0F0",
|
||||
},
|
||||
]}
|
||||
onPress={() => {
|
||||
onSelect(opt.value);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<ThemedText
|
||||
style={{
|
||||
fontWeight: selectedValue === opt.value ? "bold" : "normal",
|
||||
}}
|
||||
>
|
||||
{opt.label}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
sheet: {
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
padding: 16,
|
||||
maxHeight: "60%",
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
option: {
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 12,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: "#ccc",
|
||||
},
|
||||
});
|
||||
194
components/simple-calendar.tsx
Normal file
194
components/simple-calendar.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { Modal, Pressable, StyleSheet, View } from "react-native";
|
||||
|
||||
interface CalendarModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
selectedDate: Date;
|
||||
onSelectDate: (date: Date) => void;
|
||||
}
|
||||
|
||||
export function CalendarModal({
|
||||
visible,
|
||||
onClose,
|
||||
selectedDate,
|
||||
onSelectDate,
|
||||
}: CalendarModalProps) {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const bg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date(selectedDate));
|
||||
|
||||
const daysInMonth = useMemo(() => {
|
||||
const year = currentMonth.getFullYear();
|
||||
const month = currentMonth.getMonth();
|
||||
const date = new Date(year, month, 1);
|
||||
const days = [];
|
||||
while (date.getMonth() === month) {
|
||||
days.push(new Date(date));
|
||||
date.setDate(date.getDate() + 1);
|
||||
}
|
||||
return days;
|
||||
}, [currentMonth]);
|
||||
|
||||
const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
// Add empty slots for start of month
|
||||
const startDay = daysInMonth[0]?.getDay() || 0;
|
||||
const blanks = Array(startDay).fill(null);
|
||||
|
||||
const handleDayPress = (date: Date) => {
|
||||
onSelectDate(date);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
transparent
|
||||
animationType="fade"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<Pressable style={styles.overlay} onPress={onClose}>
|
||||
<View style={[styles.calendarContainer, { backgroundColor: bg }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setCurrentMonth(
|
||||
new Date(
|
||||
currentMonth.getFullYear(),
|
||||
currentMonth.getMonth() - 1,
|
||||
1
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThemedText style={styles.navText}>{"<"}</ThemedText>
|
||||
</Pressable>
|
||||
<ThemedText type="subtitle">
|
||||
{currentMonth.toLocaleString("default", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})}
|
||||
</ThemedText>
|
||||
<Pressable
|
||||
onPress={() =>
|
||||
setCurrentMonth(
|
||||
new Date(
|
||||
currentMonth.getFullYear(),
|
||||
currentMonth.getMonth() + 1,
|
||||
1
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<ThemedText style={styles.navText}>{">"}</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Week Headers */}
|
||||
<View style={styles.weekRow}>
|
||||
{weekDays.map((day) => (
|
||||
<ThemedText key={day} style={styles.weekDayText}>
|
||||
{day}
|
||||
</ThemedText>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Days Grid */}
|
||||
<View style={styles.daysGrid}>
|
||||
{blanks.map((_, index) => (
|
||||
<View key={`blank-${index}`} style={styles.dayCell} />
|
||||
))}
|
||||
{daysInMonth.map((date) => {
|
||||
const isSelected =
|
||||
date.getDate() === selectedDate.getDate() &&
|
||||
date.getMonth() === selectedDate.getMonth() &&
|
||||
date.getFullYear() === selectedDate.getFullYear();
|
||||
return (
|
||||
<Pressable
|
||||
key={date.toISOString()}
|
||||
style={[
|
||||
styles.dayCell,
|
||||
isSelected && {
|
||||
backgroundColor: Colors[theme].tint,
|
||||
borderRadius: 20,
|
||||
},
|
||||
]}
|
||||
onPress={() => handleDayPress(date)}
|
||||
>
|
||||
<ThemedText
|
||||
style={[
|
||||
isSelected && { color: "#fff", fontWeight: "bold" },
|
||||
]}
|
||||
>
|
||||
{date.getDate()}
|
||||
</ThemedText>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
<Pressable style={styles.closeBtn} onPress={onClose}>
|
||||
<ThemedText>Close</ThemedText>
|
||||
</Pressable>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
overlay: {
|
||||
flex: 1,
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
calendarContainer: {
|
||||
borderRadius: 16,
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
navText: {
|
||||
fontSize: 20,
|
||||
padding: 10,
|
||||
},
|
||||
weekRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
marginBottom: 10,
|
||||
},
|
||||
weekDayText: {
|
||||
opacity: 0.5,
|
||||
width: 30,
|
||||
textAlign: "center",
|
||||
fontSize: 12,
|
||||
},
|
||||
daysGrid: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
dayCell: {
|
||||
width: "14.28%", // 100% / 7
|
||||
aspectRatio: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom: 5,
|
||||
},
|
||||
closeBtn: {
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
padding: 10,
|
||||
},
|
||||
});
|
||||
9
constants/api.ts
Normal file
9
constants/api.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export const API_CONFIG = {
|
||||
BASE_URL: "http://192.168.1.66:8000", // Update this with your machine IP if running on device ex: http://192.168.1.5:8000
|
||||
TIMEOUT: 10000,
|
||||
};
|
||||
|
||||
export const API_ENDPOINTS = {
|
||||
SPORTS: "/v1/api/sports",
|
||||
MATCHES_TODAY: "/v1/api/matches/today",
|
||||
};
|
||||
72
docs/开发文档.md
Normal file
72
docs/开发文档.md
Normal file
@@ -0,0 +1,72 @@
|
||||
开发地址后端 本地8000端口
|
||||
|
||||
获取所有启用的体育项目列表
|
||||
/v1/api/sports
|
||||
|
||||
{
|
||||
"code": 0,
|
||||
"message": "ok",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "足球",
|
||||
"description": "足球",
|
||||
"icon": "",
|
||||
"isActive": false,
|
||||
"updatedAt": "",
|
||||
"createdAt": ""
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "篮球",
|
||||
"description": "篮球",
|
||||
"icon": "",
|
||||
"isActive": false,
|
||||
"updatedAt": "",
|
||||
"createdAt": ""
|
||||
}
|
||||
],
|
||||
"total": 4
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/v1/api/matches/today
|
||||
Parameters
|
||||
Cancel
|
||||
Name Description
|
||||
sport_id *
|
||||
integer
|
||||
(query)
|
||||
体育项目ID (1:足球, 2:篮球, 3:网球, 4:板球)
|
||||
|
||||
|
||||
{
|
||||
"code": 0,
|
||||
"message": "ok",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"id": "27",
|
||||
"league": "EFL Trophy - 1/8-finals",
|
||||
"time": "20:00",
|
||||
"home": "AFC Wimbledon",
|
||||
"away": "West Ham U21",
|
||||
"meta": "The Cherry Red Records Stadium",
|
||||
"scoreText": "-",
|
||||
"fav": false
|
||||
},
|
||||
{
|
||||
"id": "241",
|
||||
"league": "Division di Honor",
|
||||
"time": "01:00",
|
||||
"home": "Estrella",
|
||||
"away": "Dakota",
|
||||
"scoreText": "-",
|
||||
"fav": false
|
||||
}
|
||||
],
|
||||
"total": 78
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,11 @@
|
||||
"chinese": "Chinese"
|
||||
},
|
||||
"home": {
|
||||
"title": "Physical"
|
||||
"title": "ScoreNow",
|
||||
"time": "Time",
|
||||
"select_sport": "Sport",
|
||||
"loading": "Loading...",
|
||||
"no_matches": "No matches found."
|
||||
},
|
||||
"profile": {
|
||||
"title": "My Profile",
|
||||
|
||||
@@ -18,7 +18,11 @@
|
||||
"chinese": "中文"
|
||||
},
|
||||
"home": {
|
||||
"title": "Physical"
|
||||
"title": "ScoreNow",
|
||||
"time": "时间",
|
||||
"select_sport": "运动",
|
||||
"loading": "加载中...",
|
||||
"no_matches": "暂无比赛"
|
||||
},
|
||||
"profile": {
|
||||
"title": "我的",
|
||||
|
||||
46
lib/api.ts
Normal file
46
lib/api.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { API_CONFIG, API_ENDPOINTS } from "@/constants/api";
|
||||
import { ApiResponse, Match, Sport } from "@/types/api";
|
||||
import axios from "axios";
|
||||
|
||||
const apiClient = axios.create({
|
||||
baseURL: API_CONFIG.BASE_URL,
|
||||
timeout: API_CONFIG.TIMEOUT,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
export const fetchSports = async (): Promise<Sport[]> => {
|
||||
try {
|
||||
const response = await apiClient.get<ApiResponse<Sport>>(
|
||||
API_ENDPOINTS.SPORTS
|
||||
);
|
||||
if (response.data.code === 0) {
|
||||
return response.data.data.list;
|
||||
}
|
||||
throw new Error(response.data.message);
|
||||
} catch (error) {
|
||||
console.error("Fetch sports error:", error);
|
||||
// Do not return mock data here — rethrow to let caller handle the error
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchTodayMatches = async (sportId: number): Promise<Match[]> => {
|
||||
try {
|
||||
const response = await apiClient.get<ApiResponse<Match>>(
|
||||
API_ENDPOINTS.MATCHES_TODAY,
|
||||
{
|
||||
params: { sport_id: sportId },
|
||||
}
|
||||
);
|
||||
if (response.data.code === 0) {
|
||||
return response.data.data.list;
|
||||
}
|
||||
throw new Error(response.data.message);
|
||||
} catch (error) {
|
||||
console.error("Fetch matches error:", error);
|
||||
// Let the caller handle errors; rethrow the original error
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
29
types/api.ts
Normal file
29
types/api.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export interface Sport {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
isActive: boolean;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface Match {
|
||||
id: string;
|
||||
league: string;
|
||||
time: string;
|
||||
home: string;
|
||||
away: string;
|
||||
meta?: string;
|
||||
scoreText: string;
|
||||
fav: boolean;
|
||||
}
|
||||
|
||||
export interface ApiResponse<T> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: {
|
||||
list: T[];
|
||||
total: number;
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user