import Form Button Input from antd-mobileimport useState from reactimport getSmsCode from apiuserimport loginscss;let Login = = let phone setphone = useState let smsCode setSmsCode = use

import { Form, Button, Input } from 'antd-mobile' import { useState } from 'react' import { getSmsCode } from '../../api/user' import './login.scss';

let Login = () => { let [phone, setphone] = useState("") let [smsCode, setSmsCode] = useState("") let [btnText, setBtnText] = useState("获取验证码") let [disabled, setdisabled] = useState(false);

let timer = null;
let loginFn = () => {
    console.log("登录触发");
}

let changInput = (type, val) => {
    if (type === 'phone') {
        setphone(val);
    } else {
        setSmsCode(val)
    }
}
let getSmsCodeFn = () => {
    getSmsCode(phone).then(res => {
        console.log(res);
        if (res.data.code === 666) {
            let num = 10;
            setBtnText(`重新获取${num}`);
            setdisabled(true);
            timer = setInterval(() => {
                num--;
                setBtnText(`重新获取${num}`);
                if (num <= 0) {
                    clearInterval(timer);
                    setBtnText('重新获取');
                    setdisabled(false);
                }
            }, 1000)
        }
    })
}

return <>
    <div className='login-0'>
        <span className='login-1'>本网站使用Cookie功能，为您提供最佳的用户体验</span><span className='login-2'>了解更多</span>
        <div className='login-3'>X</div>
    </div>
    <div className='login-4'>
        <div>HONOR</div>
    </div>
    <div className='login-5'>荣耀账号</div>
    <div className='login-box'>
    <div className='flex login-6'>
        <div >国家和地区</div>
        <div>中国</div>
    </div>
        <Form
            name='form'
            footer={<Button block type='submit' color='primary' size='large' onClick={loginFn}>登录</Button>}
        >
            <Form.Item name='phone' label='手机号' rules={[
                { required: true, message: '手机号不能为空' },
                { pattern: /^1\d{10}$/, message: '请输入正确的11位手机号码' }
            ]} >
                <Input type='number' placeholder='请输入手机号' onChange={(val) => { changInput('phone', val) }} />
                {phone}
                <Form.Item>
                    <Button disabled={disabled} type="button" color='primary' onClick={getSmsCodeFn}>{btnText}</Button>
                </Form.Item>
                <Form.Item name='smsCode' label='短信验证码' rules={[{ required: true, message: "验证码不能为空" }]}>
                    <Input type="number" placeholder='请输入验证码' onChange={(val) => { changInput('smsCode', val) }} />
                </Form.Item>
            </Form.Item>
        </Form>
    </div>
</>

}

export default Login