往期球局

src/components/UserInfo/index.tsx

@@ -297,6 +297,8 @@ export interface GameRecord {
   level_range: string;
   game_type: string;
   image_list: string[];
+  deadline_hours: number;
+  end_time: string;
 }
 
 // 球局卡片组件属性

src/user_pages/other/index.scss

@@ -1,9 +1,11 @@
 // 他人用户页面样式
 .other_user_page {
   min-height: 100vh;
-  background: radial-gradient(circle at 50% 0%,
+  background: radial-gradient(
+    circle at 50% 0%,
     rgba(238, 255, 220, 1) 0%,
-      rgba(255, 255, 255, 1) 37%);
+    rgba(255, 255, 255, 1) 37%
+  );
   position: relative;
   // overflow: hidden;
   box-sizing: border-box;
@@ -543,3 +545,14 @@
     }
   }
 }
+
+.ended_game_text {
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.4em;
+  letter-spacing: 1.9%;
+  color: rgba(0, 0, 0, 0.85);
+  transition: color 0.3s ease;
+  padding: 12px 15px;
+}

src/user_pages/other/index.tsx

@@ -45,6 +45,8 @@ const OtherUserPage: React.FC = () => {
 
   // 模拟球局数据
   const [game_records, setGameRecords] = useState<GameRecord[]>([]);
+  // 往期球局
+  const [ended_game_records, setEndedGameRecords] = useState<GameRecord[]>([]);
 
   // 关注状态
   const [is_following, setIsFollowing] = useState(false);
@@ -70,7 +72,8 @@ const OtherUserPage: React.FC = () => {
             nickname: userData.nickname || "",
             avatar: userData.avatar_url || "",
             join_date: userData.subscribe_time
-              ? `${new Date(userData.subscribe_time).getFullYear()}年${new Date(userData.subscribe_time).getMonth() + 1
+              ? `${new Date(userData.subscribe_time).getFullYear()}年${
+                  new Date(userData.subscribe_time).getMonth() + 1
                 }月加入`
               : "",
             stats: {
@@ -102,6 +105,25 @@ const OtherUserPage: React.FC = () => {
     load_user_data();
   }, [user_id]);
 
+  const classifyGameRecords = (
+    game_records: GameRecord[]
+  ): { notEndGames: GameRecord[]; finishedGames: GameRecord[] } => {
+    const timestamp = new Date().getTime();
+    return game_records.reduce(
+      (result, cur) => {
+        const { end_time } = cur;
+        timestamp > new Date(end_time).getTime()
+          ? result.notEndGames.push(cur)
+          : result.finishedGames.push(cur);
+        return result;
+      },
+      {
+        notEndGames: [] as GameRecord[],
+        finishedGames: [] as GameRecord[],
+      }
+    );
+  };
+
   const load_game_data = async () => {
     try {
       set_loading(true);
@@ -109,7 +131,9 @@ const OtherUserPage: React.FC = () => {
         user_id || "",
         active_tab
       );
-      setGameRecords(games_data);
+      const { notEndGames, finishedGames } = classifyGameRecords(games_data);
+      setGameRecords(notEndGames);
+      setEndedGameRecords(finishedGames);
     } catch (error) {
       console.error("加载球局数据失败:", error);
       Taro.showToast({
@@ -166,7 +190,12 @@ const OtherUserPage: React.FC = () => {
     <View className="other_user_page">
       <View className="custom-navbar">
         <View className="detail-navigator">
-          <View className="detail-navigator-back" onClick={() => { Taro.navigateBack() }}>
+          <View
+            className="detail-navigator-back"
+            onClick={() => {
+              Taro.navigateBack();
+            }}
+          >
             <Image
               className="detail-navigator-back-icon"
               src={img.ICON_NAVIGATOR_BACK}
@@ -227,6 +256,41 @@ const OtherUserPage: React.FC = () => {
             ))}
           </View> */}
         </View>
+
+        {/* 往期球局 */}
+        <View className="ended_game_text">往期球局</View>
+        <View className="game_list_section">
+          <View className="date_header">
+            <Text className="date_text">5月29日</Text>
+            <Text className="separator">/</Text>
+            <Text className="weekday_text">星期六</Text>
+          </View>
+
+          {/* 球局列表 */}
+          <View className="game_list_section">
+            <ScrollView scrollY>
+              <ListContainer
+                data={ended_game_records}
+                recommendList={[]}
+                loading={loading}
+                error={null}
+                reload={load_game_data}
+                loadMoreMatches={() => {}}
+              />
+            </ScrollView>
+          </View>
+
+          {/* 球局卡片 */}
+          {/* <View className="game_cards">
+            {game_records.map((game) => (
+              <GameCard
+                key={game.id}
+                game={game}
+                on_click={handle_game_detail}
+              />
+            ))}
+          </View> */}
+        </View>
       </View>
       {/* <GuideBar currentPage="personal" /> */}
     </View>