|
|
@@ -1,25 +1,90 @@
|
|
|
-import { FC, PropsWithChildren } from "react";
|
|
|
-import clsx from "clsx";
|
|
|
+"use client";
|
|
|
+import { ChangeEvent, FC, PropsWithChildren, useState } from "react";
|
|
|
import ButtonOwn from "@/components/ButtonOwn";
|
|
|
+import Link from "next/link";
|
|
|
import './page.scss'
|
|
|
+import { ActionSheet } from 'antd-mobile'
|
|
|
+import type { Action } from 'antd-mobile/es/components/action-sheet'
|
|
|
+
|
|
|
|
|
|
interface Props {}
|
|
|
|
|
|
-const Withdraw: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
+const actions: Action[] = [
|
|
|
+ { text: 'CPF', key: 'CPF' },
|
|
|
+ { text: 'Número de Celular', key: 'Celular' },
|
|
|
+ { text: 'EMAIL', key: 'EMAIL' },
|
|
|
+]
|
|
|
+
|
|
|
+const Withdraw: FC<PropsWithChildren<Props>> = () => {
|
|
|
let amount = 50
|
|
|
- let amountList = [10,20,50,100,200,500,1000,5000,10000]
|
|
|
+ let [account, setAccount] = useState({
|
|
|
+ secretKey: '',
|
|
|
+ money:''
|
|
|
+ })
|
|
|
+ const setInputVal = (e: ChangeEvent<HTMLInputElement>) => {
|
|
|
+ const {name, value} = e.target;
|
|
|
+ setAccount({
|
|
|
+ ...account,
|
|
|
+ [name]: value
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ let [visible, setVisible] = useState(false)
|
|
|
+ let [prefix, setPrefix] = useState('CPF')
|
|
|
+ let [placeholder, setPlaceholder] = useState('000.000.000-00')
|
|
|
+ const onAction = (action: any) => {
|
|
|
+ setPrefix(action.text as any)
|
|
|
+ if(action.key == 'CPF') {
|
|
|
+ setPlaceholder('000.000.000-00')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(action.key == 'Celular') {
|
|
|
+ setPlaceholder('11 dígitos')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(action.key == 'EMAIL') {
|
|
|
+ setPlaceholder('EMAIL')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
- <div className="deposit-box">
|
|
|
+ <div className="withdraw-box">
|
|
|
<div className="img-box"></div>
|
|
|
- <p className="btn-box" color="primary">PIX Ⅰ</p>
|
|
|
+ <p className="btn-box" color="primary">PIX V</p>
|
|
|
+ <h1>Certifique-se de que o CPF está em seu nome para evitar atrasos.</h1>
|
|
|
+ <div className="amount-box">
|
|
|
+ <span>Tipo de chave PIX</span>
|
|
|
+ <div className="input-box">
|
|
|
+ <label onClick={() => setVisible(true)}>{prefix} <span className="iconfont icon-xialaxuanze"></span></label>
|
|
|
+ <input name="secretKey" type="number" value={account.secretKey} onChange={setInputVal} placeholder={placeholder} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <h1>Vincule conta Pix mais usada, será verificação necessária em adicionar nova conta Pix depois.</h1>
|
|
|
<div className="amount-box">
|
|
|
<span>Montante (BRL):</span>
|
|
|
- <input type="number" placeholder="Mín. 10.00"/>
|
|
|
+ <div className="input-box">
|
|
|
+ <input name="money" type="number" value={account.money} onChange={setInputVal} placeholder="Mín. 10.00"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <ul className="ul-box">
|
|
|
+ <li>Saque Disponivel <span className="tip">0 BRL</span></li>
|
|
|
+ <li>Valor total de resgate <span className="tip">0 BRL</span> <span className="iconfont icon-iconhelp"></span></li>
|
|
|
+ <li>Para aumentar seu saldo disponível, <Link href="/" className="toHome router-link-active" replace>Aposte Agora</Link></li>
|
|
|
+ </ul>
|
|
|
<div className="topUp">
|
|
|
<ButtonOwn active={amount>0?true:false}>Saque</ButtonOwn>
|
|
|
</div>
|
|
|
+
|
|
|
+ <ActionSheet
|
|
|
+ extra=''
|
|
|
+ cancelText='Cancelar'
|
|
|
+ visible={visible}
|
|
|
+ actions={actions}
|
|
|
+ closeOnAction={true}
|
|
|
+ onAction={onAction}
|
|
|
+ onClose={() => setVisible(false)}
|
|
|
+ />
|
|
|
</div>
|
|
|
);
|
|
|
};
|
