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

src/jfw/modules/app/src/web/staticres/jyapp/js/slide-verify.js

@@ -87,6 +87,7 @@ var slideVerify = {
         SMSRequest.verifyCaptcha(payload, function(res) {
           if (res.error_code === 0 && res.data) {
             const pass = res.data && res.data.code === 0
+            reset()
             if (pass) {
               try {
                 startSendSMSCodeTimer()
@@ -95,7 +96,6 @@ var slideVerify = {
               }
               _this.modalShow(false)
             } else {
-              reset()
               _this.capt.refresh()
             }
           } else {

src/web/staticres/common-module/pc-dialog/js/pc-slide-verify.js

@@ -0,0 +1,156 @@
+var SMSRequest = {
+  getCaptcha: function(phone, mold, callback) {
+    $.ajax({
+      type: 'POST',
+      url: '/publicapply/captcha/get',
+      data: {
+        phone: phone,
+        mold: mold
+      },
+      success: function (res) {
+        if (res.error_code === 0 && res.data) {
+          callback && callback(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() {
+    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({
+      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')
+      this.initModalZIndex()
+    } 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) {
+              try {
+                startSendSMSCodeTimer(_this.mold)
+              } catch (error) {
+                console.log(error)
+              }
+              _this.modalShow(false)
+              reset()
+            } else {
+              reset()
+              _this.capt.refresh()
+            }
+          } else {
+            reset()
+            _this.capt.refresh()
+          }
+        })
+      },
+      refresh: function() {
+        SMSRequest.getCaptcha(_this.phone, _this.mold, function(data) {
+          if (data && data.code === 1) {
+            _this.refreshCaptData(data)
+          }
+        })
+      },
+    })
+  },
+  cachePhone: function(phone) {
+    this.phone = phone
+  },
+  cacheMold: function(mold) {
+    this.mold = mold
+  },
+  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, mold) {
+  SMSRequest.getCaptcha(phone, mold, function(data) {
+    if (data && data.code === 1) {
+      slideVerify.init()
+      slideVerify.cachePhone(phone)
+      slideVerify.cacheMold(mold)
+      slideVerify.refreshCaptData(data)
+    }
+  })
+}
+
+function getCaptchaInfo() {
+  return {
+    phone: slideVerify.phone,
+    captKey: slideVerify.captKey
+  }  
+}

src/web/staticres/js/login.js

@@ -1202,6 +1202,7 @@ $(function(){
                   reqType:"identCodeLogin",
                   identCode:arr[1].value,
                   isAutoLogin: $('.auto-login-checkbox').hasClass('checked'),
+                  phone: captInfo.phone,
                   captchaKey: captInfo.captKey,
                   source:source
                 }
@@ -2385,157 +2386,13 @@ var loginDialog = {
   }
 }
 
-
-var SMSRequest = {
-  getCaptcha: function(phone, mold, callback) {
-    $.ajax({
-      type: 'POST',
-      url: '/publicapply/captcha/get',
-      data: {
-        phone: phone,
-        mold: mold
-      },
-      success: function (res) {
-        if (res.error_code === 0 && res.data) {
-          callback && callback(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() {
-    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({
-      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')
-      this.initModalZIndex()
-    } 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, _this.mold, function(data) {
-          if (data && data.code === 1) {
-            _this.refreshCaptData(data)
-          }
-        })
-      },
-    })
-  },
-  cachePhone: function(phone) {
-    this.phone = phone
-  },
-  cacheMold: function(mold) {
-    this.mold = mold
-  },
-  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 startSendSMSCodeTimer(mold) {
+  sessionStorage.setItem('login-verify-start-time', Date.now())
+  const moldMap = {
+    1: 'verify',
+    3: 'forge'
   }
-}
-
-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)
-    }
-  })
-}
-
-function getCaptchaInfo() {
-  return {
-    phone: slideVerify.phone,
-    captKey: slideVerify.captKey
-  }  
+  startTimeDown(moldMap[mold])
 }
 
 $(function () {

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

@@ -12,7 +12,7 @@
     position: absolute;
     top: 50%;
     overflow: hidden;
-    margin-top: -240px;
+    margin-top: -178px;
     left: 50%;
     border-radius: 16px;
     width: unset!important;
@@ -31,3 +31,4 @@
     <div id="slide-wrap"></div>
   </div>
 </div>
+<script src='{{Msg "seo" "cdn"}}/common-module/pc-dialog/js/pc-slide-verify.js?v={{Msg "seo" "version"}}'></script>

src/web/templates/pc/jyblogdetail.html

@@ -8,7 +8,7 @@
 <meta content="telephone=no" name="format-detection"/>
     <meta content="light" theme="light" name="enable-header"/>
 {{include "/common/pnc.html"}}
-<link href="{{Msg "seo" "cdn"}}/css/pc.min.css?v={{Msg "seo" "version"}}" rel="stylesheet">
+<link href="{{Msg "seo" "cdn"}}/css/pc.css?v={{Msg "seo" "version"}}" rel="stylesheet">
 <script src="{{Msg "seo" "cdn"}}/js/jquery.cookie.js"></script>
 <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/pccss/public-nav-1200.css?v={{Msg "seo" "version"}}" />
 <script type="text/javascript" src="{{Msg "seo" "cdn"}}/js/public-nav.js?v={{Msg "seo" "version"}}"></script>

src/web/templates/pc/newIndex.html

@@ -20,7 +20,7 @@
   <link rel="stylesheet" type="text/css" href='{{Msg "seo" "cdn"}}/pccss/index_swiper.css?v={{Msg "seo" "version"}}' />
   <link rel="stylesheet" type="text/css" href='{{Msg "seo" "cdn"}}/css/pc/index.css?v={{Msg "seo" "version"}}' />
   <link rel="stylesheet" type="text/css" href='{{Msg "seo" "cdn"}}/pccss/index_pc.css?v={{Msg "seo" "version"}}' />
-  <link href='{{Msg "seo" "cdn"}}/css/pc.min.css?v={{Msg "seo" "version"}}' rel="stylesheet">
+  <link href='{{Msg "seo" "cdn"}}/css/pc.css?v={{Msg "seo" "version"}}' rel="stylesheet">
 </head>
 
 {{$global:=.T}}