login.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="renderer" content="webkit">
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <meta name="keywords" content="登录">
  10. <meta name="description" content="登录">
  11. <!--[if lt IE 9]>
  12. <meta http-equiv="refresh" content="0;ie.html" />
  13. <![endif]-->
  14. <link rel="shortcut icon" href="favicon.ico">
  15. <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
  16. <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  17. <link href="css/animate.min.css" rel="stylesheet">
  18. <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
  19. <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
  20. <style>
  21. body {
  22. background: url(img/BG.jpg);
  23. }
  24. #main {
  25. width: 1200px;
  26. margin: 0 auto;
  27. }
  28. .tabs-container {
  29. margin-top: 40;
  30. border: 10px solid rgba(255,255,255,0.2);
  31. }
  32. .tabs-container .nav-tabs {
  33. border: 0;
  34. }
  35. .nav.nav-tabs {
  36. background-color: #fff;
  37. }
  38. .nav.nav-tabs li {
  39. width: 50%;
  40. text-align: center;
  41. padding: 0 15px;
  42. }
  43. .nav.nav-tabs li.active a {
  44. color: #1eaaff;
  45. }
  46. .tabs-container .nav-tabs>li.active>a,
  47. .tabs-container .nav-tabs>li.active>a:focus,
  48. .tabs-container .nav-tabs>li.active>a:hover {
  49. border: 0;
  50. border-bottom: 3px solid #1eaaff;
  51. }
  52. #loginForm {
  53. margin-top: 120px;
  54. }
  55. button[type="submit"] {
  56. margin-top: 40px;
  57. }
  58. .form-group {
  59. position: relative;
  60. }
  61. .fa-eye,
  62. .fa-eye-slash {
  63. position: absolute;
  64. top: 16px;
  65. right: 10px;
  66. margin-top: -8px;
  67. font-size: 16px;
  68. cursor: pointer;
  69. }
  70. #getCaptcha {
  71. position: absolute;
  72. top: 8px;
  73. right: 10px;
  74. }
  75. #getCaptcha.disabled{
  76. cursor: not-allowed;
  77. filter: alpha(opacity=65);
  78. -webkit-box-shadow: none;
  79. box-shadow: none;
  80. opacity: .65;
  81. }
  82. @media only screen and (max-width: 1200px) {
  83. #main,.left-img,#loginForm {
  84. width: 100%;
  85. }
  86. #loginForm {
  87. margin-top: 0px;
  88. }
  89. .left-img > img{
  90. display: block;
  91. width: 400px;
  92. margin: 0 auto;
  93. }
  94. .tabs-container {
  95. width: 400px;
  96. margin: -40px auto 0;
  97. }
  98. }
  99. </style>
  100. <div id="main">
  101. <div class="row">
  102. <div class="col-sm-8 left-img">
  103. <img src="img/icon_chahua.png" />
  104. </div>
  105. <div id="loginForm" class="col-sm-4">
  106. <div class="tabs-container">
  107. <ul class="nav nav-tabs">
  108. <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">手机号登录</a>
  109. </li>
  110. <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">验证码登录</a>
  111. </li>
  112. </ul>
  113. <div class="tab-content">
  114. <div id="tab-1" class="tab-pane active">
  115. <div class="panel-body">
  116. <form id="form1" class="m-t" role="form" onsubmit="return false;">
  117. <div class="form-group">
  118. <input id="mobile1" mobile type="text" name="mobile1" class="form-control" placeholder="请输入手机号码" required="">
  119. </div>
  120. <div class="form-group">
  121. <input id="password" type="password" name="password" class="form-control" placeholder="初始密码为手机号码后六位" required="">
  122. <i class="fa fa-eye-slash psw-eye" aria-hidden="true"></i>
  123. </div>
  124. <button type="submit" class="btn btn-success block full-width m-b">登 录</button>
  125. <!--<p class="text-muted text-center"> <a href="login.html#"><small>忘记密码了?</small></a> | <a href="register.html">注册一个新账号</a>
  126. </p>-->
  127. </form>
  128. </div>
  129. </div>
  130. <div id="tab-2" class="tab-pane">
  131. <div class="panel-body">
  132. <form id="form2" class="m-t" role="form" onsubmit="return false;">
  133. <div class="form-group">
  134. <input id="mobile2" name="mobile2" mobile type="text" class="form-control" placeholder="请输入手机号码" required="">
  135. </div>
  136. <div class="form-group">
  137. <input id="captcha" name="captcha" type="text" class="form-control" placeholder="请输入短信验证码" required="">
  138. <a id="getCaptcha" href="javascript:void(0);">获取验证码</a>
  139. </div>
  140. <button type="submit" class="btn btn-success block full-width m-b">登 录</button>
  141. </form>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </head>
  150. <body >
  151. <script src="js/jquery.min.js?v=2.1.4"></script>
  152. <script src="js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
  153. <script src="js/bootstrap.min.js?v=3.3.6"></script>
  154. <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
  155. <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  156. <script src="js/plugins/layer/layer.min.js"></script>
  157. <script src="js/hplus.min.js?v=4.1.0"></script>
  158. <script type="text/javascript" src="js/contabs.min.js"></script>
  159. <script src="js/plugins/pace/pace.min.js"></script>
  160. <script src="js/plugins/validate/jquery.validate.min.js"></script>
  161. <script src="js/plugins/validate/messages_zh.min.js"></script>
  162. <script src="js/plugins/toastr/toastr.min.js"></script>
  163. <script src="js/security.js"></script>
  164. <script src="js/api-service.js"></script>
  165. <script src="js/login-api.js"></script>
  166. <script>
  167. //获取链接上的参数
  168. function GetRequest() {
  169. var url = location.search; //获取url中"?"符后的字串
  170. var theRequest = new Object();
  171. if (url.indexOf("?") != -1) {
  172. var str = url.substr(1);
  173. strs = str.split("&");
  174. for (var i = 0; i < strs.length; i++) {
  175. theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  176. }
  177. }
  178. return theRequest;
  179. }
  180. </script>
  181. <script>
  182. $(function() {
  183. var Requests = GetRequest();
  184. var redirect_url = Requests.redirect_url;
  185. var userAgent = Requests.userAgent;
  186. var agentName = APIService.agentName;
  187. toastr.options = {
  188. "closeButton": true,
  189. "positionClass": "toast-top-center"
  190. }
  191. var $eyeIcon = $('.psw-eye'),
  192. $mobile1 = $('#mobile1'),
  193. $password = $('#password'),
  194. $mobile2 = $('#mobile2'),
  195. $captcha = $('#captcha'),
  196. $mobile = $('input[mobile]'),
  197. $tabs = $('.nav-tabs'),
  198. $getCaptcha = $('#getCaptcha'),
  199. $submit = $('button[type="submit"]');
  200. var timer = null;
  201. if(userAgent) {
  202. userAgent = decodeURIComponent(userAgent)
  203. var userAgentStr = userAgent
  204. window.localStorage.setItem(agentName, userAgent)
  205. if(userAgent){
  206. userAgent = JSON.parse(userAgent);
  207. }
  208. if(userAgent.imei) {
  209. localStorage.setItem('WLYY_IMEI',userAgent.imei)
  210. }
  211. $.ajax(APIService.server +'doctor/doctorRole',{
  212. data:{},
  213. dataType: 'json',
  214. type:'get',
  215. beforeSend: function(request) {
  216. request.setRequestHeader("userAgent", userAgentStr);
  217. },
  218. timeout: 30000,
  219. success: function(res) {
  220. if(res.status == 200){
  221. var data = res.data;
  222. //添加医生到userRole
  223. var addData = {
  224. areas:data.hospital,
  225. authOperate:data.doctorAuthOperate,
  226. code:data.hospital,
  227. isManage:0,
  228. level:4,
  229. name:data.name
  230. }
  231. data.token = userAgent.token
  232. data.userRole.push(addData)
  233. localStorage.setItem('wlyyAgent',JSON.stringify(data))
  234. }
  235. }
  236. })
  237. return ;
  238. }
  239. function login(data) {
  240. loginApis.login(data)
  241. .then(function(res) {
  242. $submit.removeAttr('disabled')
  243. if(res.status == 200) {
  244. var data = res.data;
  245. localStorage.setItem(agentName,JSON.stringify({
  246. id: data.id,
  247. uid: data.uid,
  248. token: data.token,
  249. imei: localStorage.getItem('WLYY_IMEI'),
  250. platform: 4
  251. }))
  252. localStorage.setItem("app_storage", JSON.stringify({
  253. 'api_login_doctor': data,
  254. 'IMEI': localStorage.getItem('WLYY_IMEI')
  255. }))
  256. if(redirect_url) {
  257. window.location.href = decodeURIComponent(redirect_url)
  258. }else{
  259. window.location.href = "index.html"
  260. }
  261. } else {
  262. toastr.error(res.msg || "登录失败!")
  263. }
  264. })
  265. .catch(function(e) {
  266. $submit.removeAttr('disabled')
  267. console && console.error(e)
  268. })
  269. }
  270. function setTimer() {
  271. $getCaptcha.addClass('disabled');
  272. var seconds = 59;
  273. timer = setInterval(function() {
  274. if(seconds == 0) {
  275. clearInterval(timer);
  276. timer = null;
  277. seconds = 59;
  278. $getCaptcha.text("获取验证码");
  279. $getCaptcha.removeClass('disabled');
  280. return ;
  281. }
  282. $getCaptcha.text((seconds--)+"s后重新获取");
  283. }, 1000)
  284. }
  285. $eyeIcon.click(function() {
  286. $el = $(this);
  287. if($el.hasClass('fa-eye')) {
  288. $el.removeClass('fa-eye').addClass('fa-eye-slash');
  289. $password.attr('type','password')
  290. } else {
  291. $el.removeClass('fa-eye-slash').addClass('fa-eye');
  292. $password.attr('type','text')
  293. }
  294. })
  295. $getCaptcha.click(function() {
  296. if($getCaptcha.hasClass('disabled')) {
  297. return ;
  298. }
  299. if(validator2.element($mobile2)) {
  300. setTimer();
  301. loginApis.getCaptcha({
  302. mobile: $mobile2.val(),
  303. type: 5,
  304. captchaToken: 5
  305. }).then(function(res) {
  306. if(res.status == 200) {
  307. toastr.success("短信发送成功!")
  308. } else {
  309. toastr.error(res.msg || "短信发送失败!")
  310. }
  311. }).catch(function(e) {
  312. console && console.error(e)
  313. })
  314. }
  315. })
  316. $submit.click(function() {
  317. var index = $('.nav-tabs>li.active').index();
  318. var mobile = '',
  319. password = '',
  320. captcha = '';
  321. if(index == 0) { // 点击手机登陆选项卡
  322. if($("#form1").valid()) {
  323. $(this).attr('disabled','disabled')
  324. mobile = $mobile1.val();
  325. password = $password.val();
  326. loginApis.publicKey().then(function(res) {
  327. if (res.status == 200) {
  328. var mod = res.data.modulus;
  329. var exp = res.data.exponent;
  330. key = RSAUtils.getKeyPair(exp, "", mod);
  331. if (key) {
  332. encryedPwd = RSAUtils.encryStr(key, password);
  333. login({
  334. mobile: mobile,
  335. password: encryedPwd,
  336. platform: 4
  337. })
  338. }else {
  339. toastr.error(res.msg || "登录失败!")
  340. $submit.removeAttr('disabled')
  341. }
  342. }
  343. })
  344. }
  345. } else { // 点击验证码登录选项卡
  346. if($("#form2").valid()) {
  347. $(this).attr('disabled','disabled')
  348. mobile = $mobile2.val();
  349. captcha = $captcha.val();
  350. login({
  351. mobile: mobile,
  352. captcha: captcha,
  353. platform: 4
  354. })
  355. }
  356. }
  357. })
  358. var validator1 = $("#form1").validate({
  359. onsubmit: false,
  360. onfocusout: function(ele) {
  361. validator1.element(ele)
  362. },
  363. rules: {
  364. mobile1: {
  365. required: true,
  366. mobile: true,
  367. },
  368.    password: "required",
  369. }
  370. });
  371. var validator2 = $("#form2").validate({
  372. onsubmit: false,
  373. onfocusout: function(ele) {
  374. validator2.element(ele)
  375. },
  376. rules: {
  377. mobile2: {
  378. required: true,
  379. mobile: true,
  380. },
  381.    captcha: "required",
  382. }
  383. });
  384. $tabs.on('click','li',function() {
  385. var idx = $(this).index(),
  386. mob = '';
  387. if(idx == 1) { // 点击验证码登录选项卡
  388. mob = $mobile1.val();
  389. if(mob) {
  390. $mobile.val(mob);
  391. validator2.element($mobile2)
  392. }
  393. } else { // 点击手机登陆选项卡
  394. mob = $mobile2.val();
  395. if(mob) {
  396. $mobile.val(mob);
  397. validator1.element($mobile1)
  398. }
  399. }
  400. })
  401. //$("#form1").valid();
  402. jQuery.validator.addMethod("mobile", function(value, element, param) {
  403. var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
  404. return reg.test(value);
  405. }, "手机号码有误");
  406. })
  407. </script>
  408. </body>
  409. </html>