BJ_web_developers / gateway

Commit bc0e7b2989c82edef2f7410fadaabd2026ab4fa8

Authored by chenbiao
1 parent 7764a5a5

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

Inline Side-by-side
Showing 7 changed files with 193 additions and 180 deletions
css/login.css
  View file @bc0e7b2
... ... @@ -69,6 +69,14 @@ html,body{
69 69 height: 40px;
70 70 background:rgba(170,171,171,.8) url("../img/login-pwd-bg.png") no-repeat center center;
71 71 }
  72 +.login-yzm-bg{
  73 + float: left;
  74 + display: inline-block;
  75 + vertical-align: middle;
  76 + width: 40px;
  77 + height: 40px;
  78 + background:rgba(170,171,171,.8) url("../img/yzm.png") no-repeat center center;
  79 +}
72 80 .form-control{
73 81 border-radius: 0;
74 82 }
... ... @@ -319,7 +327,7 @@ input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
319 327 text-align: center;
320 328 line-height: 40px;
321 329 font-size: 14px;
322   - background-color: rgba(255,255,255,.75);
  330 + /*background-color: rgba(255,255,255,.75);*/
323 331 border: none;
324 332 }
325 333  
... ... @@ -386,3 +394,22 @@ img { border:none; }
386 394  
387 395 #supersized img { max-width: none !important }
388 396  
  397 +
  398 +/* 验证码 */
  399 +.login_input_txtSmall{
  400 + float: left;
  401 + width: 150px !important;
  402 +}
  403 +
  404 +#code {
  405 + margin-left: 10px;
  406 + float: left;
  407 + width: 90px;
  408 + height: 40px;
  409 + font-weight: bold;
  410 + border: 0;
  411 + letter-spacing: 2px;
  412 + color: #D71D20;
  413 + font-size: 24px;
  414 + /*background: #f7f7f7;*/
  415 +}
389 416 \ No newline at end of file
... ...
img/yzm.png 0 → 100644
View file @bc0e7b2

392 Bytes
js/config.js
  View file @bc0e7b2
... ... @@ -9,8 +9,11 @@
9 9 //阿里云测试环境，别删
10 10 // baseUrl = 'http://39.98.54.240:8088/';// url公用地址
11 11  
  12 +//黄石环境测试，别删
  13 +baseUrl = 'https://test.renniting.cn/sys/';// url公用地址
  14 +
12 15 //黄石环境，别删
13   -baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址
  16 +// baseUrl = 'https://sys.service.huangshiparking.com/';// url公用地址
14 17  
15 18  
16 19  
... ...
js/index.js
  View file @bc0e7b2
... ... @@ -4,7 +4,24 @@
4 4 // fn.getUserName();
5 5 console.log(fn.getUserName());
6 6 if(fn.getUserName()==''|| fn.getUserName()==undefined||fn.getUserName()==null){
7   - fn.loginOut();
  7 + var token = fn.getToken();
  8 + console.log(token)
  9 + var req = {'token': token}
  10 + var opt = {
  11 + method: 'post',
  12 + url: dataUrl.util.getLoginOut(),
  13 + data: JSON.stringify(req),
  14 + contentType: 'application/json; charset=utf-8',
  15 + dataType: 'json',
  16 + success: function (res) {
  17 + console.log(res)
  18 + if (res.code == '8888') {
  19 + fn.toLoginPage();
  20 + }
  21 + }
  22 + };
  23 + sysAjax(opt);
  24 +
8 25 $('#topbar_userMsg').hide();
9 26 $('#topbar_tologin').show();
10 27 }else if(fn.getUserName()=='燕松梅赤峰测试'){
... ... @@ -115,7 +132,23 @@ var fun={
115 132 loginOut:function () {
116 133 $('#login_out_btn').on('click', function () {
117 134 // console.log("token:" + fn.getToken());
118   - fn.loginOut();
  135 + var token = fn.getToken();
  136 + console.log(token)
  137 + var req = {'token': token}
  138 + var opt = {
  139 + method: 'post',
  140 + url: dataUrl.util.getLoginOut(),
  141 + data: JSON.stringify(req),
  142 + contentType: 'application/json; charset=utf-8',
  143 + dataType: 'json',
  144 + success: function (res) {
  145 + console.log(res)
  146 + if (res.code == '8888') {
  147 + fn.toLoginPage();
  148 + }
  149 + }
  150 + };
  151 + sysAjax(opt);
119 152 });
120 153 }
121 154  
... ...
js/login.js
  View file @bc0e7b2
... ... @@ -258,80 +258,20 @@
258 258 }
259 259 })(this)
260 260  
261   -function slide() {
262   - var slideBox = $('#slide_box')[0];
263   - var slideXbox = $('#slide_xbox')[0];
264   - var btn = $('#btn')[0];
265   - var slideBoxWidth = slideBox.offsetWidth;
266   - var btnWidth = btn.offsetWidth;
267   - //pc绔�
268   - btn.ondragstart = function () {
269   - return false;
270   - };
271   - btn.onselectstart = function () {
272   - return false;
273   - };
274   - btn.onmousedown = function (e) {
275   - var disX = e.clientX - btn.offsetLeft;
276   - document.onmousemove = function (e) {
277   - var objX = e.clientX - disX + btnWidth;
278   - if (objX < btnWidth) {
279   - objX = btnWidth
280   - }
281   - if (objX > slideBoxWidth) {
282   - objX = slideBoxWidth
283   - }
284   - $('#slide_xbox').width(objX + 'px');
285   - };
286   - document.onmouseup = function (e) {
287   - var objX = e.clientX - disX + btnWidth;
288   - if (objX < slideBoxWidth) {
289   - objX = btnWidth;
290   - } else {
291   - objX = slideBoxWidth;
292   - locked = true;
293   - $('#slide_xbox').html('验证通过<div id="btn"></div>');
294   - }
295   - $('#slide_xbox').width(objX + 'px');
296   - document.onmousemove = null;
297   - document.onmouseup = null;
298   - };
299   - };
300   - //绉诲姩绔�
301   - var cont = $("#btn");
302   - var startX = 0, sX = 0, moveX = 0,leftX = 0;
303   - cont.on({//缁戝畾浜嬩欢
304   - touchstart: function (e) {
305   - startX = e.originalEvent.targetTouches[0].pageX;//鑾峰彇鐐瑰嚮鐐圭殑X鍧愭爣
306   - sX = $(this).offset().left;//鐩稿浜庡綋鍓嶇獥鍙杞寸殑鍋忕Щ閲�
307   - leftX = startX - sX;//榧犳爣鎵€鑳界Щ鍔ㄧ殑鏈€宸︾鏄綋鍓嶉紶鏍囪窛div宸﹁竟璺濈殑浣嶇疆
308   - },
309   - touchmove: function (e) {
310   - e.preventDefault();
311   - moveX = e.originalEvent.targetTouches[0].pageX;//绉诲姩杩囩▼涓璛杞寸殑鍧愭爣
312   - var objX = moveX - leftX + btnWidth;
313   - if (objX < btnWidth) {
314   - objX = btnWidth
315   - }
316   - if (objX > slideBoxWidth) {
317   - objX = slideBoxWidth
318   - }
319   - $('#slide_xbox').width(objX + 'px');
320   - },
321   - touchend: function (e) {
322   - var objX = moveX - leftX + btnWidth;
323   - if (objX < slideBoxWidth) {
324   - objX = btnWidth;
325   - } else {
326   - objX = slideBoxWidth;
327   - locked = true;
328   - $('#slide_xbox').html('验证通过<div id="btn"></div>');
329   - }
330   - $('#slide_xbox').width(objX + 'px');
331   - }
332   - });
333   -}
334   -slide();
  261 +var fun={
  262 + init:function () {
  263 + $('#login_code_ifo').text('');
  264 + //获取验证码
  265 + createCode();
  266 + }
  267 +};
  268 +fun.init();
  269 +$(document).on('click','#code',function () {
  270 + //获取验证码
  271 + createCode();
  272 +})
  273 +
  274 +
335 275 /**
336 276 * 输入框内容检测插件
337 277 */
... ... @@ -421,65 +361,101 @@ function password(obj){
421 361 $('#password').on("blur", function() { //验证邮箱地址
422 362 password($(this));
423 363 });
424   -//验证码验证
425   -//function verification(obj) {
426   -// var _this = obj;
427   -// if(_this.val() !== '1234'){
428   -// _this.prev().addClass('glyphicon glyphicon-remove');
429   -// return false;
430   -// }else{
431   -// _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
432   -// }
433   -//}
434   -//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址
435   -// verification($(this));
436   -//});
437   -//点击登陆
  364 +
  365 +//点击登录
438 366 $('#login-btn').on('click',function () {
439 367 var obj1 = $('#userName');
440 368 var obj2 = $('#password');
441 369 username(obj1);
442 370 password(obj2);
443   - //verification($('#login_imgCode_value'));
  371 +
  372 + // 验证码
  373 + var imgCode=document.getElementById("code").value;
  374 + var imgCodeId=$('#code').attr('data-id');
  375 + var inputCode = document.getElementById("codedate").value.toUpperCase(); //取得输入的验证码并转化为大
  376 + //校验 验证码是否匹配正确
  377 + if(inputCode.length <= 0) { //若输入的验证码长度为0
  378 + //alert("请输入验证码！"); //则弹出请输入验证码
  379 + $('#login_error_ifo').text("请输入验证码！");
  380 + return;
  381 + }
  382 + if(inputCode != imgCode ) { //若输入的验证码与产生的验证码不一致时
  383 + //alert("验证码输入错误!"); //则弹出验证码输入错误
  384 + $('#login_error_ifo').text("验证码输入错误!");
  385 + createCode();//刷新验证码
  386 + document.getElementById("codedate").value = "";//清空文本框
  387 + return;
  388 + }
  389 +
  390 + $('#login_error_ifo').text('');
  391 +
444 392 if(flagAjax){
445   - var verificationText = $('#slide_xbox').text();
446   -
447   - if(verificationText != '验证通过'){
448   - $('#login_error_ifo').text("请拖动滑块验证");
449   - }else{
450   -
451   - var Username= $('#userName').val();
452   - var Password= $('#password').val();
453   - // var imageCode = $imageCodeValue.val();
454   - // alert("username is "+username+"password is"+password+"code is "+imageCode);
455   -
456   -
457   - var opts = {};
458   - opts.method = "POST";
459   - opts.url = dataUrl.util.getLogin();
460   - opts.success = loginSuccess;
461   -
462   - var data = {
463   - 'terminalSource':6,
464   - };
465   - data.clientType = sysComm.clientType;
466   - data.sysCode = sysComm.sysCode;
467   - data.grantType = sysComm.grantType;
468   - data.username = Username;
469   - // data.password = Password;
470   - data.password = md5(Password);
471   - //data.imgCode = imageCode;
472   -
473   - data.expiresIn = 60 * 60 * 12;//榛樿12灏忔椂
474   - opts.data = JSON.stringify(data);
475   - sysAjax(opts);
476   - }
  393 +
  394 + var Username= $('#userName').val();
  395 + var Password= $('#password').val();
  396 + // var imageCode = $imageCodeValue.val();
  397 + // alert("username is "+username+"password is"+password+"code is "+imageCode);
  398 +
  399 + var opts = {};
  400 + opts.method = "POST";
  401 + opts.url = dataUrl.util.getLogin();
  402 + opts.success = loginSuccess;
  403 +
  404 + var data = {};
  405 + data.clientType = sysComm.clientType;
  406 + data.sysCode = sysComm.sysCode;
  407 + data.grantType = sysComm.grantType;
  408 + data.username = Username;
  409 + data.password = md5(Password);
  410 + data.imgCodeId = imgCodeId;
  411 + data.imgCode = imgCode;
  412 + data.expiresIn = 60 * 60 * 12;//默认12小时
  413 + opts.data = JSON.stringify(data);
  414 + sysAjax(opts);
477 415  
478 416  
479 417 }
480 418  
481   - // window.location.href='index.html';
482 419 });
  420 +
  421 +/**
  422 + * 验证码获取 请求接口
  423 + * Get getloginimgcode
  424 + * @param
  425 + */
  426 +
  427 +var syscode; //在全局定义验证码
  428 +function createCode() {
  429 + // 发出Ajax请求
  430 + $.ajax({
  431 + type: "GET",
  432 + url: dataUrl.util.imageCodeStr(),
  433 + data: null,
  434 + dataType: null,
  435 + processData: true,
  436 + traditional: true,
  437 + success: function (res) {
  438 +
  439 + if (res.code === '8888') {
  440 + var data = res.data;
  441 + var imgCodeId=data.authTokenid;
  442 + var imgCode=data.imageCodeStr;
  443 + syscode=imgCode;
  444 +
  445 + $('#code').val(imgCode);
  446 + $('#code').attr('data-id',imgCodeId);
  447 +
  448 + } else {
  449 + console.log(res.msg);
  450 + }
  451 +
  452 + },
  453 + error: function (err) {
  454 + console.log(err);
  455 + }
  456 + })
  457 +};
  458 +
483 459 //回车事件
484 460 $('#login_imgCode_value').keyup(function(event){
485 461 if(event.keyCode ==13){
... ... @@ -500,29 +476,8 @@ $(&#39;.verification-logo&#39;).on(&#39;click&#39;,function () {
500 476 $("#login_imgCode_value").val("");
501 477 $('.verification-logo').removeClass('glyphicon glyphicon-remove');
502 478 });
503   -getImgCode();
504 479  
505   -//点击换验证码
506   -$('#login_imgCode').on('click', function () {
507   - getImgCode();
508   -});
509   -function getImgCode() {
510   - var opt = {
511   - method: "get",
512   - url: dataUrl.util.getLoginImageCode(),
513   - success: imgCodeSuccess
514   - }
515   - sysAjax(opt);
516   -}
517   -function imgCodeSuccess(res) {
518   - if (res.code === '8888') {
519   - var imageCodeStr = res.data.imageCodeStr;
520   - var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr;
521   - fn.setToken(res.data.authTokenid);
522   - $imageCode.attr('src', base64ImgStr);
523   - }
524 480  
525   -}
526 481 //登录成功的函数
527 482 function loginSuccess(res) {
528 483 if (res.code === '8888') {
... ... @@ -541,33 +496,36 @@ function loginSuccess(res) {
541 496 //alert("success");
542 497 fn.setUserAccount(res.data.userName);
543 498 window.location.href = "index.html";
544   - } else if (res.code == "2000" || res.code === '1004') {
  499 + } else if (res.code == "1012") {
  500 +
  501 + $('#login_error_ifo').text("验证码不匹配");
  502 + createCode();//刷新验证码
  503 +
  504 + }else if (res.code == "2000") {
545 505 //账号密码不匹配
546   - $('#login_error_ifo').text("账号密码不匹配");
547   - //$error.text("账号或密码错误!");
548   - getImgCode();
  506 + $('#login_error_ifo').text(res.errMsg);
  507 + createCode();//刷新验证码
  508 +
549 509 } else if (res.code == "2001") {
550 510 //账号无有效角色，非有效用户
551 511 $('#login_error_ifo').text("账号无效");
552   - //$error.text("账号无有效角色，非有效用户!");
553   - getImgCode();
  512 + createCode();//刷新验证码
  513 +
554 514 } else if (res.code == "2002") {
555   - //验证码错误
556   - // $('.verification-logo').addClass('glyphicon glyphicon-remove');
  515 +
557 516 $('#login_error_ifo').text("验证码错误");
558   - //return false;
559   - // $imageCodeValue.focus();
560   - getImgCode();
  517 + createCode();//刷新验证码
  518 +
561 519 } else if(res.code == "2010"){
562 520 $('#login_error_ifo').text("用户没有关联停车场");
563   - getImgCode();
  521 + createCode();//刷新验证码
  522 +
564 523 }
565 524 else {
566 525 console.log(res.code);
567   - $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
568   - $('#login_error_ifo').text("系统错误");
  526 + $('#login_error_ifo').text(res.errMsg);
569 527 // $error.text(res.msg);
570   - getImgCode();
  528 + createCode();
571 529 }
572 530  
573 531 }
... ...
js/unit.js
  View file @bc0e7b2
... ... @@ -29,8 +29,8 @@ dataUrl.util = {
29 29 return baseUrl + 'sysLoginLog/queryLoginLog';
30 30 },
31 31 //获取验证码
32   - getLoginImageCode: function () {
33   - return baseUrl + 'oauth/imageCode?' + Math.random()
  32 + imageCodeStr: function () {
  33 + return baseUrl + 'oauth/imageCodeStr'
34 34 },
35 35 //登录
36 36 getLogin: function () {
... ... @@ -85,12 +85,12 @@ fn = {
85 85 },
86 86 //跳转到登录界面
87 87 toLoginPage: function () {
88   - sessionStorage.setItem("sys_parkLot", '');
  88 + sessionStorage.clear()
89 89 window.location.href = 'login.html'
90 90 },
91 91 //登出系统
92 92 loginOut: function () {
93   - sessionStorage.clear()
  93 + /* sessionStorage.clear()
94 94 var token = fn.getToken();
95 95 fn.setToken('');
96 96 if (StrUtil.isNotEmpty()) {
... ... @@ -99,7 +99,7 @@ fn = {
99 99  
100 100 }
101 101 $('#userId').text('');
102   - fn.toLoginPage();
  102 + fn.toLoginPage();*/
103 103 }
104 104  
105 105 }
... ...
login.html
  View file @bc0e7b2
... ... @@ -34,14 +34,7 @@
34 34 <body class="login">
35 35 <div class="login-model">
36 36 <div class="menu-toggler sidebar-toggler"></div>
37   - <!-- END SIDEBAR TOGGLER BUTTON -->
38   - <!-- BEGIN LOGO -->
39   - <!--<div class="logo">-->
40   - <!--<a href="###">-->
41   - <!--<img src="../assets/pages/img/zte-its_logo.png" alt="" />-->
42   - <!--</a>-->
43   - <!--</div>-->
44   - <!-- END LOGO -->
  37 +
45 38 <!-- BEGIN LOGIN -->
46 39 <div class="login-cont">
47 40 <div class="content">
... ... @@ -55,7 +48,7 @@
55 48  
56 49 <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">
57 50 <div class="alert-danger display-hide error_ifo">
58   - <span>请输入正确的邮箱 </span>
  51 + <span>请输入正确的用户名 </span>
59 52 </div>
60 53 </div>
61 54  
... ... @@ -67,10 +60,9 @@
67 60 </div>
68 61 </div>
69 62 <div id="slide_box">
70   - <div id="slide_xbox">
71   - <div id="btn"></div>
72   - </div>
73   - 拖动滑块验证
  63 + <span class="login-yzm-bg"></span>
  64 + <input type="text" class="login_input_txtSmall form-control" placeholder="请输入验证码" id="codedate"><input type = "button" id="code" data-id=""/>
  65 +
74 66 </div>
75 67  
76 68 <div id="login_error_ifo" class="login_error_ifo">
... ...