bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个人页点击昵称弹出修改昵称弹窗

Browse Source
This commit is contained in:
Ultrame
2025-11-18 17:23:37 +08:00
parent c8cf22507c
commit 5ecb352d1b
2 changed files with 83 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/UserInfo/index.tsx
View File

@@ -10,7 +10,7 @@ import { useUserActions } from "@/store/userStore";
import { UserInfoType } from "@/services/userService";
import { useCities, useProfessions } from "@/store/pickerOptionsStore";
import { formatNtrpDisplay } from "@/utils/helper";
import FamilyContext from '@/context';
import FamilyContext from "@/context";
// 用户信息接口
// export interface UserInfo {
@@ -105,12 +105,22 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
});
useEffect(() => {
const visibles = [gender_picker_visible, location_picker_visible, ntrp_picker_visible, occupation_picker_visible]
const showGuideBar = visibles.every(item => !item)
const visibles = [
gender_picker_visible,
location_picker_visible,
ntrp_picker_visible,
occupation_picker_visible,
];
const showGuideBar = visibles.every((item) => !item);
if (showGuideBar) {
handleGrandchildTrigger(false)
handleGrandchildTrigger(false);
}
}, [gender_picker_visible, location_picker_visible, ntrp_picker_visible, occupation_picker_visible])
}, [
gender_picker_visible,
location_picker_visible,
ntrp_picker_visible,
occupation_picker_visible,
]);
// 职业数据
const professions = useProfessions();
@@ -142,7 +152,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
// };
// 处理编辑弹窗
const handle_open_edit_modal = (field: string) => {
handleGrandchildTrigger(true)
handleGrandchildTrigger(true);
if (field === "gender") {
setGenderPickerVisible(true);
return;
@@ -161,11 +171,11 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
}
if (field === "nickname") {
// 手动输入
handleGrandchildTrigger(true)
handleGrandchildTrigger(true);
setEditingField(field);
setEditModalVisible(true);
} else {
handleGrandchildTrigger(true)
handleGrandchildTrigger(true);
setEditingField(field);
setEditModalVisible(true);
}
@@ -178,6 +188,10 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
await updateUserInfo({ [editing_field]: value });
set_form_data((prev) => {
return { ...prev, ...update_data };
});
// 更新本地状态
// setFormData((prev) => {
// const updated = { ...prev, [editing_field]: value };
@@ -338,7 +352,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
/>
</View>
<View className="info_container">
<Text className="nickname">{user_info.nickname || ""}</Text>
<Text
className="nickname"
onClick={() => {
handle_open_edit_modal("nickname");
}}
>
{user_info.nickname || ""}
</Text>
<Text className="join_date">{user_info.join_date || ""}</Text>
</View>
{is_current_user && (
@@ -472,7 +493,9 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
editable && handle_open_edit_modal("ntrp_level");
}}
>
<Text className="tag_text">{`NTRP ${formatNtrpDisplay(user_info.ntrp_level)}`}</Text>
<Text className="tag_text">{`NTRP ${formatNtrpDisplay(
user_info.ntrp_level
)}`}</Text>
</View>
) : is_current_user ? (
<View
@@ -521,14 +544,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
</View>
) : null}
</View>
<View className="personal_profile"
onClick={() => handle_open_edit_modal("personal_profile")}>
<View
className="personal_profile"
onClick={() => handle_open_edit_modal("personal_profile")}
>
{user_info.personal_profile ? (
<Text className="bio_text">{user_info.personal_profile}</Text>
) : is_current_user ? (
<View
className="personal_profile_edit"
>
<View className="personal_profile_edit">
<Image
className="edit_icon"
src={require("../../static/userInfo/info_edit.svg")}
@@ -541,6 +564,25 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
{/* 编辑个人简介弹窗 */}
<EditModal
visible={edit_modal_visible}
type={editing_field}
title={editing_field === "nickname" ? "编辑名字" : "编辑简介"}
placeholder={
editing_field === "nickname"
? "请输入您的名字"
: "介绍一下你的喜好，或者训练习惯"
}
initialValue={form_data[editing_field as keyof typeof form_data] || ""}
maxLength={editing_field === "nickname" ? 20 : 100}
onSave={handle_edit_modal_save}
onCancel={handle_edit_modal_cancel}
validationMessage={
editing_field === "nickname"
? "请填写 1-20 个字符"
: "请填写 2-100 个字符"
}
/>
{/* <EditModal
visible={edit_modal_visible}
type={editing_field}
title="编辑简介"
@@ -550,7 +592,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
onSave={handle_edit_modal_save}
onCancel={handle_edit_modal_cancel}
validationMessage="请填写 2-100 个字符"
/>
/> */}
{/* 性别选择弹窗 */}
{gender_picker_visible && (
<PopupPicker
@@ -632,7 +674,10 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
};
// 自定义比较函数：只在关键 props 变化时重新渲染
const arePropsEqual = (prevProps: UserInfoCardProps, nextProps: UserInfoCardProps) => {
const arePropsEqual = (
prevProps: UserInfoCardProps,
nextProps: UserInfoCardProps
) => {
// 使用 JSON.stringify 进行深度比较（注意：对于复杂对象可能有性能问题）
const prevUserInfoStr = JSON.stringify(prevProps.user_info);
const nextUserInfoStr = JSON.stringify(nextProps.user_info);
@@ -781,8 +826,9 @@ export const GameTabs: React.FC<GameTabsProps> = ({
<Text className="tab_text">{hosted_text}</Text>
</View>
<View
className={`tab_item ${active_tab === "participated" ? "active" : ""
}`}
className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`}
onClick={() => on_tab_change("participated")}
>
<Text className="tab_text">{participated_text}</Text>