add 综合平台入口登录添加验证码以及校验功能

chenbiao
1 parent 6a7c6b4b
Showing 6 changed files with 140 additions and 159 deletions
css/login.css
img/yzm.png
js/config.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,21 @@ 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;*/
+}
 //阿里云正式环境，别删
+// baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址
- // baseUrl = 'http://sys.service.renniting.cn/';// 鉴权URL公用地址
-
-//阿里云环境，别删 丹阳
-//  baseUrl='http://106.15.191.5:8088/'
-
-
-//阿里云测试环境，别删
- baseUrl = 'http://39.98.54.240:8088/';// url公用地址
-
+//赤峰测试环境，别删
+ baseUrl = 'http://dev.renniting.cn/sys/';// url公用地址
 //demo环境，别删
 //  baseUrl = 'http://47.96.41.88:18088/';// url公用地址
-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();
+// edit by chenbiao 2022/04/22
 /**
  *  输入框内容检测插件
  */
@@ -160,63 +87,77 @@ 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));
-//});
-//点击登陆
+var fun={
+    init:function () {
+        $('#login_code_ifo').text('');
+        //获取验证码
+        createCode();
+    }
+};
+fun.init();
+$(document).on('click','#code',function () {
+    //获取验证码
+    createCode();
+})
+
+
+//点击登录
 $('#login-btn').on('click',function () {
     var obj1 = $('#userName');
     var obj2 = $('#password');
     username(obj1);
     password(obj2);
-    //verification($('#login_imgCode_value'));
-    if(flagAjax){
-        var verificationText =  $('#slide_xbox').text();
-        if(verificationText != '验证通过'){
-            $('#login_error_ifo').text("请拖动滑块验证");
-        }else{
+    // 验证码
+    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;
+    }
-            var Username= $('#userName').val();
-            var Password= $('#password').val();
-            // var imageCode = $imageCodeValue.val();
-            // alert("username is "+username+"password is"+password+"code is "+imageCode);
+    $('#login_error_ifo').text('');
+    if(flagAjax){
+        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.imgCode = imageCode;
+        var opts = {};
+        opts.method = "POST";
+        opts.url = dataUrl.util.getLogin();
+        opts.success = loginSuccess;
-            data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂
-            opts.data = JSON.stringify(data);
-            sysAjax(opts);
-        }
+        var data = {
+            // 'terminalSource':6,
+        };
+        data.clientType = sysComm.clientType;
+        data.sysCode = sysComm.sysCode;
+        data.grantType = sysComm.grantType;
+        data.username = Username;
+        data.password = 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';
+
 });
 //回车事件
 $('#login_imgCode_value').keyup(function(event){
@@ -238,29 +179,45 @@ $(&#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);
-    }
+/**
+ * 验证码获取 请求接口
+ * 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);
+        }
+    })
+};
-}
 //登录成功的函数
 function loginSuccess(res) {
     if (res.code === '8888') {
@@ -279,33 +236,38 @@ 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" || res.code === '1004') {
         //账号密码不匹配
         $('#login_error_ifo').text("账号密码不匹配");
         //$error.text("账号或密码错误!");
-        getImgCode();
+        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("系统错误");
         // $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 () {
@@ -55,10 +55,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">