feat: pc端忘记密码接入滑块验证码

src/web/staticres/js/login.js

@@ -1054,10 +1054,17 @@ $(function(){
         },
         // 忘记密码
         ajaxStepOne: function (e, arr) {
-            $.post("/phone/forgetPwd",{reqType:"nextStep",identCode:arr[2].value},function(r){
+            var captInfo = getCaptchaInfo()
+            var payload = {
+              reqType:"nextStep",
+              phone: arr[0].value,
+              identCode:arr[1].value,
+              captchaKey: captInfo.captKey
+            }
+            $.post("/phone/forgetPwd",payload,function(r){
               e.setAttribute('data-loading', 'false');
               if(r.status=="identCodeError"){
-                arr[2].showError('短信验证码错误');
+                arr[1].showError('短信验证码错误');
               }else if(r.status=="y"){
                 toggleStep(false);
               }
@@ -1192,7 +1199,7 @@ $(function(){
                 }
                 var payload = {
                   reqType:"identCodeLogin",
-                  identCode:arr[2].value,
+                  identCode:arr[1].value,
                   isAutoLogin: $('.auto-login-checkbox').hasClass('checked'),
                   source:source
                 }
@@ -1208,9 +1215,9 @@ $(function(){
                       logic(r.userInfo,mynum);
                     }
                   }else if(r.status==-1){
-                      arr[2].showError('短信验证码输入错误')
+                      arr[1].showError('短信验证码输入错误')
                   }else if(r.status==-4){
-                      arr[2].showError('系统错误，请重试')
+                      arr[1].showError('系统错误，请重试')
                   }
                 });
             }
@@ -1389,6 +1396,7 @@ $(function(){
             if (otherEle)  otherEle.innerText = iT
         }, 1000)
     }
+    window.startTimeDown = startTimeDown
     function getSMSCode (e) {
         if (e.classList.contains('is-stop')) return
         var verifyStartTime = new Date().getTime()
@@ -1574,9 +1582,18 @@ $(function(){
 		}
 		var s2 = document.querySelectorAll('.login-dig-input-box .l-get-sms');
 		for(var i=0;i<s2.length;i++){
-			s2[i].addEventListener('click', function (e) {
-                getSMSCode(e.target)
-            })
+      var item = s2[i]
+      if (item.dataset.name === 'forge_get_sms') {
+        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)
+        })
+      } else {
+        item.addEventListener('click', function (e) {
+          getSMSCode(e.target)
+        })
+      }
 		}
         var s3 = document.querySelectorAll('.login-dig-input-box input');
         for(var i=0;i<s3.length;i++){
@@ -1912,18 +1929,19 @@ $(function(){
             event: ['input', 'blur'],
             upStatus: function () {
                 verifySubmit.check()
-                verifySendSms.update(verifyCode.next && verifyPhone.next)
-            }
-        })
-        var verifyCode = createFormStauts({
-            el: '.login-dig-input-box input[name="forge_code"]',
-            rule: ruleForCode,
-            event: ['input', 'blur'],
-            upStatus: function () {
-                verifySubmit.check()
-                verifySendSms.update(verifyCode.next && verifyPhone.next)
+                // verifySendSms.update(verifyCode.next && verifyPhone.next)
+                verifySendSms.update(verifyPhone.next)
             }
         })
+        // var verifyCode = createFormStauts({
+        //     el: '.login-dig-input-box input[name="forge_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="forge_sms"]',
             rule: ruleForSms,
@@ -1932,8 +1950,8 @@ $(function(){
                 verifySubmit.check()
             }
         })
-        verifySubmit.init([verifyPhone, verifyCode, verifySms])
-        verifySendSms.update(verifyCode.next && verifyPhone.next)
+        verifySubmit.init([verifyPhone, verifySms])
+        verifySendSms.update(verifyPhone.next)
 
         // 密码重置
         var passSubmit = {
@@ -1990,7 +2008,7 @@ $(function(){
 
         Direct.forge = {
             phone: verifyPhone,
-            code: verifyCode
+            // code: verifyCode
         }
     }
     function initRegisterDirect () {
@@ -2351,6 +2369,148 @@ var loginDialog = {
   }
 }
 
+
+var SMSRequest = {
+  getCaptcha: function(phone, callback) {
+    $.ajax({
+      type: 'POST',
+      url: '/publicapply/captcha/get',
+      data: {
+        phone: phone,
+        mold: 3
+      },
+      success: function (res) {
+        callback && callback(res.data)
+        if (res.error_code === 0 && res.data) {
+          
+        } else {
+          if (res.error_msg) {
+            showToast(res.error_msg)
+          }
+        }
+      }
+    })
+  },
+  verifyCaptcha: function(data, callback) {
+    $.ajax({
+      type: 'POST',
+      url: '/publicapply/captcha/check',
+      data: data,
+      success: function (res) {
+        callback && callback(res)
+      }
+    })
+  }
+}
+var slideVerify = {
+  el: null,
+  $dialog: null,
+  capt: null,
+  phone: '',
+  captKey: '',
+  init: function() {
+    this.$dialog = $('#pc-slide-verify-dialog')
+    this.initSlideVerify()
+    this.modalShow(true)
+  },
+  initSlideVerify: function() {
+    var el = document.getElementById('slide-wrap');
+    var capt = new GoCaptcha.Slide({
+      width: 300,
+      height: 220,
+    })
+    capt.mount(el)
+    
+    this.el = el
+    this.capt = capt
+    this.bindCaptEvents()
+  },
+  modalShow: function(f) {
+    if (!this.$dialog) return
+    if (f) {
+      this.$dialog.modal('show')
+    } else {
+      this.$dialog.modal('hide')
+    }
+  },
+  bindCaptEvents: function() {
+    if (!this.capt) return
+    var _this = this
+    this.capt.setEvents({
+      close: function() {
+        _this.modalShow(false)
+      },
+      confirm: function(point, reset) {
+        const payload = {
+          phone: _this.phone,
+          key: _this.captKey,
+          point: [point.x, point.y].join(',')
+        }
+        SMSRequest.verifyCaptcha(payload, function(res) {
+          if (res.error_code === 0 && res.data) {
+            const pass = res.data && res.data.code === 0
+            if (pass) {
+              sessionStorage.setItem('login-verify-start-time', Date.now())
+              startTimeDown('forge')
+              _this.modalShow(false)
+            } else {
+              reset()
+              _this.capt.refresh()
+            }
+          } else {
+            reset()
+            _this.capt.refresh()
+          }
+        })
+      },
+      refresh: function() {
+        SMSRequest.getCaptcha(_this.phone, function(data) {
+          if (data && data.code === 1) {
+            _this.refreshCaptData(data)
+          }
+        })
+      },
+    })
+  },
+  cachePhone: function(phone) {
+    this.phone = phone
+  },
+  cacheCaptKey: function(k) {
+    this.captKey = k
+  },
+  refreshCaptData: function(x) {
+    if (!this.capt) return
+    const captKey = x.captcha_key || ''
+    this.cacheCaptKey(captKey)
+    this.capt.setData({
+      image: x.image_base64 || '',
+      thumb: x.tile_base64 || '',
+      captKey: captKey,
+      thumbX: x.tile_x || 0,
+      thumbY: x.tile_y || 0,
+      thumbWidth: x.tile_width || 0,
+      thumbHeight: x.tile_height || 0
+    })
+  }
+}
+
+function initGoCaptchaVerify(phone) {
+  SMSRequest.getCaptcha(phone, function(data) {
+    if (data && data.code === 1) {
+      slideVerify.init()
+      slideVerify.cachePhone(phone)
+      slideVerify.refreshCaptData(data)
+    }
+  })
+}
+
+function getCaptchaInfo() {
+  return {
+    phone: slideVerify.phone,
+    captKey: slideVerify.captKey
+  }  
+}
+
 $(function () {
   loginDialog.init()
   $('#bidLogin').on('hide.bs.modal', function () {

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

@@ -0,0 +1,28 @@
+<!-- 剑鱼pc登录弹窗html接口模板 -->
+<!-- 依赖于pc公共头部样式以及 pc.css、bootstrap.css、bootstrap.js、jquery.js、login.js -->
+<style>
+  .pc-slide-verify-box {
+    z-index: 667;
+    position: absolute;
+    top: 50%;
+    overflow: hidden;
+    margin-top: -240px;
+    left: 50%;
+    border-radius: 16px;
+    width: unset!important;
+  }
+</style>
+<div
+  class="modal fade bidLogin"
+  data-name="pc-login-dialog"
+  id="pc-slide-verify-dialog"
+  class=""
+  tabindex="-1"
+  role="dialog"
+  data-backdrop="static"
+  aria-hidden="true"
+>
+  <div class="modal-dialog pc-slide-verify-box is-show" style="max-width: 720px; height: 480px; width:100%;">
+    <div id="slide-wrap"></div>
+  </div>
+</div>

src/web/templates/login/forgetPwd.html

@@ -5,6 +5,8 @@
 <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">
@@ -73,18 +75,18 @@
               <i class="login-dig-icon-phone"></i>
               <input autocomplete="off" name="forge_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="forge_code" type="text" placeholder="输入图形验证码" maxlength="4">
               <div class="after-input-box" style="right: 4px;">
                   <img class="verify-img" src="/front/landpage/captcha" alt="verify">
               </div>
-          </div>
+          </div> -->
           <div class="login-dig-input-box" data-error="短信验证码输入错误">
               <i class="login-dig-icon-guard"></i>
               <input autocomplete="off" name="forge_sms" type="text" placeholder="输入短信验证码" maxlength="6">
               <div class="after-input-box">
-                  <span data-name="forge_get_sms" class="l-get-sms is-stop">获取验证码</span>
+                  <span data-name="forge_get_sms" class="l-get-sms">获取验证码</span>
               </div>
           </div>
           <button class="login-dig-submit-button" name="forge_submit_phone" disabled="true">下一步</button>
@@ -105,6 +107,8 @@
           <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"}}