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 styles from '../../style.less';
+
+const FormItem = Form.Item;
+const LoginSMS = forwardRef((props, ref) => {
+  const refPhone = useRef();
+
+  const onFinish = ({ phone, code }) => {
+    const { dispatch } = props;
+    dispatch({
+      type: 'login/login',
+      payload: { username: phone, password: code, tenantId: 560761, source: 1 },
+    });
+  };
+
+  const onGetCaptcha = async () => {
+    console.log('this.refPhone.current :>> ', refPhone);
+    // await getSMSCaptcha({
+    //   phone: '',
+    //   tenantId: 560761,
+    //   source: 1,
+    // });
+  };
+
+  return (
+    <Form onFinish={onFinish} name="horizontal_login" layout="inline">
+      <FormItem label="" ref={refPhone} name="phone" rules={[getDefaultRule('请输入手机号!')]}>
+        <Input
+          placeholder="请输入手机号"
+          prefix="+86"
+          maxLength={11}
+          className={styles.txt}
+          allowClear
+        />
+      </FormItem>
+      <FormItem label="" name="code" rules={[getDefaultRule('请输入验证码!')]}>
+        <Row>
+          <Col span={16}>
+            <Input placeholder="请输入验证码" maxLength={6} className={styles.txt} allowClear />
+          </Col>
+          <Col span={8}>
+            <Button type="primary" onClick={onGetCaptcha} className={styles.btnCode}>
+              获取验证码
+            </Button>
+          </Col>
+        </Row>
+      </FormItem>
+      <Button
+        type="primary"
+        htmlType="submit"
+        size="large"
+        className={styles.btnSubmit}
+        loading={props.submitting}
+      >
+        登录
+      </Button>
+    </Form>
+  );
+});
+
+export default LoginSMS;

src/pages/user/login/index.jsx

-import { Alert } from 'antd';
+import { Alert, Tabs, Form, Input, Row, Col, Button } 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,
@@ -39,44 +43,52 @@ class Login extends Component {
     const { status } = userLogin;
     return (
       <div className={styles.main}>
-        <LoginComponents
-          onSubmit={this.handleSubmit}
-          onCreate={form => {
-            this.loginForm = form;
-          }}
-        >
-          {status === 'error' &&
-            !submitting &&
-            this.renderMessage('账户或密码错误（admin/ant.design）')}
-          <UserName
-            name="username"
-            placeholder={`${'用户名'}`}
-            rules={[
-              {
-                required: true,
-                message: '请输入用户名!',
-              },
-            ]}
-          />
-          <Password
-            name="password"
-            placeholder={`${'密码'}`}
-            rules={[
-              {
-                required: true,
-                message: '请输入密码！',
-              },
-            ]}
-            onPressEnter={e => {
-              e.preventDefault();
+        <Tabs defaultActiveKey="1" destroyInactiveTabPane>
+          <Tabs.TabPane tab="账号密码登录" key="1">
+            <LoginComponents
+              onSubmit={this.handleSubmit}
+              onCreate={form => {
+                this.loginForm = form;
+              }}
+            >
+              {status === 'error' &&
+                !submitting &&
+                this.renderMessage('账户或密码错误（admin/ant.design）')}
+              <UserName
+                name="username"
+                placeholder={`${'用户名'}`}
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入用户名!',
+                  },
+                ]}
+              />
+              <Password
+                name="password"
+                placeholder={`${'密码'}`}
+                rules={[
+                  {
+                    required: true,
+                    message: '请输入密码！',
+                  },
+                ]}
+                onPressEnter={e => {
+                  e.preventDefault();
 
-              if (this.loginForm) {
-                this.loginForm.validateFields(this.handleSubmit);
-              }
-            }}
-          />
-          <Submit loading={submitting}>登录</Submit>
-        </LoginComponents>
+                  if (this.loginForm) {
+                    this.loginForm.validateFields(this.handleSubmit);
+                  }
+                }}
+              />
+
+              <Submit loading={submitting}>登录</Submit>
+            </LoginComponents>
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="手机号登录" key="2">
+            <LoginSMS loading={submitting} dispatch={this.props.dispatch} />
+          </Tabs.TabPane>
+        </Tabs>
       </div>
     );
   }

src/pages/user/login/style.less

@@ -35,5 +35,50 @@
       width: 100%;
       margin-top: 24px;
     }
+    .ant-tabs-tab {
+      font-size: 16px;
+    }
+    .ant-tabs-top > .ant-tabs-nav::before {
+      border-bottom: 1px solid #ddd;
+    }
+    .ant-form-inline .ant-form-item-with-help {
+      margin-bottom: 0;
+    }
+    .ant-form-item-control {
+      min-height: 65px;
+    }
+    .ant-form-item {
+      width: 100%;
+    }
+    .ant-input {
+      padding-left: 4px !important;
+    }
   }
 }
+.txt {
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 6.5px 11px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 0;
+  transition: all 0.3s;
+}
+.btnCode {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btnSubmit {
+  width: 100%;
+}

src/services/login.js

@@ -11,6 +11,9 @@ 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 });
+}
 export async function getResFreshToen(token) {
   return request(`/v2/oauth/refreshtoken?refreshtoken=${token}`);
 }

src/utils/validator.js

@@ -435,3 +435,20 @@ export function isCheckPriceTwoDecimal(rule, value, callback) {
     callback();
   }
 }
+
+// 获取默认校验规则
+export const getDefaultRule = data => {
+  const isString = typeof data === 'string';
+  if (isString) {
+    return {
+      required: true,
+      message: data,
+    };
+  }
+  return Object.assign(
+    {
+      required: true,
+    },
+    data,
+  );
+};