商丘12345 前端

login.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  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. //else {
  190. // $(".zx_user").val('');
  191. // $(".zx_fj").val('');
  192. // $(".zx_psw").val('');
  193. //}
  194. }
  195. });
  196. }
  197. })
  198. function CurentTime(){
  199. var now = new Date();
  200. var year = now.getFullYear(); //年
  201. var month = now.getMonth() + 1; //月
  202. var day = now.getDate(); //日
  203. var hh = now.getHours(); //时
  204. var mm = now.getMinutes(); //分
  205. var ss = now.getSeconds(); //秒
  206. var clock = year + "-";
  207. if(month < 10)
  208. clock += "0";
  209. clock += month + "-";
  210. if(day < 10)
  211. clock += "0";
  212. clock += day + " ";
  213. if(hh < 10)
  214. clock += "0";
  215. clock += hh + ":";
  216. if (mm < 10) clock += '0';
  217. clock += mm + ":";
  218. if (ss < 10) clock += '0';
  219. clock += ss;
  220. return(clock);
  221. }
  222. //用户登录
  223. $('.login_gl').click(function() {
  224. var gl_user = $(".gl_user").val();
  225. var gl_psw = $(".gl_psw").val();
  226. if(gl_user == "" || gl_psw == "") {
  227. $(".error_gl").addClass('errorShow');
  228. if($(".gl_user").val() == "") {
  229. $(".gl_user").focus(function() {
  230. $(".error_gl").removeClass('errorShow');
  231. });
  232. } else {
  233. $(".error_gl_user").removeClass('errorShow');
  234. }
  235. } else {
  236. var currenttime=CurentTime();
  237. var datatime=currenttime.split(' ')[1].split(':').join('')
  238. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M"+datatime);
  239. var gl_psw = CryptoJS.enc.Utf8.parse($.md5(gl_psw));
  240. var encrypted = CryptoJS.AES.encrypt(gl_psw, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  241. /*请求后台*/
  242. $.ajax({
  243. type: "post",
  244. url: huayi.config.callcenter_url + "/Login/login",
  245. dataType: 'json',
  246. async: true,
  247. data: {
  248. username: gl_user,
  249. password: encrypted.toString(),
  250. LoginTime:currenttime,
  251. Code:$(".verification_user").val()
  252. },
  253. success: function(data) {
  254. /*验证请求*/
  255. if(data.state == "success") {
  256. $.cookie("token", data.data.token, {
  257. expires: 7
  258. });
  259. $.cookie("zx_user", gl_user, {
  260. expires: 7
  261. });
  262. window.location.href = "home.html";
  263. }
  264. //else{
  265. // $(".gl_user").val('');
  266. // $(".gl_psw").val('');
  267. //}
  268. }
  269. });
  270. }
  271. })
  272. $(".btnVerifi").click(function(){
  273. if (!$(".zx_user").val()) {
  274. layer.msg('请输入账号')
  275. return false;
  276. }
  277. var mobile = $(".zx_user").val();
  278. sendMsg(mobile);
  279. })
  280. $(".btnVerifi_user").click(function(){
  281. if (!$(".gl_user").val()) {
  282. layer.msg('请输入账号')
  283. return false;
  284. }
  285. var mobile = $(".gl_user").val();
  286. sendMsg(mobile);
  287. })
  288. function sendMsg(mobile){
  289. console.log(mobile)
  290. $.ajax({
  291. type:"post",
  292. url:huayi.config.callcenter_url+"Login/SendCode",
  293. async:true,
  294. dataType:'json',
  295. // beforeSend: function() { //触发ajax请求开始时执行
  296. // $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  297. // $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  298. // },s
  299. data:{
  300. usercode:mobile
  301. },
  302. success:function(data){
  303. if (data.state == "success") {
  304. layer.msg('发送成功')
  305. // $('.btnVerifi').removeAttr('disabled')
  306. // $('.btnVerifi_user').removeAttr('disabled')
  307. verifi();
  308. }
  309. }
  310. });
  311. }
  312. function verifi(){
  313. var time = 60;
  314. var timer = null;
  315. $('.btnVerifi').text(time + '秒后重新发送');
  316. $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  317. $('.btnVerifi_user').text(time + '秒后重新发送');
  318. $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  319. timer = setInterval(function(){
  320. // 定时器到底了 兄弟们回家啦
  321. if(time == 1){
  322. clearInterval(timer);
  323. $('.btnVerifi').text("获取验证码")
  324. $('.btnVerifi_user').text('获取验证码')
  325. $('.btnVerifi').removeAttr('disabled')
  326. $('.btnVerifi_user').removeAttr('disabled')
  327. }else{
  328. time--;
  329. $('.btnVerifi').text(time + '秒后重新发送');
  330. $('.btnVerifi_user').text(time+'秒后重新发送');
  331. }
  332. }, 1000)
  333. }
  334. })
  335. </script>
  336. </body>
  337. </html>