CINXE.COM
重置密码 - 信息系统建设与服务能力评估工作管理平台
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title>重置密码 - 信息系统建设与服务能力评估工作管理平台</title> <link rel="stylesheet" href="/static/cs/css/style.css" /> <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="/static/common/css/ionicons.min.css" /> <link rel="stylesheet" href="/static/adminlte/css/adminlte.min.css" /> <link rel="stylesheet" href="/static/plugins/iCheck/square/blue.css" /> <link rel="stylesheet" href="/static/plugins/bootstrap-validator/dist/css/bootstrap-validator.css" /> <link rel="stylesheet" href="/static/plugins/toastr/css/toastr.css" /> <link href="/static/common/css/fonts.local.css" rel="stylesheet" /> <link rel="stylesheet" href="/static/cs/css/resetPassword.css" /> <link rel="stylesheet" href="/static/cs/css/footer.css" /> <link rel="stylesheet" href="/static/captcha/css/verify2.css" /> <link rel="stylesheet" href="/static/fontawesome/css/all.css" /> <style> .inner-container { position: relative; max-width: 20%; min-width: 360px; height: 200px; width: 100%; margin: 0 auto 100px; } .content { display: none; } .active { display: block !important; opacity: 1; transition: ease-in-out 1s; } .nextButton { color: #00ced1; text-decoration: none; position: relative; } .a:before { content: ''; position: absolute; bottom: 2px; left: 0; width: 0%; border-bottom: 2px solid #00ced1; transition: 0.3s; } .a:hover:before { width: 80%; } /* 弹窗 (background) */ #myModal.modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置在顶层 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } /* 添加动画 */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } /* 弹窗内容 */ #myModal .modal-content { background-color: #fefefe; margin: 15% auto; border: 1px solid #888; width: fit-content; border-radius: 20px; } #sliderInner-capture-bd i { position: relative; top: -2px; left: 36px; color: white; } </style> </head> <body> <div class="reset-warpper"> <div class="reset-warpper__top"> <a class="logo" href="/"> <img class="img" src="/static/cs/img/logo-new.png" alt="logo" /> </a> <div class="tips"> <div class=""> 已有密码？返回 <a href="/cs/login">登录</a> </div> <a class="home-btn" href="/">首页</a> </div> </div> <div class="reset-warpper__content"> <div class="reset-form"> <div class="title">重置密码</div> <p class="tips">通过您注册时填写的手机号码重新设置密码</p> <div class="form-content"> <div class="step1 content active"> <form id="login1-form"> <div class="form-item form-group"> <input type="text" name="mobile" id="mobile" placeholder="手机号码" autocomplete="off" onfocus="this.removeAttribute('readonly');" /> </div> <div class="form-item form-group"> <input type="text" class="code-input" name="verifyCode" placeholder="短信验证码" autocomplete="off" onfocus="this.removeAttribute('readonly');" /> <div class="code-btn" id="verifyCode" onclick="sendSms()"> <a href="#">获取验证码</a> </div> </div> </form> </div> <div class="step2 content"> <form id="login2-form"> <div class="form-item form-group" id="selectUserDiv"> <select id="userSelect" name="userId"> <option value="">请选择需要修改密码的账号</option> </select> </div> </form> </div> <div class="step3 content"> <form id="login3-form"> <div class="form-item form-group"> <input type="password" class="form-control" name="newpassword" id="newpassword" placeholder="设置新密码" readonly onfocus="this.removeAttribute('readonly');" /> </div> <div class="form-item form-group"> <input type="password" class="form-control" name="repassword" id="repassword" placeholder="再次确认密码" readonly onfocus="this.removeAttribute('readonly');" /> </div> <button class="submit-btn" type="submit">提 交</button> </form> </div> <div class="next-step"> <a class="nextButton" href="#" onclick="next()">下一步</a> </div> </div> </div> </div> </div> <!-- 验证码弹窗 --> <div id="myModal" class="modal"> <div class="modal-content"> <div id="mpanel5" style="margin: 24px"> <div class="imageDiv-capture-bd"> <img id="validateImage-capture-bd" src="" alt=""/> <img id="slideImage-capture-bd" src="" alt=""/> </div> <div class="resultDiv-capture-bd"> <button class="btn btn-default" onclick="exchange();"><i class="fas fa-redo"></i> </button> <span id="operateResult-capture-bd"></span> </div> <div> <div id="sliderOuter-capture-bd" class="outer-capture-bd"> <div id="dragDiv-capture-bd">拖动滑块完成拼图</div> <div id="sliderInner-capture-bd" class="inner-capture-bd"> <i class="fas fa-angle-double-right"></i> <div class="coverIcon-capture-bd"></div> </div> </div> </div> </div> </div> </div> <div class="page-footer"> <ul class="infos"> <li class="info-item">地址：<span>北京市海淀区万寿路27号院</span></li> <li class="info-item">联系电话：<span>010-68208057</span></li> <li class="info-item">邮编：<span>100846</span></li> </ul> <a href="https://beian.miit.gov.cn/" target="__blank">粤ICP备05096650号</a> </div> <script src="/static/plugins/jquery/jquery.min.js"></script> <script src="/static/plugins/jquery/jquery.cookie.js"></script> <script src="/static/cs/js/jquery.flexslider-min.js"></script> <script src="/static/plugins/iCheck/icheck.min.js"></script> <script src="/static/plugins/md5/md5.js"></script> <script src="/static/login/ie10-viewport-bug-workaround.js"></script> <script src="/static/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script> <script src="/static/plugins/toastr/js/toastr.js"></script> <script src="/static/common/js/base.js"></script> <script src="/static/common/js/base-toastr.js"></script> <script src="/static/common/js/base-form.js"></script> <script src="/static/common/js/base-cookies.js"></script> <script type="text/javascript" src="/static/captcha/js/Tdrag.js"></script> <script> var form1, form2, form3 = null; var content = $('.content'); var lastItem = content.last(); var contentFirst = content.first(); // 获取弹窗 var modal = document.getElementById('myModal'); // 在用户点击其他地方时，关闭弹窗 window.onclick = function (event) { if (event.target == modal) { modal.style.display = 'none'; } }; $(function () { // 初始化图片验证码 initImageValidate(); /* 初始化按钮拖动事件 */ $("#sliderInner-capture-bd").Tdrag({ scope: ".outer-capture-bd", axis: "x", cbStart: function (obj, self, ev) {//移动前的回调函数 }, cbMove: function (obj, self, ev) {//移动中的回调函数 left_binarydance = obj.offsetLeft; $("#sliderInner-capture-bd").css("left", (left_binarydance) + "px"); $("#slideImage-capture-bd").css("left", (left_binarydance) + "px"); }, cbEnd: function (obj, self, ev) {//移动结束时候的回调函数 //停止移动时候的滑块距离 left_binarydance = obj.offsetLeft; //停止移动时候、去校验 checkImageValidate(); } }); // 获取弹窗 var modal = document.getElementById('myModal'); // 在用户点击其他地方时，关闭弹窗 window.onclick = function (event) { if (event.target == modal) { modal.style.display = 'none'; } }; var obj1 = $('#verifyCode'); v = getCookieValue('resetSecondsremained'); //获取cookie值 if (v > 0) { settime(obj1); //开始倒计时 } form1 = $('#login1-form').form(); form2 = $('#login2-form').form(); form3 = $('#login3-form').form(); $('#login1-form').bootstrapValidator({ message: '请输入有效值', fields: { mobile: { validators: { notEmpty: { message: '请输入手机号码', }, regexp: { regexp: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号码', }, }, }, verifyCode: { validators: { notEmpty: { message: '请输入短信验证码', }, }, }, }, }); $('#login2-form').bootstrapValidator({ message: '请输入有效值', fields: { userId: { validators: { callback: { message: '请选择关联账号', callback: function (value, validator) { //这里可以自定义value的判断规则 var val = $('#userSelect').val(); if (val == null || val == '') { //"请选择" //错误的参数值 return false; } else { //合格的参数值 return true; } }, }, }, }, }, }); $('#login3-form ').bootstrapValidator({ message: '请输入有效值', submitHandler: function (validator, menuform, submitButton) { //Save Data，对应'submit-提交' var params = form3.getFormSimpleData(); var params1 = form1.getFormSimpleData(); var newpassword = hex_md5($('#newpassword').val()); params.newpassword = newpassword; params.userId = $('#userSelect').val(); params.mobile = params1.mobile; params.verifyCode = params1.verifyCode; ajaxPost('/cs/resetByPhone', params, function (data, status) { if (data.success) { toastr.success('密码重置成功, 3秒后跳转到登录界面', '成功'); setTimeout(function () { window.location.href = '/cs/login'; }, 3000); } else { toastr.error(data.data, '失败'); } }); }, fields: { newpassword: { validators: { notEmpty: { message: '请输入密码', }, identical: { field: 'password', message: '密码与确认密码不一致！', }, regexp: { regexp: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W)[^\s].{8,50}$/, message: '8-50位密码，密码必须包含大小写字母、数字与特殊字符', }, }, }, repassword: { validators: { notEmpty: { message: '请重新输入密码', }, identical: { field: 'newpassword', message: '用户新密码与确认密码不一致！', }, }, }, }, }); //方法名称：获取当前选中的值；icheck-radio change事件；点击事件; $("input:checkbox[name='remeber']").on('ifChanged', function (event) { if (this.checked == true) { //如果选中设置remFlag为1 //cookie存用户名和密码,回显的是真实的用户名和密码,存在安全问题. toastr.success('记录功能不宜在公共场所使用,请注意安全.'); $('#remeber').val('true'); } else { //如果没选中设置remFlag为"" clearCookie('信息系统建设与服务能力评估网RemeberMe'); $('#remeber').val('false'); } }); $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%', // optional }); //登录页面 $('#loginTitle ul li').click(function () { $(this).addClass('active').siblings().removeClass('active'); $('.loginMain>div:eq(' + $(this).index() + ')') .show() .siblings() .hide(); }); }); //定义倒计时变量 var countdown; // 是否通过滑块验证码 var passVer = false; //点击函数 function sendSms() { var obj = $('#verifyCode'); if (obj.attr('disabled') == 'disabled') { return; } var number = $('#mobile').val(); if (number == null || number == '') { toastr.error('请输入正确的手机号码'); return false; } if (!passVer) { $('#myModal').toggle(); return; } ajaxPost( '/sys/user/getByNumber', { number: number, }, function (data) { if (data.success) { var userList = data.data; ajaxPost( '/cs/sendSms', { acptureUuid: acptureUuid_binarydance, offsetHorizontalX:left_binarydance, number: number, }, function (data) { if (data.success) { toastr.success('发送成功'); passVer = false; addCookie('resetSecondsremained', 120, 120); //添加cookie记录,有效时间60s settime(obj); //开始倒计时 var $userSelect = $('#userSelect'); if (userList.length > 1) { for (var i in userList) { $userSelect.append( "<option value='" + userList[i].id + "'>" + userList[i].name + '</option>', ); } } else { $userSelect.empty(); $userSelect.append( "<option value='" + userList[0].id + "'>" + userList[0].name + '</option>', ); // 只有一个账号 $('#userSelect').val(userList[0].id); } } else { toastr.error(data.data); obj.attr('disabled', false); obj.empty(); obj.append('<a href="#">获取验证码</a>'); return; } }, ); return true; } else { toastr.error('手机号码不存在'); } }, ); } //倒计时函数 function settime(obj) { //发送验证码倒计时 countdown = getCookieValue('resetSecondsremained'); if (countdown === '0') { obj.attr('disabled', false); obj.empty(); obj.append('<a href="#">获取验证码</a>'); return; } else { obj.attr('disabled', true); obj.empty(); obj.append('<a href="#">重新发送(' + countdown + 's)</a>'); countdown--; editCookie('resetSecondsremained', countdown, countdown + 2); } setTimeout(function () { settime(obj); }, 1000); } function next() { var currentItem = content.filter('.active'); if (currentItem.is(lastItem)) { //$('#login3-form').submit(); } else if (currentItem.is(contentFirst)) { var bootstrapValidator = $('#login1-form').data('bootstrapValidator'); bootstrapValidator.validate(); if (bootstrapValidator.isValid() && sendSms) { var params = form1.getFormSimpleData(); ajaxPost('/cs/checkCode', params, function (data, status) { if (data.success) { var currentItem = content.filter('.active'); var nextItem = currentItem.next(); currentItem.removeClass('active'); nextItem.addClass('active'); // 只有一个账号的情况下，跳过选择账号那一步 if ($('#userSelect').val()) { var bootstrapValidator = $('#login2-form').data('bootstrapValidator'); bootstrapValidator.validate(); if (bootstrapValidator.isValid()) { var currentItem = content.filter('.active'); var nextItem = currentItem.next(); currentItem.removeClass('active'); nextItem.addClass('active'); } else { return; } $('.next-step').hide(); } } else { toastr.error(data.data, '失败'); } }); } else { return; } } else { var bootstrapValidator = $('#login2-form').data('bootstrapValidator'); bootstrapValidator.validate(); if (bootstrapValidator.isValid()) { var currentItem = content.filter('.active'); var nextItem = currentItem.next(); currentItem.removeClass('active'); nextItem.addClass('active'); } else { return; } $('.next-step').hide(); } } // x轴=轴线滑动的距离 var left_binarydance = 0; // 服务器返回的acptureUuid参数，注意保存，校验时候同left_binarydance参数一起传入 var acptureUuid_binarydance = ''; // 存储不带描边的抠图 var _noLineImg = null; // 存储带描边的抠图 var _lineImg = null; //$("抖动元素").shake(次数, 距离, 持续时间); jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) { this.each(function () { var jqNode = $(this); jqNode.css({position: 'relative'}); for (var x = 1; x <= intShakes; x++) { jqNode.animate({left: (intDistance * -1)}, (((intDuration / intShakes) / 4))) .animate({left: intDistance}, ((intDuration / intShakes) / 2)) .animate({left: 0}, (((intDuration / intShakes) / 4))); } }); return this; } //服务器生成图片 function initImageValidate() { $.ajax({ async: false, type: "POST", url: "/capture/img", dataType: "json", data: {}, success: function (data) { if (data.success) { // 设置图片的src属性 $("#validateImage-capture-bd").attr("src", data.data.oriCopyImage); $("#slideImage-capture-bd").attr("src", data.data.newImage); _noLineImg = data.data.noLineImg; _lineImg = data.data.newImage; //acptureUuid acptureUuid_binarydance = data.data.acptureUuid; } }, error: function () { } }); } //点击按钮请求切换图片 function exchange() { // 验证未通过，将按钮和拼图恢复至原位置 $("#sliderInner-capture-bd").animate({"left": "0px"}, 200); $("#slideImage-capture-bd").animate({"left": "0px"}, 200); initImageValidate(); } //服务器校验 function checkImageValidate() { $.ajax({ async: false, type: "POST", url: "/capture/checkImgValidate", dataType: "json", data: { acptureUuid: acptureUuid_binarydance, offsetHorizontalX: left_binarydance, }, success: function (data) { //0成功，!1失败 if (data.success) { $("#operateResult-capture-bd").html(data.message).css("cssText", "color:lightpink!important;"); if (_noLineImg != null) { $("#slideImage-capture-bd").attr("src", _noLineImg); } setTimeout(function () { $('#myModal').toggle(); passVer = true; sendSms(); }, 1000); } else { $("#operateResult-capture-bd").html(data.message).css("cssText", "color:red!important;"); // 验证未通过，将按钮和拼图恢复至原位置 if (_lineImg != null) { $("#slideImage-capture-bd").attr("src", _lineImg); } $("#sliderInner-capture-bd").animate({"left": "0px"}, 200); $("#slideImage-capture-bd").animate({"left": "0px"}, 200); //震动 $("#container-capture-bd").shake(4, 20, 400); } }, error: function () { } }); } </script> </body> </html>