商丘12345 前端

login.html 11KB

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