商丘12345 前端

login.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  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. <link rel="stylesheet" href="css/login.css" />
  13. </head>
  14. <body class="signin">
  15. <div class="wrap clearfix">
  16. <div class="wrap_left" style="position: relative;">
  17. <div class="wrap_bj"></div>
  18. <div class="leftCon">
  19. <img src="img/logintext.png"/>
  20. </div>
  21. </div>
  22. <div class="wrap_right">
  23. <div class="rightCon">
  24. <div class="logo" style="width: 100%;text-align: center;">
  25. <!--<i class="logo"></i><div class="logoWord"></div>-->
  26. <img src="img/sqLogo.png" alt="" />
  27. </div>
  28. <!--<div class="row clearfix">-->
  29. <div class="tab_box">
  30. <!--col-sm-7-->
  31. <ul class="clearfix tab_ul">
  32. <li class="active">坐席登录</li>
  33. <li>用户登录</li>
  34. </ul>
  35. <div class="tab_content">
  36. <div class="tab_one">
  37. <p>
  38. <i class="login_icon login_icon_user "></i>
  39. <input class="zx_user" type="text" placeholder="请输入您的管理账号" />
  40. <i class="login_icon error error_zx error_zx_user"></i>
  41. </p>
  42. <p>
  43. <i class="login_icon login_icon_hua "></i>
  44. <input class="zx_fj" type="text" placeholder="请输入分机号" />
  45. <i class="login_icon error error_zx error_zx_fj"></i>
  46. </p>
  47. <p>
  48. <i class="login_icon login_icon_lock "></i>
  49. <input class="zx_psw" type="password" placeholder="请输入您的密码" />
  50. </p>
  51. <p>
  52. <i class="login_icon login_icon_hua "></i>
  53. <input class="verification" type="number" placeholder="请输入验证码" />
  54. <button class="btnVerifi" type="button">获取验证码</button>
  55. </p>
  56. <p class="login_go login_zx">登录</p>
  57. </div>
  58. <div class="tab_two" style="display: none;">
  59. <p>
  60. <i class="login_icon login_icon_user "></i>
  61. <input class="gl_user" type="text" placeholder="请输入您的管理账号" />
  62. <i class="login_icon error error_gl error_gl_user"></i>
  63. </p>
  64. <p>
  65. <i class="login_icon login_icon_lock"></i>
  66. <input class="gl_psw" type="password" placeholder="请输入您的密码" />
  67. <i class="login_icon error error_gl error_gl_psw"></i>
  68. </p>
  69. <p>
  70. <i class="login_icon login_icon_hua "></i>
  71. <input class="verification_user" type="text" placeholder="请输入验证码" />
  72. <button class="btnVerifi_user" type="button">获取验证码</button>
  73. </p>
  74. <p class="login_go login_gl">登录</p>
  75. </div>
  76. </div>
  77. </div>
  78. <!--</div>-->
  79. <div class="service" >
  80. <!--row clearfix-->
  81. <!--<div class="col-sm-7">-->
  82. <p style="color: #313c58; font-size: 12px;text-align: center;"></p>
  83. <!--</div>-->
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <script src="./Script/Common/huayi.load.js"></script>
  89. <script src="./Script/Common/huayi.config.js"></script>
  90. <script src="./js/jquery.md5.js"></script>
  91. <script src="./js/aes/crypto-js.js"></script>
  92. <script>
  93. $(function() {
  94. var a=0;
  95. $('.tab_ul li').click(function() {
  96. $(this).addClass("active").siblings().removeClass("active");
  97. var index = $(this).index();
  98. a=index;
  99. $('.tab_content').children('div').eq(index).show().siblings().hide();
  100. })
  101. /*cook存储数据*/
  102. if($.cookie("username")) {
  103. //取值如果存在则赋值
  104. $(".gl_user").val($.cookie("user")); //用户名
  105. $("zx_fj").val($.cookie("fj"));
  106. $(".zx_user").val($.cookie("user"));
  107. }
  108. //键盘登录事件
  109. $('input').bind('keypress', function(event) {
  110. if(event.keyCode == "13") {
  111. if(a == 0) {
  112. $('.login_zx').trigger("click");
  113. } else {
  114. $(".login_gl").trigger("click");
  115. }
  116. }
  117. });
  118. //坐席登录
  119. $('.login_zx').click(function(){
  120. var zx_user = $(".zx_user").val();
  121. var zx_fj = $(".zx_fj").val();
  122. var zx_psw = $(".zx_psw").val();
  123. if(zx_user == "" || zx_fj == "" || zx_psw == "") {
  124. $(".error_zx").addClass('errorShow');
  125. if($(".zx_user").val() == "") {
  126. $(".zx_user").focus(function() {
  127. $(".error_zx").removeClass('errorShow');
  128. });
  129. } else {
  130. $(".error_zx_user").removeClass('errorShow');
  131. }
  132. }else {
  133. var currenttime=CurentTime();
  134. var datatime=currenttime.split(' ')[1].split(':').join('')
  135. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M"+datatime);
  136. var zx_psw = CryptoJS.enc.Utf8.parse($.md5(zx_psw));
  137. var encrypted = CryptoJS.AES.encrypt(zx_psw, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  138. /*请求后台*/
  139. $.cookie("extno",zx_fj);
  140. $.cookie("zx_user",zx_user);
  141. $.ajax({
  142. type: "post",
  143. url: huayi.config.callcenter_url + "/Login/login",
  144. dataType: 'json',
  145. async: true,
  146. data: {
  147. username: zx_user,
  148. extensionphone: zx_fj,
  149. LoginTime:currenttime,
  150. password:encrypted.toString(),
  151. Code:$(".verification").val()
  152. },
  153. success: function(data) {
  154. /*验证请求*/
  155. if(data.state == "success") {
  156. $.cookie("token", data.data.token, {
  157. expires: 7
  158. });
  159. $.cookie("extno", zx_fj, {
  160. expires: 7
  161. });
  162. $.cookie("zx_user", zx_user, {
  163. expires: 7
  164. });
  165. window.location.href = "home.html";
  166. }
  167. //else {
  168. // $(".zx_user").val('');
  169. // $(".zx_fj").val('');
  170. // $(".zx_psw").val('');
  171. //}
  172. }
  173. });
  174. }
  175. })
  176. function CurentTime(){
  177. var now = new Date();
  178. var year = now.getFullYear(); //年
  179. var month = now.getMonth() + 1; //月
  180. var day = now.getDate(); //日
  181. var hh = now.getHours(); //时
  182. var mm = now.getMinutes(); //分
  183. var ss = now.getSeconds(); //秒
  184. var clock = year + "-";
  185. if(month < 10)
  186. clock += "0";
  187. clock += month + "-";
  188. if(day < 10)
  189. clock += "0";
  190. clock += day + " ";
  191. if(hh < 10)
  192. clock += "0";
  193. clock += hh + ":";
  194. if (mm < 10) clock += '0';
  195. clock += mm + ":";
  196. if (ss < 10) clock += '0';
  197. clock += ss;
  198. return(clock);
  199. }
  200. //用户登录
  201. $('.login_gl').click(function() {
  202. var gl_user = $(".gl_user").val();
  203. var gl_psw = $(".gl_psw").val();
  204. if(gl_user == "" || gl_psw == "") {
  205. $(".error_gl").addClass('errorShow');
  206. if($(".gl_user").val() == "") {
  207. $(".gl_user").focus(function() {
  208. $(".error_gl").removeClass('errorShow');
  209. });
  210. } else {
  211. $(".error_gl_user").removeClass('errorShow');
  212. }
  213. } else {
  214. var currenttime=CurentTime();
  215. var datatime=currenttime.split(' ')[1].split(':').join('')
  216. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M"+datatime);
  217. var gl_psw = CryptoJS.enc.Utf8.parse($.md5(gl_psw));
  218. var encrypted = CryptoJS.AES.encrypt(gl_psw, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  219. /*请求后台*/
  220. $.ajax({
  221. type: "post",
  222. url: huayi.config.callcenter_url + "/Login/login",
  223. dataType: 'json',
  224. async: true,
  225. data: {
  226. username: gl_user,
  227. password: encrypted.toString(),
  228. LoginTime:currenttime,
  229. Code:$(".verification_user").val()
  230. },
  231. success: function(data) {
  232. /*验证请求*/
  233. if(data.state == "success") {
  234. $.cookie("token", data.data.token, {
  235. expires: 7
  236. });
  237. $.cookie("zx_user", gl_user, {
  238. expires: 7
  239. });
  240. window.location.href = "home.html";
  241. }
  242. //else{
  243. // $(".gl_user").val('');
  244. // $(".gl_psw").val('');
  245. //}
  246. }
  247. });
  248. }
  249. })
  250. $(".btnVerifi").click(function(){
  251. if (!$(".zx_user").val()) {
  252. layer.msg('请输入账号')
  253. return false;
  254. }
  255. var mobile = $(".zx_user").val();
  256. sendMsg(mobile);
  257. })
  258. $(".btnVerifi_user").click(function(){
  259. if (!$(".gl_user").val()) {
  260. layer.msg('请输入账号')
  261. return false;
  262. }
  263. var mobile = $(".gl_user").val();
  264. sendMsg(mobile);
  265. })
  266. function sendMsg(mobile){
  267. console.log(mobile)
  268. $.ajax({
  269. type:"post",
  270. url:huayi.config.callcenter_url+"Login/SendCode",
  271. async:true,
  272. dataType:'json',
  273. // beforeSend: function() { //触发ajax请求开始时执行
  274. // $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  275. // $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  276. // },s
  277. data:{
  278. usercode:mobile
  279. },
  280. success:function(data){
  281. if (data.state == "success") {
  282. layer.msg('发送成功')
  283. // $('.btnVerifi').removeAttr('disabled')
  284. // $('.btnVerifi_user').removeAttr('disabled')
  285. verifi();
  286. }
  287. }
  288. });
  289. }
  290. function verifi(){
  291. var time = 60;
  292. var timer = null;
  293. $('.btnVerifi').text(time + '秒后重新发送');
  294. $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  295. $('.btnVerifi_user').text(time + '秒后重新发送');
  296. $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  297. timer = setInterval(function(){
  298. // 定时器到底了 兄弟们回家啦
  299. if(time == 1){
  300. clearInterval(timer);
  301. $('.btnVerifi').text("获取验证码")
  302. $('.btnVerifi_user').text('获取验证码')
  303. $('.btnVerifi').removeAttr('disabled')
  304. $('.btnVerifi_user').removeAttr('disabled')
  305. }else{
  306. time--;
  307. $('.btnVerifi').text(time + '秒后重新发送');
  308. $('.btnVerifi_user').text(time+'秒后重新发送');
  309. }
  310. }, 1000)
  311. }
  312. })
  313. </script>
  314. </body>
  315. </html>