146 lines
4.2 KiB
TypeScript
146 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { View, Text, ScrollView } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
import './index.scss';
|
||
import GuideBar from '@/components/GuideBar';
|
||
import { UserInfoCard, GameCard, GameTabs, UserInfo, GameRecord } from '@/components/UserInfo';
|
||
import { UserService } from '@/services/userService';
|
||
|
||
const OtherUserPage: React.FC = () => {
|
||
// 获取页面参数
|
||
const instance = Taro.getCurrentInstance();
|
||
const user_id = instance.router?.params?.userid;
|
||
|
||
// 模拟用户数据
|
||
const [user_info, setUserInfo] = useState<UserInfo>({
|
||
id: user_id || '1',
|
||
nickname: '网球爱好者',
|
||
avatar: require('../../../static/userInfo/default_avatar.svg'),
|
||
join_date: '2024年3月加入',
|
||
stats: {
|
||
following: 89,
|
||
friends: 15,
|
||
hosted: 12,
|
||
participated: 35
|
||
},
|
||
tags: ['北京朝阳', '金融从业者', 'NTRP 3.5'],
|
||
bio: '热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动',
|
||
location: '北京朝阳',
|
||
occupation: '金融从业者',
|
||
ntrp_level: 'NTRP 3.5'
|
||
});
|
||
|
||
// 模拟球局数据
|
||
const [game_records, setGameRecords] = useState<GameRecord[]>([]);
|
||
|
||
// 关注状态
|
||
const [is_following, setIsFollowing] = useState(false);
|
||
|
||
// 当前激活的标签页
|
||
const [active_tab, setActiveTab] = useState<'hosted' | 'participated'>('hosted');
|
||
|
||
// 页面加载时获取用户信息
|
||
useEffect(() => {
|
||
const load_user_data = async () => {
|
||
if (user_id) {
|
||
try {
|
||
const user_data = await UserService.get_user_info(user_id);
|
||
setUserInfo(user_data);
|
||
|
||
const games_data = await UserService.get_user_games(user_id, active_tab);
|
||
setGameRecords(games_data);
|
||
} catch (error) {
|
||
console.error('加载用户数据失败:', error);
|
||
Taro.showToast({
|
||
title: '加载失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
load_user_data();
|
||
}, [user_id, active_tab]);
|
||
|
||
// 处理关注/取消关注
|
||
const handle_follow = async () => {
|
||
try {
|
||
const new_follow_status = await UserService.toggle_follow(user_info.id, is_following);
|
||
setIsFollowing(new_follow_status);
|
||
Taro.showToast({
|
||
title: new_follow_status ? '关注成功' : '已取消关注',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
} catch (error) {
|
||
console.error('关注操作失败:', error);
|
||
Taro.showToast({
|
||
title: '操作失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 处理发送消息
|
||
const handle_send_message = () => {
|
||
Taro.navigateTo({
|
||
url: `/pages/message/chat/index?user_id=${user_info.id}&nickname=${user_info.nickname}`
|
||
});
|
||
};
|
||
|
||
|
||
// 处理球局详情
|
||
const handle_game_detail = (game_id: string) => {
|
||
Taro.navigateTo({
|
||
url: `/pages/detail/index?id=${game_id}`
|
||
});
|
||
};
|
||
|
||
return (
|
||
<View className="other_user_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}
|
||
on_message={handle_send_message}
|
||
/>
|
||
</View>
|
||
|
||
{/* 球局类型标签页 */}
|
||
<GameTabs
|
||
active_tab={active_tab}
|
||
on_tab_change={setActiveTab}
|
||
is_current_user={false}
|
||
/>
|
||
|
||
{/* 球局列表 */}
|
||
<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_cards">
|
||
{game_records.map((game) => (
|
||
<GameCard
|
||
key={game.id}
|
||
game={game}
|
||
on_click={handle_game_detail}
|
||
/>
|
||
))}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<GuideBar currentPage='personal' />
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default OtherUserPage; |