feat: 优化pc端滑块验证码弹窗逻辑

src/web/staticres/css/pc.css

@@ -4753,6 +4753,7 @@ h6 {
 }
 
 /* 此处代码处理登录注册弹框居在宽度未知情况居中问题，且保证bootstrap动画效果（淡入淡出） */
+.modal.bootstrap-center-dialog.fade .modal-dialog,
 .modal.bidLogin.fade .modal-dialog{
   -webkit-transform: translate(-50%,-25%);
   -ms-transform: translate(-50%,-25%);
@@ -4762,6 +4763,7 @@ h6 {
   -o-transition: -o-transform .3s ease-out;
   transition: transform .3s ease-out;
 }
+.modal.bootstrap-center-dialog.in .modal-dialog,
 .modal.bidLogin.in .modal-dialog {
   -webkit-transform: translate(-50%,0);
   -ms-transform: translate(-50%,0);
@@ -4829,6 +4831,7 @@ h6 {
   display: block;
   margin-top: 20px;
 }
+.login-dig-tabbar-content.login-module-card,
 .login-dig-tabbar-content.password-login{
   margin-top: 38px;
 }

src/web/staticres/js/login.js

@@ -1197,10 +1197,12 @@ $(function(){
                 }else{
                   source="";
                 }
+                var captInfo = getCaptchaInfo()
                 var payload = {
                   reqType:"identCodeLogin",
                   identCode:arr[1].value,
                   isAutoLogin: $('.auto-login-checkbox').hasClass('checked'),
+                  captchaKey: captInfo.captKey,
                   source:source
                 }
                 // 短信验证码登录
@@ -1581,13 +1583,28 @@ $(function(){
             })
 		}
 		var s2 = document.querySelectorAll('.login-dig-input-box .l-get-sms');
+    const getCMSMoldMap = {
+      verify_get_sms: 1,
+      register_get_sms: 1,
+      forge_get_sms: 3
+    }
 		for(var i=0;i<s2.length;i++){
       var item = s2[i]
-      if (item.dataset.name === 'forge_get_sms') {
+      var dataSetName = item.dataset.name
+      var captchaVerifyArr = ['verify_get_sms', 'forge_get_sms', 'register_get_sms']
+      if (captchaVerifyArr.indexOf(dataSetName) > -1) {
         item.addEventListener('click', function (e) {
           if ($(this).hasClass('is-stop')) return
-          var phone = $(".forgetpwd_page .login-dig-input-box [name='forge_phone']").val()
-          initGoCaptchaVerify(phone)
+          var phone = ''
+          if (dataSetName === 'verify_get_sms' || dataSetName === 'register_get_sms') {
+            // initDirect
+            // initRegisterDirect
+            phone = $('.login-dig-input-box input[name="verify_phone"]').val()
+          } else if (dataSetName === 'forge_get_sms') {
+            // initForgetDirect
+            phone = $(".forgetpwd_page .login-dig-input-box [name='forge_phone']").val()
+          }
+          initGoCaptchaVerify(phone, getCMSMoldMap[dataSetName])
         })
       } else {
         item.addEventListener('click', function (e) {
@@ -1724,18 +1741,18 @@ $(function(){
             event: ['input', 'blur'],
             upStatus: function () {
                 verifySubmit.check()
-                verifySendSms.update(verifyCode.next && verifyPhone.next)
-            }
-        })
-        var verifyCode = createFormStauts({
-            el: '.login-dig-input-box input[name="verify_code"]',
-            rule: ruleForCode,
-            event: ['input', 'blur'],
-            upStatus: function () {
-                verifySubmit.check()
-                verifySendSms.update(verifyCode.next && verifyPhone.next)
+                verifySendSms.update(verifyPhone.next)
             }
         })
+        // var verifyCode = createFormStauts({
+        //     el: '.login-dig-input-box input[name="verify_code"]',
+        //     rule: ruleForCode,
+        //     event: ['input', 'blur'],
+        //     upStatus: function () {
+        //         verifySubmit.check()
+        //         verifySendSms.update(verifyCode.next && verifyPhone.next)
+        //     }
+        // })
         var verifySms = createFormStauts({
             el: '.login-dig-input-box input[name="verify_sms"]',
             rule: ruleForSms,
@@ -1744,12 +1761,11 @@ $(function(){
                 verifySubmit.check()
             }
         })
-        verifySubmit.init([verifyPhone, verifyCode, verifySms])
-        verifySendSms.update(verifyCode.next && verifyPhone.next)
+        verifySubmit.init([verifyPhone, verifySms])
+        verifySendSms.update(verifyPhone.next)
 
         Direct.verify = {
           phone: verifyPhone,
-          code: verifyCode,
           sms: verifySms
         }
 
@@ -2371,18 +2387,17 @@ var loginDialog = {
 
 
 var SMSRequest = {
-  getCaptcha: function(phone, callback) {
+  getCaptcha: function(phone, mold, callback) {
     $.ajax({
       type: 'POST',
       url: '/publicapply/captcha/get',
       data: {
         phone: phone,
-        mold: 3
+        mold: mold
       },
       success: function (res) {
-        callback && callback(res.data)
         if (res.error_code === 0 && res.data) {
-          
+          callback && callback(res.data)
         } else {
           if (res.error_msg) {
             showToast(res.error_msg)
@@ -2409,10 +2424,17 @@ var slideVerify = {
   phone: '',
   captKey: '',
   init: function() {
-    this.$dialog = $('#pc-slide-verify-dialog')
-    this.initSlideVerify()
+    if (!this.capt) {
+      this.$dialog = $('#pc-slide-verify-dialog')
+      this.initSlideVerify()
+    }
     this.modalShow(true)
   },
+  initModalZIndex: function() {
+    if (!this.$dialog) return
+    var modalInstance = this.$dialog.data('bs.modal')
+    modalInstance.$backdrop.addClass('top-of-login')
+  },
   initSlideVerify: function() {
     var el = document.getElementById('slide-wrap');
     var capt = new GoCaptcha.Slide({
@@ -2429,6 +2451,7 @@ var slideVerify = {
     if (!this.$dialog) return
     if (f) {
       this.$dialog.modal('show')
+      this.initModalZIndex()
     } else {
       this.$dialog.modal('hide')
     }
@@ -2464,7 +2487,7 @@ var slideVerify = {
         })
       },
       refresh: function() {
-        SMSRequest.getCaptcha(_this.phone, function(data) {
+        SMSRequest.getCaptcha(_this.phone, _this.mold, function(data) {
           if (data && data.code === 1) {
             _this.refreshCaptData(data)
           }
@@ -2475,6 +2498,9 @@ var slideVerify = {
   cachePhone: function(phone) {
     this.phone = phone
   },
+  cacheMold: function(mold) {
+    this.mold = mold
+  },
   cacheCaptKey: function(k) {
     this.captKey = k
   },
@@ -2494,11 +2520,12 @@ var slideVerify = {
   }
 }
 
-function initGoCaptchaVerify(phone) {
-  SMSRequest.getCaptcha(phone, function(data) {
+function initGoCaptchaVerify(phone, mold) {
+  SMSRequest.getCaptcha(phone, mold, function(data) {
     if (data && data.code === 1) {
       slideVerify.init()
       slideVerify.cachePhone(phone)
+      slideVerify.cacheMold(mold)
       slideVerify.refreshCaptData(data)
     }
   })

src/web/templates/common/pc-login-dialog.html

@@ -1,5 +1,7 @@
 <!-- 剑鱼pc登录弹窗html接口模板 -->
 <!-- 依赖于pc公共头部样式以及 pc.css、bootstrap.css、bootstrap.js、jquery.js、login.js -->
+<link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/go-captcha-jslib/1.0.9/gocaptcha.global.css">
+<script src="https://cdn-common.jianyu360.com/cdn/lib/go-captcha-jslib/1.0.9/gocaptcha.global.js"></script>
 <div
   class="modal fade bidLogin"
   data-name="pc-login-dialog"
@@ -43,13 +45,13 @@
             <i class="login-dig-icon-phone"></i>
             <input autocomplete="off" name="verify_phone" type="tel" placeholder="输入手机号码" maxlength="11" />
           </div>
-          <div class="login-dig-input-box" data-error="图形验证码输入错误">
+          <!-- <div class="login-dig-input-box" data-error="图形验证码输入错误">
             <i class="login-dig-icon-guard"></i>
             <input autocomplete="off" name="verify_code" type="text" placeholder="输入图形验证码" maxlength="4" />
             <div class="after-input-box" style="right: 4px;">
               <img data-name="verfiy-login" class="verify-img" src="" alt="verify" />
             </div>
-          </div>
+          </div> -->
           <div class="login-dig-input-box" data-error="短信验证码输入错误">
             <i class="login-dig-icon-guard"></i>
             <input
@@ -219,3 +221,4 @@
     </div>
   </div>
 </div>
+{{include "/common/pc-slide-verify.html"}}

src/web/templates/common/pc-slide-verify.html

@@ -1,6 +1,12 @@
 <!-- 剑鱼pc登录弹窗html接口模板 -->
 <!-- 依赖于pc公共头部样式以及 pc.css、bootstrap.css、bootstrap.js、jquery.js、login.js -->
 <style>
+  #pc-slide-verify-dialog {
+    z-index: 100000!important;
+  }
+  .top-of-login {
+    z-index: 99999!important;
+  }
   .pc-slide-verify-box {
     z-index: 667;
     position: absolute;
@@ -13,11 +19,10 @@
   }
 </style>
 <div
-  class="modal fade bidLogin"
-  data-name="pc-login-dialog"
+  class="modal fade slide-verify-dialog bootstrap-center-dialog"
   id="pc-slide-verify-dialog"
   class=""
-  tabindex="-1"
+  tabindex="1"
   role="dialog"
   data-backdrop="static"
   aria-hidden="true"

src/web/templates/login/forgetPwd.html

@@ -5,8 +5,6 @@
 <meta name="renderer" content="webkit">
 <meta content="telephone=no" name="format-detection"/>
     <meta content="light" theme="light" name="enable-header"/>
-<link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/go-captcha-jslib/1.0.9/gocaptcha.global.css">
-<script src="https://cdn-common.jianyu360.com/cdn/lib/go-captcha-jslib/1.0.9/gocaptcha.global.js"></script>
 {{include "/common/pnc.html"}}
 <link href="{{Msg "seo" "cdn"}}/css/pc.css?v={{Msg "seo" "version"}}" rel="stylesheet">
 <link href="{{Msg "seo" "cdn"}}/css/dev2/reset_pc.css?v={{Msg "seo" "version"}}" rel="stylesheet">
@@ -107,8 +105,6 @@
           <button class="login-dig-submit-button" name="forge_submit_pass" disabled="true">修改密码</button>
       </div>
   </div>
-
-  {{include "/common/pc-slide-verify.html"}}
 </section>
 {{include "/common/pcbottom.html"}}
 {{include "/common/baiducc.html"}}