add 天水综合平台入口三级等保登录添加验证码以及校验功能退出功能bug修复

chenbiao
1 parent 7764a5a5
Showing 7 changed files with 193 additions and 180 deletions
css/login.css
img/yzm.png
js/config.js
js/index.js
js/login.js
js/unit.js
login.html
@@ -69,6 +69,14 @@ html,body{
     height: 40px;
     background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center;
 }
+.login-yzm-bg{
+    float: left;
+    display: inline-block;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    background:rgba(170,171,171,.8) url("../img/yzm.png") no-repeat center center;
+}
 .form-control{
     border-radius: 0;
 }
@@ -319,7 +327,7 @@ input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
     text-align: center;
     line-height: 40px;
     font-size: 14px;
-    background-color: rgba(255,255,255,.75);
+    /*background-color: rgba(255,255,255,.75);*/
     border: none;
 }
@@ -386,3 +394,22 @@ img { border:none; }
 #supersized img { max-width: none !important }
+
+/* 验证码 */
+.login_input_txtSmall{
+    float: left;
+    width: 150px !important;
+}
+
+#code {
+    margin-left: 10px;
+    float: left;
+    width: 90px;
+    height: 40px;
+    font-weight: bold;
+    border: 0;
+    letter-spacing: 2px;
+    color: #D71D20;
+    font-size: 24px;
+    /*background: #f7f7f7;*/
+}
 \ No newline at end of file
@@ -9,8 +9,11 @@
 //阿里云测试环境，别删
 //  baseUrl = 'http://39.98.54.240:8088/';// url公用地址
+//黄石环境测试，别删
+baseUrl = 'https://test.renniting.cn/sys/';// url公用地址
+
 //黄石环境，别删
-baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址
+// baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址
@@ -4,7 +4,24 @@
 // fn.getUserName();
 console.log(fn.getUserName());
 if(fn.getUserName()==''|| fn.getUserName()==undefined||fn.getUserName()==null){
-    fn.loginOut();
+    var token = fn.getToken();
+    console.log(token)
+    var req = {'token': token}
+    var opt = {
+        method: 'post',
+        url: dataUrl.util.getLoginOut(),
+        data: JSON.stringify(req),
+        contentType: 'application/json; charset=utf-8',
+        dataType: 'json',
+        success: function (res) {
+            console.log(res)
+            if (res.code == '8888') {
+                fn.toLoginPage();
+            }
+        }
+    };
+    sysAjax(opt);
+
     $('#topbar_userMsg').hide();
     $('#topbar_tologin').show();
 }else if(fn.getUserName()=='燕松梅赤峰测试'){
@@ -115,7 +132,23 @@ var fun={
     loginOut:function () {
         $('#login_out_btn').on('click', function () {
             // console.log("token:" + fn.getToken());
-            fn.loginOut();
+            var token = fn.getToken();
+            console.log(token)
+            var req = {'token': token}
+            var opt = {
+                method: 'post',
+                url: dataUrl.util.getLoginOut(),
+                data: JSON.stringify(req),
+                contentType: 'application/json; charset=utf-8',
+                dataType: 'json',
+                success: function (res) {
+                    console.log(res)
+                    if (res.code == '8888') {
+                        fn.toLoginPage();
+                    }
+                }
+            };
+            sysAjax(opt);
         });
     }
@@ -258,80 +258,20 @@
     }
 })(this)
-function slide() {
-    var slideBox = $('#slide_box')[0];
-    var slideXbox = $('#slide_xbox')[0];
-    var btn = $('#btn')[0];
-    var slideBoxWidth = slideBox.offsetWidth;
-    var btnWidth = btn.offsetWidth;
-    //pc绔�
-    btn.ondragstart = function () {
-        return false;
-    };
-    btn.onselectstart = function () {
-        return false;
-    };
-    btn.onmousedown = function (e) {
-        var disX = e.clientX - btn.offsetLeft;
-        document.onmousemove = function (e) {
-            var objX = e.clientX - disX + btnWidth;
-            if (objX < btnWidth) {
-                objX = btnWidth
-            }
-            if (objX > slideBoxWidth) {
-                objX = slideBoxWidth
-            }
-            $('#slide_xbox').width(objX + 'px');
-        };
-        document.onmouseup = function (e) {
-            var objX = e.clientX - disX + btnWidth;
-            if (objX < slideBoxWidth) {
-                objX = btnWidth;
-            } else {
-                objX = slideBoxWidth;
-                locked = true;
-                $('#slide_xbox').html('验证通过<div id="btn"></div>');
-            }
-            $('#slide_xbox').width(objX + 'px');
-            document.onmousemove = null;
-            document.onmouseup = null;
-        };
-    };
-    //绉诲姩绔�
-    var cont = $("#btn");
-    var startX = 0, sX = 0, moveX = 0,leftX = 0;
-    cont.on({//缁戝畾浜嬩欢
-        touchstart: function (e) {
-            startX = e.originalEvent.targetTouches[0].pageX;//鑾峰彇鐐瑰嚮鐐圭殑X鍧愭爣
-            sX = $(this).offset().left;//鐩稿浜庡綋鍓嶇獥鍙杞寸殑鍋忕Щ閲�
-            leftX = startX - sX;//榧犳爣鎵€鑳界Щ鍔ㄧ殑鏈€宸︾鏄綋鍓嶉紶鏍囪窛div宸﹁竟璺濈殑浣嶇疆
-        },
-        touchmove: function (e) {
-            e.preventDefault();
-            moveX = e.originalEvent.targetTouches[0].pageX;//绉诲姩杩囩▼涓璛杞寸殑鍧愭爣
-            var objX = moveX - leftX + btnWidth;
-            if (objX < btnWidth) {
-                objX = btnWidth
-            }
-            if (objX > slideBoxWidth) {
-                objX = slideBoxWidth
-            }
-            $('#slide_xbox').width(objX + 'px');
-        },
-        touchend: function (e) {
-            var objX = moveX - leftX + btnWidth;
-            if (objX < slideBoxWidth) {
-                objX = btnWidth;
-            } else {
-                objX = slideBoxWidth;
-                locked = true;
-                $('#slide_xbox').html('验证通过<div id="btn"></div>');
-            }
-            $('#slide_xbox').width(objX + 'px');
-        }
-    });
-}
-slide();
+var fun={
+    init:function () {
+        $('#login_code_ifo').text('');
+        //获取验证码
+        createCode();
+    }
+};
+fun.init();
+$(document).on('click','#code',function () {
+    //获取验证码
+    createCode();
+})
+
+
 /**
  *  输入框内容检测插件
  */
@@ -421,65 +361,101 @@ function password(obj){
 $('#password').on("blur", function() { //验证邮箱地址
     password($(this));
 });
-//验证码验证
-//function verification(obj) {
-//  var _this = obj;
-//  if(_this.val() !== '1234'){
-//      _this.prev().addClass('glyphicon glyphicon-remove');
-//      return false;
-//  }else{
-//      _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
-//  }
-//}
-//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址
-//  verification($(this));
-//});
-//点击登陆
+
+//点击登录
 $('#login-btn').on('click',function () {
     var obj1 = $('#userName');
     var obj2 = $('#password');
     username(obj1);
     password(obj2);
-    //verification($('#login_imgCode_value'));
+
+    // 验证码
+    var imgCode=document.getElementById("code").value;
+    var imgCodeId=$('#code').attr('data-id');
+    var inputCode = document.getElementById("codedate").value.toUpperCase(); //取得输入的验证码并转化为大
+    //校验 验证码是否匹配正确
+    if(inputCode.length <= 0) { //若输入的验证码长度为0
+        //alert("请输入验证码！"); //则弹出请输入验证码
+        $('#login_error_ifo').text("请输入验证码！");
+        return;
+    }
+    if(inputCode != imgCode ) { //若输入的验证码与产生的验证码不一致时
+        //alert("验证码输入错误!"); //则弹出验证码输入错误
+        $('#login_error_ifo').text("验证码输入错误!");
+        createCode();//刷新验证码
+        document.getElementById("codedate").value = "";//清空文本框
+        return;
+    }
+
+    $('#login_error_ifo').text('');
+
     if(flagAjax){
-        var verificationText =  $('#slide_xbox').text();
-
-        if(verificationText != '验证通过'){
-            $('#login_error_ifo').text("请拖动滑块验证");
-        }else{
-
-            var Username= $('#userName').val();
-            var Password= $('#password').val();
-            // var imageCode = $imageCodeValue.val();
-            // alert("username is "+username+"password is"+password+"code is "+imageCode);
-
-
-            var opts = {};
-            opts.method = "POST";
-            opts.url = dataUrl.util.getLogin();
-            opts.success = loginSuccess;
-
-            var data = {
-                'terminalSource':6,
-            };
-            data.clientType = sysComm.clientType;
-            data.sysCode = sysComm.sysCode;
-            data.grantType = sysComm.grantType;
-            data.username = Username;
-            // data.password = Password;
-            data.password = md5(Password);
-            //data.imgCode = imageCode;
-
-            data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂
-            opts.data = JSON.stringify(data);
-            sysAjax(opts);
-        }
+
+        var Username= $('#userName').val();
+        var Password= $('#password').val();
+        // var imageCode = $imageCodeValue.val();
+        // alert("username is "+username+"password is"+password+"code is "+imageCode);
+
+        var opts = {};
+        opts.method = "POST";
+        opts.url = dataUrl.util.getLogin();
+        opts.success = loginSuccess;
+
+        var data = {};
+        data.clientType = sysComm.clientType;
+        data.sysCode = sysComm.sysCode;
+        data.grantType = sysComm.grantType;
+        data.username = Username;
+        data.password = md5(Password);
+        data.imgCodeId = imgCodeId;
+        data.imgCode = imgCode;
+        data.expiresIn = 60 * 60 * 12;//默认12小时
+        opts.data = JSON.stringify(data);
+        sysAjax(opts);
     }
-    // window.location.href='index.html';
 });
+
+/**
+ * 验证码获取 请求接口
+ * Get getloginimgcode
+ * @param
+ */
+
+var syscode; //在全局定义验证码
+function createCode() {
+    // 发出Ajax请求
+    $.ajax({
+        type: "GET",
+        url: dataUrl.util.imageCodeStr(),
+        data: null,
+        dataType: null,
+        processData: true,
+        traditional: true,
+        success: function (res) {
+
+            if (res.code === '8888') {
+                var data = res.data;
+                var imgCodeId=data.authTokenid;
+                var imgCode=data.imageCodeStr;
+                syscode=imgCode;
+
+                $('#code').val(imgCode);
+                $('#code').attr('data-id',imgCodeId);
+
+            } else {
+                console.log(res.msg);
+            }
+
+        },
+        error: function (err) {
+            console.log(err);
+        }
+    })
+};
+
 //回车事件
 $('#login_imgCode_value').keyup(function(event){
     if(event.keyCode ==13){
@@ -500,29 +476,8 @@ $(&#39;.verification-logo&#39;).on(&#39;click&#39;,function () {
     $("#login_imgCode_value").val("");
     $('.verification-logo').removeClass('glyphicon glyphicon-remove');
 });
-getImgCode();
-//点击换验证码
-$('#login_imgCode').on('click', function () {
-    getImgCode();
-});
-function getImgCode() {
-    var opt = {
-        method: "get",
-        url: dataUrl.util.getLoginImageCode(),
-        success: imgCodeSuccess
-    }
-    sysAjax(opt);
-}
-function imgCodeSuccess(res) {
-    if (res.code === '8888') {
-        var imageCodeStr = res.data.imageCodeStr;
-        var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr;
-        fn.setToken(res.data.authTokenid);
-        $imageCode.attr('src', base64ImgStr);
-    }
-}
 //登录成功的函数
 function loginSuccess(res) {
     if (res.code === '8888') {
@@ -541,33 +496,36 @@ function loginSuccess(res) {
         //alert("success");
         fn.setUserAccount(res.data.userName);
         window.location.href = "index.html";
-    } else if (res.code == "2000" || res.code === '1004') {
+    } else if (res.code == "1012") {
+
+        $('#login_error_ifo').text("验证码不匹配");
+        createCode();//刷新验证码
+
+    }else if (res.code == "2000") {
         //账号密码不匹配
-        $('#login_error_ifo').text("账号密码不匹配");
-        //$error.text("账号或密码错误!");
-        getImgCode();
+        $('#login_error_ifo').text(res.errMsg);
+        createCode();//刷新验证码
+
     } else if (res.code == "2001") {
         //账号无有效角色，非有效用户
         $('#login_error_ifo').text("账号无效");
-        //$error.text("账号无有效角色，非有效用户!");
-        getImgCode();
+        createCode();//刷新验证码
+
     } else if (res.code == "2002") {
-        //验证码错误
-        // $('.verification-logo').addClass('glyphicon glyphicon-remove');
+
         $('#login_error_ifo').text("验证码错误");
-        //return false;
-        // $imageCodeValue.focus();
-        getImgCode();
+        createCode();//刷新验证码
+
     } else if(res.code == "2010"){
         $('#login_error_ifo').text("用户没有关联停车场");
-        getImgCode();
+        createCode();//刷新验证码
+
     }
     else {
         console.log(res.code);
-        $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
-        $('#login_error_ifo').text("系统错误");
+        $('#login_error_ifo').text(res.errMsg);
         // $error.text(res.msg);
-        getImgCode();
+        createCode();
     }
 }
@@ -29,8 +29,8 @@ dataUrl.util = {
         return baseUrl + 'sysLoginLog/queryLoginLog';
     },
     //获取验证码
-    getLoginImageCode: function () {
-        return baseUrl + 'oauth/imageCode?' + Math.random()
+    imageCodeStr: function () {
+        return baseUrl + 'oauth/imageCodeStr'
     },
     //登录
     getLogin: function () {
@@ -85,12 +85,12 @@ fn = {
     },
     //跳转到登录界面
     toLoginPage: function () {
-        sessionStorage.setItem("sys_parkLot", '');
+        sessionStorage.clear()
         window.location.href = 'login.html'
     },
     //登出系统
     loginOut: function () {
-        sessionStorage.clear()
+      /*  sessionStorage.clear()
         var token = fn.getToken();
         fn.setToken('');
         if (StrUtil.isNotEmpty()) {
@@ -99,7 +99,7 @@ fn = {
         }
         $('#userId').text('');
-        fn.toLoginPage();
+        fn.toLoginPage();*/
     }
 }
@@ -34,14 +34,7 @@
 <body class="login">
 <div class="login-model">
     <div class="menu-toggler sidebar-toggler"></div>
-    <!-- END SIDEBAR TOGGLER BUTTON -->
-    <!-- BEGIN LOGO -->
-    <!--<div class="logo">-->
-    <!--<a href="###">-->
-    <!--<img src="../assets/pages/img/zte-its_logo.png" alt="" />-->
-    <!--</a>-->
-    <!--</div>-->
-    <!-- END LOGO -->
+
     <!-- BEGIN LOGIN -->
     <div class="login-cont">
         <div class="content">
@@ -55,7 +48,7 @@
                     <span class="login-user-bg"></span><input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
                     <div class="alert-danger display-hide error_ifo">
-                        <span>请输入正确的邮箱 </span>
+                        <span>请输入正确的用户名 </span>
                     </div>
                 </div>
@@ -67,10 +60,9 @@
                     </div>
                 </div>
                 <div id="slide_box">
-                    <div id="slide_xbox">
-                        <div id="btn"></div>
-                    </div>
-                    拖动滑块验证
+                    <span class="login-yzm-bg"></span>
+                    <input type="text" class="login_input_txtSmall form-control" placeholder="请输入验证码" id="codedate"><input type = "button" id="code" data-id=""/>
+
                 </div>
                 <div id="login_error_ifo" class="login_error_ifo">