1

src/pages/userInfo/edit/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { View, Text, Image, ScrollView, Button, Input, Textarea } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import './index.scss';
-import GuideBar from '@/components/GuideBar';
 import { UserInfo } from '@/components/UserInfo';
 import { UserService } from '@/services/userService';
 
@@ -10,33 +9,70 @@ const EditProfilePage: React.FC = () => {
   // 用户信息状态
   const [user_info, setUserInfo] = useState<UserInfo>({
     id: '1',
-    nickname: '188的王晨',
+    nickname: '加载中...',
     avatar: require('../../../static/userInfo/default_avatar.svg'),
-    bio: '网球入坑两年，偏好双打，正手进攻型选手\n平时在张江、世纪公园附近活动，欢迎约球！\n不卷分数，但认真对待每一拍，每一场球都想打得开心。有时候也会带相机来拍点照片📸',
-    location: '上海黄浦',
-    occupation: '互联网从业者',
-    ntrp_level: 'NTRP 4.0'
+    join_date: '加载中...',
+    stats: {
+      following: 0,
+      friends: 0,
+      hosted: 0,
+      participated: 0
+    },
+    tags: ['加载中...'],
+    bio: '加载中...',
+    location: '加载中...',
+    occupation: '加载中...',
+    ntrp_level: 'NTRP 3.0',
+    phone: '',
+    gender: ''
   });
 
   // 表单状态
   const [form_data, setFormData] = useState({
-    nickname: user_info.nickname,
-    bio: user_info.bio,
-    location: user_info.location,
-    occupation: user_info.occupation,
-    ntrp_level: user_info.ntrp_level,
-    phone: '', // 新增手机号字段
-    gender: '' // 新增性别字段
+    nickname: '',
+    bio: '',
+    location: '',
+    occupation: '',
+    ntrp_level: 'NTRP 3.0',
+    phone: '',
+    gender: ''
   });
 
+  // 加载状态
+  const [loading, setLoading] = useState(true);
+
   // 页面加载时初始化数据
   useEffect(() => {
-    // 这里应该从store或API获取当前用户信息
-    // const currentUser = getUserInfo();
-    // setUserInfo(currentUser);
-    // setFormData(currentUser);
+    load_user_info();
   }, []);
 
+  // 加载用户信息
+  const load_user_info = async () => {
+    try {
+      setLoading(true);
+      const user_data = await UserService.get_user_info();
+      setUserInfo(user_data);
+      setFormData({
+        nickname: user_data.nickname,
+        bio: user_data.bio,
+        location: user_data.location,
+        occupation: user_data.occupation,
+        ntrp_level: user_data.ntrp_level,
+        phone: user_data.phone || '',
+        gender: user_data.gender || ''
+      });
+    } catch (error) {
+      console.error('加载用户信息失败:', error);
+      Taro.showToast({
+        title: '加载用户信息失败',
+        icon: 'error',
+        duration: 2000
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // 处理输入变化
   const handle_input_change = (field: string, value: string) => {
     setFormData(prev => ({
@@ -45,6 +81,9 @@ const EditProfilePage: React.FC = () => {
     }));
   };
 
+
+
+
   // 处理头像上传
   const handle_avatar_upload = () => {
     Taro.chooseImage({
@@ -107,6 +146,12 @@ const EditProfilePage: React.FC = () => {
     <View className="edit_profile_page">
       {/* 主要内容 */}
       <ScrollView className="main_content" scrollY>
+        {loading ? (
+          <View className="loading_container">
+            <Text className="loading_text">加载中...</Text>
+          </View>
+        ) : (
+          <>
         {/* 头部操作栏 */}
         <View className="header_section">
           <Button className="back_button" onClick={handle_back}>
@@ -231,8 +276,9 @@ const EditProfilePage: React.FC = () => {
             </View>
           </View>
         </View>
+          </>
+        )}
       </ScrollView>
-      <GuideBar currentPage='personal' />
     </View>
   );
 };

src/pages/userInfo/favorites/index.tsx

@@ -0,0 +1,13 @@
+import { View, } from '@tarojs/components';
+const OrderPage: React.FC = () => {
+
+
+    return (
+        <View className="myself_page">
+            我的收藏
+        </View>)
+
+
+}
+
+export default OrderPage;

src/pages/userInfo/myself/index.scss

@@ -27,6 +27,19 @@
     margin-bottom: 16px;
     margin-top: 98px;
 
+    // 加载状态
+    .loading_container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 40px 0;
+
+      .loading_text {
+        @include text-style(16px, 400, 1.4em);
+        color: $color-primary-lightest;
+      }
+    }
+
 
     // 统计数据
     .stats_section {

src/pages/userInfo/myself/index.tsx

@@ -3,9 +3,10 @@ import { View, Text, Image, ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import './index.scss';
 import GuideBar from '@/components/GuideBar'
-import { UserInfoCard, UserInfo, GameRecord } from '@/components/UserInfo/index'
+import { UserInfoCard, UserInfo } from '@/components/UserInfo/index'
 import { UserService } from '@/services/userService'
-
+import ListContainer from '@/container/listContainer'
+import { TennisMatch } from '../../../../types/list/types'
 
 const MyselfPage: React.FC = () => {
   // 获取页面参数
@@ -35,7 +36,7 @@ const MyselfPage: React.FC = () => {
   });
 
   // 球局记录状态
-  const [game_records, set_game_records] = useState<GameRecord[]>([]);
+  const [game_records, set_game_records] = useState<TennisMatch[]>([]);
   const [loading, set_loading] = useState(true);
 
   // 关注状态
@@ -44,50 +45,121 @@ const MyselfPage: React.FC = () => {
   // 当前激活的标签页
   const [active_tab, setActiveTab] = useState<'hosted' | 'participated'>('hosted');
 
+  // 加载用户数据
+  const load_user_data = async () => {
+    try {
+      set_loading(true);
+
+      // 获取用户信息（包含统计数据）
+      const user_data = await UserService.get_user_info(user_id);
+      set_user_info(user_data);
+
+      // 获取球局记录
+      let games_data;
+      if (active_tab === 'hosted') {
+        games_data = await UserService.get_hosted_games(user_id || '1');
+      } else {
+        games_data = await UserService.get_participated_games(user_id || '1');
+      }
+      set_game_records(games_data);
+
+    } catch (error) {
+      console.error('加载用户数据失败:', error);
+      Taro.showToast({
+        title: '加载失败，请重试',
+        icon: 'error',
+        duration: 2000
+      });
+    } finally {
+      set_loading(false);
+    }
+  };
+
+  // 页面加载时获取数据
+  useEffect(() => {
+    load_user_data();
+  }, [user_id]);
+
+  // 切换标签页时重新加载球局数据
+  useEffect(() => {
+    if (!loading) {
+      load_game_data();
+    }
+  }, [active_tab]);
+
+  // 加载球局数据
+  const load_game_data = async () => {
+    try {
+      let games_data;
+      if (active_tab === 'hosted') {
+        games_data = await UserService.get_hosted_games(user_id || '1');
+      } else {
+        games_data = await UserService.get_participated_games(user_id || '1');
+      }
+      set_game_records(games_data);
+    } catch (error) {
+      console.error('加载球局数据失败:', error);
+    }
+  };
+
   // 处理关注/取消关注
-  const handle_follow = () => {
-    setIsFollowing(!is_following);
-    Taro.showToast({
-      title: is_following ? '已取消关注' : '关注成功',
-      icon: 'success',
-      duration: 1500
-    });
+  const handle_follow = async () => {
+    try {
+      const new_following_state = await UserService.toggle_follow(user_id || '1', is_following);
+      setIsFollowing(new_following_state);
+
+      Taro.showToast({
+        title: new_following_state ? '关注成功' : '已取消关注',
+        icon: 'success',
+        duration: 1500
+      });
+    } catch (error) {
+      console.error('关注操作失败:', error);
+      Taro.showToast({
+        title: '操作失败，请重试',
+        icon: 'error',
+        duration: 2000
+      });
+    }
   };
 
 
-  // 处理球局详情
-  const handle_game_detail = (game_id: string) => {
-    Taro.navigateTo({
-      url: `/pages/game/detail/index?id=${game_id}`
-    });
-  };
 
   // 处理球局订单
   const handle_game_orders = () => {
     Taro.navigateTo({
-      url: '/pages/game/orders/index'
+      url: '/pages/userInfo/orders/index'
     });
   };
 
   // 处理收藏
   const handle_favorites = () => {
     Taro.navigateTo({
-      url: '/pages/game/favorites/index'
+      url: '/pages/userInfo/favorites/index'
     });
   };
 
+
+
   return (
     <View className="myself_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}
-          ></UserInfoCard>
+          {loading ? (
+            <View className="loading_container">
+              <Text className="loading_text">加载中...</Text>
+            </View>
+          ) : (
+            <UserInfoCard
+              user_info={user_info}
+              is_current_user={is_current_user}
+              is_following={is_following}
+              on_follow={handle_follow}
+           
+            />
+          )}
           {/* 球局订单和收藏功能 */}
           <View className="quick_actions_section">
             <View className="action_card">
@@ -124,88 +196,14 @@ const MyselfPage: React.FC = () => {
 
         {/* 球局列表 */}
         <View className="game_list_section">
-          <View className="date_header">
-            <Text className="date_text">5月28日</Text>
-            <Text className="separator">/</Text>
-            <Text className="weekday_text">星期三</Text>
-          </View>
           <ScrollView scrollY>
-            {/* 球局卡片 */}
-            <View className="game_cards">
-              {game_records.map((game) => (
-                <View
-                  key={game.id}
-                  className="game_card"
-                  onClick={() => handle_game_detail(game.id)}
-                >
-                  {/* 球局标题和类型 */}
-                  <View className="game_header">
-                    <Text className="game_title">{game.title}</Text>
-                    <View className="game_type_icon">
-                      <Image
-                        className="type_icon"
-                        src={require('../../../static/userInfo/tennis.svg')}
-                      />
-                    </View>
-                  </View>
-
-                  {/* 球局时间 */}
-                  <View className="game_time">
-                    <Text className="time_text">
-                      {game.date} {game.time} {game.duration}
-                    </Text>
-                  </View>
-
-                  {/* 球局地点和类型 */}
-                  <View className="game_location">
-                    <Text className="location_text">{game.location}</Text>
-                    <Text className="separator">·</Text>
-                    <Text className="type_text">{game.type}</Text>
-                    <Text className="separator">·</Text>
-                    <Text className="distance_text">{game.distance}</Text>
-                  </View>
-
-                  {/* 球局图片 */}
-                  <View className="game_images">
-                    {game.images.map((image, index) => (
-                      <Image
-                        key={index}
-                        className="game_image"
-                        src={image}
-                      />
-                    ))}
-                  </View>
-
-                  {/* 球局信息标签 */}
-                  <View className="game_tags">
-                    <View className="participants_info">
-                      <View className="avatars">
-                        {game.participants.map((participant, index) => (
-                          <Image
-                            key={index}
-                            className="participant_avatar"
-                            src={participant.avatar}
-                          />
-                        ))}
-                      </View>
-                      <View className="participants_count">
-                        <Text className="count_text">
-                          报名人数 {game.current_participants}/{game.max_participants}
-                        </Text>
-                      </View>
-                    </View>
-                    <View className="game_info_tags">
-                      <View className="info_tag">
-                        <Text className="tag_text">{game.level_range}</Text>
-                      </View>
-                      <View className="info_tag">
-                        <Text className="tag_text">{game.game_type}</Text>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              ))}
-            </View>
+            <ListContainer
+              data={game_records}
+              recommendList={[]}
+              loading={loading}
+              error={null}
+              reload={load_game_data}
+            />
           </ScrollView>
         </View>
       </View>

src/pages/userInfo/orders/index.tsx

@@ -0,0 +1,13 @@
+import { View, } from '@tarojs/components';
+const OrderPage: React.FC = () => {
+
+
+    return (
+        <View className="myself_page">
+            我的订单
+        </View>)
+
+
+}
+
+export default OrderPage;