取消关注添加确认弹窗、个人页添加往期球局

2025-09-22 21:33:43 +08:00
parent c4d387473c
commit 186d5b8a3a
8 changed files with 206 additions and 58 deletions
--- a/src/user_pages/follow/index.tsx
+++ b/src/user_pages/follow/index.tsx
@@ -6,6 +6,7 @@ import FollowUserCard from '@/components/FollowUserCard';
 import { FollowService, FollowUser } from '@/services/followService';
 import { withAuth } from '@/components';
 import './index.scss';
+import CommonDialog from '@/components/CommonDialog'

 // 标签页类型
 type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend';
@@ -22,7 +23,7 @@ const FollowPage: React.FC = () => {
  // 获取页面参数，支持指定默认标签页
  const instance = Taro.getCurrentInstance();
  const default_tab = (instance.router?.params?.tab as TabType) || 'mutual_follow';
-  
+
  // 当前激活的标签页 - 根据设计稿默认显示互相关注
  const [active_tab, set_active_tab] = useState<TabType>(default_tab);

@@ -101,58 +102,62 @@ const FollowPage: React.FC = () => {
    load_user_list(tab, true);
  };

+  const updateFollowStatus = (user_id: number, is_following: boolean) => {
+    // 更新用户列表中的关注状态
+    set_user_lists(prev => {
+      const new_lists = { ...prev };
+
+      // 更新所有标签页中的用户状态
+      Object.keys(new_lists).forEach(tab_key => {
+        const tab = tab_key as TabType;
+        if (new_lists[tab] && Array.isArray(new_lists[tab])) {
+          new_lists[tab] = new_lists[tab].map(user => {
+            if (user.id === user_id) {
+              // 根据操作结果更新状态
+              let new_status = user.follow_status;
+              if (is_following) {
+                if (user.follow_status === 'follower') {
+                  new_status = 'mutual_follow';
+                } else if (user.follow_status === 'recommend') {
+                  new_status = 'following';
+                }
+              } else {
+                if (user.follow_status === 'mutual_follow') {
+                  new_status = 'follower';
+                } else if (user.follow_status === 'following') {
+                  new_status = 'recommend';
+                }
+              }
+              return { ...user, follow_status: new_status };
+            }
+            return user;
+          });
+        }
+      });
+
+      return new_lists;
+    });
+  };
+
  // 处理关注状态变化
  const handle_follow_change = async (user_id: number, is_following: boolean) => {
    try {
      if (is_following) {
        await FollowService.follow_user(user_id);
+        updateFollowStatus(user_id, is_following);
        // Taro.showToast({
        //   title: '关注成功',
        //   icon: 'success'
        // });
      } else {
-        await FollowService.unfollow_user(user_id);
+        showDeleteConfirm(user_id);
+        return;
        // Taro.showToast({
        //   title: '取消关注成功',
        //   icon: 'success'
        // });
      }

-      // 更新用户列表中的关注状态
-      set_user_lists(prev => {
-        const new_lists = { ...prev };
-
-        // 更新所有标签页中的用户状态
-        Object.keys(new_lists).forEach(tab_key => {
-          const tab = tab_key as TabType;
-          if (new_lists[tab] && Array.isArray(new_lists[tab])) {
-            new_lists[tab] = new_lists[tab].map(user => {
-              if (user.id === user_id) {
-                // 根据操作结果更新状态
-                let new_status = user.follow_status;
-                if (is_following) {
-                  if (user.follow_status === 'follower') {
-                    new_status = 'mutual_follow';
-                  } else if (user.follow_status === 'recommend') {
-                    new_status = 'following';
-                  }
-                } else {
-                  if (user.follow_status === 'mutual_follow') {
-                    new_status = 'follower';
-                  } else if (user.follow_status === 'following') {
-                    new_status = 'recommend';
-                  }
-                }
-                return { ...user, follow_status: new_status };
-              }
-              return user;
-            });
-          }
-        });
-
-        return new_lists;
-      });
-
    } catch (error) {
      console.error('关注操作失败:', error);
      Taro.showToast({
@@ -186,6 +191,46 @@ const FollowPage: React.FC = () => {
      });
    }
  }, [default_tab]);
+  // 取消关注确认弹窗状态
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    visible: boolean;
+    userId: number | null;
+  }>({
+    visible: false,
+    userId: null
+  })
+  // 取消关注确认弹窗
+  const showDeleteConfirm = (userId: number | null) => {
+    setDeleteConfirm({
+      visible: true,
+      userId: userId
+    })
+  }
+  // 关闭取消关注确认弹窗
+  const closeDeleteConfirm = () => {
+    setDeleteConfirm({
+      visible: false,
+      userId: null
+    })
+  }
+  // 确认取消关注
+  const confirmUnfollow = async () => {
+    try {
+      await FollowService.unfollow_user(deleteConfirm.userId!);
+      closeDeleteConfirm();
+      updateFollowStatus(deleteConfirm.userId!, false);
+      // Taro.showToast({
+      //   title: '取消关注成功',
+      //   icon: 'success'
+      // });
+    } catch (error) {
+      console.error('取消关注失败:', error);
+      Taro.showToast({
+        title: '操作失败',
+        icon: 'none'
+      });
+    }
+  }

  return (
    <View className="follow_page">
@@ -216,7 +261,7 @@ const FollowPage: React.FC = () => {
                {/* 推荐图标 SVG */}
                <View className="icon_container">
                  <View className="star_icon" />
-                  
+
                </View>
              </View>
            )}
@@ -238,6 +283,7 @@ const FollowPage: React.FC = () => {
          <FollowUserCard
            key={user.id}
            user={user}
+            tabKey={active_tab}
            onFollowChange={handle_follow_change}
          />
        )) || []}
@@ -263,6 +309,17 @@ const FollowPage: React.FC = () => {
          </View>
        )}
      </ScrollView>
+
+      {/* 取消关注确认弹窗 */}
+      <CommonDialog
+        visible={deleteConfirm.visible}
+        cancelText="取消"
+        confirmText="不再关注"
+        onCancel={closeDeleteConfirm}
+        onConfirm={confirmUnfollow}
+        contentTitle="不再关注该球友？"
+        contentDesc=""
+      />
    </View>
  );
 };
--- a/src/user_pages/myself/index.scss
+++ b/src/user_pages/myself/index.scss
@@ -365,4 +365,15 @@
      }
    }
  }
+}
+
+.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: 24px 15px;
 }
--- a/src/user_pages/myself/index.tsx
+++ b/src/user_pages/myself/index.tsx
@@ -41,6 +41,8 @@ const MyselfPage: React.FC = () => {

  // 球局记录状态
  const [game_records, set_game_records] = useState<TennisMatch[]>([]);
+  // 往期球局
+  const [ended_game_records, setEndedGameRecords] = useState<TennisMatch[]>([]);
  const [loading, set_loading] = useState(true);

  // 关注状态
@@ -99,7 +101,26 @@ const MyselfPage: React.FC = () => {
      load_game_data();
    }
  }, [active_tab]);
-
+  // 分类球局数据
+  const classifyGameRecords = (
+    game_records: TennisMatch[]
+  ): { notEndGames: TennisMatch[]; finishedGames: TennisMatch[] } => {
+    const now = new Date().getTime();
+    return game_records.reduce(
+      (result, cur) => {
+        let { end_time } = cur;
+        end_time = end_time.replace(/\s/, "T");
+        new Date(end_time).getTime() > now
+          ? result.notEndGames.push(cur)
+          : result.finishedGames.push(cur);
+        return result;
+      },
+      {
+        notEndGames: [] as TennisMatch[],
+        finishedGames: [] as TennisMatch[],
+      }
+    );
+  };
  // 加载球局数据
  const load_game_data = async () => {
    try {
@@ -109,7 +130,13 @@ const MyselfPage: React.FC = () => {
      } else {
        games_data = await UserService.get_participated_games(user_info.id);
      }
-      set_game_records(games_data);
+      const sorted_games = games_data.sort((a, b) => {
+        return new Date(a.original_start_time.replace(/\s/, 'T')).getTime() - new Date(b.original_start_time.replace(/\s/, 'T')).getTime();
+      });
+      const { notEndGames, finishedGames } = classifyGameRecords(sorted_games);
+      set_game_records(notEndGames);
+      setEndedGameRecords(finishedGames);
+      // set_game_records(games_data);
    } catch (error) {
      console.error("加载球局数据失败:", error);
    }
@@ -225,6 +252,41 @@ const MyselfPage: React.FC = () => {
            />
          </ScrollView>
        </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>
--- a/src/user_pages/other/index.scss
+++ b/src/user_pages/other/index.scss
@@ -554,5 +554,5 @@
  letter-spacing: 1.9%;
  color: rgba(0, 0, 0, 0.85);
  transition: color 0.3s ease;
-  padding: 12px 15px;
+  padding: 24px 15px;
 }