308 lines
8.9 KiB
TypeScript
308 lines
8.9 KiB
TypeScript
import React from 'react';
|
|
import Taro from '@tarojs/taro';
|
|
import { View, Text, Image, Button } from '@tarojs/components';
|
|
import './index.scss';
|
|
|
|
// 用户信息接口
|
|
export interface UserInfo {
|
|
id: string;
|
|
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;
|
|
|
|
latitude?: number,
|
|
longitude?: number,
|
|
}
|
|
|
|
|
|
// 用户信息卡片组件属性
|
|
interface UserInfoCardProps {
|
|
user_info: UserInfo;
|
|
is_current_user: boolean;
|
|
is_following?: boolean;
|
|
on_follow?: () => void;
|
|
on_message?: () => void;
|
|
on_share?: () => void;
|
|
}
|
|
|
|
|
|
// 处理编辑用户信息
|
|
const on_edit = () => {
|
|
Taro.navigateTo({
|
|
url: '/pages/userInfo/edit/index'
|
|
});
|
|
};
|
|
// 用户信息卡片组件
|
|
export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
|
user_info,
|
|
is_current_user,
|
|
is_following = false,
|
|
on_follow,
|
|
on_message,
|
|
on_share
|
|
}) => {
|
|
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>
|
|
<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">
|
|
<Text className="stat_number">{user_info.stats.following}</Text>
|
|
<Text className="stat_label">关注</Text>
|
|
</View>
|
|
<View className="stat_item">
|
|
<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('../../static/userInfo/plus.svg')}
|
|
/>
|
|
<Text className="button_text">
|
|
{is_following ? '已关注' : '关注'}
|
|
</Text>
|
|
</Button>
|
|
)}
|
|
{/* 只有非当前用户才显示消息按钮 */}
|
|
{!is_current_user && on_message && (
|
|
<Button className="message_button" onClick={on_message}>
|
|
<Image
|
|
className="button_icon"
|
|
src={require('../../static/userInfo/message.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">
|
|
<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>
|
|
<View className="tag_item">
|
|
<Text className="tag_text">{user_info.ntrp_level || '未设置'}</Text>
|
|
</View>
|
|
<View className="tag_item">
|
|
<Text className="tag_text">{user_info.occupation || '未设置'}</Text>
|
|
</View>
|
|
<View className="tag_item">
|
|
<Image
|
|
className="tag_icon"
|
|
src={require('../../static/userInfo/location.svg')}
|
|
/>
|
|
<Text className="tag_text">{user_info.location || '未设置'}</Text>
|
|
</View>
|
|
</View>
|
|
<Text className="bio_text">{user_info.personal_profile}</Text>
|
|
</View>
|
|
</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;
|
|
images: 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.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}
|
|
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>
|
|
);
|
|
}; |