1

2025-09-12 22:34:12 +08:00
parent 471244ee5d
commit 30d16946d2
30 changed files with 104 additions and 65 deletions
--- a/src/user_pages/other/index.tsx
+++ b/src/user_pages/other/index.tsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, ScrollView } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import "./index.scss";
+import GuideBar from "@/components/GuideBar";
+import {
+  UserInfoCard,
+  GameCard,
+  GameTabs,
+  UserInfo,
+  GameRecord,
+} from "@/components/UserInfo";
+import { UserService } from "@/services/userService";
+
+const OtherUserPage: React.FC = () => {
+  // 获取页面参数
+  const instance = Taro.getCurrentInstance();
+  const user_id = instance.router?.params?.userid;
+
+  // 模拟用户数据
+  const [user_info, setUserInfo] = useState<UserInfo>({
+    id: user_id || "1",
+    nickname: "网球爱好者",
+    avatar: require("@/static/userInfo/default_avatar.svg"),
+    join_date: "2024年3月加入",
+    stats: {
+      following: 89,
+      friends: 15,
+      hosted: 12,
+      participated: 35,
+    },
+    tags: ["北京朝阳", "金融从业者", "NTRP 3.5"],
+    bio: "热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动",
+    location: "北京朝阳",
+    occupation: "金融从业者",
+    ntrp_level: "NTRP 3.5",
+  });
+
+  // 模拟球局数据
+  const [game_records, setGameRecords] = useState<GameRecord[]>([]);
+
+  // 关注状态
+  const [is_following, setIsFollowing] = useState(false);
+
+  // 当前激活的标签页
+  const [active_tab, setActiveTab] = useState<"hosted" | "participated">(
+    "hosted",
+  );
+
+  // 页面加载时获取用户信息
+  useEffect(() => {
+    const load_user_data = async () => {
+      if (user_id) {
+        try {
+          const user_data = await UserService.get_user_info(user_id);
+          setUserInfo(user_data);
+
+          const games_data = await UserService.get_user_games(
+            user_id,
+            active_tab,
+          );
+          setGameRecords(games_data);
+        } catch (error) {
+          console.error("加载用户数据失败:", error);
+          Taro.showToast({
+            title: "加载失败",
+            icon: "none",
+          });
+        }
+      }
+    };
+
+    load_user_data();
+  }, [user_id, active_tab]);
+
+  // 处理关注/取消关注
+  const handle_follow = async () => {
+    try {
+      const new_follow_status = await UserService.toggle_follow(
+        user_info.id,
+        is_following,
+      );
+      setIsFollowing(new_follow_status);
+      Taro.showToast({
+        title: new_follow_status ? "关注成功" : "已取消关注",
+        icon: "success",
+        duration: 1500,
+      });
+    } catch (error) {
+      console.error("关注操作失败:", error);
+      Taro.showToast({
+        title: "操作失败",
+        icon: "none",
+      });
+    }
+  };
+
+  // 处理发送消息
+  const handle_send_message = () => {
+    Taro.navigateTo({
+      url: `/mode_user/message/chat/index?user_id=${user_info.id}&nickname=${user_info.nickname}`,
+    });
+  };
+
+  // 处理球局详情
+  const handle_game_detail = (game_id: string) => {
+    Taro.navigateTo({
+      url: `/game_pages/detail/index?id=${game_id}&from=personal`,
+    });
+  };
+
+  return (
+    <View className="other_user_page">
+      {/* 主要内容 */}
+      <View className="main_content">
+        {/* 用户信息区域 */}
+        <View className="user_info_section">
+          <UserInfoCard
+            user_info={user_info}
+            is_current_user={false}
+            is_following={is_following}
+            on_follow={handle_follow}
+            on_message={handle_send_message}
+          />
+        </View>
+
+        {/* 球局类型标签页 */}
+        <GameTabs
+          active_tab={active_tab}
+          on_tab_change={setActiveTab}
+          is_current_user={false}
+        />
+
+        {/* 球局列表 */}
+        <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_cards">
+            {game_records.map((game) => (
+              <GameCard
+                key={game.id}
+                game={game}
+                on_click={handle_game_detail}
+              />
+            ))}
+          </View>
+        </View>
+      </View>
+      <GuideBar currentPage="personal" />
+    </View>
+  );
+};
+
+export default OtherUserPage;