feat: 新增移动端端滑块验证码弹窗逻辑

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

@@ -0,0 +1,157 @@
+function initDialogWrapper() {
+  return new Vue({
+		el: '#slide-verify-node',
+		delimiters: ['${', '}'],
+		data: {
+			popupShow: false
+		}
+	})
+}
+
+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,
+  capt: null,
+  phone: '',
+  captKey: '',
+  mold: '',
+  $dialog: null,
+  init: function() {
+    if (!this.capt) {
+      this.$dialog = initDialogWrapper()
+      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) {
+      this.$dialog = initDialogWrapper()
+    }
+    this.$dialog.popupShow = f
+  },
+  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()
+              } catch (error) {
+                console.log(error)                
+              }
+              _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 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/jfw/modules/app/src/web/templates/me/forgetPwd.html

@@ -9,6 +9,7 @@
 		<link rel="stylesheet" type="text/css" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/css/font.css?v={{Msg "seo" "version"}}" />
 		<link rel="stylesheet" type="text/css" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/css/forgetPwd.css?v={{Msg "seo" "version"}}" />
 		<script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
+		<link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css">
 		{{include "/common/js.html"}}
 		<title>找回密码</title>
 	</head>
@@ -30,14 +31,14 @@
 						</div>
 						<div class="tran-line-bottom"></div>
 					</div>
-					<div class="code">
+					<!-- <div class="code">
 						<div>
 							<input type="tel" name="code" id="code" value="" placeholder="图形验证码" />
 							<img class="closeQc" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/images/cancel.png?v={{Msg "seo" "version"}}"/>
 						</div>
 						<span class="captcha"><div class="vert-line"></div><img src="/jyapp/free/captcha"></span>
 						<div class="tran-line-bottom"></div>
-					</div>
+					</div> -->
 					<div class="code">
 						<div>
 							<input type="tel" id="identCode" name="" value="" placeholder="手机验证码" />
@@ -50,6 +51,18 @@
 			</div>
 		</div>
 
+		<div id="slide-verify-node">
+			<van-popup v-model="popupShow" :lazy-render="false">
+			  <div id="slide-wrap"></div>
+			</van-popup>
+		</div>
+
+		<script src="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
+  		<script src="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js"></script>
+		<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>
+		<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/slide-verify.js?v={{Msg "seo" "version" }}'></script>
+
 		<script type="text/javascript">
 			var dcsOne = false;
 			var phone = $.trim($("#tel").val());
@@ -112,18 +125,19 @@
 				}
 				phone = $.trim($("#tel").val());
 				var thisClass = this;
-				$.post("/jyapp/free/forgetPwd",{reqType:"sendIdentCode",phone: phone,code:$.trim($("#code").val())},function(r){
-					if(r.status=="phoneError"){
-						EasyAlert.show("手机号格式错误");
-					}else if(r.status=="codeError"){
-						EasyAlert.show("图形验证码错误");
-						reLoadCaptcha();
-					}else if(r.status=="phoneNotExists"){
-						EasyAlert.show("手机号不存在");
-					}else if(r.status=="y"){
-						time(thisClass);
-					}
-				});
+				initGoCaptchaVerify(phone, 3)
+				// $.post("/jyapp/free/forgetPwd",{reqType:"sendIdentCode",phone: phone,code:$.trim($("#code").val())},function(r){
+				// 	if(r.status=="phoneError"){
+				// 		EasyAlert.show("手机号格式错误");
+				// 	}else if(r.status=="codeError"){
+				// 		EasyAlert.show("图形验证码错误");
+				// 		reLoadCaptcha();
+				// 	}else if(r.status=="phoneNotExists"){
+				// 		EasyAlert.show("手机号不存在");
+				// 	}else if(r.status=="y"){
+				// 		time(thisClass);
+				// 	}
+				// });
 			})
 			$("#nextStep").on("tap",function(){
 				if($(this).hasClass("disabled")){
@@ -133,7 +147,15 @@
 					EasyAlert.show("请重新获取手机验证码");
 					return;
 				}
-				$.post("/jyapp/free/forgetPwd",{reqType:"nextStep",phone: phone,identCode:$.trim($("#identCode").val())},function(r){
+				var captInfo = getCaptchaInfo()
+				var payload = {
+					reqType:"nextStep",
+					phone: phone,
+					identCode:$.trim($("#identCode").val()),
+					captchaKey: captInfo.captKey,
+				}
+
+				$.post("/jyapp/free/forgetPwd",payload,function(r){
 					if(r.status=="identCodeError"){
 						EasyAlert.show("手机验证码错误");
 					}else if(r.status=="y"){
@@ -146,8 +168,7 @@
 			}
 			function commonMethod(){
 				var userPone = $.trim($("#tel").val());
-				var code = $.trim($("#code").val());
-				if(userPone.length >= 11 && code.length >= 4){
+				if(userPone.length >= 11){
 					dcsOne = true;
 					if(wait == 60){
 			     		$("#btn").css("color","#2cb7ca");
@@ -156,12 +177,16 @@
 					dcsOne = false;
 		     		$("#btn").css("color","#888888")
 				}
-				if(phone != "" && dcsOne && $.trim($("#identCode").val()).length == 6){
+				if(phone != "" && dcsOne){
 					$("#nextStep").removeClass("disabled");
 				}else{
 					$("#nextStep").addClass("disabled");
 				}
 			}
+
+			function startSendSMSCodeTimer() {
+				time($("#btn")[0])
+			}
 		</script>
 
 <!--百度统计end-->

src/jfw/modules/app/src/web/templates/me/login.html

@@ -218,13 +218,21 @@
       请阅读并同意《使用协议》和《隐私政策》
     </div>
   </div>
+  <div id="slide-verify-node">
+    <van-popup v-model="popupShow" :lazy-render="false">
+      <div id="slide-wrap"></div>
+    </van-popup>
+  </div>
+  <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>
   <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/ad/js/index.js?v={{Msg "seo" "version"}}'></script>
   <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/js/utils.js?v={{Msg "seo" "version"}}'></script>
   <script src="//cdn-common.jianyu360.com/cdn/lib/number-auth-web-sdk/2.1.2/numberAuth-web-sdk.js"></script>
   <script src="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
   <script src="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js"></script>
+  <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/slide-verify.js?v={{Msg "seo" "version" }}'></script>
     <!--S 加载荟聚SDK初始化及剑鱼自定义埋点注入 -->
-    <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/fotter.js?v={{Msg "seo" "version" }}'></script>
+	<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/fotter.js?v={{Msg "seo" "version" }}'></script>
     <!--E 加载荟聚SDK初始化及剑鱼自定义埋点注入 -->
   <script>
     var Activedatastring = `register`
@@ -414,13 +422,14 @@
         if ($('#sendIdentCode').html() !== '获取验证码') return
               trackClick('注册行为-获取验证码')
 				var thisClass = this;
-				$.post("/jyapp/free/login",{reqType:"sendIdentCode",phone: phone,token: getCipherText(phone)},function(r){
-					if(r.status==-1){
-						EasyAlert.show("手机号格式错误");
-					}else{
-						time(thisClass);
-					}
-				});
+				initGoCaptchaVerify(phone, 1)
+				// $.post("/jyapp/free/login",{reqType:"sendIdentCode",phone: phone,token: getCipherText(phone)},function(r){
+				// 	if(r.status==-1){
+				// 		EasyAlert.show("手机号格式错误");
+				// 	}else{
+				// 		time(thisClass);
+				// 	}
+				// });
 			});
 			var toutobj = {};
 			var tout = null;
@@ -553,8 +562,22 @@
 					}else{
                       trackClick('注册行为-登录/注册')
 					  // 验证码登录/注册
+					  var captInfo = getCaptchaInfo()
                       // {reqType:"identCodeLogin",phone:phone,identCode:$("#identCode").val(),rid:pushRid,oid:getOtherPushId(),phoneType:getPhoneType(),channel:getChannel(),deviceId:getDeviceId(),disWord:disWord}
-						$.post("/jyapp/free/login",{reqType:"identCodeLogin",phone:phone,identCode:$("#identCode").val(),rid:getPushRid(),oid:getOtherPushId(),phoneType:getPhoneType(),channel:getChannel(),deviceId:getDeviceId(),disWord:disWord,activity:getParam("activity")},function(r){
+						var payload = {
+							reqType:"identCodeLogin",
+							phone:phone,
+							identCode:$("#identCode").val(),
+							rid:getPushRid(),
+							oid:getOtherPushId(),
+							phoneType:getPhoneType(),
+							channel:getChannel(),
+							deviceId:getDeviceId(),
+							disWord:disWord,
+							captchaKey: captInfo.captKey,
+							activity:getParam("activity")
+						}
+						$.post("/jyapp/free/login",payload,function(r){
 							if(r.status==1){
 								if(localStorage){
 									localStorage.loginPhone = phone;
@@ -752,6 +775,9 @@
 				1000)
 			}
 		}
+		function startSendSMSCodeTimer() {
+			time($("#sendIdentCode")[0])
+		}
     // 修复浏览器安全限制无法获取填充 input value
     document.addEventListener('touchstart', function(event) {
       changeBtnStatus()