优化+充值接口+获取用户金额接口对接

messages/br.json

@@ -92,7 +92,8 @@
   "DepositPage": {
     "Montante": "Montante",
     "Oferecer": "Oferecer",
-    "DepositarAgora": "Depositar Agora"
+    "DepositarAgora": "Depositar Agora",
+    "RechargeSuc": "充值成功"
   },
   "WithdrawPage": {
     "Certifique": "Certifique-se de que o CPF está em seu nome para evitar atrasos.",
@@ -106,5 +107,8 @@
     "Saque": "Saque",
     "Cancelar": "Cancelar",
     "Número": "Número de Celular"
+  },
+  "HeaderBack": {
+    "Depósito": "Depósito"
   }
 }

src/api/user.ts

@@ -72,16 +72,22 @@ export const getSendCodeApi = (params: any) => {
 // 前台用户获取信息
 export const getUserInfoApi = () => {
     return server.post<any>({
-        url: "/v1/api/user/user_info",
-        toast: true
+        url: "/v1/api/user/user_info"
     });
 };
 
-
 // 前台用户获取金额信息
 export const getUserMoneyApi = () => {
     return server.post<any>({
-        url: "/v1/api/user/user_money",
+        url: "/v1/api/user/user_money"
+    });
+};
+
+// 前台用户充值
+export const getUserRechargeApi = (data: any) => {
+    return server.post<any>({
+        url: "/v1/api/user/user_recharge",
+        data,
         toast: true
     });
 };

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

@@ -1,14 +1,34 @@
-import { FC, PropsWithChildren } from "react";
+"use client";
+import { FC, PropsWithChildren, useState } from "react";
 import ButtonOwn from "@/components/ButtonOwn";
 import './page.scss'
 import { useTranslations } from "next-intl";
+import { getUserRechargeApi } from "@/api/user";
+import { useGlobalStore } from '@/stores';
+import { Toast } from 'antd-mobile'
 
 interface Props {}
 
+let amountList = [10,20,50,100,200,500,1000,5000,10000]
+
 const Deposit: FC<PropsWithChildren<Props>> = () => {
     const t = useTranslations("DepositPage");
-    let amount = 50
-    let amountList = [10,20,50,100,200,500,1000,5000,10000]
+    const { userInfo } = useGlobalStore();
+
+    let [amount, setAmount] = useState(0)
+    const ChangeAmount = (e: any) => {
+        let newAmount = e.target.value.replace(/[^0-9]/g, '')
+        setAmount(newAmount)
+    }
+
+    const userRechargeRequest = async () => {
+        if(amount < 10) return
+        let res = await getUserRechargeApi({amount: parseInt(amount as any), user_id: userInfo.id})
+        if(res.code == 200) {
+            setAmount(0)
+            Toast.show({ icon: 'success', content: t("RechargeSuc"), maskClickable: false })
+        }
+    }
 
     return (
         <div className="deposit-box">
@@ -16,13 +36,13 @@ const Deposit: FC<PropsWithChildren<Props>> = () => {
             <p className="btn-box" color="primary">PIX Ⅰ</p>
             <div className="amount-box">
                 <span>{t('Montante')} (BRL):</span>
-                <input type="number" placeholder="Mín. 10.00"/>
+                <input type="number" value={amount} onChange={ChangeAmount} placeholder="Mín. 10.00"/>
             </div>
             <ul className="ul-box">
                 {
                     amountList.map((item, index) => (
-                        <li className={amount==item?'active':''} key={index}>
-                            <span className="hot"></span>
+                        <li className={amount==item?'active':''} key={index} onClick={() => setAmount(item)}>
+                            { (index == 2 || index == 3  || index == 6) && <span className="hot"></span> } 
                             <div className="amountContent">
                                 {/* <span className="iconfont icon-unit-brl"></span> */}
                                 <span className="iconfont">R$</span>
@@ -34,7 +54,7 @@ const Deposit: FC<PropsWithChildren<Props>> = () => {
                 }
             </ul>
             <div className="topUp">
-                <ButtonOwn active={amount>0?true:false}>{t('DepositarAgora')}</ButtonOwn>
+                <ButtonOwn active={amount>=10?true:false} callbackFun={userRechargeRequest}>{t('DepositarAgora')}</ButtonOwn>
             </div>
         </div>
     );

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

@@ -1,5 +1,5 @@
 "use client";
-import { FC, PropsWithChildren, useEffect } from "react";
+import { FC, PropsWithChildren, useEffect, useState } from "react";
 import { useRouter } from "@/i18n";
 import clsx from "clsx";
 import ItemCom from "./component/ItemCom";
@@ -13,15 +13,31 @@ interface Props {}
 
 const Profile: FC<PropsWithChildren<Props>> = () => {
     const t = useTranslations("ProfilePage");
+    
     const { token, userInfo, setUserInfo } = useGlobalStore();
-
     const userInfoRequest = async () => {
         getUserInfoApi().then(res => {
             res.code == 200 && setUserInfo(res.data)
         })
     }
+
+    let [money, setMoney] = useState({
+        point: 0,
+        lock_point: 0
+    })
+    const userMoneyRequest = async () => {
+        getUserMoneyApi().then(res => {
+            res.code == 200 && setMoney({
+                point: res.data.point,
+                lock_point: res.data.lock_point
+            })
+        })
+    }
     useEffect(() => {
-        token && userInfoRequest()
+        if (token) {
+            userInfoRequest()
+            userMoneyRequest()
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
     
@@ -61,7 +77,7 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                                     <span>{t('Saldo')}</span>
                                     <div className="num">
                                         <span className="uppercase">brl </span>
-                                        <span>{ userInfo?.amount_spent || 0.00 }</span>
+                                        <span>{ money.point || 0.00 }</span>
                                     </div>
                                 </div>
                             </div>
@@ -71,7 +87,7 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                                     <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>
+                                        <span>{ money.lock_point || 0.00 }</span>
                                     </div>
                                 </div>
                             </div>

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

@@ -42,18 +42,17 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
 
     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 verifyPwd = (e: any) => {
-        let pwd = e.target.value || '';
-        pwd.replaceAll(/[^a-zA-Z0-9_-]/g, '')
-        setFromParam({ ...fromParam, pwd })
-    }
-
     const submitRequest = () => {
         activeCls && callbackFun!(fromParam)
     }
@@ -65,7 +64,7 @@ const FromCom: FC<PropsWithChildren<FromComProps>> = ({type = 'login', msgError
                 <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={t("Senha")} maxLength={12}/>
+                <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">

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

@@ -28,6 +28,12 @@ const Login: FC<PropsWithChildren<Props>> = () => {
         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 })

src/components/HeaderBack/index.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { FC, PropsWithChildren, ReactNode } from "react";
-import Router from 'next/router';
-import { useRouter } from "@/i18n";
+import { FC, PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import { useRouter, usePathname } from "@/i18n";
 import clsx from "clsx";
 import styles from "./style.module.scss";
+import { useTranslations } from "next-intl";
 
 /**
  * @description 自定义头部返回组件
@@ -18,6 +18,8 @@ export interface HeaderBackProps {
 }
 
 const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({title = '', children}) => {
+    const t = useTranslations("HeaderBack");
+
     const iconClassName1 = clsx({
         [styles.iconfontIcon1]: true,
     },'iconfont icon-xiangzuo1');
@@ -25,6 +27,20 @@ const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({title = '', childre
         [styles.iconfontIcon2]: true,
     },'iconfont icon-company_nav_icon_home');
 
+    let pathname = usePathname()
+    let [selfTitle, setSelfTitle] = useState('')
+    const setSelfTitleFun = () => {
+        if(pathname == '/deposit') {
+            setSelfTitle(t('Depósito'))
+            return
+        }
+        setSelfTitle('')
+    }
+    useEffect(() => {
+        setSelfTitleFun()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pathname])
+
     const router:any = useRouter()
     const goPage = (path = '') => {
         if (path) {
@@ -39,7 +55,7 @@ const HeaderBack: FC<PropsWithChildren<HeaderBackProps>> = ({title = '', childre
             <div className={styles.left} onClick={() => goPage()}>
                 <span className={iconClassName1}></span>
             </div>
-            {title && <span className={styles.title}>{title}</span>}
+            {(title || selfTitle) && <span className={styles.title}>{title || selfTitle}</span>}
             {children}
             <span className={styles.right} onClick={() => goPage('home')}>
                 <span className={iconClassName2}></span>