ai-copyright-mobile/src/views/Login/Login.jsx

import { useState } from 'react'
import './login.less'
import { Input, Toast, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
// // 引入接口
import { GetCode, DoLogin, GetUserId, UpdateUserInfo } from '../../request/api'
// import Cookies from 'js-cookie';
export default function Login() {
  // var login = async () => {

  //   var res = await DoLogin({ password: pass, username: user })
  //   console.log(res);
  //   if (res.errCode == 0) {

  //     localStorage.setItem('token', res.data)
  //     // alert('登陆成功')
  //     // dispatch({
  //     //   type:'login',
  //     // })
  //     Toast('登陆成功', 'success')
  //     navigate('/home')

  //   } else {
  //     // console.log("失败");
  //     // 抛出错误
  //     throw new Error()
  //   }


  // }
  const nav = useNavigate()
  // 手机号
  const [phoneNum, setPhoneNum] = useState('')
  // 倒计时
  const [num, setNum] = useState(60)
  // 验证码,
  const [code, setCode] = useState('')
  // 是否显示发送验证码按钮
  const [showBtn, setShowBtn] = useState(true)
  // 获取验证码
  const getCode = async () => {


    // 手机号正则
    const reg = /^1[3-9]\d{9}$/;

    if (!reg.test(phoneNum)) {
      Toast.show({
        icon: 'fail',
        content: '请输入正确的手机号',
      })

      return
    } else {
      var res = await GetCode(phoneNum)
      console.log(res);

    }
    // 发送验证码逻辑
    Toast.show({
      icon: 'success',
      content: '验证码已发送',
    })
    setShowBtn(false)
    // 开始倒计时 
    startCountdown();
  }
  // 开始倒计时的函数
  const startCountdown = () => {
    setShowBtn(false);
    let countdown = 59;

    const interval = setInterval(() => {
      setNum(countdown);
      countdown--;

      if (countdown < 0) {
        clearInterval(interval);
        setShowBtn(true);
      }
    }, 1000);
  };
  // 登录
  const login = async () => {
  

    // 验证code是否为6位数数字正则
    const reg = /^\d{6}$/;
    try {
      if (!reg.test(code)) {
        Toast.show({
          icon: 'fail',
          content: '请输入正确的验证码',
        })
        return
      } else {
        var res = await DoLogin({ verifyCode: code, phone: phoneNum })
        sessionStorage.setItem('token', res.data);
        let idRes = await GetUserId()
        // console.log(res);
        // nav('/list')
        if (idRes.hasUserInfo) {
          nav('/list')
        } else {
          try {
            let upRes = await UpdateUserInfo({
              userInfoName: '新用户',
              contactPhone: phoneNum,
              idCardType: 'ID_CARD',
              userInfoType: 'PERSONAL',
            })
            console.log(upRes);
            nav('/list')
          } catch (err) {
            console.log(err);
          }


        }
      }
    } catch (error) {
      Toast.show({
        icon: 'fail',
        content: error.response.data.msg,
      })
    }
    // sessionStorage.setItem('token', 'cVJWWXQ1UWpQWTQ1TDZMbEVtTmxiMlJVNkdvTzUwSTNHYzZaK3VTZmF0RTZLVG1LSUFpUzMrSWsvcVRHay9Wb0xCa3g0elJkWGVwSEw2emREeGdEQldpOEt4TDZPVVNQa3FmK09pazUxblA0K2dHWitHUHFnRnVDU21lOGVyLzdyblJpRUpoQlp4Z1l5aXV3aWE1WFlTdkJXeFhCc0JyMlducHlpV1F2L09JdUNRa082dTZ0T0NzbCs4azZGUTZRZUZMWmc3QXJzSG5mMk53SFNJa01FN3pzSUY1WTViQTBVVmp0T1pnQTNBbz0=');
    // nav('/list')

  }
  return (
    <div className='login'>
      <div className='loginTitle'>
        验证码登录
        <div className='titleLine'>
        </div>
      </div>

      <div className='loginInput'>
        <Input className='phoneInput'
          type="tel"
          placeholder='请输入手机号'
          value={phoneNum}
          onChange={value => {
            setPhoneNum(value)
          }}
          clearable />
        <div className='numInputBox'>
          <Input className='numInput'
            onChange={value => {
              setCode(value)
              // setCode(String(value))
            }}
            value={code}
            type="tel"
            placeholder='请输入验证码'
            clearable
          />
          <div onClick={getCode} style={{ display: showBtn ? 'unset' : 'none' }} className='numBtn'>获取验证码</div>
          <div style={{ display: showBtn ? 'none' : 'unset' }} className='numBtn'><span className='numTime'>{num}</span> <span className='unmText'>秒后重试</span> </div>
        </div>
      </div>


      <Button block className='loginBtn' disabled={phoneNum && code ? false : true} onClick={login}>
        创建账号并登录
      </Button>



    </div>
  )
}