个人页、他人页优化

src/components/UserInfo/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Taro from "@tarojs/taro";
+import Taro, { useDidShow } from "@tarojs/taro";
 import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
 
@@ -48,6 +48,7 @@ interface UserInfoCardProps {
   on_message?: () => void;
   on_share?: () => void;
   set_user_info?: (info: Partial<UserInfoType>) => void;
+  onTab?: (tab) => void;
 }
 
 // 处理编辑用户信息
@@ -65,6 +66,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
   on_message,
   on_share,
   set_user_info,
+  onTab,
 }) => {
   const { updateUserInfo } = useUserActions();
   console.log("UserInfoCard 用户信息:", user_info);
@@ -78,9 +80,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
     useState(false);
 
   // 表单状态
-  const [form_data] = useState<Partial<UserInfoType>>({
-    ...user_info,
-  });
+  const [form_data, set_form_data] = useState<Partial<UserInfoType>>({});
+
+  useDidShow(() => {
+    set_form_data({ ...user_info })
+  })
 
   // 职业数据
   const professions = useProfessions();
@@ -181,6 +185,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
         !Array.isArray(field)
       ) {
         await updateUserInfo({ ...field });
+        set_form_data((prev) => {
+          return { ...prev, ...field }
+        })
         // 更新本地状态
         // setFormData((prev) => ({ ...prev, ...field }));
         // setUserInfo((prev) => ({ ...prev, ...field }));
@@ -188,6 +195,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
         // 调用更新用户信息接口，只传递修改的字段
         const update_data = { [field as string]: value };
         await updateUserInfo(update_data);
+        set_form_data((prev) => {
+          return { ...prev, ...update_data }
+        })
         // 更新本地状态
         // setFormData((prev) => ({ ...prev, [field as string]: value }));
         // setUserInfo((prev) => ({ ...prev, [field as string]: value }));
@@ -323,13 +333,17 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </Text>
             <Text className="stat_label">粉丝</Text>
           </View>
-          <View className="stat_item">
+          <View className="stat_item clickable"
+            onClick={() => onTab?.("hosted")}
+          >
             <Text className="stat_number">
               {user_info.stats?.hosted_games_count || 0}
             </Text>
             <Text className="stat_label">主办</Text>
           </View>
-          <View className="stat_item">
+          <View className="stat_item clickable"
+            onClick={() => onTab?.("participated")}
+          >
             <Text className="stat_number">
               {user_info.stats?.participated_games_count || 0}
             </Text>
@@ -384,12 +398,18 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
                 <Image
                   className="tag_icon"
                   src={require("../../static/userInfo/male.svg")}
+                  onClick={() => {
+                    handle_open_edit_modal("gender");
+                  }}
                 />
               )}
               {user_info.gender === "1" && (
                 <Image
                   className="tag_icon"
                   src={require("../../static/userInfo/female.svg")}
+                  onClick={() => {
+                    handle_open_edit_modal("gender");
+                  }}
                 />
               )}
             </View>
@@ -404,7 +424,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </View>
           ) : null}
           {user_info.ntrp_level !== "0" ? (
-            <View className="tag_item">
+            <View
+              className="tag_item"
+              onClick={() => {
+                handle_open_edit_modal("ntrp_level");
+              }}>
               <Text className="tag_text">{`NTRP ${user_info.ntrp_level}`}</Text>
             </View>
           ) : is_current_user ? (
@@ -418,7 +442,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </View>
           ) : null}
           {user_info.occupation ? (
-            <View className="tag_item">
+            <View
+              className="tag_item"
+              onClick={() => {
+                handle_open_edit_modal("occupation");
+              }}>
               <Text className="tag_text">
                 {user_info.occupation.split(" ")[2]}
               </Text>
@@ -434,7 +462,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
             </View>
           ) : null}
           {user_info.country || user_info.province || user_info.city ? (
-            <View className="tag_item">
+            <View
+              className="tag_item"
+              onClick={() => handle_open_edit_modal("location")}>
               <Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
             </View>
           ) : is_current_user ? (