fix: update login page

.env.development

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
-#NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
+#NEXT_PUBLIC_BASE_URL=http://192.168.0.66:8800
+NEXT_PUBLIC_BASE_URL=http://192.168.0.84:8800
 #NEXT_PUBLIC_BASE_URL=http://206.168.191.125:8800

src/app/[locale]/(navbar)/(ordinary)/layout.tsx

@@ -1,3 +1,4 @@
+import Footer from "@/components/Footer";
 import HeaderBack from "@/components/HeaderBack";
 import { ReactNode } from "react";
 export default async function LocaleLayout({
@@ -11,6 +12,7 @@ export default async function LocaleLayout({
         <>
             <HeaderBack showBack={true} />
             <main className={"main-footer-header"}>{children}</main>
+            <Footer></Footer>
         </>
     );
 }

src/app/[locale]/(navbar)/(ordinary)/profile/component/ModalCom/index.tsx

@@ -50,7 +50,7 @@ const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
 
             <CenterPopup
                 visible={visible}
-                getContainer={null}
+                getContainer={() => document.getElementById("app")!}
                 onMaskClick={() => {
                     setVisible(false);
                 }}

src/app/[locale]/(navbar)/(ordinary)/profile/page.tsx

@@ -1,9 +1,185 @@
-import { FC } from "react";
+"use client";
+import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
+import { useRouter } from "@/i18n";
+import { useGlobalStore } from "@/stores";
+import { ProgressBar } from "antd-mobile";
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+import { FC, Fragment, useEffect, useState } from "react";
+import ItemCom from "./component/ItemCom";
+import "./page.scss";
 
+const vipImages = [
+    { leve: 1, src: "/vip/1.png", color: "#686868" },
+    { leve: 2, src: "/vip/2-3-4.png", color: "#844C4F" },
+    { leve: 3, src: "/vip/2-3-4.png", color: "#844C4F" },
+    { leve: 4, src: "/vip/2-3-4.png", color: "#844C4F" },
+    { leve: 5, src: "/vip/5-6-7.png", color: "#707386" },
+    { leve: 6, src: "/vip/5-6-7.png", color: "#707386" },
+    { leve: 7, src: "/vip/5-6-7.png", color: "#707386" },
+    { leve: 8, src: "/vip/8-9-10.png", color: "#894622" },
+    { leve: 9, src: "/vip/8-9-10.png", color: "#894622" },
+    { leve: 10, src: "/vip/8-9-10.png", color: "#894622" },
+];
 interface Props {}
+// const ItemCom = dynamic(() => import("./component/ItemCom"));
+const MaskCom = dynamic(() => import("./component/MaskCom"));
+const ModalCom = dynamic(() => import("./component/ModalCom"));
+const Profile: FC<Props> = () => {
+    const t = useTranslations("ProfilePage");
 
-const Profile: FC<Props> = (props) => {
-    return <div className={"border-1"}>hello React</div>;
+    const { token, userInfo, setUserInfo } = useGlobalStore();
+
+    const level = 1;
+    const process = 10;
+
+    const userInfoRequest = async () => {
+        getUserInfoApi().then((res) => {
+            res.code == 200 && setUserInfo(res.data);
+        });
+    };
+
+    let [money, setMoney] = useState({
+        Score: 0,
+        point: 0,
+    });
+    const userMoneyRequest = async () => {
+        getUserMoneyApi().then((res) => {
+            res.code == 200 &&
+                setMoney({
+                    Score: res.data?.Score || 0.0,
+                    point: res.data?.point || 0.0,
+                });
+        });
+    };
+    useEffect(() => {
+        if (token) {
+            userInfoRequest();
+            userMoneyRequest();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [token]);
+
+    const router = useRouter();
+    const goPage = (path = "/") => {
+        router.push(path);
+    };
+
+    const [visible, setVisible] = useState(false);
+    const callbackFun = () => {
+        setVisible(!visible);
+    };
+
+    const divClassName = clsx("bgImg", token && "default");
+    const divClassName2 = clsx("userContent", token && "active");
+    const divClassName3 = clsx("userInfo", token && "active");
+
+    const vipIconElement = vipImages.map((item, index) => {
+        if (item.leve === level) {
+            return (
+                <Fragment key={index}>
+                    <img src={item.src} className={"icon-image"} alt="vip" key={index} />
+                    <span className={"icon-level"} style={{ color: item.color }}>
+                        {item.leve}
+                    </span>
+                </Fragment>
+            );
+        }
+    });
+
+    return (
+        <div className="profile-box">
+            <div className={divClassName2}>
+                <div className={divClassName3}>
+                    <div>
+                        <div className={divClassName}></div>
+                        {token && (
+                            <div>
+                                <span>{t("Conta")}</span>
+                                <span className="phone">{userInfo?.user_phone || ""}</span>
+                            </div>
+                        )}
+                    </div>
+                    {token ? (
+                        <div
+                            className="goto"
+                            onClick={() =>
+                                goPage(
+                                    `/confirmPassword?userPhone=${userInfo.user_phone}&code=123456&alter=true`
+                                )
+                            }
+                        >
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                    ) : (
+                        <div className="goto" onClick={() => goPage("/login")}>
+                            <span>{t("Login")}</span>
+                            <span className="iconfont icon-xiangzuo1"></span>
+                        </div>
+                    )}
+                </div>
+                {/*vipcard*/}
+                <div className={"vip-card"}>
+                    <div className={"vip-card__icon"}>{vipIconElement}</div>
+                    <div className={"vip-card-process"}>
+                        <div className={"process-top"}>{process}xp</div>
+                        <div>
+                            <ProgressBar
+                                percent={process}
+                                style={{
+                                    "--fill-color": "#fb8b05",
+                                    "--track-width": "0.0694rem",
+                                }}
+                            />
+                        </div>
+                        <div className={"process-bottom"}>
+                            <span>VIP{level}</span>
+                            <span className={"process-bottom-desc"}>leia 400 atualizando para</span>
+                            <span>VIP{level + 1 >= 11 ? "MAX" : level + 1}</span>
+                        </div>
+                    </div>
+                </div>
+
+                {token && (
+                    <div className="coin">
+                        <div>
+                            <span className="iconfont icon-icon-wallet"></span>
+                            <div>
+                                <span>{t("Saldo")}</span>
+                                <div className="num">
+                                    <span className="uppercase">brl </span>
+                                    <span>{money.Score || 0.0}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <span className="iconfont icon-gift2"></span>
+                            <div>
+                                <span onClick={() => setVisible(true)}>
+                                    {t("Bônus")} <img className="a" src="/img/a.png" alt="" />
+                                </span>
+                                <div className="num">
+                                    <span className="uppercase">brl </span>
+                                    <span>{money.point || 0.0}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            <div className="link">
+                <span onClick={() => goPage("/deposit")}>{t("Depósito")}</span>
+                <span onClick={() => goPage(token ? "/withdraw" : `/login?redirect=/withdraw`)}>
+                    {t("Sacar")}
+                </span>
+            </div>
+            <ItemCom />
+            <ModalCom />
+            <MaskCom visible={visible} callbackFun={callbackFun} />
+        </div>
+    );
 };
 
 export default Profile;

src/app/[locale]/(navbar)/[[...share]]/layout.tsx

@@ -1,12 +1,91 @@
-import Layout from "@/components/Layout";
-import { ReactNode } from "react";
-
-export default async function LocaleLayout({
-    children,
-    params: { locale },
-}: {
-    children: ReactNode;
-    params: { locale: string };
-}) {
-    return <Layout>{children}</Layout>;
-}
+"use client";
+import Footer, { FooterProps } from "@/components/Footer";
+import Header, { HeaderProps } from "@/components/Header";
+import Sidebar from "@/components/Layout/Sidebar";
+import styles from "@/components/Layout/style.module.scss";
+import { FC, PropsWithChildren, useRef } from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
+type Props = FooterProps & HeaderProps;
+const Layout: FC<PropsWithChildren<Props>> = (props) => {
+    const { children, ...other } = props;
+    const swiperRef = useRef<SwiperClass>();
+    const isOpen = useRef<boolean>(false);
+    const homeContainerRef = useRef<HTMLDivElement>(null);
+    const barRef = useRef<HTMLDivElement>(null);
+
+    const startHandler = () => {
+        homeContainerRef.current?.classList.add(styles.containerMask);
+        barRef.current?.classList.add(styles.cross);
+        isOpen.current = true;
+    };
+    const endHandler = () => {
+        homeContainerRef.current?.classList.remove(styles.containerMask);
+        barRef.current?.classList.remove(styles.cross);
+        isOpen.current = false;
+    };
+
+    const openSliderHandler = () => {
+        if (isOpen.current) {
+            swiperRef.current?.slideNext();
+        } else {
+            swiperRef.current?.slidePrev();
+        }
+    };
+
+    return (
+        <>
+            <Swiper
+                resistanceRatio={10}
+                initialSlide={1}
+                slidesPerView={"auto"}
+                onSlidePrevTransitionStart={startHandler}
+                onSlideNextTransitionEnd={endHandler}
+                slideToClickedSlide
+                onSwiper={(swiper) => {
+                    swiperRef.current = swiper;
+                    // 设置第一个元素
+                    swiper.slides[0].style.display = "block";
+                }}
+                runCallbacksOnInit={false}
+                allowTouchMove={false}
+            >
+                <SwiperSlide
+                    style={{ width: `${"70%"}`, display: "none" }}
+                    className={"bg-[rgb(31,31,31)]"}
+                >
+                    <section className="relative h-[100vh]">
+                        <Sidebar></Sidebar>
+                    </section>
+                </SwiperSlide>
+
+                <SwiperSlide style={{ width: "100%" }}>
+                    <section className="relative h-[100%]" ref={homeContainerRef}>
+                        <Header
+                            {...other}
+                            menuRender={() => (
+                                <div
+                                    className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}
+                                    ref={barRef}
+                                    onClick={openSliderHandler}
+                                >
+                                    <div className={styles.bar}></div>
+                                    <div
+                                        className={styles.bar}
+                                        style={{ width: "0.1389rem" }}
+                                    ></div>
+                                    <div className={styles.bar}></div>
+                                </div>
+                            )}
+                        ></Header>
+                        <main id="maincontainer" className={"main-footer-header"}>
+                            {children}
+                        </main>
+                        <Footer></Footer>
+                    </section>
+                </SwiperSlide>
+            </Swiper>
+        </>
+    );
+};
+
+export default Layout;

src/app/[locale]/(navbar)/[[...share]]/page.tsx

@@ -102,7 +102,7 @@ export default async function Page() {
             getPromotions(),
         ]);
     return (
-        <div>
+        <>
             <HomeMessage />
             <HomePromotion data={promotions} />
             <Box>
@@ -116,6 +116,6 @@ export default async function Page() {
             <Box>
                 <HomeActions />
             </Box>
-        </div>
+        </>
     );
 }

src/app/[locale]/(navbar)/layout-copy-1.tsx

@@ -1,57 +0,0 @@
-"use client";
-import { motion, useAnimation } from "framer-motion";
-
-const AnimatedDivs = () => {
-    const controls = useAnimation();
-
-    // Define animation variants
-    const variants = {
-        hidden: { x: 0 },
-        visible: { x: 0 },
-    };
-    const variants2 = {
-        hidden: { x: -385 },
-        visible: { x: 0 },
-    };
-
-    // Define a sequence to stagger animations
-
-    const handler = () => {
-        controls.start((i) => ({
-            x: 385,
-            transition: { duration: 1 },
-        }));
-    };
-
-    return (
-        <div className={"flex"}>
-            {/* First animated div */}
-            <motion.section
-                initial="hidden"
-                animate={controls}
-                variants={variants2}
-                style={{
-                    width: "385px",
-                    height: "100px",
-                    backgroundColor: "red",
-                }}
-            />
-            {/* Second animated div */}
-            <motion.section
-                initial="hidden"
-                animate={controls}
-                variants={variants}
-                onClick={handler}
-                className={"border-1"}
-                style={{
-                    width: "100%",
-                    height: "100px",
-                    flexShrink: 0,
-                    backgroundColor: "blue",
-                }}
-            />
-        </div>
-    );
-};
-
-export default AnimatedDivs;

src/app/[locale]/(navbar)/layout.tsx

@@ -1,16 +0,0 @@
-import Footer from "@/components/Footer";
-import { ReactNode } from "react";
-export default async function LocaleLayout({
-    children,
-    params: { locale },
-}: {
-    children: ReactNode;
-    params: { locale: string };
-}) {
-    return (
-        <>
-            <main className={"main-footer"}>{children}</main>
-            <Footer />
-        </>
-    );
-}

src/app/[locale]/loading.tsx

@@ -3,7 +3,7 @@ import { SpinLoading } from "antd-mobile";
 import { FC } from "react";
 interface Props {}
 
-const Laoding: FC<Props> = (props) => {
+const Loading: FC<Props> = (props) => {
     return (
         <div className={"flex h-[100dvh] items-center justify-center"}>
             <SpinLoading color="default" />
@@ -11,4 +11,4 @@ const Laoding: FC<Props> = (props) => {
     );
 };
 
-export default Laoding;
+export default Loading;

src/app/[locale]/login/action.ts

@@ -0,0 +1,14 @@
+"use server";
+// import { cookies } from "next/headers";
+
+export type ResultType = {
+    success: boolean;
+    message: string;
+};
+export async function loginAction(prevState: ResultType, formData: FormData) {
+    console.log(`🎯🎯🎯🎯🎯-> in action.ts on 2`, formData);
+    return {
+        success: false,
+        message: "商品已售罄",
+    };
+}

src/app/[locale]/login/component/FromCom/index-copy.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { ChangeEvent, FC, PropsWithChildren, useMemo, useState } from "react";
+import clsx from "clsx";
+import Link from "next/link";
+import ButtonOwn from "@/components/ButtonOwn";
+import "./style.scss";
+import { useTranslations } from "next-intl";
+
+/**
+ * @description 登录注册From表单
+ * @param {string} type 使用类型
+ * @param {string} msgError 错误提示 login 或 register
+ * @param {(params: any) => void} callbackFun 回调方法
+ */
+export interface FromComProps {
+    type?: string;
+    msgError?: string;
+    callbackFun?: (params: any) => void;
+}
+
+const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError = '', callbackFun}) => {
+    const t = useTranslations("LoginPage");
+    let [pwdVisible, setPwdVisible] = useState(false)
+    const spanClassName = clsx("iconfont", {
+        "icon-kejian": pwdVisible,
+        "icon-bukejian": !pwdVisible,
+    });
+
+    let [fromParam, setFromParam] = useState({
+        userPhone: '',
+        pwd: ''
+    })
+
+    const activeCls = useMemo(() => {
+        let { userPhone, pwd } = fromParam
+        if (userPhone && userPhone.length==11 && pwd && pwd.length>5) {
+            return true
+        }
+        return false
+    }, [fromParam]);
+
+
+    const setInputVal = (e: ChangeEvent<HTMLInputElement>) => {
+        const {name, value} = e.target;
+        if (name == 'pwd') {
+            let pwd = value.replaceAll(/[^a-zA-Z0-9_-]/g, '')
+            setFromParam({ ...fromParam, pwd })
+            return
+        }
+        setFromParam({
+            ...fromParam,
+            [name]: value
+        })
+    }
+
+    const submitRequest = () => {
+        activeCls && callbackFun!(fromParam)
+    }
+
+    return (
+        <div className="FromCom">
+            <div className="phoneInput">
+                <span className="after">{t("areaCode")}</span>
+                <input name="userPhone" type="tel" value={fromParam.userPhone} onChange={setInputVal} placeholder={t("Celular")} maxLength={11} />
+            </div>
+            <div className="passwordInput">
+                <input name="pwd" type={pwdVisible?'text':'password'} value={fromParam.pwd} onChange={setInputVal} placeholder={t("Senha")} maxLength={12}/>
+                <span className={spanClassName} onClick={() => setPwdVisible(!pwdVisible)}></span>
+            </div>
+            <div className="btnContent">
+                { msgError && <div className="tips"> {msgError} </div> }
+                <ButtonOwn active={activeCls} callbackFun={submitRequest}>{type == 'login'? 'Login' : t("register")}</ButtonOwn>
+            </div>
+            <div className="link">
+                {
+                    type == 'login' ? (
+                        <>
+                            <Link href="/br/resetPhone">{t("forgetPwd")}</Link>
+                            <Link href="/br/register">{t("registerGo")}</Link>
+                        </>
+                    ) : <Link href="/br/login" className="active" replace>{t("loginGo")}</Link>
+                }     
+            </div>
+        </div>
+    );
+};
+
+export default FromCom;

src/app/[locale]/login/component/FromCom/index.tsx

@@ -1,10 +1,11 @@
 "use client";
-import { ChangeEvent, FC, PropsWithChildren, useMemo, useState } from "react";
-import clsx from "clsx";
-import Link from "next/link";
+import { loginAction } from "@/app/[locale]/login/action";
 import ButtonOwn from "@/components/ButtonOwn";
-import "./style.scss";
+import { Link } from "@/i18n";
+import clsx from "clsx";
 import { useTranslations } from "next-intl";
+import { FC, PropsWithChildren, useActionState, useRef, useState } from "react";
+import "./style.scss";
 
 /**
  * @description 登录注册From表单
@@ -17,69 +18,70 @@ export interface FromComProps {
     msgError?: string;
     callbackFun?: (params: any) => void;
 }
+const initialState = {
+    message: "",
+};
 
-const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError = '', callbackFun}) => {
+const FromCom: FC<PropsWithChildren<FromComProps>> = ({ type = "login", msgError = "" }) => {
     const t = useTranslations("LoginPage");
-    let [pwdVisible, setPwdVisible] = useState(false)
+    let [pwdVisible, setPwdVisible] = useState(false);
+    const [state, formAction] = useActionState(loginAction, {});
+
     const spanClassName = clsx("iconfont", {
         "icon-kejian": pwdVisible,
         "icon-bukejian": !pwdVisible,
     });
 
-    let [fromParam, setFromParam] = useState({
-        userPhone: '',
-        pwd: ''
-    })
-
-    const activeCls = useMemo(() => {
-        let { userPhone, pwd } = fromParam
-        if (userPhone && userPhone.length==11 && pwd && pwd.length>5) {
-            return true
-        }
-        return false
-    }, [fromParam]);
-
-
-    const setInputVal = (e: ChangeEvent<HTMLInputElement>) => {
-        const {name, value} = e.target;
-        if (name == 'pwd') {
-            let pwd = value.replaceAll(/[^a-zA-Z0-9_-]/g, '')
-            setFromParam({ ...fromParam, pwd })
-            return
-        }
-        setFromParam({
-            ...fromParam,
-            [name]: value
-        })
-    }
-
-    const submitRequest = () => {
-        activeCls && callbackFun!(fromParam)
-    }
+    const fromParam = useRef({
+        userPhone: "",
+        pwd: "",
+    });
 
     return (
         <div className="FromCom">
-            <div className="phoneInput">
-                <span className="after">{t("areaCode")}</span>
-                <input name="userPhone" type="tel" value={fromParam.userPhone} onChange={setInputVal} placeholder={t("Celular")} maxLength={11} />
-            </div>
-            <div className="passwordInput">
-                <input name="pwd" type={pwdVisible?'text':'password'} value={fromParam.pwd} onChange={setInputVal} placeholder={t("Senha")} maxLength={12}/>
-                <span className={spanClassName} onClick={() => setPwdVisible(!pwdVisible)}></span>
-            </div>
-            <div className="btnContent">
-                { msgError && <div className="tips"> {msgError} </div> }
-                <ButtonOwn active={activeCls} callbackFun={submitRequest}>{type == 'login'? 'Login' : t("register")}</ButtonOwn>
-            </div>
+            <form action={formAction}>
+                <div className="phoneInput">
+                    <span className="after">{t("areaCode")}</span>
+                    <input
+                        name="userPhone"
+                        type="tel"
+                        defaultValue={fromParam.current.userPhone}
+                        placeholder={t("Celular")}
+                        maxLength={11}
+                    />
+                </div>
+                <div className="passwordInput">
+                    <input
+                        name="pwd"
+                        type={pwdVisible ? "text" : "password"}
+                        defaultValue={fromParam.current.pwd}
+                        placeholder={t("Senha")}
+                        maxLength={12}
+                    />
+                    <span
+                        className={spanClassName}
+                        onClick={() => setPwdVisible(!pwdVisible)}
+                    ></span>
+                </div>
+                <div className="btnContent">
+                    {msgError && <div className="tips"> {msgError} </div>}
+                    <ButtonOwn type={"submit"}>
+                        {type == "login" ? "Login" : t("register")}
+                    </ButtonOwn>
+                </div>
+            </form>
+
             <div className="link">
-                {
-                    type == 'login' ? (
-                        <>
-                            <Link href="/br/resetPhone">{t("forgetPwd")}</Link>
-                            <Link href="/br/register">{t("registerGo")}</Link>
-                        </>
-                    ) : <Link href="/br/login" className="active" replace>{t("loginGo")}</Link>
-                }     
+                {type == "login" ? (
+                    <>
+                        <Link href="/br/resetPhone">{t("forgetPwd")}</Link>
+                        <Link href="/br/register">{t("registerGo")}</Link>
+                    </>
+                ) : (
+                    <Link href="/br/login" className="active" replace>
+                        {t("loginGo")}
+                    </Link>
+                )}
             </div>
         </div>
     );

src/app/[locale]/login/component/FromCom/style.scss

@@ -1,7 +1,7 @@
 .FromCom {
   width: 100%;
   height: auto;
-  background-color: #1f1f1f;
+  //background-color: #1f1f1f;
   padding: 0 .18rem;
 
   .passwordInput {
@@ -27,7 +27,7 @@
       box-sizing: border-box;
     }
   }
-  
+
   input {
     flex: 1;
     background-color: #494949;
@@ -82,4 +82,3 @@
   overflow: hidden;
   margin-top: .16rem;
 }
-  

src/app/[locale]/login/component/GoogleCom/index.tsx

@@ -1,7 +1,6 @@
-"use client";
-import { FC, PropsWithChildren } from "react";
-import "./style.scss";
 import { useTranslations } from "next-intl";
+import { FC } from "react";
+import "./style.scss";
 
 /**
  * @description 谷歌登录注册组件
@@ -15,11 +14,13 @@ export interface GoogleComProps {
     callbackFun?: () => void;
 }
 
-const GoogleCom: FC<PropsWithChildren<GoogleComProps>> = ({title = '', text = '', callbackFun}) => {
+const GoogleCom: FC<GoogleComProps> = ({ title = "", text = "", callbackFun }) => {
     const t = useTranslations("LoginPage");
     return (
         <div className="GoogleCom">
-            <div className="title"><h2>{title || t("Googletitle")}</h2></div>
+            <div className="title">
+                <h2>{title || t("Googletitle")}</h2>
+            </div>
             <div className="otherAccount">
                 <div className="ggAfb" onClick={callbackFun}>
                     <span className="gg">

src/app/[locale]/login/page-copy.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { getLoginApi, getUserInfoApi } from "@/api/user";
+import { useRouter } from "@/i18n";
+import { useGlobalStore } from "@/stores";
+import { Toast } from "antd-mobile";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
+import dynamic from "next/dynamic";
+import { FC, useState } from "react";
+import "./page.scss";
+
+interface Props {}
+
+const HeaderBack = dynamic(() => import('@/components/HeaderBack'));
+const FromCom = dynamic(() => import('./component/FromCom'));
+const GoogleCom = dynamic(() => import('./component/GoogleCom'));
+const DomainFooter = dynamic(() => import('@/components/DomainFooter'));
+
+const Login: FC<Props> = () => {
+    const t = useTranslations("LoginPage");
+    const { setToken, setUserInfo } = useGlobalStore();
+
+    const router: any = useRouter();
+    let searchParams = useSearchParams();
+    let redirect = searchParams.get("redirect") || "";
+
+    const [msgError, setMsgError] = useState("");
+    const loginRequest = async ({ userPhone, pwd }: any) => {
+        let params = { user_phone: userPhone, pwd };
+        let res = await getLoginApi(params);
+        if (res.code == 200) {
+            setToken(res.data.token);
+            Toast.show({
+                icon: "loading",
+                content: "请求中...",
+                duration: 10000,
+                maskClickable: false,
+            });
+            getUserInfoApi().then((res1) => {
+                if (res1.code == 200) {
+                    Toast.show({ icon: "success", content: t("loginSuc"), maskClickable: false });
+                    setUserInfo(res1.data);
+                    setTimeout(() => {
+                        router.replace("/" + redirect);
+                    }, 1000);
+                    setMsgError(res.msg || "");
+                }
+            });
+            setMsgError(res.msg || "");
+        }
+    };
+
+    return (
+        <div className="login-box">
+            <HeaderBack showBack={false}/>
+            <div className="content-box">
+                <GoogleCom />
+                <FromCom callbackFun={loginRequest} msgError={msgError} />
+                <DomainFooter />
+            </div>
+        </div>
+    );
+};
+
+export default Login;

src/components/ButtonOwn/index.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { FC, PropsWithChildren } from "react";
 import clsx from "clsx";
+import { FC, PropsWithChildren } from "react";
 import styles from "./style.module.scss";
 
 /**
@@ -13,16 +13,23 @@ export interface ButtonOwnProps {
     children?: any;
     active?: boolean;
     callbackFun?: () => void;
-    [props: string]: any
+    [props: string]: any;
 }
 
-const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({children = '', active = false, callbackFun}) => {
+const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({
+    children = "",
+    active = false,
+    callbackFun,
+    ...other
+}) => {
     const divClassName = clsx({
         [styles.button]: true,
         [styles.active]: active,
     });
     return (
-        <div className={divClassName} onClick={callbackFun}>{children}</div>
+        <button className={divClassName} {...other} onClick={callbackFun}>
+            {children}
+        </button>
     );
 };
 

src/components/Header/HerderTitle.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { CenterPopup } from "antd-mobile";
 import { useTranslations } from "next-intl";
-import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
+import { FC, PropsWithChildren, useState } from "react";
 import styles from "./style.module.scss";
 interface Props {}
 
@@ -21,14 +21,8 @@ const luanguages = [
 ];
 
 const HeaderTitle: FC<PropsWithChildren<Props>> = (props) => {
-    // const { isOpen, onOpen, onOpenChange } = useDisclosure();
     const t = useTranslations("Header");
-    const app = useRef<HTMLDivElement | null>(null);
     const [visible, setVisible] = useState(false);
-
-    useEffect(() => {
-        app.current = document.querySelector("#app")!;
-    }, []);
     const handler = () => {
         // onOpen();
         setVisible(!visible);
@@ -76,7 +70,7 @@ const HeaderTitle: FC<PropsWithChildren<Props>> = (props) => {
                                     className={"mr-[0.07rem] w-[0.3rem]"}
                                 ></img>
                                 <div className={"mr-[0.04rem]"}>{item.title}</div>
-                                <div> {item.desc}</div>
+                                <div>{item.desc}</div>
                             </div>
                         );
                     })}

src/components/Layout/index.tsx

@@ -96,7 +96,7 @@
 
 "use client";
 import { FooterProps } from "@/components/Footer";
-import Header, { HeaderProps } from "@/components/Header";
+import { HeaderProps } from "@/components/Header";
 import { FC, PropsWithChildren, useEffect, useRef, useState } from "react";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./style.module.scss";
@@ -161,23 +161,23 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
                 {/*</SwiperSlide>*/}
                 <SwiperSlide style={{ width: "100%" }}>
                     <section className="relative h-[100%]" ref={homeContainerRef}>
-                        <Header
-                            {...other}
-                            menuRender={() => (
-                                <div
-                                    className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}
-                                    ref={barRef}
-                                    onClick={openSliderHandler}
-                                >
-                                    <div className={styles.bar}></div>
-                                    <div
-                                        className={styles.bar}
-                                        style={{ width: "0.1389rem" }}
-                                    ></div>
-                                    <div className={styles.bar}></div>
-                                </div>
-                            )}
-                        ></Header>
+                        {/*<Header*/}
+                        {/*    {...other}*/}
+                        {/*    menuRender={() => (*/}
+                        {/*        <div*/}
+                        {/*            className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}*/}
+                        {/*            ref={barRef}*/}
+                        {/*            onClick={openSliderHandler}*/}
+                        {/*        >*/}
+                        {/*            <div className={styles.bar}></div>*/}
+                        {/*            <div*/}
+                        {/*                className={styles.bar}*/}
+                        {/*                style={{ width: "0.1389rem" }}*/}
+                        {/*            ></div>*/}
+                        {/*            <div className={styles.bar}></div>*/}
+                        {/*        </div>*/}
+                        {/*    )}*/}
+                        {/*></Header>*/}
                         <main className={"main-footer-header"} id="maincontainer">
                             {children}
                         </main>