feat: 修改

messages/br.json

@@ -195,7 +195,9 @@
         "bouns6002": "No Bouns está aberto, não é possível receber",
         "success": "Sucesso",
         "depositeWarn": "Você está no modo sem bônus. Continuar?",
-        "email": "E-mail"
+        "email": "E-mail",
+        "nickNameMaxReg": "Nome muito longo",
+        "nickNameMinReg": "Nome muito curto"
     },
     "DepositPage": {
         "Montante": "Alcance de recarga",

src/app/[locale]/(TabBar)/profile/component/ChangeNickname/index.module.scss

@@ -39,4 +39,14 @@
         font-weight: 700;
         text-align: center;
     }
+    :global(.adm-list-body) {
+        border-top: none !important;
+        border-bottom: none !important;
+        background-color: #4c5359;
+        border-radius: 0.2rem;
+        margin: 0.3rem 0;
+    }
+    :global(.adm-list-item-content) {
+        border-top: none !important;
+    }
 }

src/app/[locale]/(TabBar)/profile/component/ChangeNickname/index.tsx

@@ -1,5 +1,5 @@
-import { UserInfoRep } from "@/api/user";
-import { Mask } from "antd-mobile";
+import { UserInfoRep, changeUserInfo } from "@/api/user";
+import { Form, Input, Mask, Toast } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import React from "react";
@@ -20,12 +20,56 @@ const ChangeNickName: React.FC<Props> = ({ visible = false, useInfo, onClose })
     const t = useTranslations("ProfilePage");
 
     const [innerVisible, setInnerVisible] = React.useState<boolean>(true);
+    const formRef = React.useRef<any>(null);
+    // 存放表单数据
     React.useEffect(() => {
         setInnerVisible(visible);
     }, [visible]);
+    React.useEffect(() => {
+        formRef.current?.setFieldsValue({
+            nickName: useInfo?.nick_name || "",
+        });
+    }, [useInfo]);
+
+    const doChangeNickName = () => {
+        formRef.current?.submit();
+    };
+    const doFinish = async () => {
+        const loadToast = Toast.show({
+            icon: "loading",
+            duration: 0,
+        });
+        try {
+            const params = {
+                nick_name: formRef.current?.getFieldValue("nickName"),
+                avatar: useInfo?.avatar || 1,
+            };
+            const res = await changeUserInfo(params);
+            if (res.code === 200) {
+                Toast.show({ icon: "success", content: t("success") });
+                if (typeof onClose === "function") {
+                    onClose(true);
+                }
+            }
+        } catch {
+            loadToast.close();
+        }
+    };
+    const close = () => {
+        if (typeof onClose === "function") {
+            onClose();
+        }
+    };
+    const checkNickName = (_: any, value: any) => {
+        if (value.length > 20) {
+            return Promise.reject(new Error(t("nickNameMaxReg")));
+        }
+        if (value.length < 4) {
+            return Promise.reject(new Error(t("nickNameMinReg")));
+        }
+        return Promise.resolve();
+    };
 
-    const doChangeAvatar = () => {};
-    const close = () => {};
     return (
         <Mask visible={visible} onMaskClick={close}>
             <div className={styles.Dialog}>
@@ -35,11 +79,25 @@ const ChangeNickName: React.FC<Props> = ({ visible = false, useInfo, onClose })
                     })}
                 >
                     <div className={styles.content}>
-                        <div className={styles.title}>Selecione um Avatar</div>
-
+                        <div className={styles.title}>Modificar apelido</div>
+                        <div>
+                            <Form ref={formRef} onFinish={doFinish}>
+                                <Form.Item
+                                    rules={[
+                                        {
+                                            required: true,
+                                            validator: checkNickName,
+                                        },
+                                    ]}
+                                    name={"nickName"}
+                                >
+                                    <Input maxLength={20} minLength={4}></Input>
+                                </Form.Item>
+                            </Form>
+                        </div>
                         <div
                             className="mt-[.1rem] rounded-[.2rem] bg-[#11de68] py-[.08rem] text-center text-[.18rem] font-bold text-[#12171a]"
-                            onClick={doChangeAvatar}
+                            onClick={doChangeNickName}
                         >
                             Claro
                         </div>