Nessuna descrizione

login.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614
  1. <!DOCTYPE html>
  2. <html lang="en">
  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/32.ico" />
  11. <link rel="stylesheet" href="./css/init.css" />
  12. <script src="./Script/Common/huayi.load.js"></script>
  13. <script src="./Script/Common/huayi.config.js"></script>
  14. <script src="./js/jquery.md5.js"></script>
  15. <script src="./js/purify.min.js"></script>
  16. <script src="./js/aes/crypto-js.js"></script>
  17. <style>
  18. html {
  19. margin: 0 auto;
  20. padding: 0;
  21. height: 100%;
  22. }
  23. body {
  24. height: 100%;
  25. background: #fff;
  26. }
  27. .wrap {
  28. width: 100%;
  29. height: 100%;
  30. }
  31. .wrap_right {
  32. float: left;
  33. width: 50%;
  34. height: 100%;
  35. }
  36. .wrap_left {
  37. float: left;
  38. width: 50%;
  39. height: 100%;
  40. }
  41. .wrap_right {
  42. position: relative;
  43. }
  44. .wrap_bj {
  45. width: 100%;
  46. height: 100%;
  47. background: url(img/left_amg_01.jpg) no-repeat;
  48. background-size: 100% 100%;
  49. }
  50. .tab_box {
  51. border: 1px solid #41caf2;
  52. border-top-right-radius: 15px;
  53. border-bottom-left-radius: 15px;
  54. margin: 50px auto 65px;
  55. padding: 0;
  56. overflow: hidden;
  57. width: 410px;
  58. }
  59. .tab_box ul {
  60. list-style: none;
  61. margin: 0;
  62. padding: 0;
  63. width: 100%;
  64. height: 50px;
  65. line-height: 50px;
  66. font-size: 16px;
  67. color: #41caf2;
  68. border-bottom: 1px solid #41caf2;
  69. text-align: center;
  70. }
  71. .tab_box ul li {
  72. width: 50%;
  73. float: left;
  74. }
  75. .active {
  76. background: #41caf2;
  77. color: #fff;
  78. }
  79. .tab_content {
  80. margin: 57px 0 35px 0;
  81. }
  82. .tab_content div p {
  83. width: 80%;
  84. margin: 0 auto;
  85. height: 35px;
  86. border: 1px solid #41caf2;
  87. border-radius: 15px;
  88. margin-bottom: 25px;
  89. line-height: 30px;
  90. padding-left: 20px;
  91. }
  92. .tab_content div p input {
  93. width: 75%;
  94. border: 0;
  95. font-size: 16px;
  96. outline: none;
  97. font-family: "仿宋", "宋体";
  98. }
  99. .login_icon {
  100. display: inline-block;
  101. width: 17px;
  102. height: 19px;
  103. vertical-align: middle;
  104. margin-right: 15px;
  105. }
  106. .login_icon_user {
  107. background: url(img/login_user.png) no-repeat;
  108. }
  109. .login_icon_lock {
  110. background: url(img/login_lock.png) no-repeat;
  111. }
  112. .login_icon_hua {
  113. background: url(img/login_hua.png) no-repeat;
  114. }
  115. .login_go {
  116. text-align: center;
  117. padding: 0 !important;
  118. font-size: 16px;
  119. letter-spacing: 16px;
  120. font-family: "仿宋", "宋体";
  121. color: #fff;
  122. filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#1f90ec, endcolorstr=#1cb5ef, gradientType=1);
  123. background: -webkit-gradient(li near, 0 0, 100% 0, from(#1f90ec), to(#1cb5ef));
  124. background: -webkit-linear-gradient(left, #1f90ec, #1cb5ef);
  125. background: -moz-linear-gradient(left, #1f90ec, #1cb5ef);
  126. background: -o-linear-gradient(left, #1f90ec, #1cb5ef);
  127. background: linear-gradient(left, #1f90ec, #1cb5ef);
  128. cursor: pointer;
  129. }
  130. .error {
  131. height: 13px;
  132. background: url(img/yz.png) no-repeat 0 -8px;
  133. display: none;
  134. }
  135. .errorShow {
  136. display: inline-block;
  137. }
  138. .rightCon {
  139. width: 100%;
  140. position: absolute;
  141. top: 0;
  142. bottom: 0;
  143. right: 0;
  144. left: 0;
  145. margin: auto;
  146. height: 580px;
  147. }
  148. .leftCon {
  149. width: 30%;
  150. position: absolute;
  151. top: 41%;
  152. bottom: 0;
  153. right: 0;
  154. left: 50%;
  155. margin: auto;
  156. }
  157. .leftCon img {
  158. width: 100%;
  159. }
  160. .leftCon p {
  161. font-size: 28px;
  162. letter-spacing: 10px;
  163. color: #e60111;
  164. line-height: 80px;
  165. }
  166. .service {
  167. width: 100%;
  168. position: absolute;
  169. bottom: 30px;
  170. }
  171. .tab_content div p {
  172. width: 80%;
  173. margin: 0 auto;
  174. height: 35px;
  175. border: 1px solid #41caf2;
  176. border-radius: 15px;
  177. margin-bottom: 20px;
  178. line-height: 30px;
  179. padding-left: 20px;
  180. }
  181. .tab_content div p .verification,
  182. .tab_content div p .verification_user {
  183. width: 50%;
  184. }
  185. .tab_content div p .btnVerifi,
  186. .tab_content div p .btnVerifi_user {
  187. width: 36.7%;
  188. border: 0;
  189. height: 33px;
  190. border-radius: 0px 15px 15px 0px;
  191. font-size: 16px;
  192. outline: none;
  193. font-family: "仿宋", "宋体";
  194. background: #41caf2;
  195. color: #FFFFFF;
  196. }
  197. input::-webkit-outer-spin-button,
  198. input::-webkit-inner-spin-button {
  199. -webkit-appearance: none;
  200. }
  201. input[type="number"] {
  202. -moz-appearance: textfield;
  203. }
  204. .SMSreminder {
  205. color: #C4C4C5;
  206. /*font-family: "仿宋", "宋体";*/
  207. font-size: 12px;
  208. padding: 0 37px;
  209. }
  210. </style>
  211. </head>
  212. <body class="signin">
  213. <div class="wrap clearfix">
  214. <div class="wrap_left" style="position: relative;">
  215. <div class="wrap_bj"></div>
  216. <div class="leftCon">
  217. <img src="img/logintext.png" />
  218. </div>
  219. </div>
  220. <div class="wrap_right">
  221. <div class="rightCon">
  222. <div class="logo" style="width: 100%;text-align: center;"></div>
  223. <div class="tab_box">
  224. <ul class="clearfix tab_ul">
  225. <li class="active">坐席登录</li>
  226. <li>用户登录</li>
  227. </ul>
  228. <div class="tab_content">
  229. <div class="tab_one">
  230. <p>
  231. <i class="login_icon login_icon_user "></i>
  232. <input class="zx_user" type="text" placeholder="请输入您的管理账号" />
  233. <i class="login_icon error error_zx error_zx_user"></i>
  234. </p>
  235. <p>
  236. <i class="login_icon login_icon_hua "></i>
  237. <input class="zx_fj" type="text" placeholder="请输入分机号" />
  238. <i class="login_icon error error_zx error_zx_fj"></i>
  239. </p>
  240. <p>
  241. <i class="login_icon login_icon_lock "></i>
  242. <input class="zx_psw" type="password" placeholder="请输入您的密码" />
  243. <i class="login_icon error error_zx error_zx_psw"></i>
  244. </p>
  245. <p>
  246. <i class="login_icon login_icon_hua "></i>
  247. <input class="verification" type="number" placeholder="请输入验证码" />
  248. <button class="btnVerifi" type="button">获取验证码</button>
  249. </p>
  250. <p class="login_go login_zx">登录</p>
  251. <div class="SMSreminder">出于12345平台数据安全的考虑,现需要在账号登录环节增加手机短信验证。如果账号未关联手机号,请致电联系5116015。</div>
  252. </div>
  253. <div class="tab_two" style="display: none;">
  254. <p>
  255. <i class="login_icon login_icon_user "></i>
  256. <input class="gl_user" type="text" placeholder="请输入您的管理账号" />
  257. <i class="login_icon error error_gl error_gl_user"></i>
  258. </p>
  259. <p>
  260. <i class="login_icon login_icon_lock"></i>
  261. <input class="gl_psw" type="password" placeholder="请输入您的密码" />
  262. <i class="login_icon error error_gl error_gl_psw"></i>
  263. </p>
  264. <p>
  265. <i class="login_icon login_icon_hua "></i>
  266. <input class="verification_user" type="text" placeholder="请输入验证码" />
  267. <button class="btnVerifi_user" type="button">获取验证码</button>
  268. </p>
  269. <p class="login_go login_gl">登录</p>
  270. <div class="SMSreminder">出于12345平台数据安全的考虑,现需要在账号登录环节增加手机短信验证。如果账号未关联手机号,请致电联系5116015。</div>
  271. </div>
  272. </div>
  273. </div>
  274. <div class="service">
  275. <p style="color: #313c58; font-size: 12px;text-align: center;"></p>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. <script>
  281. $(function() {
  282. var a = 0;
  283. $('.tab_ul li').click(function() {
  284. $(this).addClass("active").siblings().removeClass("active");
  285. var index = $(this).index();
  286. a = index;
  287. $('.tab_content').children('div').eq(index).show().siblings().hide();
  288. })
  289. /*cook存储数据*/
  290. if($.cookie("username")) {
  291. //取值如果存在则赋值
  292. $(".gl_user").val($.cookie("user")); //用户名
  293. $("zx_fj").val($.cookie("fj"));
  294. $(".zx_user").val($.cookie("user"));
  295. }
  296. //键盘登录事件
  297. $('input').bind('keypress', function(event) {
  298. if(event.keyCode == "13") {
  299. if(a == 0) {
  300. $('.login_zx').trigger("click");
  301. } else {
  302. $(".login_gl").trigger("click");
  303. }
  304. }
  305. });
  306. $(".btnVerifi").click(function() {
  307. if(!$(".zx_user").val()) {
  308. layer.msg('请输入账号')
  309. return false;
  310. }
  311. var mobile = $(".zx_user").val();
  312. var zx_psw = DOMPurify.sanitize($(".zx_psw").val());
  313. var zx_psw = CryptoJS.enc.Utf8.parse($.md5(zx_psw));
  314. var currenttime = CurentTime();
  315. var datatime = currenttime.split(' ')[1].split(':').join('')
  316. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M" + datatime);
  317. var encrypted = CryptoJS.AES.encrypt(zx_psw, key, {
  318. mode: CryptoJS.mode.ECB,
  319. padding: CryptoJS.pad.Pkcs7
  320. });
  321. var pass = encrypted.toString()
  322. sendMsg(mobile, pass);
  323. })
  324. $(".btnVerifi_user").click(function() {
  325. if(!$(".gl_user").val()) {
  326. layer.msg('请输入账号')
  327. return false;
  328. }
  329. var mobile = $(".gl_user").val();
  330. var user_psw = DOMPurify.sanitize($(".gl_psw").val());
  331. var user_psw = CryptoJS.enc.Utf8.parse($.md5(user_psw));
  332. var currenttime = CurentTime();
  333. var datatime = currenttime.split(' ')[1].split(':').join('')
  334. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M" + datatime);
  335. var encrypted = CryptoJS.AES.encrypt(user_psw, key, {
  336. mode: CryptoJS.mode.ECB,
  337. padding: CryptoJS.pad.Pkcs7
  338. });
  339. var pass = encrypted.toString()
  340. sendMsg(mobile, pass);
  341. })
  342. function sendMsg(mobile, pass) {
  343. var currenttime = CurentTime();
  344. console.log(mobile,pass,currenttime)
  345. $.ajax({
  346. type: "post",
  347. url: huayi.config.callcenter_url + "Login/SendCode",
  348. async: true,
  349. dataType: 'json',
  350. data: {
  351. usercode: mobile,
  352. Password: pass,
  353. LoginTime:currenttime
  354. },
  355. success: function(data) {
  356. if(data.state == "success") {
  357. layer.msg('发送成功')
  358. verifi();
  359. }
  360. }
  361. });
  362. }
  363. function verifi() {
  364. var time = 60;
  365. var timer = null;
  366. $('.btnVerifi').text(time + '秒后重新发送');
  367. $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  368. $('.btnVerifi_user').text(time + '秒后重新发送');
  369. $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  370. timer = setInterval(function() {
  371. // 定时器到底了 兄弟们回家啦
  372. if(time == 1) {
  373. clearInterval(timer);
  374. $('.btnVerifi').text("获取验证码")
  375. $('.btnVerifi_user').text('获取验证码')
  376. $('.btnVerifi').removeAttr('disabled')
  377. $('.btnVerifi_user').removeAttr('disabled')
  378. } else {
  379. time--;
  380. $('.btnVerifi').text(time + '秒后重新发送');
  381. $('.btnVerifi_user').text(time + '秒后重新发送');
  382. }
  383. }, 1000)
  384. }
  385. //坐席登录
  386. $('.login_zx').click(function() {
  387. localStorage.setItem('loginPassword', $('.zx_psw').val())
  388. var zx_user = DOMPurify.sanitize($(".zx_user").val());
  389. var zx_fj = DOMPurify.sanitize($(".zx_fj").val());
  390. var zx_psw = DOMPurify.sanitize($(".zx_psw").val());
  391. if(zx_user == "" || zx_fj == "" || zx_psw == "") {
  392. $(".error_zx").addClass('errorShow');
  393. if(zx_user == "") {
  394. $(".zx_user").focus(function() {
  395. $(".error_zx").removeClass('errorShow');
  396. });
  397. } else {
  398. $(".error_zx_user").removeClass('errorShow');
  399. }
  400. } else {
  401. var currenttime = CurentTime();
  402. var datatime = currenttime.split(' ')[1].split(':').join('')
  403. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M" + datatime);
  404. var zx_psw = CryptoJS.enc.Utf8.parse($.md5(zx_psw));
  405. var encrypted = CryptoJS.AES.encrypt(zx_psw, key, {
  406. mode: CryptoJS.mode.ECB,
  407. padding: CryptoJS.pad.Pkcs7
  408. });
  409. /*请求后台*/
  410. $.cookie("extno", zx_fj);
  411. $.cookie("zx_user", zx_user);
  412. $.ajax({
  413. type: "post",
  414. url: huayi.config.callcenter_url + "/Login/login",
  415. dataType: 'json',
  416. async: true,
  417. data: {
  418. username: zx_user,
  419. extensionphone: zx_fj,
  420. LoginTime: currenttime,
  421. password: encrypted.toString(),
  422. Code: $(".verification").val()
  423. },
  424. success: function(data) {
  425. /*验证请求*/
  426. if(data.state == "success") {
  427. $.cookie("token", data.data.token, {
  428. expires: 7
  429. });
  430. $.cookie("extno", zx_fj, {
  431. expires: 7
  432. });
  433. $.cookie("zx_user", zx_user, {
  434. expires: 7
  435. });
  436. loginHref()
  437. }
  438. }
  439. });
  440. }
  441. })
  442. function CurentTime() {
  443. var now = new Date();
  444. var year = now.getFullYear(); //年
  445. var month = now.getMonth() + 1; //月
  446. var day = now.getDate(); //日
  447. var hh = now.getHours(); //时
  448. var mm = now.getMinutes(); //分
  449. var ss = now.getSeconds(); //秒
  450. var clock = year + "-";
  451. if(month < 10)
  452. clock += "0";
  453. clock += month + "-";
  454. if(day < 10)
  455. clock += "0";
  456. clock += day + " ";
  457. if(hh < 10)
  458. clock += "0";
  459. clock += hh + ":";
  460. if(mm < 10) clock += '0';
  461. clock += mm + ":";
  462. if(ss < 10) clock += '0';
  463. clock += ss;
  464. return(clock);
  465. }
  466. //用户登录
  467. $('.login_gl').click(function() {
  468. localStorage.setItem('loginPassword', $('.gl_psw').val())
  469. var gl_user = DOMPurify.sanitize($(".gl_user").val());
  470. var gl_psw = DOMPurify.sanitize($(".gl_psw").val());
  471. if(gl_user == "" || gl_psw == "") {
  472. $(".error_gl").addClass('errorShow');
  473. if(gl_user == "") {
  474. $(".gl_user").focus(function() {
  475. $(".error_gl").removeClass('errorShow');
  476. });
  477. } else {
  478. $(".error_gl_user").removeClass('errorShow');
  479. }
  480. } else {
  481. var currenttime = CurentTime();
  482. var datatime = currenttime.split(' ')[1].split(':').join('')
  483. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M" + datatime);
  484. var gl_psw = CryptoJS.enc.Utf8.parse($.md5(gl_psw));
  485. var encrypted = CryptoJS.AES.encrypt(gl_psw, key, {
  486. mode: CryptoJS.mode.ECB,
  487. padding: CryptoJS.pad.Pkcs7
  488. });
  489. /*请求后台*/
  490. $.ajax({
  491. type: "post",
  492. url: huayi.config.callcenter_url + "/Login/login",
  493. dataType: 'json',
  494. async: true,
  495. data: {
  496. username: gl_user,
  497. password: encrypted.toString(),
  498. LoginTime: currenttime,
  499. Code: $(".verification_user").val()
  500. },
  501. success: function(data) {
  502. /*验证请求*/
  503. if(data.state == "success") {
  504. $.cookie("token", data.data.token, {
  505. expires: 7
  506. });
  507. $.cookie("zx_user", gl_user, {
  508. expires: 7
  509. });
  510. loginHref()
  511. }
  512. //else{
  513. // $(".gl_user").val('');
  514. // $(".gl_psw").val('');
  515. //}
  516. }
  517. });
  518. }
  519. })
  520. function loginHref(){
  521. var thisUrl = window.document.location.href
  522. var toHrefUrl =""
  523. if (thisUrl.indexOf("127.0.0.1") >0) {
  524. toHrefUrl = "home.html"
  525. } else{
  526. toHrefUrl = thisUrl.split('/')
  527. toHrefUrl.pop();
  528. toHrefUrl = toHrefUrl.join("/")+ "/home.html"
  529. }
  530. if (huayi.config.callcenter_url.indexOf("https") !==-1) {
  531. $.getJSON(
  532. huayi.config.callcenter_url + "UserAccount/GetNowUser", {
  533. token: $.cookie("token"),
  534. },
  535. function(result) {
  536. if(result.state.toLowerCase() == "success") {
  537. if (result.data.role.F_RoleCode ==="spdbzy") {
  538. toHrefUrl = "https://12345rx.zwfw.anyang.gov.cn/home.html"
  539. }else{
  540. toHrefUrl = "http://12345rx.zwfw.anyang.gov.cn/home.html"
  541. }
  542. window.location.href = toHrefUrl;
  543. }
  544. })
  545. }else{
  546. window.location.href = toHrefUrl;
  547. }
  548. }
  549. })
  550. </script>
  551. </body>
  552. </html>