From ffdb0bda2651504e716296ffea35d482a95ffe3f Mon Sep 17 00:00:00 2001
From: Ultrame <1019265060@qq.com>
Date: Thu, 18 Sep 2025 17:52:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E9=A1=B5=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=B5=84=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserInfo/index.tsx | 203 +++++++++++++++++++++++++++---
 src/user_pages/edit/index.tsx     |   2 +-
 src/user_pages/myself/index.tsx   |   5 +-
 3 files changed, 188 insertions(+), 22 deletions(-)

diff --git a/src/components/UserInfo/index.tsx b/src/components/UserInfo/index.tsx
index 530355d..df544b1 100644
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -5,6 +5,7 @@ import "./index.scss";
 
 import { EditModal } from "@/components";
 import { UserService } from "@/services/userService";
+import { PopupPicker } from "@/components/Picker/index";
 
 // 用户信息接口
 export interface UserInfo {
@@ -22,7 +23,7 @@ export interface UserInfo {
   occupation: string;
   ntrp_level: string;
   phone?: string;
-  gender?: string;
+  gender: string;
   bio?: string;
   latitude?: string;
   longitude?: string;
@@ -30,9 +31,9 @@ export interface UserInfo {
   is_following?: boolean;
   tags?: string[];
   ongoing_games?: string[];
-  country?: string;
-  province?: string;
-  city?: string;
+  country: string;
+  province: string;
+  city: string;
 }
 
 // 用户信息卡片组件属性
@@ -66,12 +67,33 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
   // 编辑个人简介弹窗状态
   const [edit_modal_visible, setEditModalVisible] = useState(false);
   const [editing_field, setEditingField] = useState<string>("");
+  const [gender_picker_visible, setGenderPickerVisible] = useState(false);
+  const [location_picker_visible, setLocationPickerVisible] = useState(false);
+  const [ntrp_picker_visible, setNtrpPickerVisible] = useState(false);
+  const [occupation_picker_visible, setOccupationPickerVisible] =
+    useState(false);
 
   // 表单状态
   const [form_data, setFormData] = useState<UserInfo>({ ...user_info });
 
   // 处理编辑弹窗
   const handle_open_edit_modal = (field: string) => {
+    if (field === "gender") {
+      setGenderPickerVisible(true);
+      return;
+    }
+    if (field === "location") {
+      setLocationPickerVisible(true);
+      return;
+    }
+    if (field === "ntrp_level") {
+      setNtrpPickerVisible(true);
+      return;
+    }
+    if (field === "occupation") {
+      setOccupationPickerVisible(true);
+      return;
+    }
     if (field === "nickname") {
       // 手动输入
       setEditingField(field);
@@ -111,32 +133,94 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       });
     }
   };
+  // 处理字段编辑
+  const handle_field_edit = async (
+    field: string | { [key: string]: string },
+    value?: string
+  ) => {
+    try {
+      if (
+        typeof field === "object" &&
+        field !== null &&
+        !Array.isArray(field)
+      ) {
+        await UserService.update_user_info({ ...field });
+        // 更新本地状态
+        setFormData((prev) => ({ ...prev, ...field }));
+        // setUserInfo((prev) => ({ ...prev, ...field }));
+      } else {
+        // 调用更新用户信息接口，只传递修改的字段
+        const update_data = { [field as string]: value };
+        await UserService.update_user_info(update_data);
 
+        // 更新本地状态
+        setFormData((prev) => ({ ...prev, [field as string]: value }));
+        // setUserInfo((prev) => ({ ...prev, [field as string]: value }));
+      }
+
+      // 显示成功提示
+      Taro.showToast({
+        title: "保存成功",
+        icon: "success",
+      });
+    } catch (error) {
+      console.error("保存失败:", error);
+      Taro.showToast({
+        title: "保存失败",
+        icon: "error",
+      });
+    }
+  };
+  // 处理性别选择
+  const handle_gender_change = (e: any) => {
+    const gender_value = e[0];
+    handle_field_edit("gender", gender_value);
+  };
+
+  // 处理地区选择
+  const handle_location_change = (e: any) => {
+    const [country, province, city] = e;
+    handle_field_edit({ country, province, city });
+  };
+
+  // 处理NTRP水平选择
+  const handle_ntrp_level_change = (e: any) => {
+    const ntrp_level_value = e[0];
+    handle_field_edit("ntrp_level", ntrp_level_value);
+  };
+
+  // 处理职业选择
+  const handle_occupation_change = (e: any) => {
+    const [country, province] = e;
+    handle_field_edit("occupation", `${country} ${province}`);
+  };
   const handle_edit_modal_cancel = () => {
     setEditModalVisible(false);
     setEditingField("");
   };
 
   // 处理统计项点击
-  const handle_stats_click = (type: 'following' | 'friends' | 'hosted' | 'participated') => {
+  const handle_stats_click = (
+    type: "following" | "friends" | "hosted" | "participated"
+  ) => {
     // 只有当前用户才能查看关注相关页面
     if (!is_current_user) {
       Taro.showToast({
-        title: '暂不支持查看他人关注信息',
-        icon: 'none'
+        title: "暂不支持查看他人关注信息",
+        icon: "none",
       });
       return;
     }
 
-    if (type === 'following') {
+    if (type === "following") {
       // 跳转到关注列表页面
       Taro.navigateTo({
-        url: '/user_pages/follow/index?tab=following'
+        url: "/user_pages/follow/index?tab=following",
       });
-    } else if (type === 'friends') {
+    } else if (type === "friends") {
       // 跳转到球友（粉丝）页面，显示粉丝标签
       Taro.navigateTo({
-        url: '/user_pages/follow/index?tab=follower'
+        url: "/user_pages/follow/index?tab=follower",
       });
     }
     // 主办和参加暂时不处理，可以后续扩展
@@ -166,11 +250,17 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
       {/* 统计数据 */}
       <View className="stats_section">
         <View className="stats_container">
-          <View className="stat_item clickable" onClick={() => handle_stats_click('following')}>
+          <View
+            className="stat_item clickable"
+            onClick={() => handle_stats_click("following")}
+          >
             <Text className="stat_number">{user_info.stats.following}</Text>
             <Text className="stat_label">关注</Text>
           </View>
-          <View className="stat_item clickable" onClick={() => handle_stats_click('friends')}>
+          <View
+            className="stat_item clickable"
+            onClick={() => handle_stats_click("friends")}
+          >
             <Text className="stat_number">{user_info.stats.friends}</Text>
             <Text className="stat_label">球友</Text>
           </View>
@@ -196,7 +286,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
                   ? "@/static/userInfo/following.svg"
                   : "@/static/userInfo/unfollow.svg")}
               />
-              <Text className={`button_text ${is_following ? "following" : ""}`}>
+              <Text
+                className={`button_text ${is_following ? "following" : ""}`}
+              >
                 {is_following ? "已关注" : "关注"}
               </Text>
             </Button>
@@ -239,7 +331,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               )}
             </View>
           ) : is_current_user ? (
-            <View className="button_edit">
+            <View className="button_edit" onClick={() => {handle_open_edit_modal('gender')}}>
               <Text>选择性别</Text>
             </View>
           ) : null}
@@ -248,7 +340,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               <Text className="tag_text">{user_info.ntrp_level}</Text>
             </View>
           ) : is_current_user ? (
-            <View className="button_edit">
+            <View className="button_edit" onClick={() => {handle_open_edit_modal('ntrp_level')}}>
               <Text>测测你的NTRP水平</Text>
             </View>
           ) : null}
@@ -257,16 +349,16 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
               <Text className="tag_text">{user_info.occupation}</Text>
             </View>
           ) : is_current_user ? (
-            <View className="button_edit">
+            <View className="button_edit" onClick={() => {handle_open_edit_modal('occupation')}}>
               <Text>选择职业</Text>
             </View>
           ) : null}
-          {user_info.location ? (
+          {user_info.country || user_info.province || user_info.city ? (
             <View className="tag_item">
-              <Text className="tag_text">{user_info.location}</Text>
+              <Text className="tag_text">{`${user_info.country} ${user_info.province} ${user_info.city}`}</Text>
             </View>
           ) : is_current_user ? (
-            <View className="button_edit">
+            <View className="button_edit" onClick={() => handle_open_edit_modal('location')}>
               <Text>选择地区</Text>
             </View>
           ) : null}
@@ -301,6 +393,77 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
         onCancel={handle_edit_modal_cancel}
         validationMessage="请填写 2-100 个字符"
       />
+      {/* 性别选择弹窗 */}
+      {gender_picker_visible && (
+        <PopupPicker
+          options={[
+            [
+              { text: "男", value: "0" },
+              { text: "女", value: "1" },
+              { text: "保密", value: "2" },
+            ],
+          ]}
+          visible={gender_picker_visible}
+          setvisible={setGenderPickerVisible}
+          value={[form_data.gender]}
+          onChange={handle_gender_change}
+        />
+      )}
+      {/* 地区选择弹窗 */}
+      {location_picker_visible && (
+        <PopupPicker
+          options={[
+            [{ text: "中国", value: "中国" }],
+            [{ text: "上海", value: "上海" }],
+            [
+              { text: "浦东新区", value: "浦东新区" },
+              { text: "静安区", value: "静安区" },
+            ],
+          ]}
+          visible={location_picker_visible}
+          setvisible={setLocationPickerVisible}
+          value={[form_data.country, form_data.province, form_data.city]}
+          onChange={handle_location_change}
+        />
+      )}
+      {/* NTRP水平选择弹窗 */}
+      {ntrp_picker_visible && (
+        <PopupPicker
+          options={[
+            [
+              { text: "1.5", value: "1.5" },
+              { text: "2.0", value: "2.0" },
+              { text: "2.5", value: "2.5" },
+              { text: "3.0", value: "3.0" },
+              { text: "3.5", value: "3.5" },
+              { text: "4.0", value: "4.0" },
+              { text: "4.5", value: "4.5" },
+            ],
+          ]}
+          type="ntrp"
+          img={user_info.avatar}
+          visible={ntrp_picker_visible}
+          setvisible={setNtrpPickerVisible}
+          value={[form_data.ntrp_level]}
+          onChange={handle_ntrp_level_change}
+        />
+      )}
+      {/* 职业选择弹窗 */}
+      {occupation_picker_visible && (
+        <PopupPicker
+          options={[
+            [{ text: "时尚", value: "时尚" }],
+            [
+              { text: "美妆博主", value: "美妆博主" },
+              { text: "设计师", value: "设计师" },
+            ],
+          ]}
+          visible={occupation_picker_visible}
+          setvisible={setOccupationPickerVisible}
+          value={[...form_data.occupation.split(" ")]}
+          onChange={handle_occupation_change}
+        />
+      )}
     </View>
   );
 };
diff --git a/src/user_pages/edit/index.tsx b/src/user_pages/edit/index.tsx
index 49b0f60..8d54365 100644
--- a/src/user_pages/edit/index.tsx
+++ b/src/user_pages/edit/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, Image, ScrollView, Picker, Input, Button } from '@tarojs/components';
+import { View, Text, Image, ScrollView, Button } from '@tarojs/components';
 import { PopupPicker } from '@/components/Picker/index'
 import Taro from '@tarojs/taro';
 import './index.scss';
diff --git a/src/user_pages/myself/index.tsx b/src/user_pages/myself/index.tsx
index d9d92e5..c56fa46 100644
--- a/src/user_pages/myself/index.tsx
+++ b/src/user_pages/myself/index.tsx
@@ -30,10 +30,13 @@ const MyselfPage: React.FC = () => {
       participated: 0,
     },
     bio: "加载中...",
-    location: "加载中...",
     occupation: "加载中...",
     ntrp_level: "NTRP 3.0",
     personal_profile: "加载中...",
+    gender: '',
+    country: '',
+    province: '',
+    city: '',
   });
 
   // 球局记录状态