添加 个人页bar
This commit is contained in:
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import './index.scss';
|
||||
|
||||
import GuideBar from '@/components/GuideBar'
|
||||
// 用户信息接口
|
||||
interface UserInfo {
|
||||
id: string;
|
||||
@@ -47,10 +47,10 @@ const MyselfPage: React.FC = () => {
|
||||
// 获取页面参数
|
||||
const instance = Taro.getCurrentInstance();
|
||||
const user_id = instance.router?.params?.userid;
|
||||
|
||||
|
||||
// 判断是否为当前用户
|
||||
const is_current_user = !user_id;
|
||||
|
||||
|
||||
// 模拟用户数据
|
||||
const [user_info] = useState<UserInfo>({
|
||||
id: '1',
|
||||
@@ -193,13 +193,13 @@ const MyselfPage: React.FC = () => {
|
||||
<View className="action_buttons">
|
||||
{/* 只有非当前用户才显示关注按钮 */}
|
||||
{!is_current_user && (
|
||||
<Button
|
||||
<Button
|
||||
className={`follow_button ${is_following ? 'following' : ''}`}
|
||||
onClick={handle_follow}
|
||||
>
|
||||
<Image
|
||||
className="button_icon"
|
||||
src={require('../../../static/userInfo/plus.svg')}
|
||||
<Image
|
||||
className="button_icon"
|
||||
src={require('../../../static/userInfo/plus.svg')}
|
||||
/>
|
||||
<Text className="button_text">
|
||||
{is_following ? '已关注' : '关注'}
|
||||
@@ -209,9 +209,9 @@ const MyselfPage: React.FC = () => {
|
||||
{/* 只有非当前用户才显示消息按钮 */}
|
||||
{!is_current_user && (
|
||||
<Button className="message_button">
|
||||
<Image
|
||||
className="button_icon"
|
||||
src={require('../../../static/userInfo/message.svg')}
|
||||
<Image
|
||||
className="button_icon"
|
||||
src={require('../../../static/userInfo/message.svg')}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
@@ -234,9 +234,9 @@ const MyselfPage: React.FC = () => {
|
||||
<View className="tags_bio_section">
|
||||
<View className="tags_container">
|
||||
<View className="tag_item">
|
||||
<Image
|
||||
className="tag_icon"
|
||||
src={require('../../../static/userInfo/location.svg')}
|
||||
<Image
|
||||
className="tag_icon"
|
||||
src={require('../../../static/userInfo/location.svg')}
|
||||
/>
|
||||
<Text className="tag_text">{user_info.location}</Text>
|
||||
</View>
|
||||
@@ -254,17 +254,17 @@ const MyselfPage: React.FC = () => {
|
||||
<View className="quick_actions_section">
|
||||
<View className="action_card">
|
||||
<View className="action_content" onClick={handle_game_orders}>
|
||||
<Image
|
||||
className="action_icon"
|
||||
src={require('../../../static/userInfo/tennis.svg')}
|
||||
<Image
|
||||
className="action_icon"
|
||||
src={require('../../../static/userInfo/tennis.svg')}
|
||||
/>
|
||||
<Text className="action_text">球局订单</Text>
|
||||
</View>
|
||||
<View className="action_divider"></View>
|
||||
<View className="action_content" onClick={handle_favorites}>
|
||||
<Image
|
||||
className="action_icon"
|
||||
src={require('../../../static/userInfo/tennis.svg')}
|
||||
<Image
|
||||
className="action_icon"
|
||||
src={require('../../../static/userInfo/tennis.svg')}
|
||||
/>
|
||||
<Text className="action_text">收藏</Text>
|
||||
</View>
|
||||
@@ -291,12 +291,12 @@ const MyselfPage: React.FC = () => {
|
||||
<Text className="separator">/</Text>
|
||||
<Text className="weekday_text">星期三</Text>
|
||||
</View>
|
||||
|
||||
|
||||
{/* 球局卡片 */}
|
||||
<View className="game_cards">
|
||||
{game_records.map((game) => (
|
||||
<View
|
||||
key={game.id}
|
||||
<View
|
||||
key={game.id}
|
||||
className="game_card"
|
||||
onClick={() => handle_game_detail(game.id)}
|
||||
>
|
||||
@@ -304,9 +304,9 @@ const MyselfPage: React.FC = () => {
|
||||
<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')}
|
||||
<Image
|
||||
className="type_icon"
|
||||
src={require('../../../static/userInfo/tennis.svg')}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
@@ -330,10 +330,10 @@ const MyselfPage: React.FC = () => {
|
||||
{/* 球局图片 */}
|
||||
<View className="game_images">
|
||||
{game.images.map((image, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
className="game_image"
|
||||
src={image}
|
||||
<Image
|
||||
key={index}
|
||||
className="game_image"
|
||||
src={image}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
@@ -343,10 +343,10 @@ const MyselfPage: React.FC = () => {
|
||||
<View className="participants_info">
|
||||
<View className="avatars">
|
||||
{game.participants.map((participant, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
className="participant_avatar"
|
||||
src={participant.avatar}
|
||||
<Image
|
||||
key={index}
|
||||
className="participant_avatar"
|
||||
src={participant.avatar}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
@@ -370,6 +370,7 @@ const MyselfPage: React.FC = () => {
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<GuideBar currentPage='personal' />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user