feat: 修改注册登陆

src/app/[locale]/(enter)/components/Form/index.tsx

@@ -26,7 +26,8 @@ import clsx from "clsx";
 import dayjs from "dayjs";
 import { useTranslations } from "next-intl";
 import { useSearchParams } from "next/navigation";
-import { FC, RefObject, useRef, useState } from "react";
+import { FC, RefObject, useEffect, useRef, useState } from "react";
+import styles from "./style.module.scss";
 interface MobileFieldProps {
     value?: string;
     onChange?: (value: string) => void;
@@ -133,7 +134,7 @@ interface FormInitStateTypes extends FormProps {
         realValue: string;
     };
 }
-type FormType = "login" | "register";
+export type FormType = "login" | "register";
 interface Props {
     type?: FormType;
 }
@@ -146,7 +147,7 @@ const FormComponent: FC<Props> = (props) => {
     const [statusText, setStatusText] = useState("");
 
     const { eventLogin, eventRegister } = useEventPoint();
-
+    const formRef = useRef<any>(null);
     /// 密码可见
     const [visible, setVisible] = useState(false);
     const spanClassName = clsx("iconfont", {
@@ -169,6 +170,10 @@ const FormComponent: FC<Props> = (props) => {
         referrer_code: undefined,
     });
 
+    useEffect(() => {
+        formRef.current?.resetFields();
+    }, [type]);
+
     const onFinish = (values: FormInitStateTypes) => {
         const { mobile } = values;
         const newValue = {
@@ -309,17 +314,18 @@ const FormComponent: FC<Props> = (props) => {
         }
     };
     return (
-        <Box className={"custom-form"}>
+        <Box className={clsx(styles.loginForm, "custom-form")}>
             <Form
                 style={{
                     "--border-bottom": "none",
                     "--border-top": "none",
                     "--border-inner": "none",
                 }}
+                ref={formRef}
                 initialValues={params.current}
                 onFinish={onFinish}
                 footer={
-                    <ButtonOwn active>
+                    <ButtonOwn active className={styles.btn}>
                         {type === "login" ? t("form.loginText") : t("form.registerText")}
                     </ButtonOwn>
                 }
@@ -330,10 +336,13 @@ const FormComponent: FC<Props> = (props) => {
 
                 <Form.Item
                     name="pwd"
-                    label=""
+                    label={
+                        <i className="iconfont icon-xiugaimima text-[.18rem] text-[#465461]"></i>
+                    }
                     extra={
                         <span className={spanClassName} onClick={() => setVisible(!visible)}></span>
                     }
+                    layout="horizontal"
                     rules={[
                         { required: true, message: t("form.passwordReg") },
                         { min: 6, max: 20, message: t("form.passwordMinReg") },
@@ -450,23 +459,19 @@ const FormComponent: FC<Props> = (props) => {
                         </div>
                     </>
                 ) : null}
+                <div className="mb-[0.2rem] flex justify-end text-[0.12rem]">
+                    {type == "login" && (
+                        <>
+                            <Link className={"text-[#677787]"} href="/resetPhone">
+                                {t("LoginPage.forgetPwd")}
+                            </Link>
+                            {/* <Link className={"text-[#fff]"} href="/register">
+                                {t("LoginPage.registerGo")}
+                            </Link> */}
+                        </>
+                    )}
+                </div>
             </Form>
-            <div className="mb-[0.2rem] flex justify-between text-[0.12rem]">
-                {type == "login" ? (
-                    <>
-                        <Link className={"text-[#fff]"} href="/resetPhone">
-                            {t("LoginPage.forgetPwd")}
-                        </Link>
-                        <Link className={"text-[#fff]"} href="/register">
-                            {t("LoginPage.registerGo")}
-                        </Link>
-                    </>
-                ) : (
-                    <Link className={"w-[100%] text-center text-[#fff]"} href="/login" replace>
-                        {t("LoginPage.loginGo")}
-                    </Link>
-                )}
-            </div>
         </Box>
     );
 };

src/app/[locale]/(enter)/components/Form/style.module.scss

@@ -1 +1,15 @@
-
+.loginForm {
+    :global(.adm-form-item-required-asterisk) {
+        display: none;
+    }
+    :global(.adm-list-item-content-prefix) {
+        width: auto;
+    }
+    :global(.adm-form-footer) {
+        padding: 0px 0 !important;
+    }
+}
+.btn {
+    background: #11de68 !important;
+    color: #12221e;
+}

src/app/[locale]/(enter)/login/LoginService.tsx

@@ -1,15 +1,42 @@
-import { getServicesApi } from "@/api/customservice";
+"use client";
+import { ServiceTypes } from "@/api/customservice";
+import { server } from "@/utils/client";
 import Link from "next/link";
+import React from "react";
 
-const LoginService = async () => {
-    const services = await getServicesApi();
-    const defaultService = services?.filter((item) => item.register_show === 1);
+export const getServicesApi = async () => {
+    return server
+        .request<ServiceTypes[]>({
+            url: "/v1/api/front/links/services",
+            method: "POST",
+        })
+        .then((res) => {
+            return res.data;
+        })
+        .catch((err) => {
+            return [];
+        });
+};
+
+const LoginService = ({ services }: any) => {
+    const [service, setService] = React.useState<ServiceTypes[]>([]);
+    React.useEffect(() => {
+        getData;
+    }, []);
+    const getData = async () => {
+        const res = await getServicesApi();
+        setService(res);
+    };
+
+    const defaultService = React.useMemo(() => {
+        return services?.filter((item: ServiceTypes) => item.register_show === 1);
+    }, [service]);
     return (
         <div
             className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
         >
             {defaultService &&
-                defaultService.map((item, index) => (
+                defaultService.map((item: ServiceTypes, index: number) => (
                     <Link
                         key={index}
                         href={item.url}

src/app/[locale]/(enter)/login/index.module.scss

@@ -0,0 +1,21 @@
+// #loginLayout {
+//     @extend .customInputPage;
+// }
+.page {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-image: url("/login/header.png");
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+}
+.tabItem {
+    border-bottom: 2px solid transparent;
+    padding-bottom: 0.04rem;
+    &.active {
+        border-bottom: 2px solid #11de68;
+        span {
+            color: #11de68;
+        }
+    }
+}

src/app/[locale]/(enter)/login/index.scss

@@ -1,3 +0,0 @@
-#loginLayout {
-    @extend .customInputPage;
-}

src/app/[locale]/(enter)/login/layout.tsx

@@ -1,6 +1,7 @@
-import HeaderBack from "@/components/HeaderBack";
+// import { getServicesApi } from "@/api/customservice";
 import { getTranslations } from "next-intl/server";
 import { ReactNode } from "react";
+
 export const generateMetadata = async () => {
     const t = await getTranslations("titles");
     return {
@@ -15,12 +16,15 @@ export default async function Layout({
     params: { locale: string };
 }) {
     const t = await getTranslations("ProfilePage");
+    // const services = await getServicesApi();
     return (
-        <div className="h-[100%] bg-[url('/bg.png')]">
-            <HeaderBack showBack={false} useBg={true} />
-            <main className={"main-header"} id={"loginLayout"}>
-                {children}
-            </main>
+        <div className="h-[100%] bg-[#000000]">
+            {/* <HeaderBack showBack={false} useBg={false} /> */}
+            {/* <main className={""} id={"loginLayout"}>
+               
+            </main> */}
+            {children}
+            div
         </div>
     );
 }

src/app/[locale]/(enter)/login/page.tsx

@@ -1,30 +1,76 @@
-"use server";
-import { getTranslations } from "next-intl/server";
-import { Suspense } from "react";
-import Form from "../components/Form";
-import GoogleCom from "../components/GoogleCom";
+"use client";
+import { useRouter } from "@/i18n/routing";
+import clsx from "clsx";
+import { useTranslations } from "next-intl";
+import React from "react";
+import Form, { FormType } from "../components/Form";
 import Adbox from "./adbox";
-import "./index.scss";
+import styles from "./index.module.scss";
 import LoginService from "./LoginService";
 
-const Login = async () => {
-    const t = await getTranslations("LoginPage");
+const Login = () => {
+    const t = useTranslations("LoginPage");
+    const router = useRouter();
+    const [act, setAct] = React.useState<FormType>("login");
+    const tabCfg = React.useMemo(() => {
+        return [
+            {
+                text: "Registro",
+                icon: "/login/registe.png",
+                key: "register" as FormType,
+            },
+            {
+                text: "Login",
+                icon: "/login/login.png",
+                key: "login" as FormType,
+            },
+        ];
+    }, []);
 
     return (
-        <>
-            <GoogleCom />
-            <Form type={"login"} />
-            <div className={"text-center"}>
-                <span className={"mr-[20px] text-[14px] text-[#fff]"}>{t("childTips")}</span>
-                <span className={"iconfont icon-a-18 text-[red]"}></span>
+        <div className={styles.page}>
+            <div className="relative h-[1.8rem]">
+                <div
+                    onClick={() => router.back()}
+                    className="absolute right-[10px] top-[10px] flex h-[.34rem] w-[.34rem] items-center justify-center rounded-[50%] bg-[rgba(0,0,0,.5)]"
+                >
+                    <i className="iconfont icon-guanbi"></i>
+                </div>
+            </div>
+            <div className="flex-1">
+                <div className="pb-[.4rem] text-center text-[.18rem]">
+                    <span className="text-[#afbbc6]">Bem Vindo ao</span>
+                    <span className="text-[#0abd71]">BCWIN777.com</span>
+                </div>
+                <div className="flex items-center justify-center pb-[.4rem]">
+                    {tabCfg.map((item, idx) => {
+                        return (
+                            <div
+                                key={item.text}
+                                className={clsx("flex items-center", styles.tabItem, {
+                                    "mr-[.6rem]": idx === 0,
+                                    [styles.active]: item.key === act,
+                                })}
+                                onClick={() => {
+                                    setAct(item.key);
+                                }}
+                            >
+                                <img src={item.icon} className="mr-[.04rem] h-[0.24rem]" alt="" />
+                                <span>{item.text}</span>
+                            </div>
+                        );
+                    })}
+                </div>
+                <Form type={act} />
+                <Adbox></Adbox>
+            </div>
+            <div className={"flex items-center justify-center bg-[#191f25] px-[.1rem] py-[.2rem]"}>
+                <span className={"mr-[10px] text-[12px] text-[#fff]"}>{t("childTips")}</span>
+                <span className={"iconfont icon-a-18 text-[.2rem] text-[red]"}></span>
             </div>
 
-            <Adbox></Adbox>
-
-            <Suspense fallback={<div></div>}>
-                <LoginService />
-            </Suspense>
-        </>
+            <LoginService />
+        </div>
     );
 };
 

src/app/globals.scss

@@ -154,14 +154,17 @@ input[type="number"] {
     padding: 0 0.18rem;
     .adm-list-item-content {
         border-radius: 0.06rem;
-        background-color: #494949;
+        background-color: #191f25;
         margin-bottom: 0.1rem;
-        padding: 0.06rem 0.1rem;
+        padding: 0 0.1rem;
     }
 
     .adm-list-item {
         padding-left: 0;
     }
+    .adm-form-item-child-inner {
+        line-height: 1;
+    }
 }
 
 @media (min-width: 320px) {

src/components/ButtonOwn/index.tsx

@@ -27,12 +27,15 @@ const ButtonOwn: FC<PropsWithChildren<ButtonOwnProps>> = ({
     style,
     ...other
 }) => {
-    const divClassName = clsx({
-        [styles.button]: true,
-        [styles.active]: active,
-        [styles.deposit]: deposit,
-        className,
-    });
+    const divClassName = clsx(
+        {
+            [styles.button]: true,
+            [styles.active]: active,
+            [styles.deposit]: deposit,
+        },
+        className
+    );
+
     return (
         <button
             style={style}

src/components/Fields/MobileField.tsx

@@ -42,11 +42,10 @@ const MobileField: FC<MobileFieldProps> = ({
         <>
             <Space align="center">
                 {code && (
-                    <>
-                        <Space align="center" onClick={() => setVisible(true)}>
-                            <div className={"text-[#c7ceff]"}>+{value.preValue}</div>
-                        </Space>
-                    </>
+                    <div className="flex items-center leading-[1]" onClick={() => setVisible(true)}>
+                        <img src="/sidebar/br.png" className="mr-[.1rem] h-[.2rem]" alt="" />
+                        <div className={"text-[#fff]"}>+{value.preValue}</div>
+                    </div>
                 )}
                 <Input
                     value={value.realValue}