他人页

2025-09-15 21:13:13 +08:00
parent 7a0bc71f9f
commit f4c7840130
6 changed files with 95 additions and 49 deletions
--- a/src/components/UserInfo/index.scss
+++ b/src/components/UserInfo/index.scss
@@ -98,6 +98,8 @@
      display: flex;
      align-items: center;
      gap: 12px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 20px;

      .follow_button {
        display: flex;
@@ -106,14 +108,22 @@
        padding: 12px 16px 12px 12px;
        height: 40px;
        background: #000000;
-        border: 0.5px solid rgba(0, 0, 0, 0.06);
-        border-radius: 999px;
+        border: none;
+        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;

        &.following {
          background: #FFFFFF;
          color: #000000;
+
+          .button_text {
+            color: #000000 !important;
+          }
+        }
+
+        &:after {
+          border: none;
        }

        .button_icon {
@@ -127,10 +137,6 @@
          font-size: 14px;
          line-height: 1.4em;
          color: #FFFFFF;
-
-          .following & {
-            color: #000000;
-          }
        }
      }

@@ -140,7 +146,7 @@
        padding: unset;
        background: #FFFFFF;
        border: 0.5px solid rgba(0, 0, 0, 0.12);
-        border-radius: 999px;
+        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
@@ -251,7 +257,8 @@
        position: relative;
        padding-right: 20px;

-        &::before, &::after {
+        &::before,
+        &::after {
          content: '';
          width: 6px;
          height: 1px;
@@ -262,6 +269,7 @@
          transform: rotate(45deg);
          margin-left: 4px;
        }
+
        &::after {
          transform: rotate(-45deg);
          translate: 4.2px 0;
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -8,7 +8,7 @@ import { UserService } from "@/services/userService";

 // 用户信息接口
 export interface UserInfo {
-  id: string;
+  id: string | number;
  nickname: string;
  avatar: string;
  join_date: string;
@@ -169,20 +169,20 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
                  ? "@/static/userInfo/following.svg"
                  : "@/static/userInfo/unfollow.svg")}
              />
-              <Text className="button_text">
+              <Text className={`button_text ${is_following ? "following" : ""}`}>
                {is_following ? "已关注" : "关注"}
              </Text>
            </Button>
          )}
          {/* 只有非当前用户才显示消息按钮 */}
-          {!is_current_user && on_message && (
+          {/* {!is_current_user && on_message && (
            <Button className="message_button" onClick={on_message}>
              <Image
                className="button_icon"
                src={require("@/static/userInfo/chat.svg")}
              />
            </Button>
-          )}
+          )} */}

          {/* 只有当前用户才显示分享按钮 */}
          {is_current_user && on_share && (
--- a/src/services/userService.ts
+++ b/src/services/userService.ts
@@ -218,7 +218,7 @@ export class UserService {
      if (response.code === 0) {
        const userData = response.data;
        return {
-          id: userData.user_code || user_id || '',
+          id: userData.user_code || userData.id || '',
          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}月加入` : '',
@@ -285,7 +285,7 @@ export class UserService {
  }

  // 获取用户主办的球局
-  static async get_hosted_games(userId: string): Promise<any[]> {
+  static async get_hosted_games(userId: string | number): Promise<any[]> {
    try {
      const response = await httpService.post<any>(API_CONFIG.USER.HOSTED_GAMES, {
        userId
@@ -308,7 +308,7 @@ export class UserService {
  }

  // 获取用户参与的球局
-  static async get_participated_games(userId: string): Promise<any[]> {
+  static async get_participated_games(userId: string | number): Promise<any[]> {
    try {
      const response = await httpService.post<any>(API_CONFIG.USER.PARTICIPATED_GAMES, {
        userId
@@ -332,7 +332,7 @@ export class UserService {
  }

  // 获取用户球局记录（兼容旧方法）
-  static async get_user_games(user_id: string, type: 'hosted' | 'participated'): Promise<any[]> {
+  static async get_user_games(user_id: string | number, type: 'hosted' | 'participated'): Promise<any[]> {
    if (type === 'hosted') {
      return this.get_hosted_games(user_id);
    } else {
@@ -341,10 +341,10 @@ export class UserService {
  }

  // 关注/取消关注用户
-  static async toggle_follow(user_id: string, is_following: boolean): Promise<boolean> {
+  static async toggle_follow(following_id: string | number, is_following: boolean): Promise<boolean> {
    try {
      const endpoint = is_following ? API_CONFIG.USER.UNFOLLOW : API_CONFIG.USER.FOLLOW;
-      const response = await httpService.post<any>(endpoint, { user_id }, {
+      const response = await httpService.post<any>(endpoint, { following_id }, {

        showLoading: true,
        loadingText: is_following ? '取消关注中...' : '关注中...'
--- a/src/user_pages/myself/index.tsx
+++ b/src/user_pages/myself/index.tsx
@@ -19,7 +19,7 @@ const MyselfPage: React.FC = () => {

  // 用户信息状态
  const [user_info, set_user_info] = useState<UserInfo>({
-    id: "1",
+    id: "",
    nickname: "加载中...",
    avatar: require("@/static/userInfo/default_avatar.svg"),
    join_date: "加载中...",
@@ -54,11 +54,8 @@ const MyselfPage: React.FC = () => {
      set_loading(true);

      // 获取用户信息（包含统计数据）
-      const user_data = await UserService.get_user_info(user_id);
+      const user_data = await UserService.get_user_info();
      set_user_info(user_data);
-
-      // 获取球局记录
-      load_game_data();
      // let games_data;
      // if (active_tab === "hosted") {
      //   games_data = await UserService.get_hosted_games(user_id);
@@ -78,6 +75,12 @@ const MyselfPage: React.FC = () => {
    }
  };

+  useEffect(() => {
+    if (user_info.id) {
+      load_game_data(); // 在 user_info 更新后调用
+    }
+  }, [user_info]);
+
  // 页面加载时获取数据
  // useEffect(() => {
  //   load_user_data();
--- a/src/user_pages/other/index.scss
+++ b/src/user_pages/other/index.scss
@@ -158,7 +158,7 @@
          height: 40px;
          background: #ffffff;
          border: 0.5px solid rgba(0, 0, 0, 0.12);
-          border-radius: 999px;
+          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
--- a/src/user_pages/other/index.tsx
+++ b/src/user_pages/other/index.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, ScrollView } from "@tarojs/components";
+import ListContainer from "@/container/listContainer";
 import Taro from "@tarojs/taro";
 import "./index.scss";
 // import GuideBar from "@/components/GuideBar";
 import {
  UserInfoCard,
-  GameCard,
+  // GameCard,
  GameTabs,
  UserInfo,
  GameRecord,
@@ -21,15 +22,15 @@ const OtherUserPage: React.FC = () => {
  // 模拟用户数据
  const [user_info, setUserInfo] = useState<UserInfo>({
    id: user_id || "1",
-    gender:"",
+    gender: "",
    nickname: "网球爱好者",
    avatar: require("@/static/userInfo/default_avatar.svg"),
    join_date: "2024年3月加入",
    stats: {
-      following: 89,
-      friends: 15,
-      hosted: 12,
-      participated: 35,
+      following: 0,
+      friends: 0,
+      hosted: 0,
+      participated: 0,
    },
    tags: ["北京朝阳", "金融从业者", "NTRP 3.5"],
    bio: "热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动",
@@ -47,6 +48,8 @@ const OtherUserPage: React.FC = () => {
  // 关注状态
  const [is_following, setIsFollowing] = useState(false);

+  const [loading, set_loading] = useState(true);
+
  // 当前激活的标签页
  const [active_tab, setActiveTab] = useState<"hosted" | "participated">(
    "hosted"
@@ -62,13 +65,12 @@ const OtherUserPage: React.FC = () => {
          const { data: userData } = res;
          // setUserInfo({...res.data as UserInfo, avatar: data.avatar_url || require("@/static/userInfo/default_avatar.svg")});
          setUserInfo({
-            id: userData.user_code || user_id || "",
+            id: user_id || "",
            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: {
              following: userData.stats?.following_count || 0,
@@ -85,12 +87,7 @@ const OtherUserPage: React.FC = () => {
            gender: userData.gender || "",
            birthday: userData.birthday || "",
          });
-
-          const games_data = await UserService.get_user_games(
-            user_id,
-            active_tab
-          );
-          setGameRecords(games_data);
+          setIsFollowing(userData.is_following || false);
        } catch (error) {
          console.error("加载用户数据失败:", error);
          Taro.showToast({
@@ -102,7 +99,31 @@ const OtherUserPage: React.FC = () => {
    };

    load_user_data();
-  }, [user_id, active_tab]);
+  }, [user_id]);
+
+  const load_game_data = async () => {
+    try {
+      set_loading(true);
+      const games_data = await UserService.get_user_games(
+        user_id || "",
+        active_tab
+      );
+      setGameRecords(games_data);
+    } catch (error) {
+      console.error("加载球局数据失败:", error);
+      Taro.showToast({
+        title: "加载失败，请重试",
+        icon: "error",
+        duration: 2000,
+      });
+    } finally {
+      set_loading(false);
+    }
+  };
+
+  useEffect(() => {
+    load_game_data();
+  }, [active_tab]);

  // 处理关注/取消关注
  const handle_follow = async () => {
@@ -134,11 +155,11 @@ const OtherUserPage: React.FC = () => {
  };

  // 处理球局详情
-  const handle_game_detail = (game_id: string) => {
-    Taro.navigateTo({
-      url: `/game_pages/detail/index?id=${game_id}&from=personal`,
-    });
-  };
+  // 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">
@@ -170,8 +191,22 @@ const OtherUserPage: React.FC = () => {
            <Text className="weekday_text">星期六</Text>
          </View>

+          {/* 球局列表 */}
+          <View className="game_list_section">
+            <ScrollView scrollY>
+              <ListContainer
+                data={game_records}
+                recommendList={[]}
+                loading={loading}
+                error={null}
+                reload={load_game_data}
+                loadMoreMatches={() => { }}
+              />
+            </ScrollView>
+          </View>
+
          {/* 球局卡片 */}
-          <View className="game_cards">
+          {/* <View className="game_cards">
            {game_records.map((game) => (
              <GameCard
                key={game.id}
@@ -179,7 +214,7 @@ const OtherUserPage: React.FC = () => {
                on_click={handle_game_detail}
              />
            ))}
-          </View>
+          </View> */}
        </View>
      </View>
      {/* <GuideBar currentPage="personal" /> */}