Merge branch 'issue-20190920' into pre

src/common/Captcha/index.js

 import React, { Component } from 'react';
 import { initCaptcha } from '@/utils';
+import { BarLoader } from 'react-spinners';
+import './index.scss';
 
 const CAPTCHAID = '6b0f5f6c8f334f3693ee754ba5692e36'
 
 
 class Captcha extends Component {
+
+    state = {
+        isReady: false
+    }
+
     componentDidMount() {
-        const {getInstance, handleError, onVerify} = this.props
+        const {getInstance, handleError, onVerify} = this.props;
+        const _this = this;
         const el = document.getElementById('captcha');
         el && initCaptcha(function () {
             initNECaptcha({
@@ -14,6 +22,13 @@ class Captcha extends Component {
                     captchaId: CAPTCHAID,
                     mode: 'float',
                     width: 'auto',
+                    onReady: function (instance) {
+                        // 验证码一切准备就绪，此时可正常使用验证码的相关功能
+                        console.log(_this);
+                        _this.setState({
+                            isReady: true
+                        });
+                    },
                     onVerify: function (err, data) {
                         onVerify(err,data)
                     }
@@ -30,7 +45,25 @@ class Captcha extends Component {
 
     render() {
         return (
-            <div id={'captcha'} style={{'marginBottom':  this.props.mrBtm}}></div>
+            <div 
+                className="captcha-container" 
+                style={{
+                    'marginBottom':  this.props.mrBtm
+                }}
+            >
+                {
+                    !this.state.isReady &&
+                    <div className="captcha-animation">
+                        <BarLoader />
+                    </div>
+                }
+                <div 
+                    id={'captcha'} 
+                    style={{
+                        'marginBottom':  this.props.mrBtm
+                    }}
+                />
+            </div>
         );
     }
 }

src/common/Captcha/index.scss

+.captcha-container {
+  position: relative;
+  width: 100%;
+  height: 40px;
+}
+
+.captcha-animation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file