Sin descripción

login.html 7.7KB

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