完善个人页（测试NTRP水平未做）
This commit is contained in:
@@ -210,7 +210,8 @@
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tag_item {
|
||||
.tag_item,
|
||||
.button_edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
@@ -224,11 +225,7 @@
|
||||
.tag_icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
/* Frame 1912054928 */
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tag_text {
|
||||
@@ -240,15 +237,59 @@
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.button_edit {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
line-height: 1.8em;
|
||||
letter-spacing: -2.1%;
|
||||
color: rgba(60, 60, 67, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 1px;
|
||||
display: inline-block;
|
||||
background-color: rgba(60, 60, 67, 0.6);
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
transform: rotate(45deg);
|
||||
margin-left: 4px;
|
||||
}
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
translate: 4.2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bio_text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.571em;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: pre-line;
|
||||
.personal_profile {
|
||||
.personal_profile_edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.edit_icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.bio_text {
|
||||
font-family: 'PingFang SC';
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 1.571em;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
import React from 'react';
|
||||
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;
|
||||
@@ -21,9 +24,10 @@ export interface UserInfo {
|
||||
ntrp_level: string;
|
||||
phone?: string;
|
||||
gender?: string;
|
||||
|
||||
bio?: string,
|
||||
latitude?: string,
|
||||
longitude?: string,
|
||||
birthday?: string,
|
||||
}
|
||||
|
||||
|
||||
@@ -35,6 +39,7 @@ interface UserInfoCardProps {
|
||||
on_follow?: () => void;
|
||||
on_message?: () => void;
|
||||
on_share?: () => void;
|
||||
set_user_info?: (info: UserInfo) => void;
|
||||
}
|
||||
|
||||
|
||||
@@ -51,8 +56,64 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
||||
is_following = false,
|
||||
on_follow,
|
||||
on_message,
|
||||
on_share
|
||||
on_share,
|
||||
set_user_info,
|
||||
}) => {
|
||||
console.log("用户信息xx:", 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('');
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="user_info_card">
|
||||
{/* 头像和基本信息 */}
|
||||
@@ -130,7 +191,6 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
||||
<View className="tags_bio_section">
|
||||
<View className="tags_container">
|
||||
<View className="tag_item">
|
||||
|
||||
{user_info.gender === "0" && (
|
||||
<Image
|
||||
className="tag_icon"
|
||||
@@ -143,24 +203,76 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
|
||||
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>
|
||||
{
|
||||
!user_info.gender && (
|
||||
<View className='button_edit'>
|
||||
<Text>选择性别</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
{user_info.ntrp_level ?
|
||||
<View className="tag_item">
|
||||
{/* <Image
|
||||
className="tag_icon"
|
||||
src={require('../../static/userInfo/level.svg')}
|
||||
/> */}
|
||||
<Text className="tag_text">{user_info.ntrp_level}</Text>
|
||||
</View> :
|
||||
<View className="button_edit">
|
||||
<Text>测测你的NTRP水平</Text>
|
||||
</View>
|
||||
}
|
||||
{user_info.occupation ?
|
||||
<View className="tag_item">
|
||||
<Text className="tag_text">{user_info.occupation}</Text>
|
||||
</View> :
|
||||
<View className="button_edit">
|
||||
<Text>选择职业</Text>
|
||||
</View>
|
||||
}
|
||||
{user_info.location ?
|
||||
<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="button_edit">
|
||||
<Text>选择地区</Text>
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
<View className="personal_profile">
|
||||
{
|
||||
user_info.personal_profile ? (
|
||||
<Text className="bio_text">{user_info.personal_profile}</Text>
|
||||
) : (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
<Text className="bio_text">{user_info.personal_profile}</Text>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user