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

82
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,7 +826,8 @@ 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")}
>

19
src/user_pages/edit/index.tsx
View File

@@ -316,7 +316,11 @@ const EditProfilePage: React.FC = () => {
// 处理地区选择
const handle_location_change = (e: any) => {
if (!Array.isArray(e) || e.length < 3 || e.some((v) => v === undefined || v === null)) {
if (
!Array.isArray(e) ||
e.length < 3 ||
e.some((v) => v === undefined || v === null)
) {
Taro.showToast({
title: "请完整选择地区",
icon: "none",
@@ -327,7 +331,7 @@ const EditProfilePage: React.FC = () => {
handle_field_edit({
country: String(country ?? ""),
province: String(province ?? ""),
city: String(city ?? "")
city: String(city ?? ""),
});
};
@@ -346,7 +350,11 @@ const EditProfilePage: React.FC = () => {
// 处理职业选择
const handle_occupation_change = (e: any) => {
if (!Array.isArray(e) || e.length === 0 || e.some((v) => v === undefined || v === null)) {
if (
!Array.isArray(e) ||
e.length === 0 ||
e.some((v) => v === undefined || v === null)
) {
Taro.showToast({
title: "请完整选择职业",
icon: "none",
@@ -354,7 +362,10 @@ const EditProfilePage: React.FC = () => {
return;
}
// 职业可能是多级联动，将所有选中的值用空格连接
const occupation_value = e.map((v) => String(v ?? "")).filter(Boolean).join(" ");
const occupation_value = e
.map((v) => String(v ?? ""))
.filter(Boolean)
.join(" ");
handle_field_edit("occupation", occupation_value);
};