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

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>
   );
 };