获取昵称修改状态、优化昵称修改逻辑

2025-12-03 11:53:36 +08:00
parent 159b4ab1d2
commit 7c1a1fafc1
6 changed files with 146 additions and 65 deletions
--- a/src/components/EditModal/index.tsx
+++ b/src/components/EditModal/index.tsx
@@ -33,7 +33,6 @@ const EditModal: React.FC<EditModalProps> = ({
  const [isValid, setIsValid] = useState(true);
  const [isIllegal, setIsIllegal] = useState(false);
  const [hasIllegal, setHasIllegal] = useState(false);
-  const [canEdit, setCanEdit] = useState(true);
  // 使用全局键盘状态
  const {
    keyboardHeight,
@@ -89,15 +88,11 @@ const EditModal: React.FC<EditModalProps> = ({
      value.length >= 2 &&
      value.length <= maxLength &&
      !hasIllegal &&
-      !isIllegal &&
-      canEdit;
+      !isIllegal;
    setIsValid(valid);
-  }, [
-    value, hasIllegal, isIllegal, canEdit
-  ])
+  }, [value, hasIllegal, isIllegal]);

  const handle_save = () => {
-    console.log("savexxxxxxx", isIllegal, hasIllegal, !isValid)
    if (isIllegal) {
      Taro.showToast({
        title: "输入的字符非法",
@@ -106,7 +101,6 @@ const EditModal: React.FC<EditModalProps> = ({
      });
      return;
    } else if (hasIllegal) {
-      console.log("hasIllegal")
      Taro.showToast({
        title: "内容不能包含@<>/等无效字符",
        icon: "none",
@@ -128,7 +122,6 @@ const EditModal: React.FC<EditModalProps> = ({
    setValue(initialValue);
    setHasIllegal(false);
    setIsIllegal(false);
-    setCanEdit(true);
    onCancel();
  };

@@ -176,12 +169,15 @@ const EditModal: React.FC<EditModalProps> = ({
                  confirmType="done"
                  // autoFocus={true}
                  onConfirm={handle_save}
-                  onBlur={(e) => { e.preventDefault() }}
+                  onBlur={(e) => {
+                    e.preventDefault();
+                  }}
                />
                <View className="char_count">
                  <Text
-                    className={`count_text ${value.length > maxLength && "un-valid"
-                      }`}
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
                  >
                    {value.length}/{maxLength}
                  </Text>
@@ -208,8 +204,9 @@ const EditModal: React.FC<EditModalProps> = ({
                />
                <View className="char_count">
                  <Text
-                    className={`count_text ${value.length > maxLength && "un-valid"
-                      }`}
+                    className={`count_text ${
+                      value.length > maxLength && "un-valid"
+                    }`}
                  >
                    {value.length}/{maxLength}
                  </Text>
--- a/src/components/UserInfo/index.tsx
+++ b/src/components/UserInfo/index.tsx
@@ -6,7 +6,7 @@ import "./index.scss";
 import { EditModal } from "@/components";
 import { UserService, PickerOption } from "@/services/userService";
 import { PopupPicker } from "@/components/Picker/index";
-import { useUserActions } from "@/store/userStore";
+import { useUserActions, useNicknameChangeStatus } from "@/store/userStore";
 import { UserInfoType } from "@/services/userService";
 import { useCities, useProfessions } from "@/store/pickerOptionsStore";
 import { formatNtrpDisplay } from "@/utils/helper";
@@ -77,8 +77,9 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
  set_user_info,
  onTab,
 }) => {
+  const nickname_change_status = useNicknameChangeStatus();
  const { setShowGuideBar } = useGlobalState();
-  const { updateUserInfo } = useUserActions();
+  const { updateUserInfo, updateNickname } = useUserActions();
  const [ntrpTested, setNtrpTested] = useState(false);

  // 使用 useRef 记录上一次的 user_info，只在真正变化时打印
@@ -185,6 +186,13 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
    }
    if (field === "nickname") {
      if (!is_current_user) return;
+      if (!nickname_change_status.can_change) {
+        return Taro.showToast({
+          title: `30天内仅可修改4次昵称，${nickname_change_status.next_period_start_time}后可修改`,
+          icon: "none",
+          duration: 2000,
+        });
+      }
      // 手动输入
      setShowGuideBar(false);
      setEditingField(field);
@@ -200,10 +208,10 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
    try {
      // 调用更新用户信息接口，只传递修改的字段
      const update_data = { [editing_field]: value };
-      await UserService.update_user_info(update_data);
-
-      await updateUserInfo({ [editing_field]: value });
-
+      // await UserService.update_user_info(update_data);
+      editing_field === "nickname"
+        ? await updateNickname(value)
+        : await updateUserInfo(update_data);
      set_form_data((prev) => {
        return { ...prev, ...update_data };
      });
@@ -607,7 +615,7 @@ const UserInfoCardComponent: React.FC<UserInfoCardProps> = ({
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
-            ? "请填写 2-24 个字符，不包括 @<>/等无效字符。30 天内可修改 4 次昵称，12.5 前还可修改 4 次。"
+            ? `请填写 2-24 个字符，不包括 @<>/等无效字符。30 天内可修改 4 次昵称，${nickname_change_status.next_period_start_time} 前还可修改 ${nickname_change_status.remaining_count} 次。`
            : "请填写 2-100 个字符"
        }
      />
--- a/src/home_pages/index.tsx
+++ b/src/home_pages/index.tsx
@@ -1,44 +1,42 @@
-import React, { useEffect } from 'react';
-import { View, } from '@tarojs/components';
-import { silentLogin } from '@/services/loginService';
-import { useUserActions } from '@/store/userStore';
-import Taro from '@tarojs/taro';
+import React, { useEffect } from "react";
+import { View } from "@tarojs/components";
+import { silentLogin } from "@/services/loginService";
+import { useUserActions } from "@/store/userStore";
+import Taro from "@tarojs/taro";
 import "./index.scss";
 const HomePage: React.FC = () => {
-    const { fetchUserInfo } = useUserActions();
+  const { fetchUserInfo, checkNicknameChangeStatus } = useUserActions();

+  useEffect(() => {
+    const handleLoginRedirect = async () => {
+      // 先执行静默登录，然后再跳转
+      try {
+        console.log("开始静默登录...");
+        const loginResult = await silentLogin();
+        console.log("静默登录结果:", loginResult);
+        if (loginResult.success) {
+          // 静默登录成功，获取用户信息
+          fetchUserInfo().catch((error) => {
+            console.error("获取用户信息失败:", error);
+          });
+          checkNicknameChangeStatus().catch((error) => {
+            console.error("检查昵称变更状态失败:", error);
+          });
+        }
+      } catch (error) {
+        console.error("静默登录失败:", error);
+        // 静默登录失败不影响使用
+      }

-    useEffect(() => {
-        const handleLoginRedirect = async () => {
-            // 先执行静默登录，然后再跳转
-            try {
-                console.log('开始静默登录...');
-                const loginResult = await silentLogin();
-                console.log('静默登录结果:', loginResult);
-                if (loginResult.success) {
-                    // 静默登录成功，获取用户信息
-                    fetchUserInfo().catch((error) => {
-                        console.error('获取用户信息失败:', error);
-                    });
-                }
-            } catch (error) {
-                console.error('静默登录失败:', error);
-                // 静默登录失败不影响使用
-            }
-            
-            // 无论静默登录是否成功，都跳转到主页面
-            Taro.redirectTo({ url: '/main_pages/index' });
-        };
+      // 无论静默登录是否成功，都跳转到主页面
+      Taro.redirectTo({ url: "/main_pages/index" });
+    };

-        handleLoginRedirect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // fetchUserInfo 是稳定的函数引用，不需要加入依赖项
+    handleLoginRedirect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // fetchUserInfo 是稳定的函数引用，不需要加入依赖项

-    return (
-        <View className="home_page">
+  return <View className="home_page"></View>;
+};

-        </View>
-    );
-}
-
-export default HomePage;
+export default HomePage;
--- a/src/services/userService.ts
+++ b/src/services/userService.ts
@@ -90,6 +90,14 @@ export interface UserInfoType {
  ongoing_games?: string[];
 }

+export interface NicknameChangeStatus {
+  can_change: boolean;
+  remaining_count: number;
+  period_start_time: string;
+  next_period_start_time: string;
+  days_until_next_period: number;
+}
+
 // 后端球局数据接口
 interface BackendGameData {
  id: number;
@@ -681,6 +689,33 @@ export const fetchUserProfile = async (): Promise<
  }
 };

+// 获取昵称修改状态
+export const checkNicknameChangeStatus = async (): Promise<
+  ApiResponse<NicknameChangeStatus>
+> => {
+  try {
+    const response = await httpService.post(
+      "/user/check_nickname_change_status"
+    );
+    return response;
+  } catch (error) {
+    console.error("获取昵称修改状态失败:", error);
+    throw error;
+  }
+};
+// 修改昵称
+export const updateNickname = async (nickname: string) => {
+  try {
+    const response = await httpService.post("/user/update_nickname", {
+      nickname,
+    });
+    return response;
+  } catch (error) {
+    console.error("昵称修改失败:", error);
+    throw error;
+  }
+};
+
 // 更新用户信息
 export const updateUserProfile = async (payload: Partial<UserInfoType>) => {
  try {
--- a/src/store/userStore.ts
+++ b/src/store/userStore.ts
@@ -3,12 +3,18 @@ import {
  fetchUserProfile,
  updateUserProfile,
  UserInfoType,
+  checkNicknameChangeStatus as checkNicknameChangeStatusApi,
+  NicknameChangeStatus,
+  updateNickname as updateNicknameApi,
 } from "@/services/userService";

 export interface UserState {
  user: UserInfoType | {};
  fetchUserInfo: () => Promise<UserInfoType | undefined>;
  updateUserInfo: (userInfo: Partial<UserInfoType>) => void;
+  nicknameChangeStatus: Partial<NicknameChangeStatus>;
+  checkNicknameChangeStatus: () => void;
+  updateNickname: (nickname: string) => void;
 }

 // 请求锁，防止重复请求
@@ -20,7 +26,7 @@ const fetchUserInfoWithLock = async (set) => {
  if (fetchingUserInfo && fetchUserInfoPromise) {
    return fetchUserInfoPromise;
  }
-  
+
  fetchingUserInfo = true;
  fetchUserInfoPromise = (async () => {
    try {
@@ -35,7 +41,7 @@ const fetchUserInfoWithLock = async (set) => {
      fetchUserInfoPromise = null;
    }
  })();
-  
+
  return fetchUserInfoPromise;
 };

@@ -58,12 +64,36 @@ export const useUser = create<UserState>()((set) => ({
      throw error;
    }
  },
+  nicknameChangeStatus: {},
+  checkNicknameChangeStatus: async () => {
+    try {
+      const res = await checkNicknameChangeStatusApi();
+      set({ nicknameChangeStatus: res.data });
+    } catch (error) {
+      console.error("检查昵称变更状态失败:", error);
+    }
+  },
+  updateNickname: async (nickname) => {
+    try {
+      await updateNicknameApi(nickname);
+      await useUser.getState().checkNicknameChangeStatus();
+      set((state) => ({
+        user: { ...state.user, nickname },
+      }));
+    } catch (error) {
+      console.error("更新用户昵称失败:", error);
+    }
+  },
 }));

 export const useUserInfo = () => useUser((state) => state.user);
+export const useNicknameChangeStatus = () =>
+  useUser((state) => state.nicknameChangeStatus);

 export const useUserActions = () =>
  useUser((state) => ({
    fetchUserInfo: state.fetchUserInfo,
    updateUserInfo: state.updateUserInfo,
+    checkNicknameChangeStatus: state.checkNicknameChangeStatus,
+    updateNickname: state.updateNickname,
  }));
--- a/src/user_pages/edit/index.tsx
+++ b/src/user_pages/edit/index.tsx
@@ -9,16 +9,21 @@ import { convert_db_gender_to_display } from "@/utils/genderUtils";
 import { EditModal, GeneralNavbar } from "@/components";
 // import img from "@/config/images";
 import CommonDialog from "@/components/CommonDialog";
-import { useUserActions, useUserInfo } from "@/store/userStore";
+import {
+  useUserActions,
+  useUserInfo,
+  useNicknameChangeStatus,
+} from "@/store/userStore";
 import { UserInfoType } from "@/services/userService";
 import { useCities, useProfessions } from "@/store/pickerOptionsStore";
 import { handleCustomerService } from "@/services/userService";
 import evaluateService from "@/services/evaluateService";

 const EditProfilePage: React.FC = () => {
-  const { updateUserInfo } = useUserActions();
+  const { updateUserInfo, updateNickname } = useUserActions();
  // 直接从store获取用户信息，确保响应式更新
  const user_info = useUserInfo();
+  const nickname_change_status = useNicknameChangeStatus();

  // 表单状态，基于store中的用户信息初始化
  const getInitialFormData = () => {
@@ -190,6 +195,13 @@ const EditProfilePage: React.FC = () => {
      return;
    }
    if (field === "nickname") {
+      if (!nickname_change_status.can_change) {
+        return Taro.showToast({
+          title: `30天内仅可修改4次昵称，${nickname_change_status.next_period_start_time}后可修改`,
+          icon: "none",
+          duration: 2000,
+        });
+      }
      // 手动输入
      setEditingField(field);
      setEditModalVisible(true);
@@ -211,8 +223,9 @@ const EditProfilePage: React.FC = () => {
      }
      // 调用更新用户信息接口，只传递修改的字段
      const update_data = { [editing_field]: value };
-      await updateUserInfo(update_data);
-
+      editing_field === "nickname"
+        ? await updateNickname(value)
+        : await updateUserInfo(update_data);
      // 更新表单状态（store会自动更新）
      setFormData((prev) => ({ ...prev, [editing_field]: value }));

@@ -811,7 +824,7 @@ const EditProfilePage: React.FC = () => {
        onCancel={handle_edit_modal_cancel}
        validationMessage={
          editing_field === "nickname"
-            ? "请填写 2-24 个字符，不包括 @<>/等无效字符。30 天内可修改 4 次昵称，12.5 前还可修改 4 次。"
+            ? `请填写 2-24 个字符，不包括 @<>/等无效字符。30 天内可修改 4 次昵称，${nickname_change_status.next_period_start_time} 前还可修改 ${nickname_change_status.remaining_count} 次。`
            : "请填写 2-100 个字符"
        }
      />