@@ -1,4 +1,4 @@
import React , { useState , useEffect , useRef } from "react" ;
import React , { useState , useEffect , useRef , useContext } from "react" ;
import Taro , { useDidShow } from "@tarojs/taro" ;
import { View , Text , Image , Button } from "@tarojs/components" ;
import "./index.scss" ;
@@ -10,6 +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' ;
// 用户信息接口
// export interface UserInfo {
@@ -71,11 +72,12 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
set_user_info ,
onTab ,
} ) = > {
const { handleGrandchildTrigger } = useContext ( FamilyContext ) ;
const { updateUserInfo } = useUserActions ( ) ;
// 使用 useRef 记录上一次的 user_info, 只在真正变化时打印
const prevUserInfoRef = useRef < Partial < UserInfoType > > ( ) ;
useEffect ( ( ) = > {
// 只在 user_info 真正变化时打印(通过 JSON 序列化比较)
const prevStr = JSON . stringify ( prevUserInfoRef . current ) ;
@@ -85,7 +87,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
prevUserInfoRef . current = user_info ;
}
} , [ user_info ] ) ;
// 编辑个人简介弹窗状态
const [ edit_modal_visible , setEditModalVisible ] = useState ( false ) ;
const [ editing_field , setEditingField ] = useState < string > ( "" ) ;
@@ -102,6 +104,14 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
set_form_data ( { . . . user_info } ) ;
} ) ;
useEffect ( ( ) = > {
const visibles = [ gender_picker_visible , location_picker_visible , ntrp_picker_visible , occupation_picker_visible ]
const showGuideBar = visibles . every ( item = > ! item )
if ( showGuideBar ) {
handleGrandchildTrigger ( false )
}
} , [ gender_picker_visible , location_picker_visible , ntrp_picker_visible , occupation_picker_visible ] )
// 职业数据
const professions = useProfessions ( ) ;
@@ -132,6 +142,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
// };
// 处理编辑弹窗
const handle_open_edit_modal = ( field : string ) = > {
handleGrandchildTrigger ( true )
if ( field === "gender" ) {
setGenderPickerVisible ( true ) ;
return ;
@@ -150,9 +161,11 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
}
if ( field === "nickname" ) {
// 手动输入
handleGrandchildTrigger ( true )
setEditingField ( field ) ;
setEditModalVisible ( true ) ;
} else {
handleGrandchildTrigger ( true )
setEditingField ( field ) ;
setEditModalVisible ( true ) ;
}
@@ -256,6 +269,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
handle_field_edit ( "occupation" , ` ${ country } ${ province } ${ city } ` ) ;
} ;
const handle_edit_modal_cancel = ( ) = > {
handleGrandchildTrigger ( false ) ;
setEditModalVisible ( false ) ;
setEditingField ( "" ) ;
} ;
@@ -507,13 +521,13 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
< / View >
) : null }
< / View >
< View className = "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"
onClick = { ( ) = > handle_open_edit_modal ( "personal_profile" ) }
>
< Image
className = "edit_icon"
@@ -622,7 +636,7 @@ const arePropsEqual = (prevProps: UserInfoCardProps, nextProps: UserInfoCardProp
// 使用 JSON.stringify 进行深度比较(注意:对于复杂对象可能有性能问题)
const prevUserInfoStr = JSON . stringify ( prevProps . user_info ) ;
const nextUserInfoStr = JSON . stringify ( nextProps . user_info ) ;
return (
prevUserInfoStr === nextUserInfoStr &&
prevProps . editable === nextProps . editable &&
@@ -767,9 +781,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" ) }
>
< Text className = "tab_text" > { participated_text } < / Text >