verify-img-ok

@@ -52,7 +52,7 @@ const check = (req, res, next) => {
         }
 
         // 使用极验证
-        let useGeetest = !_.get(req.app.locals.wap, 'geetest.validation', true);
+        let useGeetest = !_.get(req.app.locals.wap, 'geetest.validation', false);
 
         // 某次请求极验证调用注册失败，强制使用自有图形验证码
         if (req.session.useYohoCaptcha) {
@@ -67,7 +67,7 @@ const check = (req, res, next) => {
  * 加载验证码
  */
 const load = (req, res, next) => {
-    res.locals.useGeetest = !_.get(req.app.locals.wap, 'geetest.validation', true); // 使用极验证
+    res.locals.useGeetest = !_.get(req.app.locals.wap, 'geetest.validation', false); // 使用极验证
     if (_.has(res, 'locals.loadJs')) {
         res.locals.loadJs.push({
             src: global.yoho.config.geetestJs

@@ -20,8 +20,7 @@
             <label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
                 class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button>
         </div>
-        {{!--图片验证--}}
-        <div data-geetest="{{useGeetest}}" id="js-img-check"></div>
+        <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
         <button id="smsLoginBtn" class="sms-login-btn">登录</button>
     </div>
 </div>
\ No newline at end of file

@@ -52,18 +52,13 @@ class RegisterNew {
      * 图片验证码初始化
      */
     imgVerifyInit() {
-        validate.init();
-        if (!$captcha.data('geetest')) {
-            this.imgVerifyReInit();
+        if (!this.view.getVerifyCodeBtn.hasClass('active')) {
+            return;
         }
-    }
-
-    /**
-     * 图片验证码再次初始化
-     */
-    imgVerifyReInit() {
+        validate.init();
+        $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
         if (!$('#getVerifyCodeBtnByValidate').length) {
-            $captcha.append('<button id="getVerifyCodeBtnByValidate" class="validate-sub-btn" >获取验证码</button>');
+            $captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line
         }
         this.view.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');
         this.view.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));

@@ -40,9 +40,32 @@ class SmsLoginNew extends Page {
     bindEvents() {
         this.selector.clearMobile.on('click', this.clearMobile.bind(this));
         this.selector.mobileInput.bind('input', this.changeBtnStatus.bind(this));
-        this.selector.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
         this.selector.verifyCode.bind('input', this.changeBtnStatus.bind(this));
         this.selector.smsLoginBtn.on('click', this.login.bind(this));
+
+        if ($captcha.data('geetest')) {
+            validate.init();
+            this.selector.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
+        } else {
+            this.selector.getVerifyCodeBtn.on('click', this.imgVerifyInit.bind(this));
+        }
+    }
+
+    /**
+     * 图片验证码初始化
+     */
+    imgVerifyInit() {
+        if (!this.selector.getVerifyCodeBtn.hasClass('active')) {
+            return;
+        }
+        validate.init();
+        $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
+        if (!$('#getVerifyCodeBtnByValidate').length) {
+            $captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line
+        }
+        this.selector.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');
+        this.selector.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));
+        $captcha.removeClass('hide');
     }
 
     /**
@@ -144,6 +167,7 @@ class SmsLoginNew extends Page {
                 data: params
             }).then(data => {
                 validate.type === 2 && validate.refresh();
+                $captcha.addClass('hide');
                 if (data.code === 200) {
                     checkPoint('YB_MOBILE_NEXT_C'); // 埋点
                     this.countDown();

@@ -176,8 +176,24 @@ $disableGray:           #b0b0b0;
         .img-check {
             background-color: #fff;
             margin-top: 300px;
+            margin-bottom: 0;
             padding: 30px;
         }
+
+        .validate-sub-btn {
+            width: 100%;
+            padding: 30px;
+            background-color: #fff;
+
+            button {
+                width: 100%;
+                height: 70px;
+                border-radius: 4px;
+                background-color: #444;
+                font-size: 32px;
+                color: #fff;
+            }
+        }
     }
 
     .hide {

@@ -145,4 +145,41 @@ $disable-gray: $b0b0b0;
             color: #fff;
         }
     }
+
+    .full-img-verify {
+        padding-left: 30px;
+        padding-right: 30px;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+
+        .img-check {
+            background-color: #fff;
+            margin-top: 300px;
+            margin-bottom: 0;
+            padding: 30px;
+        }
+
+        .validate-sub-btn {
+            width: 100%;
+            padding: 30px;
+            background-color: #fff;
+
+            button {
+                width: 100%;
+                height: 70px;
+                border-radius: 4px;
+                background-color: #444;
+                font-size: 32px;
+                color: #fff;
+            }
+        }
+    }
+
+    .hide {
+        display: none;
+    }
 }