Sin descripción

login_20180530.html 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  6. <title>登录</title>
  7. <meta name="keywords">
  8. <meta name="description">
  9. <meta name="renderer" content="webkit|ie-comp|ie-stand" />
  10. <link rel="shortcut icon" href="img/32.ico" />
  11. <link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" type="text/css">
  12. <link href="./css/style.min862f.css?v=4.1.0" rel="stylesheet" type="text/css">
  13. <link href="./css/layer/skin/default/layer.css?v=3.0.3303" rel="stylesheet" id="layuicss-skinlayercss">
  14. <link href="./css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet" type="text/css" />
  15. <link href="./css/animate.min.css" rel="stylesheet" type="text/css" />
  16. <link href="./css/login.min1.css" rel="stylesheet">
  17. <!--[if lt IE 9]>
  18. <meta http-equiv="refresh" content="0;ie.html" />
  19. <![endif]-->
  20. </head>
  21. <body>
  22. <div class="signin clearfix">
  23. <div class="signin_left">
  24. <h1 class="signin_title_pic"></h1>
  25. <h1 class="signin_title">后台管理系统</h1>
  26. <div class="pinion animated fadeIn">
  27. <img class="pinion_rotate" src="img/big_pinion.png" alt="大齿轮" />
  28. <img class="pinion_rotate1" src="img/small_pinion.png" alt="小齿轮" />
  29. </div>
  30. </div>
  31. <div class="signin_right">
  32. <div class="signin_panel animated fadeIn" id="signin">
  33. <img class="signin_logo" src="img/logo.png" alt="logo" />
  34. <div class="signin_user">
  35. <i class="signin_icons"></i>
  36. <input class="form-control" type="text" placeholder="请输入管理账号" id="user" autofocus autocomplete="off">
  37. </div>
  38. <div class="signin_password">
  39. <i class="signin_icons"></i>
  40. <input class="form-control" type="password" placeholder="请输入密码" id="password" autocomplete="off">
  41. </div>
  42. <div class="alert alert-danger" id="login_tips" role="alert">
  43. <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  44. <span class="sr-only">Error:</span>
  45. <span id="login_msg"></span>
  46. </div>
  47. <button class="btns" type="button" disabled="disabled">登录</button>
  48. </div>
  49. </div>
  50. </div>
  51. <script src="Script/Common/huayi.config.js"></script>
  52. <script language="javascript" type="text/javascript" src="./js/jquery.min.js?v=2.1.4"></script>
  53. <script language="javascript" type="text/javascript" src="./js/jquery.md5.js"></script>
  54. <script language="javascript" type="text/javascript" src="./css/layer/layer.js"></script>
  55. <script src="./Script/Common/regexs.js"></script>
  56. <script>
  57. var $storages = window.localStorage;
  58. $(function() {
  59. if($storages.getItem('userCode')) {
  60. $("#user").val($storages.getItem("userCode"));
  61. }
  62. /*输入框绑定验证*/
  63. $('#signin').find("input[class='form-control']").on('focus input propertychange', valideInput);
  64. $(document).on('keypress', function(event) {
  65. if(event.keyCode == "13") {
  66. $('.btns:not(:disabled)').trigger("click");
  67. }
  68. });
  69. $('#user').trigger('propertychange');
  70. $('#user').trigger('focus');
  71. $('#user').trigger('input');
  72. });
  73. /*点击提交*/
  74. function login() {
  75. $.ajax({
  76. type: "post",
  77. url: huayi.config.callcenter_url + "signtokenapi/api/token/login",
  78. dataType: 'json',
  79. async: true,
  80. beforeSend: function() { //触发ajax请求开始时执行
  81. $('.btns').attr("disabled", true);
  82. $('.btns').text('登录中...');
  83. $(document).off('click', '.btns', login);
  84. loadIndex = layer.load();
  85. },
  86. data: {
  87. usercode: $("#user").val(),
  88. password: $.md5($("#password").val())
  89. },
  90. success: function(data) {
  91. layer.close(loadIndex);
  92. /*验证请求*/
  93. if(data.state == "success") {
  94. $storages.setItem('token', data.data.token);
  95. $storages.setItem('userName', data.data.username);
  96. $storages.setItem('userCode', data.data.usercode);
  97. $storages.setItem('roleName', data.data.role_name);
  98. $storages.setItem('seatFlag', data.data.seat_flag);
  99. $storages.setItem('group', data.data.group);
  100. $storages.setItem('deptId', data.data.dept_id);
  101. $storages.setItem('teamId', data.data.team_id);
  102. $storages.setItem('mobile', data.data.mobile);
  103. window.location.href = "index.html";
  104. } else {
  105. $("#user").val('');
  106. $("#password").val('');
  107. $("#user").parent().removeClass('has-success has-feedback');
  108. $("#user").parent().removeClass('has-error has-feedback');
  109. $("#user").parent().find('.glyphicon').remove();
  110. $("#password").parent().removeClass('has-success has-feedback');
  111. $("#password").parent().removeClass('has-error has-feedback');
  112. $("#password").parent().find('.glyphicon').remove();
  113. $('.btns').text('登录');
  114. layer.alert(data.message, {
  115. icon: 2,
  116. closeBtn: 0,
  117. btn: ['确定'], //按钮
  118. }, function(index) {
  119. $('.btns').attr("disabled", true);
  120. $(document).off('click', '.btns', login);
  121. layer.close(index);
  122. $('#user').trigger('focus');
  123. });
  124. }
  125. },
  126. error: function(textStatus) {
  127. layer.close(loadIndex);
  128. layer.confirm('网络繁忙,请稍后再试...', {
  129. closeBtn: 0,
  130. btn: ['确定'] //按钮
  131. });
  132. $('.btns').text('登录');
  133. $('.btns').attr("disabled", false);
  134. $(document).off('click', '.btns', login);
  135. $(document).on('click', '.btns', login);
  136. },
  137. complete: function(XMLHttpRequest, textStatus) {
  138. layer.close(loadIndex);
  139. if(textStatus == 'timeout') {
  140. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  141. xmlhttp.abort();
  142. layer.confirm('网络超时,请稍后再试...', {
  143. closeBtn: 0,
  144. btn: ['确定'] //按钮
  145. });    
  146. }
  147. $('.btns').text('登录');
  148. $('.btns').attr("disabled", false);
  149. $(document).off('click', '.btns', login);
  150. $(document).on('click', '.btns', login);
  151. },
  152. });
  153. }
  154. //验证
  155. function valideInput() {
  156. var _that = $(this);
  157. var ele = $(this).attr('id');
  158. if(ele === 'user') {
  159. valideMethods(_that, regexs.userReg, '管理员账号格式(4-20个字符只能是字母、下划线、数字)!');
  160. } else if(ele === 'password') {
  161. valideMethods(_that, regexs.passwordReg, '密码格式(6-32个字符只能是字母、下划线、数字)!');
  162. }
  163. if(regexs.userReg.test($.trim($('#user').val())) && regexs.passwordReg.test($.trim($("#password").val()))) {
  164. $('.btns').attr("disabled", false);
  165. $(document).off('click', '.btns', login);
  166. $(document).on('click', '.btns', login);
  167. }else{
  168. $('.btns').attr("disabled", true);
  169. $(document).off('click', '.btns', login);
  170. }
  171. }
  172. /**
  173. * 验证方法
  174. * _this :传递的this
  175. * regRlues: 验证的规则
  176. * msg: 提示信息
  177. * */
  178. function valideMethods(_this, regRlues, msg) {
  179. $('#login_tips').hide();
  180. $('#login_msg').text('');
  181. if(!regRlues.test($.trim(_this.val()))) {
  182. _this.parent().removeClass('has-success has-feedback').addClass('has-error has-feedback');
  183. _this.parent().find('.glyphicon').remove();
  184. $('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
  185. $('#login_tips').show();
  186. $('#login_msg').text(msg);
  187. } else {
  188. _this.parent().removeClass('has-error has-feedback').addClass('has-success has-feedback');
  189. _this.parent().find('.glyphicon').remove();
  190. $('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
  191. }
  192. }
  193. </script>
  194. </body>
  195. </html>