奖金条款弹窗

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

@@ -0,0 +1,45 @@
+"use client";
+import { FC, PropsWithChildren, useEffect, useState, } from "react";
+import "./style.scss";
+import { useTranslations } from "next-intl";
+import { Mask } from 'antd-mobile'
+
+/**
+ * @description 奖金条款
+ */
+export interface MaskComProps {
+    visible?: boolean;
+    callbackFun?: (params: any) => void;
+}
+
+const MaskCom: FC<PropsWithChildren<MaskComProps>> = (props) => {
+    const t = useTranslations("ProfilePage");
+    const [visible, setVisible] = useState(props.visible)
+
+    useEffect(() => {
+        setVisible(props.visible)
+    }, [props.visible])
+
+    return (
+        <Mask visible={visible} onMaskClick={props.callbackFun}>
+            <div className="mask-bonus-box">
+                <div className="mask-box">
+                    <span className="iconfont icon-guanbi" onClick={props.callbackFun}></span>
+                    <div className="title">Termos de Bônus</div>
+                    <div className="popUpMain">
+                        <ul>
+                            <li>O bônus será transferido automaticamente para sua saldo carteira após completar o requisito de rollover de 36x.</li>
+                            <li>O saldo em dinheiro real pode ser sacado a qualquer momento.</li>
+                            <li>Se você fizer um saque quando tiver um saldo de bônus ativo, seu saldo de bônus será perdido.</li>
+                            <li>O bônus não pode ser jogado em Crash, Dados, Esportes Virtuais ou qualquer outro jogo oficial com restrições especiais.</li>
+                            <li>Salvo indicação em contrário, todos os bônus são limitados um por pessoa, por casa, por computador ou por IP.</li>
+                            <li>R$30 é a aposta máxima permitida ao jogar com dinheiro de bônus. Se, após a análise do jogo, 9F.COM descobrir que um jogador violou esta condição, seus bônus e ganhos serão perdidos.</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </Mask>
+    );
+};
+
+export default MaskCom;

src/app/[locale]/(ordinary)/profile/component/MaskCom/style.scss

@@ -0,0 +1,54 @@
+.mask-bonus-box {
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .mask-box {
+    width: 3.4rem;
+    min-height: .5rem;
+    height: auto;
+    background-color: #fff;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .icon-guanbi {
+      position: absolute;
+      right: .2rem;
+      top: .2rem;
+      color: #121212;
+      font-size: .15rem;
+    }
+
+    .title {
+      font-size: .2rem;
+      color: #009d81;
+      font-weight: 700;
+      text-align: center;
+      margin: .22rem .22rem .07rem;
+    }
+
+    .popUpMain {
+      max-height: 70vh;
+      overflow: auto;
+    }
+
+    ul {
+      color: #131313;
+      font-weight: 700;
+      font-size: .14rem;
+      margin: 0 .22rem 0 .28rem;
+      padding-bottom: .17rem;
+
+     li {
+        margin: .1rem 0;
+        list-style: decimal outside;
+        margin-left: .12rem;
+        line-height: .17rem;
+      }
+    }
+  }
+}

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

@@ -4,6 +4,7 @@ import { useRouter } from "@/i18n";
 import clsx from "clsx";
 import ItemCom from "./component/ItemCom";
 import ModalCom from "./component/ModalCom";
+import MaskCom from "./component/MaskCom";
 import './page.scss'
 import { useGlobalStore } from '@/stores';
 import { getUserInfoApi, getUserMoneyApi } from "@/api/user";
@@ -47,6 +48,11 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
         router.push(path)
     }
 
+    const [visible, setVisible] = useState(false);
+    const callbackFun = () => {
+        setVisible(!visible)
+    }
+
     const divClassName = clsx('bgImg', token && 'default');
     return (
         <div className="profile-box">
@@ -84,7 +90,7 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
                             <div>
                                 <span className="iconfont icon-gift2"></span>
                                 <div>
-                                    <span> {t('Bônus')} <img className="a" src="/img/a.png" alt="" /></span>
+                                    <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.lock_point || 0.00 }</span>
@@ -97,11 +103,12 @@ const Profile: FC<PropsWithChildren<Props>> = () => {
             </div>
 
             <div className="link">
-                <span  onClick={() => goPage('/deposit')}>{t('Depósito')}</span>
-                <span  onClick={() => goPage(token ? '/withdraw' : `/login?redirect=withdraw`)}>{t('Sacar')}</span>
+                <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>
     );
 };