个人页修改资料

2025-09-18 17:52:19 +08:00
parent 8df853c561
commit ffdb0bda26
3 changed files with 188 additions and 22 deletions
--- 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>
  );
 };
--- 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';
--- 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: '',
  });

  // 球局记录状态