feat: 修改

src/app/[locale]/(TabBar)/profile/ProfileHeader.tsx

@@ -27,6 +27,7 @@ import Image from "next/image";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { shallow } from "zustand/shallow";
 import ChangeAvatar from "./component/ChangeAvatar";
+import ChangeNickName from "./component/ChangeNickname";
 
 type Props = {
     userInfo: UserInfoRep;
@@ -400,6 +401,7 @@ export const ProfileHeader = () => {
     const router = useRouter();
     const [isShowNoBounsWarn, setIsShowNoBounsWarn] = useState(false);
     const [isShowAvatar, setIsShowAvatar] = useState(false);
+    const [isShowNickname, setIsShowNickname] = useState(false);
     const [isShowed, setIsShowed] = useState(false);
 
     const { data: userInfo, run: refreshUserInfo } = useRequest<any, any>(userInfoApi, {
@@ -468,8 +470,8 @@ export const ProfileHeader = () => {
         <>
             <div className={"userContent"}>
                 <div className={"userInfo"}>
-                    <div onClick={() => setIsShowAvatar(true)}>
-                        <div className={"bgImg"}>
+                    <div>
+                        <div className={"bgImg"} onClick={() => setIsShowAvatar(true)}>
                             <Image
                                 src={
                                     HeaderImageMap.get(userInfo?.data?.avatar)?.img ||
@@ -494,9 +496,12 @@ export const ProfileHeader = () => {
                             ></Vip>
                         </div>
                         <div>
-                            <span className="font-bold">
-                                {userInfo?.data?.nick_name || t("Conta")}
-                            </span>
+                            <div className="flex items-center">
+                                <span className="font-bold">
+                                    {userInfo?.data?.nick_name || t("Conta")}
+                                </span>
+                                {/* <i className="iconfont icon-wenbenshuru rotate-[0deg] text-[.14rem] font-normal text-[#7b939a]"></i> */}
+                            </div>
                             <div className="flex items-center">
                                 <span className="phone text-[#7b939a]">
                                     {userInfo?.data?.user_phone || ""}
@@ -543,6 +548,14 @@ export const ProfileHeader = () => {
                     setIsShowAvatar(false);
                 }}
             ></ChangeAvatar>
+            <ChangeNickName
+                visible={isShowNickname}
+                useInfo={userInfo?.data}
+                onClose={(needRefresh?: boolean) => {
+                    if (needRefresh) refreshUserInfo();
+                    setIsShowNickname(false);
+                }}
+            ></ChangeNickName>
         </>
     );
 };

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

@@ -0,0 +1,42 @@
+.Dialog {
+    width: 80%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &Container {
+        width: 100%;
+        position: relative;
+        height: 100%;
+        background-color: #1f2830;
+        border-radius: 0.1rem;
+        overflow: hidden;
+        opacity: 0.2;
+        transition: all 0.3s;
+        padding-bottom: 0.1rem;
+        &.visible {
+            opacity: 1;
+        }
+    }
+    .close {
+        position: absolute;
+        right: 0.1rem;
+        top: 0.05rem;
+        z-index: 1;
+        padding: 0.05rem 0.05rem 0.1rem 0.1rem;
+        overflow: hidden;
+    }
+
+    .content {
+        padding: 0.15rem;
+    }
+    .title {
+        color: #11de68;
+        font-size: 0.16rem;
+        font-weight: 700;
+        text-align: center;
+    }
+}

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

@@ -0,0 +1,56 @@
+import { UserInfoRep } from "@/api/user";
+import { Mask } from "antd-mobile";
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import React from "react";
+import styles from "./index.module.scss";
+
+interface Props {
+    visible: boolean;
+    useInfo: UserInfoRep;
+    onClose?: (needRefresh?: boolean) => void;
+}
+
+interface ImgItem {
+    key: number;
+    img: string;
+}
+
+const ChangeNickName: React.FC<Props> = ({ visible = false, useInfo, onClose }) => {
+    const t = useTranslations("ProfilePage");
+
+    const [innerVisible, setInnerVisible] = React.useState<boolean>(true);
+    React.useEffect(() => {
+        setInnerVisible(visible);
+    }, [visible]);
+
+    const doChangeAvatar = () => {};
+    const close = () => {};
+    return (
+        <Mask visible={visible} onMaskClick={close}>
+            <div className={styles.Dialog}>
+                <div
+                    className={clsx(styles.DialogContainer, {
+                        [styles.visible]: innerVisible,
+                    })}
+                >
+                    <div className={styles.content}>
+                        <div className={styles.title}>Selecione um Avatar</div>
+
+                        <div
+                            className="mt-[.1rem] rounded-[.2rem] bg-[#11de68] py-[.08rem] text-center text-[.18rem] font-bold text-[#12171a]"
+                            onClick={doChangeAvatar}
+                        >
+                            Claro
+                        </div>
+                    </div>
+                    <div className={clsx(styles.close)} onClick={close}>
+                        <i className={clsx("iconfont icon-guanbi relative z-10 text-[.14rem]")}></i>
+                    </div>
+                </div>
+            </div>
+        </Mask>
+    );
+};
+
+export default ChangeNickName;

src/app/[locale]/(TabBar)/profile/page.scss

@@ -99,11 +99,11 @@
         }
 
         .iconfont {
-            font-size: 0.16rem;
-            font-weight: 700;
-            -webkit-transform: rotate(180deg);
-            -ms-transform: rotate(180deg);
-            transform: rotate(180deg);
+            font-size: 0.14rem;
+            // font-weight: 700;
+            // -webkit-transform: rotate(180deg);
+            // -ms-transform: rotate(180deg);
+            // transform: rotate(180deg);
             margin-left: 0.04rem;
         }
     }