index.js

import React, { useState, useEffect } from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { UserOutlined, UnlockOutlined, MessageOutlined } from '@ant-design/icons'
import { APP } from '@/config'
import { sha256 } from 'js-sha256'
import { login, sendCode } from '@/api/login'

import './index.scss'

const PassWordLoginItem = ({ checkPhone }) => (
  <>
    <Form.Item
      name="phone"
      rules={[{ required: true, validator: checkPhone }]}
    >
      <Input
        placeholder="请输入手机号码"
        prefix={<UserOutlined />}
      />
    </Form.Item>

    <Form.Item
      name="password"
      rules={[{ required: true, message: '登录密码不能为空' }]}
    >
      <Input.Password
        placeholder="请输入登录密码"
        prefix={<UnlockOutlined />}
      />
    </Form.Item>

    <p style={{ position: 'relative', height: 22 }}>
      <a href={APP.findPasswordLink + window.location.origin + '/login'} className="forget-password">忘记密码?</a>
    </p>
  </>
)

const CodeLoginItem = ({countDown, btnDisable, getCode, checkPhone, btnLoading}) => (
  <>
    <Form.Item
      name="phone"
      rules={[{ required: true, validator: checkPhone }]}
    >
      <Input
        placeholder="请输入手机号码"
        prefix={<UserOutlined/>}
      />
    </Form.Item>

    <Form.Item
      name="code"
      rules={[{ required: true, message: '验证码不能为空' }]}
    >
      <section style={{display: 'flex'}}>
        <Input
          placeholder="请输入验证码"
          prefix={<MessageOutlined/>}
        />
        <Button
          loading={btnLoading && countDown <= 0}
          disabled={btnDisable || countDown > 0}
          onClick={getCode}
          className="btn-login-code"
        >
          {countDown <= 0 ? '获取验证码' : (countDown + 's')}
        </Button>
      </section>
      
    </Form.Item>
  </>
)

function LoginPage({ history }) {
  const [tabKey, setTabKey] = useState(0)
  // 获取验证码按钮 display
  const [btnDisable, setBtnDisable] = useState(true)
  // 获取验证码按钮 loading
  const [btnLoading, setBtnLoading] = useState(false)
  // 获取验证码按钮 倒计时
  const [countDown, setCountDown] = useState(0)
   // 登录按钮 loading
   let [loginbtnLoading, setLoginbtnLoading] = useState(false)
  const [form] = Form.useForm()

  const onFinish = (data) => {
    console.log('登陆',data)
    let { phone, password, code } = data
    const body = {
      code,
      loginAccount: phone,
      loginPassword: password ? sha256(password) : '',
      applyPlatform: [0],
      applyCarrier: [0],
      operationChannel: 0
    }
    setLoginbtnLoading(true)
    login(body).then(res => {
      console.log(res)
      setLoginbtnLoading(false)
    }).catch(err => {
      setLoginbtnLoading(false)
      message.error(err)
    }).finally(() => {
      console.log(111)
    })
  }

  // 切换登陆方式
  const changeLoginTabs = (num) => {
    setTabKey(num)
  }
  
  // 获取验证码返回结果处理函数
  function handleGetCode() {
    let count = 60
    let timer = null
    timer = setInterval(() => {
      setCountDown(count)
      count--;
      if (count < 0) {
        clearInterval(timer)
      }
    }, 1000)
  }
  // 获取验证码
  const getCode = () => {
    let phone = form.getFieldsValue().phone
    setBtnLoading(true)
    const body = {
      type: 'LOGIN',
      phone
    }
    sendCode(body).then(res => {
      setBtnLoading(false)
      message.success('发送成功');
      handleGetCode()
    }).catch(err => {
      setBtnLoading(false)
      message.error(err)
      console.error(err)
    })
    
  }
  // 校验手机号码
  let checkPhone = (rule, value) => {
    const regular = /^1[3456789]\d{9}$/
    if (!regular.test(value)) {
      setBtnDisable(true)
      return Promise.reject("手机号码格式错误")
    } else {
      setBtnDisable(false)
      return Promise.resolve();
    }
  }

  return (
    <div className="login-box">
      <header className="login-header">
        <section className='logo-box'>
          <img src={require('./images/xbd_logo.png')} width="102" height="36" alt="信巴迪logo"/>
          <span className="platform-name">卖家工作台</span>
        </section>
      </header>

      <div className="content-wrap">
        <div className="content">
          <section className="login-bg"></section>

          <section className="login-controller-box">
            <section className="tabs-box">
              <span className={`tabs-item ${tabKey===0&&'tab-active'}`} onClick={()=>{changeLoginTabs(0)}}>密码登录</span>
              <span className={`tabs-item ${tabKey===1&&'tab-active'}`}  onClick={()=>{changeLoginTabs(1)}}>验证码登录</span>
            </section>
            <Form
              form={form}
              onFinish={onFinish}
              initialValues={{ remember: true }}
              className="login-form"
            >
              {
                tabKey===0?<PassWordLoginItem checkPhone={checkPhone} />:(
                  <CodeLoginItem
                    countDown={countDown}
                    btnDisable={btnDisable}
                    getCode={getCode}
                    checkPhone={checkPhone}
                    btnLoading={btnLoading}
                  />
                )
              }
            
              <Form.Item name="btnSubmit" style={{marginBottom:16}}>
                <Button
                   type="primary"
                   style={{ width: '100%', height: 48, fontSize: 18 }}
                   htmlType="submit"
                   loading={loginbtnLoading}
                >登录</Button>
              </Form.Item>
              <Form.Item
                name="remember"
                valuePropName="checked"
                style={{marginBottom: 20}}
              >
                <Checkbox style={{ userSelect: 'none' }} noStyle>记住账号</Checkbox>
              </Form.Item>
              <p style={{ 'textAlign': 'center' }}>
                还没有账号？
                <a
                  href={APP.registerLink + window.location.origin + '/login'}
                  style={{
                    color: '#1892FF',
                    cursor: 'pointer',
                    userSelect: 'none'
                  }}
                >
                  马上去注册
                </a>
              </p>
          </Form>
          </section>
        </div>
      </div>
      <footer>

      </footer>
    </div>
  )
}

export default LoginPage