119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { View, Text, Image } from "@tarojs/components";
|
||
import Taro from "@tarojs/taro";
|
||
import "./index.scss";
|
||
import { UserService, UserInfoType } from "@/services/userService";
|
||
import * as LoginService from "@/services/loginService";
|
||
import { useGlobalState } from "@/store/global";
|
||
import { GeneralNavbar } from "@/components";
|
||
|
||
const OtherUserPage: React.FC = () => {
|
||
// 获取页面参数
|
||
const instance = Taro.getCurrentInstance();
|
||
const user_id = instance.router?.params?.userid;
|
||
|
||
// 获取导航栏高度信息
|
||
const { statusNavbarHeightInfo } = useGlobalState() || {};
|
||
const { totalHeight = 98 } = statusNavbarHeightInfo || {};
|
||
|
||
// 模拟用户数据
|
||
const [user_info, setUserInfo] = useState<Partial<UserInfoType>>({
|
||
id: parseInt(user_id || "1") || 1,
|
||
gender: "",
|
||
nickname: "网球爱好者",
|
||
avatar_url: require("@/static/userInfo/default_avatar.svg"),
|
||
join_date: "2024年3月加入",
|
||
stats: {
|
||
following_count: 0,
|
||
followers_count: 0,
|
||
hosted_games_count: 0,
|
||
participated_games_count: 0,
|
||
},
|
||
tags: ["北京朝阳", "金融从业者", "NTRP 3.5"],
|
||
bio: "热爱网球的金融从业者，周末喜欢约球\n技术还在提升中，欢迎一起切磋\n平时在朝阳公园附近活动",
|
||
city: "北京",
|
||
district: "朝阳",
|
||
occupation: "金融从业者",
|
||
ntrp_level: "NTRP 3.5",
|
||
is_following: false,
|
||
ongoing_games: [],
|
||
personal_profile: "",
|
||
});
|
||
|
||
// 页面加载时获取用户信息
|
||
useEffect(() => {
|
||
const load_user_data = async () => {
|
||
if (user_id) {
|
||
try {
|
||
// const user_data = await UserService.get_user_info(user_id);
|
||
const res = await LoginService.getUserInfoById(user_id);
|
||
const { data: userData } = res;
|
||
// setUserInfo({...res.data as UserInfo, avatar: data.avatar_url || require("@/static/userInfo/default_avatar.svg")});
|
||
setUserInfo({
|
||
id: parseInt(user_id || "") || 0,
|
||
nickname: userData.nickname || "",
|
||
avatar_url: userData.avatar_url || "",
|
||
join_date: userData.subscribe_time
|
||
? `${new Date(userData.subscribe_time).getFullYear()}年${new Date(userData.subscribe_time).getMonth() + 1
|
||
}月加入`
|
||
: "",
|
||
stats: {
|
||
following_count: userData.stats?.following_count || 0,
|
||
followers_count: userData.stats?.followers_count || 0,
|
||
hosted_games_count: userData.stats?.hosted_games_count || 0,
|
||
participated_games_count:
|
||
userData.stats?.participated_games_count || 0,
|
||
},
|
||
|
||
personal_profile: userData.personal_profile || "",
|
||
province: userData.province || "",
|
||
city: userData.city || "",
|
||
district: userData.district || "",
|
||
occupation: userData.occupation || "",
|
||
ntrp_level: "",
|
||
phone: userData.phone || "",
|
||
gender: userData.gender || "",
|
||
birthday: userData.birthday || "",
|
||
});
|
||
setIsFollowing(userData.is_following || false);
|
||
} catch (error) {
|
||
console.error("加载用户数据失败:", error);
|
||
Taro.showToast({
|
||
title: "加载失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
load_user_data();
|
||
}, [user_id]);
|
||
|
||
return (
|
||
<View className="page_container">
|
||
{/* 顶部导航栏 */}
|
||
<GeneralNavbar
|
||
title=""
|
||
showBack={true}
|
||
showAvatar={false}
|
||
onBack={() => {
|
||
Taro.navigateBack();
|
||
}}
|
||
/>
|
||
{/* 主要内容 */}
|
||
<View className="main_content" style={{ paddingTop: `${totalHeight}px` }}>
|
||
<Text className="title-text">你应该会想加入这里</Text>
|
||
<Text>你会在这里遇见相似的人，和更好的自己。</Text>
|
||
<Image className="qrcode" mode="scaleToFill" src={require("@/static/userInfo/group-qrcode.svg")} showMenuByLongpress></Image>
|
||
<Text className="hint-text">长按入群吧👆让运动不再一个人</Text>
|
||
<Text>你不是一个人在寻找球友。</Text>
|
||
<Text>你想认识的人，也在找你。</Text>
|
||
<Text>每一个热爱运动的人，</Text>
|
||
<Text>都在这里相遇。</Text>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default OtherUserPage;
|