郑州第一人民医院UI

login_.html 8.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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="img/favicon.ico" />
  11. <!--[if lt IE 10]>
  12. <script>
  13. window.location.href = './ieTips.html';
  14. </script>
  15. <![endif]-->
  16. <link href="./css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet" type="text/css">
  17. <link href="./css/style.min862f.css?v=4.1.0" rel="stylesheet" type="text/css">
  18. <link href="./css/animate.min.css" rel="stylesheet" type="text/css" />
  19. <link href="./css/login.min.css" rel="stylesheet">
  20. </head>
  21. <body>
  22. <div class="signin clearfix">
  23. <div class="signin_panel animated fadeIn" id="signin">
  24. <div class="signin_left">
  25. <ul class="signin_left_content">
  26. <li class="signin_left_item signin_left_item1">
  27. <i class="signin_left_icon signin_left_icon_efficiency"></i>
  28. <div class="signin_left_item_content">
  29. <p>更标准的工作流程</p>
  30. <p>更高效的工作效率</p>
  31. </div>
  32. </li>
  33. <li class="signin_left_item signin_left_item2">
  34. <i class="signin_left_icon signin_left_icon_qulity"></i>
  35. <div class="signin_left_item_content">
  36. <p>更优质的服务质量</p>
  37. <p>更满意的服务体验</p>
  38. </div>
  39. </li>
  40. <li class="signin_left_item signin_left_item3">
  41. <i class="signin_left_icon signin_left_icon_service"></i>
  42. <div class="signin_left_item_content">
  43. <p>更快速的服务响应</p>
  44. <p>更丰富的数据统计</p>
  45. </div>
  46. </li>
  47. <li class="signin_left_item signin_left_item4">
  48. <i class="signin_left_icon signin_left_icon_intelligence"></i>
  49. <div class="signin_left_item_content">
  50. <p>更智能的运维系统</p>
  51. <p>更低廉的运营成本</p>
  52. </div>
  53. </li>
  54. </ul>
  55. </div>
  56. <div class="signin_right">
  57. <img class="signin_title_logo" src="img/signin_logo.png" style=" display: none;" alt="title" />
  58. <h1 class="signin_title">欢迎登录</h1>
  59. <h5 class="signin_subtitle">智能运维&nbsp;&nbsp;安全节能</h5>
  60. <div class="signin_places">
  61. 请输入账号,密码,登录
  62. </div>
  63. <div class="signin_user">
  64. <span class="signin_label">账号</span>
  65. <input class="form-control" type="text" placeholder="" id="user" autofocus autocomplete="off">
  66. <i class="signin_icons"></i>
  67. </div>
  68. <div class="signin_password">
  69. <span class="signin_label">密码</span>
  70. <input class="form-control" type="text" onfocus="this.type='password'" placeholder="" id="password" autocomplete="new-password">
  71. <i class="signin_icons"></i>
  72. </div>
  73. <button class="btns" type="button" disabled="disabled">登录</button>
  74. <div class="alert alert-danger" id="login_tips" role="alert">
  75. <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  76. <span class="sr-only">Error:</span>
  77. <span id="login_msg"></span>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <script src="Script/Common/huayi.config.js"></script>
  83. <script language="javascript" type="text/javascript" src="./js/jquery.min.js?v=2.1.4"></script>
  84. <script language="javascript" type="text/javascript" src="./js/jquery.md5.js"></script>
  85. <script language="javascript" type="text/javascript" src="./css/layer/layer.js"></script>
  86. <script src="./Script/Common/regexs.js"></script>
  87. <script>
  88. var $storages = window.localStorage;
  89. $(function() {
  90. // if($storages.getItem('userCode')) {
  91. // $("#user").val($storages.getItem("userCode"));
  92. // }
  93. /*输入框绑定验证*/
  94. $('#signin').find("input[class='form-control']").on('focus input propertychange', valideInput);
  95. $(document).on('keypress', function(event) {
  96. if(event.keyCode == "13") {
  97. if(!$('.layui-layer-btn').length) {
  98. $('.btns:not(:disabled)').trigger("click");
  99. } else {
  100. $('.layui-layer-btn a').trigger('click');
  101. }
  102. }
  103. });
  104. $('#user').trigger('propertychange');
  105. $('#user').trigger('focus');
  106. $('#user').trigger('input');
  107. });
  108. /*点击提交*/
  109. function login() {
  110. $.ajax({
  111. type: "post",
  112. url: huayi.config.callcenter_url + "signtokenapi/api/token/login",
  113. dataType: 'json',
  114. async: true,
  115. beforeSend: function() { //触发ajax请求开始时执行
  116. $('.btns').attr("disabled", true);
  117. $('.btns').text('登录中...');
  118. $(document).off('click', '.btns', login);
  119. loadIndex = layer.load();
  120. $("#password").val('');
  121. $("#password").attr('type', 'text');
  122. },
  123. data: {
  124. usercode: $("#user").val(),
  125. password: $.md5($("#password").val())
  126. },
  127. success: function(data) {
  128. layer.close(loadIndex);
  129. /*验证请求*/
  130. if(data.state == "success") {
  131. $storages.setItem('token', data.data.token);
  132. $storages.setItem('headImg', data.data.head_img);
  133. $storages.setItem('userName', data.data.username);
  134. $storages.setItem('userCode', data.data.usercode);
  135. $storages.setItem('roleName', data.data.role_name);
  136. // $storages.setItem('seatFlag', data.data.seat_flag);
  137. $storages.setItem('seatFlag', 'false');
  138. $storages.setItem('group', data.data.group);
  139. $storages.setItem('deptId', data.data.dept_id);
  140. $storages.setItem('teamId', data.data.team_id);
  141. $storages.setItem('mobile', data.data.mobile);
  142. window.location.href = "index.html";
  143. } else {
  144. // $("#user").val('');
  145. $("#password").val('');
  146. // $("#user").parent().removeClass('has-success has-feedback');
  147. // $("#user").parent().removeClass('has-error has-feedback');
  148. // $("#user").parent().find('.glyphicon').remove();
  149. $("#password").parent().removeClass('has-success has-feedback');
  150. $("#password").parent().removeClass('has-error has-feedback');
  151. $("#password").parent().find('.glyphicon').remove();
  152. $('.btns').text('登录');
  153. layer.alert(data.message, {
  154. icon: 2,
  155. closeBtn: 0,
  156. btn: ['确定'], //按钮
  157. }, function(index) {
  158. $('.btns').attr("disabled", true);
  159. $(document).off('click', '.btns', login);
  160. layer.close(index);
  161. $('#user').trigger('focus');
  162. });
  163. }
  164. },
  165. error: function(textStatus) {
  166. layer.close(loadIndex);
  167. layer.confirm('网络繁忙,请稍后再试...', {
  168. closeBtn: 0,
  169. btn: ['确定'] //按钮
  170. });
  171. $('.btns').text('登录');
  172. $('.btns').attr("disabled", false);
  173. $(document).off('click', '.btns', login);
  174. $(document).on('click', '.btns', login);
  175. },
  176. complete: function(XMLHttpRequest, textStatus) {
  177. layer.close(loadIndex);
  178. if(textStatus == 'timeout') {
  179. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  180. xmlhttp.abort();
  181. layer.confirm('网络超时,请稍后再试...', {
  182. closeBtn: 0,
  183. btn: ['确定'] //按钮
  184. });    
  185. }
  186. $('.btns').text('登录');
  187. $('.btns').attr("disabled", false);
  188. $(document).off('click', '.btns', login);
  189. $(document).on('click', '.btns', login);
  190. },
  191. });
  192. }
  193. //验证
  194. function valideInput() {
  195. var _that = $(this);
  196. var ele = $(this).attr('id');
  197. if(ele === 'user') {
  198. valideMethods(_that, regexs.userReg, '管理员账号格式(4-20个字符只能是字母、下划线、数字)!');
  199. } else if(ele === 'password') {
  200. valideMethods(_that, regexs.passwordReg, '密码格式(6-32个字符只能是字母、下划线、数字)!');
  201. }
  202. if(regexs.userReg.test($.trim($('#user').val())) && regexs.passwordReg.test($.trim($("#password").val()))) {
  203. $('.btns').attr("disabled", false);
  204. $(document).off('click', '.btns', login);
  205. $(document).on('click', '.btns', login);
  206. } else {
  207. $('.btns').attr("disabled", true);
  208. $(document).off('click', '.btns', login);
  209. }
  210. }
  211. /**
  212. * 验证方法
  213. * _this :传递的this
  214. * regRlues: 验证的规则
  215. * msg: 提示信息
  216. * */
  217. function valideMethods(_this, regRlues, msg) {
  218. $('#login_tips').hide();
  219. $('#login_msg').text('');
  220. if(!regRlues.test($.trim(_this.val()))) {
  221. _this.parent().removeClass('has-success has-feedback').addClass('has-error has-feedback');
  222. _this.parent().find('.glyphicon').remove();
  223. $('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
  224. $('#login_tips').show();
  225. $('#login_msg').text(msg);
  226. } else {
  227. _this.parent().removeClass('has-error has-feedback').addClass('has-success has-feedback');
  228. _this.parent().find('.glyphicon').remove();
  229. $('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>').appendTo(_this.parent());
  230. }
  231. }
  232. </script>
  233. </body>
  234. </html>