No Description

login.html 15KB

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