450 lines
13 KiB
TypeScript
450 lines
13 KiB
TypeScript
import React, { useState } from "react";
|
||
import Taro from "@tarojs/taro";
|
||
import { View, Text, Image, Button } from "@tarojs/components";
|
||
import "./index.scss";
|
||
|
||
import { EditModal } from "@/components";
|
||
import { UserService } from "@/services/userService";
|
||
|
||
// 用户信息接口
|
||
export interface UserInfo {
|
||
id: string | number;
|
||
nickname: string;
|
||
avatar: string;
|
||
join_date: string;
|
||
stats: {
|
||
following: number;
|
||
friends: number;
|
||
hosted: number;
|
||
participated: number;
|
||
};
|
||
personal_profile: string;
|
||
location: string;
|
||
occupation: string;
|
||
ntrp_level: string;
|
||
phone?: string;
|
||
gender?: string;
|
||
bio?: string;
|
||
latitude?: string;
|
||
longitude?: string;
|
||
birthday?: string;
|
||
is_following?: boolean;
|
||
tags?: string[];
|
||
ongoing_games?: string[];
|
||
}
|
||
|
||
// 用户信息卡片组件属性
|
||
interface UserInfoCardProps {
|
||
user_info: UserInfo;
|
||
is_current_user: boolean;
|
||
is_following?: boolean;
|
||
on_follow?: () => void;
|
||
on_message?: () => void;
|
||
on_share?: () => void;
|
||
set_user_info?: (info: UserInfo) => void;
|
||
}
|
||
|
||
// 处理编辑用户信息
|
||
const on_edit = () => {
|
||
Taro.navigateTo({
|
||
url: "/user_pages/edit/index",
|
||
});
|
||
};
|
||
// 用户信息卡片组件
|
||
export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
||
user_info,
|
||
is_current_user,
|
||
is_following = false,
|
||
on_follow,
|
||
on_message,
|
||
on_share,
|
||
set_user_info,
|
||
}) => {
|
||
console.log("UserInfoCard 用户信息:", user_info);
|
||
// 编辑个人简介弹窗状态
|
||
const [edit_modal_visible, setEditModalVisible] = useState(false);
|
||
const [editing_field, setEditingField] = useState<string>("");
|
||
|
||
// 表单状态
|
||
const [form_data, setFormData] = useState<UserInfo>({ ...user_info });
|
||
|
||
// 处理编辑弹窗
|
||
const handle_open_edit_modal = (field: string) => {
|
||
if (field === "nickname") {
|
||
// 手动输入
|
||
setEditingField(field);
|
||
setEditModalVisible(true);
|
||
} else {
|
||
setEditingField(field);
|
||
setEditModalVisible(true);
|
||
}
|
||
};
|
||
const handle_edit_modal_save = async (value: string) => {
|
||
try {
|
||
// 调用更新用户信息接口，只传递修改的字段
|
||
const update_data = { [editing_field]: value };
|
||
await UserService.update_user_info(update_data);
|
||
|
||
// 更新本地状态
|
||
setFormData((prev) => {
|
||
const updated = { ...prev, [editing_field]: value };
|
||
typeof set_user_info === "function" && set_user_info(updated);
|
||
return updated;
|
||
});
|
||
|
||
// 关闭弹窗
|
||
setEditModalVisible(false);
|
||
setEditingField("");
|
||
|
||
// 显示成功提示
|
||
Taro.showToast({
|
||
title: "保存成功",
|
||
icon: "success",
|
||
});
|
||
} catch (error) {
|
||
console.error("保存失败:", error);
|
||
Taro.showToast({
|
||
title: "保存失败",
|
||
icon: "error",
|
||
});
|
||
}
|
||
};
|
||
|
||
const handle_edit_modal_cancel = () => {
|
||
setEditModalVisible(false);
|
||
setEditingField("");
|
||
};
|
||
|
||
// 处理统计项点击
|
||
const handle_stats_click = (type: 'following' | 'friends' | 'hosted' | 'participated') => {
|
||
// 只有当前用户才能查看关注相关页面
|
||
if (!is_current_user) {
|
||
Taro.showToast({
|
||
title: '暂不支持查看他人关注信息',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (type === 'following') {
|
||
// 跳转到关注列表页面
|
||
Taro.navigateTo({
|
||
url: '/user_pages/follow/index?tab=following'
|
||
});
|
||
} else if (type === 'friends') {
|
||
// 跳转到球友（粉丝）页面，显示粉丝标签
|
||
Taro.navigateTo({
|
||
url: '/user_pages/follow/index?tab=follower'
|
||
});
|
||
}
|
||
// 主办和参加暂时不处理，可以后续扩展
|
||
};
|
||
|
||
return (
|
||
<View className="user_info_card">
|
||
{/* 头像和基本信息 */}
|
||
<View className="basic_info">
|
||
<View className="avatar_container">
|
||
<Image className="avatar" src={user_info.avatar} />
|
||
</View>
|
||
<View className="info_container">
|
||
<Text className="nickname">{user_info.nickname}</Text>
|
||
<Text className="join_date">{user_info.join_date}</Text>
|
||
</View>
|
||
{is_current_user && (
|
||
<View className="tag_item" onClick={on_edit}>
|
||
<Image
|
||
className="tag_icon"
|
||
src={require("../../static/userInfo/edit.svg")}
|
||
/>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
{/* 统计数据 */}
|
||
<View className="stats_section">
|
||
<View className="stats_container">
|
||
<View className="stat_item clickable" onClick={() => handle_stats_click('following')}>
|
||
<Text className="stat_number">{user_info.stats.following}</Text>
|
||
<Text className="stat_label">关注</Text>
|
||
</View>
|
||
<View className="stat_item clickable" onClick={() => handle_stats_click('friends')}>
|
||
<Text className="stat_number">{user_info.stats.friends}</Text>
|
||
<Text className="stat_label">球友</Text>
|
||
</View>
|
||
<View className="stat_item">
|
||
<Text className="stat_number">{user_info.stats.hosted}</Text>
|
||
<Text className="stat_label">主办</Text>
|
||
</View>
|
||
<View className="stat_item">
|
||
<Text className="stat_number">{user_info.stats.participated}</Text>
|
||
<Text className="stat_label">参加</Text>
|
||
</View>
|
||
</View>
|
||
<View className="action_buttons">
|
||
{/* 只有非当前用户才显示关注按钮 */}
|
||
{!is_current_user && on_follow && (
|
||
<Button
|
||
className={`follow_button ${is_following ? "following" : ""}`}
|
||
onClick={on_follow}
|
||
>
|
||
<Image
|
||
className="button_icon"
|
||
src={require(is_following
|
||
? "@/static/userInfo/following.svg"
|
||
: "@/static/userInfo/unfollow.svg")}
|
||
/>
|
||
<Text className={`button_text ${is_following ? "following" : ""}`}>
|
||
{is_following ? "已关注" : "关注"}
|
||
</Text>
|
||
</Button>
|
||
)}
|
||
{/* 只有非当前用户才显示消息按钮 */}
|
||
{/* {!is_current_user && on_message && (
|
||
<Button className="message_button" onClick={on_message}>
|
||
<Image
|
||
className="button_icon"
|
||
src={require("@/static/userInfo/chat.svg")}
|
||
/>
|
||
</Button>
|
||
)} */}
|
||
|
||
{/* 只有当前用户才显示分享按钮 */}
|
||
{is_current_user && on_share && (
|
||
<Button className="share_button" onClick={on_share}>
|
||
<Text className="button_text">分享</Text>
|
||
</Button>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
{/* 标签和简介 */}
|
||
<View className="tags_bio_section">
|
||
<View className="tags_container">
|
||
{user_info.gender ? (
|
||
<View className="tag_item">
|
||
{user_info.gender === "0" && (
|
||
<Image
|
||
className="tag_icon"
|
||
src={require("../../static/userInfo/male.svg")}
|
||
/>
|
||
)}
|
||
{user_info.gender === "1" && (
|
||
<Image
|
||
className="tag_icon"
|
||
src={require("../../static/userInfo/female.svg")}
|
||
/>
|
||
)}
|
||
</View>
|
||
) : is_current_user ? (
|
||
<View className="button_edit">
|
||
<Text>选择性别</Text>
|
||
</View>
|
||
) : null}
|
||
{user_info.ntrp_level ? (
|
||
<View className="tag_item">
|
||
<Text className="tag_text">{user_info.ntrp_level}</Text>
|
||
</View>
|
||
) : is_current_user ? (
|
||
<View className="button_edit">
|
||
<Text>测测你的NTRP水平</Text>
|
||
</View>
|
||
) : null}
|
||
{user_info.occupation ? (
|
||
<View className="tag_item">
|
||
<Text className="tag_text">{user_info.occupation}</Text>
|
||
</View>
|
||
) : is_current_user ? (
|
||
<View className="button_edit">
|
||
<Text>选择职业</Text>
|
||
</View>
|
||
) : null}
|
||
{user_info.location ? (
|
||
<View className="tag_item">
|
||
<Text className="tag_text">{user_info.location}</Text>
|
||
</View>
|
||
) : is_current_user ? (
|
||
<View className="button_edit">
|
||
<Text>选择地区</Text>
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
<View className="personal_profile">
|
||
{user_info.personal_profile ? (
|
||
<Text className="bio_text">{user_info.personal_profile}</Text>
|
||
) : is_current_user ? (
|
||
<View
|
||
className="personal_profile_edit"
|
||
onClick={() => handle_open_edit_modal("personal_profile")}
|
||
>
|
||
<Image
|
||
className="edit_icon"
|
||
src={require("../../static/userInfo/info_edit.svg")}
|
||
/>
|
||
<Text className="bio_text">点击添加简介，让更多人了解你</Text>
|
||
</View>
|
||
) : null}
|
||
</View>
|
||
</View>
|
||
|
||
{/* 编辑个人简介弹窗 */}
|
||
<EditModal
|
||
visible={edit_modal_visible}
|
||
type={editing_field}
|
||
title="编辑简介"
|
||
placeholder="介绍一下你的喜好，或者训练习惯"
|
||
initialValue={form_data["personal_profile"] || ""}
|
||
maxLength={100}
|
||
onSave={handle_edit_modal_save}
|
||
onCancel={handle_edit_modal_cancel}
|
||
validationMessage="请填写 2-100 个字符"
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// 球局记录接口
|
||
export interface GameRecord {
|
||
id: string;
|
||
title: string;
|
||
date: string;
|
||
time: string;
|
||
duration: string;
|
||
location: string;
|
||
type: string;
|
||
distance: string;
|
||
participants: {
|
||
avatar: string;
|
||
nickname: string;
|
||
}[];
|
||
max_participants: number;
|
||
current_participants: number;
|
||
level_range: string;
|
||
game_type: string;
|
||
image_list: string[];
|
||
deadline_hours: number;
|
||
end_time: string;
|
||
}
|
||
|
||
// 球局卡片组件属性
|
||
interface GameCardProps {
|
||
game: GameRecord;
|
||
on_click: (game_id: string) => void;
|
||
on_participant_click?: (participant_id: string) => void;
|
||
}
|
||
|
||
// 球局卡片组件
|
||
export const GameCard: React.FC<GameCardProps> = ({
|
||
game,
|
||
on_click,
|
||
on_participant_click,
|
||
}) => {
|
||
return (
|
||
<View className="game_card" onClick={() => on_click(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.image_list.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}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
on_participant_click?.(participant.nickname);
|
||
}}
|
||
/>
|
||
))}
|
||
</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>
|
||
);
|
||
};
|
||
|
||
// 球局标签页组件属性
|
||
interface GameTabsProps {
|
||
active_tab: "hosted" | "participated";
|
||
on_tab_change: (tab: "hosted" | "participated") => void;
|
||
is_current_user: boolean;
|
||
}
|
||
|
||
// 球局标签页组件
|
||
export const GameTabs: React.FC<GameTabsProps> = ({
|
||
active_tab,
|
||
on_tab_change,
|
||
is_current_user,
|
||
}) => {
|
||
const hosted_text = is_current_user ? "我主办的" : "主办球局";
|
||
const participated_text = is_current_user ? "我参与的" : "参与球局";
|
||
|
||
return (
|
||
<View className="game_tabs_section">
|
||
<View className="tab_container">
|
||
<View
|
||
className={`tab_item ${active_tab === "hosted" ? "active" : ""}`}
|
||
onClick={() => on_tab_change("hosted")}
|
||
>
|
||
<Text className="tab_text">{hosted_text}</Text>
|
||
</View>
|
||
<View
|
||
className={`tab_item ${
|
||
active_tab === "participated" ? "active" : ""
|
||
}`}
|
||
onClick={() => on_tab_change("participated")}
|
||
>
|
||
<Text className="tab_text">{participated_text}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|