商丘12345 前端

login.html 11KB

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