11
This commit is contained in:
张成
281
src/components/UserInfo/index.tsx
Normal file
281
src/components/UserInfo/index.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import React from 'react';
|
||||
import { View, Text, Image, Button } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
// 用户信息接口
|
||||
export interface UserInfo {
|
||||
id: string;
|
||||
nickname: string;
|
||||
avatar: string;
|
||||
join_date: string;
|
||||
stats: {
|
||||
following: number;
|
||||
friends: number;
|
||||
hosted: number;
|
||||
participated: number;
|
||||
};
|
||||
tags: string[];
|
||||
bio: string;
|
||||
location: string;
|
||||
occupation: string;
|
||||
ntrp_level: string;
|
||||
}
|
||||
|
||||
// 用户信息卡片组件属性
|
||||
interface UserInfoCardProps {
|
||||
user_info: UserInfo;
|
||||
is_current_user: boolean;
|
||||
is_following?: boolean;
|
||||
on_follow?: () => void;
|
||||
on_message?: () => void;
|
||||
on_edit?: () => void;
|
||||
on_share?: () => void;
|
||||
}
|
||||
|
||||
// 用户信息卡片组件
|
||||
export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
||||
user_info,
|
||||
is_current_user,
|
||||
is_following = false,
|
||||
on_follow,
|
||||
on_message,
|
||||
on_edit,
|
||||
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>
|
||||
|
||||
{/* 统计数据 */}
|
||||
<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_edit && (
|
||||
<Button className="edit_button" onClick={on_edit}>
|
||||
<Text className="button_text">编辑</Text>
|
||||
</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">
|
||||
<Image
|
||||
className="tag_icon"
|
||||
src={require('../../../static/userInfo/location.svg')}
|
||||
/>
|
||||
<Text className="tag_text">{user_info.location}</Text>
|
||||
</View>
|
||||
<View className="tag_item">
|
||||
<Text className="tag_text">{user_info.occupation}</Text>
|
||||
</View>
|
||||
<View className="tag_item">
|
||||
<Text className="tag_text">{user_info.ntrp_level}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className="bio_text">{user_info.bio}</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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user