国际化文档字段编写

messages/br.json

@@ -38,5 +38,68 @@
     "third": "Esportes",
     "fourth": "Live Casino",
     "Fifth": "App"
+  },
+  "tabberList": {
+    "tab1": "Início",
+    "tab2": "Depósito",
+    "tab3": "Afiliado",
+    "tab4": "Esportes",
+    "tab5": "Perfil"
+  },
+  "LoginPage": {
+    "loginSuc":"登录成功",
+    "areaCode": "+55",
+    "Celular": "Número de Celular",
+    "Senha": "Senha",
+    "register": "Criar conta",
+    "forgetPwd": "Esqueci minha senha?",
+    "registerGo": "Criar Conta Nova",
+    "loginGo": "Já tem uma conta? Log in",
+    "Googletitle": "Bem Vindo ao 9F.COM",
+    "Googletext": "Entrar com Google+",
+    "registerSuc": "注册成功",
+    "registerGoogletitle": "Bem-vindo à 9F.COM",
+    "registerGoogletext": "Registre-se com Google+",
+    "domainName": "© 9F.COM todos direitos reservados"
+  },
+  "ResetPhonePage": {
+    "enterCorrectphone":"请输入正确的手机号",
+    "h2": "Encontre sua conta",
+    "h3": "Insira seu número de celular para procurar a sua conta.",
+    "areaCode": "+55",
+    "Celular": "Número de Celular",
+    "Continuar": "Continuar"
+  },
+  "VerificationPage": {
+    "h2": "Ativa a sua conta por entrar a Senha de Verificação!",
+    "h3": "A senha de verificação foi enviado para o teu telemóvel",
+    "Reenviar": "Reenviar código",
+    "Envie": "Envie de novo",
+    "Completar": "Completar"
+  },
+  "ProfilePage": {
+    "Login": "Login",
+    "Depósito": "Depósito",
+    "Sacar": "Sacar",
+    "Conta": "Conta",
+    "Saldo": "Saldo",
+    "Bônus": "Bônus",
+    "Sair": "Sair",
+    "Deseja": "Deseja sair?",
+    "Cancelar": "Cancelar",
+    "Continuar": "Continuar"
+  },
+  "DepositPage": {
+    "Montante": "Montante",
+    "Oferecer": "Oferecer",
+
+    "DepositarAgora": "Depositar Agora",
+    "Conta": "Conta",
+    "Saldo": "Saldo",
+    "Bônus": "Bônus",
+    "Sair": "Sair",
+    "Deseja": "Deseja sair?",
+    "Cancelar": "Cancelar",
+    "Continuar": "Continuar"
   }
 }

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

@@ -1,34 +1,21 @@
 import { FC, PropsWithChildren } from "react";
-import clsx from "clsx";
-import { Image } from "@nextui-org/image";
 import ButtonOwn from "@/components/ButtonOwn";
-// import logo from '../../../assets/imgs/deposit/logo.png'
 import './page.scss'
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
-const Deposit: FC<PropsWithChildren<Props>> = (props) => {
-    // let [amount, setAmount] = React.useState(0)
+const Deposit: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("DepositPage");
     let amount = 50
     let amountList = [10,20,50,100,200,500,1000,5000,10000]
 
-    const setAmountFun = (amount = 0) => {
-        // setAmount(amount)
-    }
-
     return (
         <div className="deposit-box">
-            {/* <Image
-                className="img-box"
-                width={300}
-                radius="none"
-                alt="logo"
-                src="https://nextui-docs-v2.vercel.app/images/hero-card-complete.jpeg"
-                /> */}
             <div className="img-box"></div>
             <p className="btn-box" color="primary">PIX Ⅰ</p>
             <div className="amount-box">
-                <span>Montante (BRL):</span>
+                <span>{t('Montante')} (BRL):</span>
                 <input type="number" placeholder="Mín. 10.00"/>
             </div>
             <ul className="ul-box">
@@ -41,13 +28,13 @@ const Deposit: FC<PropsWithChildren<Props>> = (props) => {
                                 <span className="iconfont">R$</span>
                                 <span> {item}</span>
                             </div>
-                            <span className="amountTips">Oferecer 100%</span>
+                            <span className="amountTips">{t('Oferecer')} 100%</span>
                         </li>
                     ))
                 }
             </ul>
             <div className="topUp">
-                <ButtonOwn active={amount>0?true:false}>Depositar Agora</ButtonOwn>
+                <ButtonOwn active={amount>0?true:false}>{t('DepositarAgora')}</ButtonOwn>
             </div>
         </div>
     );

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

@@ -5,6 +5,7 @@ import "./style.scss";
 import { useGlobalStore } from '@/stores';
 import { useRouter } from "@/i18n";
 import {getLogoutApi} from "@/api/user";
+import { useTranslations } from "next-intl";
 
 /**
  * @description 底部组件
@@ -15,10 +16,10 @@ export interface ItemComProps {
 }
 
 const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
+    const t = useTranslations("ProfilePage");
     const { token, setToken, setUserInfo } = useGlobalStore();
     const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
 
-
     const logoutRequest = async () => {
         let res = await getLogoutApi()
         if(res.code == 200) {
@@ -37,8 +38,8 @@ const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
     return (
         <>
              {
-                token ? <span className="logOut" onClick={onOpen}>Sair</span> : (
-                    <span className="logOut" onClick={() => goPage('/login')}>Login</span>
+                token ? <span className="logOut" onClick={onOpen}>{t('Sair')}</span> : (
+                    <span className="logOut" onClick={() => goPage('/login')}>{t('Login')}</span>
                 )
             }
             <Modal 
@@ -57,14 +58,14 @@ const ModalCom: FC<PropsWithChildren<ItemComProps>> = () => {
                 {(onClose) => (
                     <>
                     <ModalBody>
-                        <p className="modal-p-box">Deseja sair?</p>
+                        <p className="modal-p-box">{t('Deseja')}</p>
                     </ModalBody>
                     <ModalFooter>
                         <span className="modal-span-box" onClick={onClose}>
-                            Cancelar
+                            {t('Cancelar')}
                         </span>
                         <span className="modal-span-box active" onClick={logoutRequest}>
-                            Continuar
+                            {t('Continuar')}
                         </span>
                     </ModalFooter>
                     </>

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

@@ -7,10 +7,12 @@ import ModalCom from "./component/ModalCom";
 import './page.scss'
 import { useGlobalStore } from '@/stores';
 import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
 const Profile: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("ProfilePage");
     const { token, userInfo, setUserInfo } = useGlobalStore();
 
     const userInfoRequest = async () => {
@@ -39,14 +41,14 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                         {
                             token && (
                                 <div>
-                                    <span>Conta</span>
+                                    <span>{t('Conta')}</span>
                                     <span className="phone">{userInfo?.user_phone || ''}</span>
                                 </div>
                             )
                         }
                     </div>
                     <div className="goto" onClick={() => goPage('/login')}>
-                        { !token && <span>Login</span> }
+                        { !token && <span>{t('Login')}</span> }
                         <span className="iconfont icon-xiangzuo1"></span>
                     </div>
                 </div>
@@ -56,7 +58,7 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                             <div>
                                 <span className="iconfont icon-icon-wallet"></span>
                                 <div>
-                                    <span> Saldo </span>
+                                    <span>{t('Saldo')}</span>
                                     <div className="num">
                                         <span className="uppercase">brl </span>
                                         <span>{ userInfo?.amount_spent || 0.00 }</span>
@@ -66,7 +68,7 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                             <div>
                                 <span className="iconfont icon-gift2"></span>
                                 <div>
-                                    <span> Bônus <img className="a" src="/img/a.png" alt="" /></span>
+                                    <span> {t('Bônus')} <img className="a" src="/img/a.png" alt="" /></span>
                                     <div className="num">
                                         <span className="uppercase">brl </span>
                                         <span>{ userInfo?.amount_total || 0.00 }</span>
@@ -79,8 +81,8 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
             </div>
 
             <div className="link">
-                <span  onClick={() => goPage('/deposit')}>Depósito</span>
-                <span  onClick={() => goPage(token ? '/withdraw' : `/login?redirect=withdraw`)}>Sacar</span>
+                <span  onClick={() => goPage('/deposit')}>{t('Depósito')}</span>
+                <span  onClick={() => goPage(token ? '/withdraw' : `/login?redirect=withdraw`)}>{t('Sacar')}</span>
             </div>
             <ItemCom />
             <ModalCom  />

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

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import ButtonOwn from "@/components/ButtonOwn";
 import "./style.scss";
+import { useTranslations } from "next-intl";
 
 /**
  * @description 登录注册From表单
@@ -18,6 +19,7 @@ export interface FromComProps {
 }
 
 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,
@@ -59,25 +61,25 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
     return (
         <div className="FromCom">
             <div className="phoneInput">
-                <span className="after">+55</span>
-                <input name="userPhone" type="tel" value={fromParam.userPhone} onChange={setInputVal} placeholder="Número de Celular" maxLength={11} />
+                <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} onInput={verifyPwd} placeholder="Senha" maxLength={12}/>
+                <input name="pwd" type={pwdVisible?'text':'password'} value={fromParam.pwd} onChange={setInputVal} onInput={verifyPwd} 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' : 'Criar conta'}</ButtonOwn>
+                <ButtonOwn active={activeCls} callbackFun={submitRequest}>{type == 'login'? 'Login' : t("register")}</ButtonOwn>
             </div>
             <div className="link">
                 {
                     type == 'login' ? (
                         <>
-                            <Link href="/br/resetPhone">Esqueci minha senha?</Link>
-                            <Link href="/br/register">Criar Conta Nova</Link>
+                            <Link href="/br/resetPhone">{t("forgetPwd")}</Link>
+                            <Link href="/br/register">{t("registerGo")}</Link>
                         </>
-                    ) : <Link href="/br/login" className="active" replace>Já tem uma conta? Log in</Link>
+                    ) : <Link href="/br/login" className="active" replace>{t("loginGo")}</Link>
                 }     
             </div>
         </div>

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

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

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

@@ -10,10 +10,12 @@ import './page.scss'
 import { getLoginApi, getUserInfoApi } from "@/api/user";
 import { useGlobalStore } from '@/stores';
 import { Toast } from 'antd-mobile'
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
 const Login: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("LoginPage");
     const { setToken, setUserInfo } = useGlobalStore();
 
     const router:any = useRouter()
@@ -28,12 +30,11 @@ const Login: FC<PropsWithChildren<Props>> = () => {
             setToken(res.data.token)
             getUserInfoApi().then(res1 => {
                 if (res1.code == 200) {
-                    Toast.show({ icon: 'success', content: '登录成功', maskClickable: false })
+                    Toast.show({ icon: 'success', content: t("loginSuc"), maskClickable: false })
                     setUserInfo(res1.data)
                     setTimeout(() => {
                         router.replace('/' + redirect)
                     }, 1000)
-                    
                 }
             })
         }

src/app/[locale]/register/page.tsx

@@ -8,17 +8,19 @@ import DomainFooter from "@/components/DomainFooter";
 import '../login/page.scss'
 import {getRegisterApi} from "@/api/user";
 import { Toast } from 'antd-mobile'
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
 const Register: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("LoginPage");
     const router:any = useRouter()
     const [msgError, setMsgError] = useState('')
     const registerRequest = async ({userPhone, pwd}: any) => {
         let params = {user_phone: userPhone, pwd, code: '123456'}
         let { code, msg } = await getRegisterApi(params)
         if(code == 200) {
-            Toast.show({ icon: 'success', content: '注册成功', maskClickable: false })
+            Toast.show({ icon: 'success', content: t("registerSuc"), maskClickable: false })
             setTimeout(() => {
                 router.replace('/login')
             }, 1000)
@@ -29,7 +31,7 @@ const Register: FC<PropsWithChildren<Props>> = () => {
     return (
         <div className="register-box">
             <HeaderBack />
-            <GoogleCom title="Bem-vindo à 9F.COM" text="Registre-se com Google+"/>
+            <GoogleCom title={t("registerGoogletitle")} text={t("registerGoogletext")}/>
             <FromCom type="register" callbackFun={registerRequest} msgError={msgError}/>
             <DomainFooter />
         </div>

src/app/[locale]/resetPhone/page.tsx

@@ -8,39 +8,29 @@ import React from "react";
 import { phoneRegex } from "@/utils";
 import {getCheckUserPhoneExistApi} from "@/api/user";
 import { useRouter } from "@/i18n";
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
 const ResetPhone: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("ResetPhonePage");
     const router:any = useRouter()
     let [userPhone, setUserPhone] = useState('')
     const changeUserPhone = (e: { target: { value: any; }; }) => {
         setUserPhone(e.target.value)
     }
-    let [verifyInfo, setVerifyInfo] = useState({
-        msgError: '',
-        check: false
-    })
+    let [msgError, setMsgError] = useState('')
     const blurVerifyPhone = (e: { target: { value: any; }; }) => {
         const {value} = e.target;
-        if (!value) {
-            setVerifyInfo({
-                msgError: '',
-                check: false
-            })
+        if (value == '') {
+            setMsgError('')
             return
         }
         if (value && !phoneRegex(value)) {
-            setVerifyInfo({
-                msgError: '请输入正确的手机号',
-                check: false
-            })
+            setMsgError(t('enterCorrectphone'))
             return
         }
-        setVerifyInfo({
-            msgError: '',
-            check: true
-        })
+        setMsgError('')
     }
     const checkUserPhoneRequest = async () => {
         if(!phoneRegex(userPhone)) return
@@ -49,26 +39,23 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
             router.push(`/verification?userPhone=${userPhone}`)
             return
         }
-        setVerifyInfo({
-            ...verifyInfo,
-            msgError: msg,
-        })
+        setMsgError(msg)
     }
     return (
         <div className="resetPhone-box">
             <HeaderBack />
             <div className="main">
                 <div className="title">
-                    <h2>Encontre sua conta</h2>
-                    <div>Insira seu número de celular para procurar a sua conta.</div>
+                    <h2>{t('h2')}</h2>
+                    <div>{t('h3')}</div>
                 </div>
                 <div className="phoneInput">
-                    <span className="after">+55</span>
-                    <input type="tel" value={userPhone} onChange={changeUserPhone} onBlur={blurVerifyPhone} placeholder="Número de Celular" maxLength={11} />
+                    <span className="after">{t('areaCode')}</span>
+                    <input type="tel" value={userPhone} onChange={changeUserPhone} onBlur={blurVerifyPhone} placeholder={t('Celular')} maxLength={11} />
                 </div>
-                { verifyInfo.msgError && <div className="tips"> {verifyInfo.msgError} </div> }
+                { msgError && <div className="tips"> {msgError} </div> }
                 <div className="btnContent">
-                    <ButtonOwn active={verifyInfo.check} callbackFun={checkUserPhoneRequest}>Continuar</ButtonOwn>
+                    <ButtonOwn active={userPhone.length == 11} callbackFun={checkUserPhoneRequest}>{t('Continuar')}</ButtonOwn>
                 </div>
             </div>
             <DomainFooter />

src/app/[locale]/verification/page.tsx

@@ -8,10 +8,12 @@ import React from "react";
 import {getSendCodeApi} from "@/api/user";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "@/i18n";
+import { useTranslations } from "next-intl";
 
 interface Props {}
 
 const ResetPhone: FC<PropsWithChildren<Props>> = () => {
+    const t = useTranslations("VerificationPage");
     const router:any = useRouter()
     let [code, setCode] = useState('')
     const changeCode = (e: { target: { value: any; }; }) => {
@@ -37,7 +39,6 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
-
     let [isNote, setIsNote] = useState(true);
     let [time, setTime] = useState(60);
     let timeRef: any = useRef();
@@ -68,16 +69,16 @@ const ResetPhone: FC<PropsWithChildren<Props>> = () => {
             <HeaderBack />
             <div className="main">
                 <div className="title">
-                    <h2>Ativa a sua conta por entrar a Senha de Verificação!</h2>
-                    <div>A senha de verificação foi enviado para o teu telemóvel 16982013895</div>
+                    <h2>{t('h2')}</h2>
+                    <div>{t('h3')} {user_phone}</div>
                 </div>
                 <div className="phoneInput">
-                    <input type="tel" value={code} onChange={changeCode} placeholder="Reenviar código" maxLength={6} />
-                    <span className="after" onClick={sendCodeFun}> { isNote ? `${time}s`: 'Envie de novo'} </span>
+                    <input type="tel" value={code} onChange={changeCode} placeholder={t('Reenviar')} maxLength={6} />
+                    <span className="after" onClick={sendCodeFun}> { isNote ? `${time}s`: t('Envie')} </span>
                 </div>
                 { msgError && <div className="tips"> {msgError} </div> }
                 <div className="btnContent">
-                    <ButtonOwn active={code.length==6} callbackFun={goPage}>Completar</ButtonOwn>
+                    <ButtonOwn active={code.length==6} callbackFun={goPage}>{t('Completar')}</ButtonOwn>
                 </div>
             </div>
             <DomainFooter />

src/components/DomainFooter/index.tsx

@@ -2,6 +2,7 @@
 import React, { FC, PropsWithChildren } from "react";
 import clsx from "clsx";
 import styles from "./style.module.scss";
+import { useTranslations } from "next-intl";
 
 /**
  * @description 域名说明Footer组件
@@ -13,13 +14,14 @@ export interface DomainFooterProps {
 }
 
 const DomainFooter: FC<PropsWithChildren<DomainFooterProps>> = () => {
+    const t = useTranslations("LoginPage");
     const spanClassName = clsx({
         [styles.iconfontIcon]: true,
     }, 'iconfont icon-a-18');
     return (
         <div className={styles['footer-box']}>
             <div className={styles.text}>
-                <span>© 9F.COM todos direitos reservados</span>
+                <span>{t('domainName')}</span>
                 <span className={spanClassName}></span>
             </div>
         </div>

src/components/Footer/index.tsx

@@ -3,6 +3,7 @@ import { usePathname, useRouter} from "@/i18n";
 import { FC, PropsWithChildren, ReactNode } from "react";
 import clsx from "clsx";
 import "./style.scss";
+import { useTranslations } from "next-intl";
 
 /**
  * @description 底部Tab组件
@@ -14,30 +15,31 @@ export interface FooterProps {
 }
 
 const Footer: FC<PropsWithChildren<FooterProps>> = () => {
+    const t = useTranslations("tabberList");
     const tabList = [
         {
             iconSpanName: 'icon-home',
-            label: 'Início',
+            label: t('tab1'),
             path: '/'
         },
         {
             iconSpanName: 'icon-qianbao1',
-            label: 'Depósito',
+            label: t('tab2'),
             path: '/deposit'
         },
         {
             iconSpanName: 'icon-afiliado',
-            label: 'Afiliado',
+            label: t('tab3'),
             path: '/affiliate/summary'
         },
         {
             iconSpanName: 'icon-tiyu',
-            label: 'Esportes',
+            label: t('tab4'),
             path: '/'
         },
         {
             iconSpanName: 'icon-yonghu',
-            label: 'Perfil',
+            label: t('tab5'),
             path: '/profile'
         },
     ]