|
@@ -0,0 +1,353 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <title>账号异常验证</title>
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
|
|
|
+ <meta name="renderer" content="webkit">
|
|
|
+ <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.css?v={{Msg "seo" "version"}}" rel="stylesheet">
|
|
|
+ <link href="{{Msg "seo" "cdn"}}/css/dev2/reset_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.css?v={{Msg "seo" "version"}}" />
|
|
|
+ <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>
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+ html,
|
|
|
+ body.in-iframe{
|
|
|
+ background-color: #fff!important;
|
|
|
+ }
|
|
|
+ .public-nav{
|
|
|
+ border-bottom: 1px solid #e0e0e0;
|
|
|
+ }
|
|
|
+ .in-iframe .bind_page{
|
|
|
+ padding-top:0;
|
|
|
+ }.bind_page{
|
|
|
+ padding-top:76px;
|
|
|
+ }
|
|
|
+ .bind_page>.login-dig-phone-bind-box{
|
|
|
+ margin: 20px 0px 50px 0px;
|
|
|
+ }
|
|
|
+ .login-dig-phone-bind-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-family: Microsoft YaHei,sans-serif;
|
|
|
+ padding-bottom: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-dig-phone-bind-box .register-step-title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-dig-phone-bind-box .register-step-title div {
|
|
|
+ color: #1D1D1D;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: left;
|
|
|
+ min-width: 340px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .login-dig-phone-bind-box .login-dig-input-box {
|
|
|
+ width: 340px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-dig-phone-bind-box button {
|
|
|
+ width: 340px;
|
|
|
+ margin-top: 32px;
|
|
|
+ }
|
|
|
+ .autocomplete-item {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .autocomplete-box {
|
|
|
+ display: none;
|
|
|
+ background: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -213px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 205px;
|
|
|
+ max-height: 205px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ z-index: 666;
|
|
|
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .autocomplete-box li:hover {
|
|
|
+ background: #F6F6F6;
|
|
|
+ }
|
|
|
+ .autocomplete-box li:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .autocomplete-box li {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #1D1D1D;
|
|
|
+ font-family: Microsoft YaHei,sans-serif;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .login-dig-submit-button:disabled {
|
|
|
+ background: #87DFEA;
|
|
|
+ border-color: #87DFEA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bind-title-group {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .bind-title-group p {
|
|
|
+ font-family: Microsoft YaHei,sans-serif;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #686868;
|
|
|
+ }
|
|
|
+ .bind-title-group div {
|
|
|
+ margin-top: 67px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ max-width: 1200px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Microsoft YaHei,sans-serif;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #1D1D1D;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #EBEBEB;
|
|
|
+ }
|
|
|
+ .custom-toast .toast-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: auto;
|
|
|
+ padding: 16px 32px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: rgba(0, 0, 0, 0.65);
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #fff;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .custom-toast .mask{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 98;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ .login-dig-success-toast{
|
|
|
+ margin-top: -140px!important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<body>
|
|
|
+{{include "/common/pchead.html"}}
|
|
|
+<script>
|
|
|
+ $("div#bidLogin").remove()
|
|
|
+</script>
|
|
|
+<section class="bind_page" id="verify-account" v-cloak>
|
|
|
+ <div class="login-dig-tabbar-navbar"></div>
|
|
|
+ <div class="login-dig-success-toast" v-show="showSuccess">
|
|
|
+ <i class="login-dig-icon-success"></i>
|
|
|
+ <span>验证成功</span>
|
|
|
+ </div>
|
|
|
+ <div class="login-dig-phone-bind-box">
|
|
|
+ <div class="bind-title-group">
|
|
|
+ <div>账号异常验证</div>
|
|
|
+ <p>您好,系统识别到您的账号异常,请您对登录手机号进行验证。</p>
|
|
|
+ </div>
|
|
|
+ <div class="login-dig-tabbar-content is-active" data-name="code">
|
|
|
+ <div class="login-dig-input-box" style="background-color: transparent;border: 0;">
|
|
|
+ <i class="login-dig-icon-phone"></i>
|
|
|
+ <input v-model="formatVerifyPhone" autocomplete="off" disabled type="tel">
|
|
|
+ </div>
|
|
|
+ <div class="login-dig-input-box" :class="{'is-focus': codeFocus}" data-error="短信验证码输入错误">
|
|
|
+ <i class="login-dig-icon-guard"></i>
|
|
|
+ <input
|
|
|
+ v-model="msgCode"
|
|
|
+ @blur="onCodeBlur"
|
|
|
+ @focus="onCodeFocus"
|
|
|
+ autocomplete="off"
|
|
|
+ name="verify_sms"
|
|
|
+ type="text"
|
|
|
+ placeholder="输入短信验证码"
|
|
|
+ maxlength="6"
|
|
|
+ >
|
|
|
+ <div class="after-input-box">
|
|
|
+ <span v-if="sendCodeBtn" class="l-get-sms" :class="formatVerifyPhone ? '' : 'is-stop'" @click="sendMobileCode">获取验证码</span>
|
|
|
+ <span v-else class="l-get-sms is-stop">重新获取(${countdown}s)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="login-dig-submit-button" :disabled="verifyStatus" @click="submitForm">立即验证</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+{{include "/common/pcbottom.html"}}
|
|
|
+{{include "/common/baiducc.html"}}
|
|
|
+<script src="//cdn-common.jianyu360.com/cdn/lib/vue/2.6.14/vue.min.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ $(function(){
|
|
|
+ haslogin({{.T.logid}});
|
|
|
+
|
|
|
+ var verifyAccount = new Vue({
|
|
|
+ el: '#verify-account',
|
|
|
+ delimiters: ['${', '}'],
|
|
|
+ data: {
|
|
|
+ showSuccess: false,
|
|
|
+ verifyPhone: '',
|
|
|
+ codeFocus: false,
|
|
|
+ msgCode: '',
|
|
|
+ countdown: 0,
|
|
|
+ beforeTime: -1,
|
|
|
+ sendCodeBtn: true,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formatVerifyPhone () {
|
|
|
+ return this.addConfusionForTel(this.verifyPhone)
|
|
|
+ },
|
|
|
+ verifyStatus () {
|
|
|
+ return !(this.msgCode && this.msgCode.length === 6)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.getVerifyPhone()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // 手机号中间4位加*
|
|
|
+ addConfusionForTel: function (tel) {
|
|
|
+ var reg = /^(\d{3})\d{4}(\d{4})$/
|
|
|
+ return tel.replace(reg, '$1****$2')
|
|
|
+ },
|
|
|
+ getVerifyPhone: function () {
|
|
|
+ var _this = this
|
|
|
+ $.ajax({
|
|
|
+ url: '/jypay/user/getAccountInfo?t=' + Date.now(),
|
|
|
+ success: function (r) {
|
|
|
+ if (r && r.data) {
|
|
|
+ if (r.data.phone) {
|
|
|
+ _this.verifyPhone = r.data.phone
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 验证请求封装(1.发送验证码 、 2.验证身份)
|
|
|
+ validStatus: function(type, code, callback) {
|
|
|
+ // reqType: reqType==sendIdentCode发短信;reqType == codeVerification验证;reqCode: 图形验证码或短信验证码 callback:请求成功回调
|
|
|
+ var _this = this;
|
|
|
+ var data = {
|
|
|
+ reqType: type,
|
|
|
+ reqCode: code
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url: '/subscribepay/exception/verification',
|
|
|
+ type:'POST',
|
|
|
+ data: data,
|
|
|
+ success: function(res) {
|
|
|
+ callback && callback(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 发送短信验证码(第一次请求 reqType==sendIdentCode 传图形验证码)
|
|
|
+ sendMobileCode: function() {
|
|
|
+ var _this = this;
|
|
|
+ _this.countdown = new Date().getTime()
|
|
|
+ // 发送手机验证码
|
|
|
+ _this.validStatus('sendIdentCode', '', function(res){
|
|
|
+ if(res.error_code === 0 && res.data) {
|
|
|
+ _this.sendCodeBtn = false
|
|
|
+ _this.startTimer()
|
|
|
+ } else {
|
|
|
+ _this.toastFn(res.error_msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交验证(第二次请求:tep=codeVerification 传短信验证码)
|
|
|
+ submitForm: function () {
|
|
|
+ if(!this.msgCode) return
|
|
|
+ var redirectTo = getParam('redirectTo')
|
|
|
+ var _this = this;
|
|
|
+ _this.validStatus('codeVerification', _this.msgCode,function(res){
|
|
|
+ if (res.error_code === 0 && res.data) {
|
|
|
+ // 验证成功 返回上一页
|
|
|
+ _this.showSuccess = true
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.showSuccess = false
|
|
|
+ // 非工作桌面重定向到传过来的上一页
|
|
|
+ if (!goTemplateData.inIframe) {
|
|
|
+ window.location.replace(redirectTo)
|
|
|
+ } else {
|
|
|
+ // 在工作桌面内跳转
|
|
|
+ window.location.replace(redirectTo)
|
|
|
+ // window.location.replace('/page_workDesktop/work-bench/page?link=' + encodeURIComponent(redirectTo))
|
|
|
+ }
|
|
|
+ }, 1500)
|
|
|
+ } else {
|
|
|
+ _this.toastFn(res.error_msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 开始倒计时,倒计时结束将缓存的图片赋值并清空
|
|
|
+ startTimer: function() {
|
|
|
+ var _this = this;
|
|
|
+ _this.countdown = 60
|
|
|
+ _this.beforeTime = new Date().getTime()
|
|
|
+ var timeInt = setInterval(function() {
|
|
|
+ if (_this.beforeTime !== -1) {
|
|
|
+ var nowCount = 60 - Math.ceil((new Date().getTime() - _this.beforeTime) / 1000)
|
|
|
+ if (nowCount < _this.countdown) {
|
|
|
+ _this.countdown = nowCount
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this.countdown--
|
|
|
+ if (_this.countdown <= 0) {
|
|
|
+ _this.sendCodeBtn = true
|
|
|
+ _this.beforeTime = -1
|
|
|
+ window.clearInterval(timeInt)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ onCodeFocus: function () {
|
|
|
+ this.codeFocus = true
|
|
|
+ },
|
|
|
+ onCodeBlur: function () {
|
|
|
+ this.codeFocus = false
|
|
|
+ },
|
|
|
+ toastFn: function (text, duration) {
|
|
|
+ if (!duration) {
|
|
|
+ duration = 2000
|
|
|
+ }
|
|
|
+ var _html = ""
|
|
|
+ _html+='<div class="custom-toast"><div class="mask" style="background-color: transparent;"></div><div class="toast-container">'
|
|
|
+ _html+='<span>' + text + '</span></div></div>'
|
|
|
+ $('body').append(_html)
|
|
|
+ setTimeout(function () {
|
|
|
+ $(".custom-toast").fadeOut().remove();
|
|
|
+ }, duration)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|