feat: 添加手机号验证码登录

src/pages/user/login/components/Login/LoginSms.jsx

-import React, { useRef, forwardRef } from 'react';
-import { Form, Input, Row, Col, Button } from 'antd';
-import { getSMSCaptcha } from '@/services/login';
-import { getDefaultRule } from '@/utils/validator';
+import React, { useRef, useState } from 'react';
+import { Form, Input, Row, Col, Button, message } from 'antd';
+import { history } from 'umi';
+import { apiSMSCaptcha, fakeAccountLogin } from '@/services/login';
+import { getDefaultRule, validatePhone } from '@/utils/validator';
+import localStorage from '@/utils/localStorage';
 import styles from '../../style.less';
 
 const FormItem = Form.Item;
-const LoginSMS = forwardRef((props, ref) => {
-  const refPhone = useRef();
+const LoginSMS = props => {
+  const refSearch = useRef(null);
+  const [second, setSecond] = useState(0);
+  const [form] = Form.useForm();
 
-  const onFinish = ({ phone, code }) => {
-    const { dispatch } = props;
-    dispatch({
-      type: 'login/login',
-      payload: { username: phone, password: code, tenantId: 560761, source: 1 },
+  const onFinish = async ({ phone, code }) => {
+    const res = await fakeAccountLogin({
+      username: phone,
+      tenantId: 560761,
+      source: 1,
+      verifyType: 1,
+      verifyCode: code,
     });
+    if (res && +res.code === 2000) {
+      localStorage.set('token', res.data.accessToken);
+      localStorage.set('refreshtoken', res.data.refreshToken);
+      localStorage.set('atExpire', res.data.atExpire);
+      history.replace('/');
+    } else {
+      message.error(res.msg);
+    }
   };
 
-  const onGetCaptcha = async () => {
-    console.log('this.refPhone.current :>> ', refPhone);
-    // await getSMSCaptcha({
-    //   phone: '',
-    //   tenantId: 560761,
-    //   source: 1,
-    // });
+  // 校验手机号
+  const checkPhone = v => {
+    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
+    return !!v && reg.test(v);
+  };
+
+  const countTimer = () => {
+    let time = 60;
+    setSecond(time);
+    const timer = setInterval(() => {
+      setSecond(--time);
+      if (time < 1) {
+        clearInterval(timer);
+      }
+    }, 1000);
+  };
+
+  // 获取验证码
+  const onGetCaptcha = async e => {
+    const { phone } = form.getFieldsValue();
+    if (!checkPhone(phone)) {
+      message.error('请输入正确的手机号！');
+      return;
+    }
+    const res = await apiSMSCaptcha({
+      phone,
+      tenantId: 560761,
+      source: 1,
+    });
+    if (res && +res.code === 2000) {
+      countTimer();
+    } else {
+      message.error(res.msg);
+    }
   };
 
   return (
-    <Form onFinish={onFinish} name="horizontal_login" layout="inline">
-      <FormItem label="" ref={refPhone} name="phone" rules={[getDefaultRule('请输入手机号!')]}>
+    <Form onFinish={onFinish} form={form} ref={refSearch} name="horizontal_login" layout="inline">
+      <FormItem
+        label=""
+        name="phone"
+        rules={[
+          getDefaultRule('请输入手机号!'),
+          {
+            validator: validatePhone,
+            message: '请输入正确的手机号',
+          },
+        ]}
+      >
         <Input
           placeholder="请输入手机号"
           prefix="+86"
@@ -43,7 +94,7 @@ const LoginSMS = forwardRef((props, ref) => {
           </Col>
           <Col span={8}>
             <Button type="primary" onClick={onGetCaptcha} className={styles.btnCode}>
-              获取验证码
+              {second > 0 ? second : '获取验证码'}
             </Button>
           </Col>
         </Row>
@@ -59,6 +110,6 @@ const LoginSMS = forwardRef((props, ref) => {
       </Button>
     </Form>
   );
-});
+};
 
 export default LoginSMS;

src/pages/user/login/index.jsx

-import { Alert, Tabs, Form, Input, Row, Col, Button } from 'antd';
+import { Alert, Tabs } from 'antd';
 import React, { Component } from 'react';
 import { connect } from 'dva';
-// import { getSMSCaptcha } from '@/services/login';
 import LoginComponents from './components/Login';
-// import { getDefaultRule } from '@/utils/validator';
 import styles from './style.less';
 import LoginSMS from './components/Login/LoginSms';
 
 const { UserName, Password, Submit } = LoginComponents;
-// const FormItem = Form.Item;
 
 @connect(({ login, loading }) => ({
   userLogin: login,

src/services/login.js

 import { stringify } from 'querystring';
 import request from '@/utils/request';
 
+/**
+ * 手机号验证码登录
+ * http://yapi.quantgroups.com/project/509/interface/api/41776
+ */
 export async function fakeAccountLogin(params) {
   return request('/v2/oauth/login', {
     method: 'POST',
@@ -11,9 +15,20 @@ export async function fakeAccountLogin(params) {
 export async function getFakeCaptcha(mobile) {
   return request(`/v2/user/captcha?mobile=${mobile}`);
 }
-export async function getSMSCaptcha(data) {
-  return request.post('/v2/sms/send', { data });
+/**
+ * 获取短信验证码
+ * http://yapi.quantgroups.com/project/509/interface/api/65044
+ */
+export function apiSMSCaptcha(params) {
+  return request('/v2/sms/send', {
+    method: 'POST',
+    data: stringify(params),
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+  });
 }
+// export async function apiSMSLogin(data) {
+//   return request.post(`/v2/oauth/login?${stringify(data)}`);
+// }
 export async function getResFreshToen(token) {
   return request(`/v2/oauth/refreshtoken?refreshtoken=${token}`);
 }

src/utils/request.js

@@ -77,7 +77,7 @@ const refreshRequest = async (url, options) => {
 // request拦截器, 改变url 或 options.
 request.interceptors.request.use(async (url, options) => {
   const token = localStorage.get('token');
-  if (!token && !url.includes('/v2/oauth/login')) {
+  if (!token && !url.includes('/v2/oauth/login') && !url.includes('/v2/sms/send')) {
     window.location.href = `${window.origin}/user/login`;
   }
   const { headers } = options;

src/utils/validator.js

@@ -10,7 +10,7 @@ export const validateRequired = (rule, value, callback) => {
 
 /* 是否合法IP地址 */
 export function validateIP(rule, value, callback) {
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else {
     const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
@@ -25,7 +25,7 @@ export function validateIP(rule, value, callback) {
 /*  是否手机号码或者固话 */
 export function validatePhoneTwo(rule, value, callback) {
   const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (!reg.test(value) && value !== '') {
     callback(new Error('请输入正确的电话号码或者固话号码'));
@@ -36,7 +36,7 @@ export function validatePhoneTwo(rule, value, callback) {
 /*  是否固话 */
 export function validateTelphone(rule, value, callback) {
   const reg = /0\d{2}-\d{7,8}/;
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (!reg.test(value) && value !== '') {
     callback(new Error('请输入正确的固话（格式：区号+号码,如010-1234567）'));
@@ -47,18 +47,18 @@ export function validateTelphone(rule, value, callback) {
 /*  是否手机号码 */
 export function validatePhone(rule, value, callback) {
   const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
-  if (value === '' || value === 'undefined' || value === null) {
-    callback();
-  } else if (!reg.test(value) && value !== '') {
-    callback(new Error('请输入正确的电话号码'));
-  } else {
-    callback();
+  if (!value || value === 'undefined') {
+    return Promise.resolve();
+  }
+  if (!reg.test(value) && value !== '') {
+    return Promise.reject(new Error('请输入正确的电话号码'));
   }
+  return Promise.resolve();
 }
 /*  是否身份证号码 */
 export function validateIdNo(rule, value, callback) {
   const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (!reg.test(value) && value !== '') {
     callback(new Error('请输入正确的身份证号码'));
@@ -69,7 +69,7 @@ export function validateIdNo(rule, value, callback) {
 /*  是否邮箱 */
 export function validateEMail(rule, value, callback) {
   const reg = /^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/;
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (!reg.test(value)) {
     callback(new Error('请输入正确的邮箱地址'));
@@ -80,7 +80,7 @@ export function validateEMail(rule, value, callback) {
 /* 验证内容是否英文数字以及下划线 */
 export function isPassword(rule, value, callback) {
   const reg = /^[_a-zA-Z0-9]+$/;
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (!reg.test(value)) {
     callback(new Error('密码仅由英文字母，数字以及下划线组成'));
@@ -93,7 +93,7 @@ export function isPassword(rule, value, callback) {
 export function checkMaxNumber(rule, value, callback) {
   const re = /^[1-9][0-9]{0,1}$/;
   const rsCheck = re.test(value);
-  if (value === '' || value === 'undefined' || value === null) {
+  if (!value || value === 'undefined') {
     callback();
   } else if (rule.isInteger && !rsCheck) {
     callback(new Error(`请输入[${rule.min}, ${rule.max}]之间的正整数`));