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

src/components/FollowUserCard/index.tsx

@@ -4,12 +4,17 @@ import Taro from '@tarojs/taro';
 import { FollowUser } from '@/services/followService';
 import './index.scss';
 
+
+// 标签页类型
+type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend';
+
 interface FollowUserCardProps {
   user: FollowUser;
+  tabKey: TabType;
   onFollowChange?: (userId: number, isFollowing: boolean) => void;
 }
 
-const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange }) => {
+const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, tabKey, onFollowChange }) => {
   const [isProcessing, setIsProcessing] = useState(false);
 
   // 防御性检查
@@ -23,7 +28,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
 
     try {
       setIsProcessing(true);
-      
+
       // 根据当前状态决定操作
       let new_status = false;
       if (user.follow_status === 'follower' || user.follow_status === 'recommend') {
@@ -53,7 +58,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
     try {
       setIsProcessing(true);
       // TODO: 加入黑名单逻辑
-       Taro.showToast({
+      Taro.showToast({
         title: '不会再为您推荐该用户',
         icon: 'none'
       });
@@ -107,8 +112,8 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
   return (
     <View className="follow_user_card">
       <View className="user_info" onClick={handle_user_click}>
-        <Image 
+        <Image
-          className="avatar" 
+          className="avatar"
           src={user.avatar_url || require('@/static/userInfo/default_avatar.svg')}
         />
         <View className="user_details">
@@ -118,8 +123,8 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
           </Text>
         </View>
       </View>
-      
+
-      <View 
+      <View
         className={`action_button ${button_config.className} ${isProcessing ? 'processing' : ''}`}
         onClick={handle_follow_action}
       >
@@ -128,7 +133,7 @@ const FollowUserCard: React.FC<FollowUserCardProps> = ({ user, onFollowChange })
         </Text>
       </View>
       {
-        user.follow_status === 'recommend' && (
+        tabKey === 'recommend' && (
           <View className='delete_button' onClick={add_to_blacklist}></View>
         )
       }

src/static/userInfo/female.svg

@@ -1,5 +1,17 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.4879 3.89007V1.64008H8.23792" stroke="#FF69B4" stroke-linecap="round" stroke-linejoin="round"/>
+<g clip-path="url(#clip0_4362_21316)">
-<path d="M2.60338 9.62816C3.9702 10.995 6.18628 10.995 7.55313 9.62816C8.23655 8.94476 8.57825 8.04901 8.57825 7.15328C8.57825 6.25756 8.23655 5.36183 7.55313 4.67841C6.18628 3.31158 3.9702 3.31158 2.60338 4.67841C1.23654 6.04526 1.23654 8.26133 2.60338 9.62816Z" stroke="#FF69B4" stroke-linejoin="round"/>
+<mask id="mask0_4362_21316" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="12">
-<path d="M7.5 4.62796L9.98787 2.14008" stroke="#FF69B4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 0H0V12H12V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_4362_21316)">
+<path d="M9.5945 2.46284C8.22768 1.096 6.01158 1.096 4.64475 2.46284C3.96133 3.14626 3.61963 4.04198 3.61963 4.93771C3.61963 5.83343 3.96133 6.72916 4.64475 7.41258C6.01158 8.77941 8.22768 8.77941 9.5945 7.41258C10.9613 6.04576 10.9613 3.82968 9.5945 2.46284Z" stroke="black" stroke-linejoin="round"/>
+<path d="M4.61605 7.38385L1.43408 10.5658" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.79282 10.3891L1.61084 7.20706" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_4362_21316">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
 </svg>

src/static/userInfo/male.svg

@@ -1,5 +1,5 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.4879 3.89007V1.64008H8.23792" stroke="#4169E1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.488 3.76207V1.51208H8.23804" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.60338 9.62816C3.9702 10.995 6.18628 10.995 7.55313 9.62816C8.23655 8.94476 8.57825 8.04901 8.57825 7.15328C8.57825 6.25756 8.23655 5.36183 7.55313 4.67841C6.18628 3.31158 3.9702 3.31158 2.60338 4.67841C1.23654 6.04526 1.23654 8.26133 2.60338 9.62816Z" stroke="#4169E1" stroke-linejoin="round"/>
+<path d="M2.60325 9.50017C3.97008 10.867 6.18615 10.867 7.553 9.50017C8.23643 8.81677 8.57813 7.92102 8.57813 7.02529C8.57813 6.12957 8.23643 5.23384 7.553 4.55042C6.18615 3.18359 3.97008 3.18359 2.60325 4.55042C1.23642 5.91727 1.23642 8.13334 2.60325 9.50017Z" stroke="black" stroke-linejoin="round"/>
-<path d="M7.5 4.62796L9.98787 2.14008" stroke="#4169E1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 4.49997L9.98787 2.01208" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

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

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>

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

types/list/types.ts

@@ -10,7 +10,8 @@ export interface TennisMatch {
   skillLevel: string
   matchType: string
   images: string[]
-  shinei: string
+  shinei: string,
+  end_time: string,
 }
 export interface IFilterOptions {
   dateRange: [string, string], // 日期区间