商丘12345 前端

login.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  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. if (!$.cookie("callcenter_url")) {
  109. $.ajax({
  110. type:"get",
  111. // url:"http://k100.800100.net/SysConfig/GetConfig",
  112. url: huayi.config.callcenter_url + "Login/GetAuAuthDate",
  113. async:false,
  114. success:function(res){
  115. var res=$.parseJSON(res)
  116. if(res.state== "success") {
  117. debugger
  118. $.cookie("callcenter_url", escape(res.data.callcenter_url));
  119. $.cookie("indextime", res.data.indextime);
  120. $.cookie("menuworktime", res.data.menuworktime);
  121. $.cookie("messageTime", res.data.messageTime);
  122. $.cookie("socket_ip", res.data.socket_ip);
  123. $.cookie("socket_port", res.data.socket_port);
  124. if ($.cookie("token") == null) {
  125. window.location.href = "login.html";
  126. }else{
  127. window.location.href = "home.html";
  128. }
  129. } else {
  130. layer.confirm(res.message, {
  131. icon: 2,
  132. btn: ['确定']
  133. });
  134. }
  135. }
  136. });
  137. }
  138. //键盘登录事件
  139. $('input').bind('keypress', function(event) {
  140. if(event.keyCode == "13") {
  141. if(a == 0) {
  142. $('.login_zx').trigger("click");
  143. } else {
  144. $(".login_gl").trigger("click");
  145. }
  146. }
  147. });
  148. //坐席登录
  149. $('.login_zx').click(function(){
  150. var zx_user = $(".zx_user").val();
  151. var zx_fj = $(".zx_fj").val();
  152. var zx_psw = $(".zx_psw").val();
  153. if(zx_user == "" || zx_fj == "" || zx_psw == "") {
  154. $(".error_zx").addClass('errorShow');
  155. if($(".zx_user").val() == "") {
  156. $(".zx_user").focus(function() {
  157. $(".error_zx").removeClass('errorShow');
  158. });
  159. } else {
  160. $(".error_zx_user").removeClass('errorShow');
  161. }
  162. }else {
  163. var currenttime=CurentTime();
  164. var datatime=currenttime.split(' ')[1].split(':').join('')
  165. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M"+datatime);
  166. var zx_psw = CryptoJS.enc.Utf8.parse($.md5(zx_psw));
  167. var encrypted = CryptoJS.AES.encrypt(zx_psw, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  168. /*请求后台*/
  169. $.cookie("extno",zx_fj);
  170. $.cookie("zx_user",zx_user);
  171. $.ajax({
  172. type: "post",
  173. url: huayi.config.callcenter_url + "/Login/login",
  174. dataType: 'json',
  175. async: true,
  176. data: {
  177. username: zx_user,
  178. extensionphone: zx_fj,
  179. LoginTime:currenttime,
  180. password:encrypted.toString(),
  181. Code:$(".verification").val()
  182. },
  183. success: function(data) {
  184. /*验证请求*/
  185. if(data.state == "success") {
  186. $.cookie("token", data.data.token, {
  187. expires: 7
  188. });
  189. $.cookie("extno", zx_fj, {
  190. expires: 7
  191. });
  192. $.cookie("zx_user", zx_user, {
  193. expires: 7
  194. });
  195. window.location.href = "home.html";
  196. }
  197. //else {
  198. // $(".zx_user").val('');
  199. // $(".zx_fj").val('');
  200. // $(".zx_psw").val('');
  201. //}
  202. }
  203. });
  204. }
  205. })
  206. function CurentTime(){
  207. var now = new Date();
  208. var year = now.getFullYear(); //年
  209. var month = now.getMonth() + 1; //月
  210. var day = now.getDate(); //日
  211. var hh = now.getHours(); //时
  212. var mm = now.getMinutes(); //分
  213. var ss = now.getSeconds(); //秒
  214. var clock = year + "-";
  215. if(month < 10)
  216. clock += "0";
  217. clock += month + "-";
  218. if(day < 10)
  219. clock += "0";
  220. clock += day + " ";
  221. if(hh < 10)
  222. clock += "0";
  223. clock += hh + ":";
  224. if (mm < 10) clock += '0';
  225. clock += mm + ":";
  226. if (ss < 10) clock += '0';
  227. clock += ss;
  228. return(clock);
  229. }
  230. //用户登录
  231. $('.login_gl').click(function() {
  232. var gl_user = $(".gl_user").val();
  233. var gl_psw = $(".gl_psw").val();
  234. if(gl_user == "" || gl_psw == "") {
  235. $(".error_gl").addClass('errorShow');
  236. if($(".gl_user").val() == "") {
  237. $(".gl_user").focus(function() {
  238. $(".error_gl").removeClass('errorShow');
  239. });
  240. } else {
  241. $(".error_gl_user").removeClass('errorShow');
  242. }
  243. } else {
  244. var currenttime=CurentTime();
  245. var datatime=currenttime.split(' ')[1].split(':').join('')
  246. var key = CryptoJS.enc.Utf8.parse(")O[9d]6,YF}+efcaj{+8>Z'e9M"+datatime);
  247. var gl_psw = CryptoJS.enc.Utf8.parse($.md5(gl_psw));
  248. var encrypted = CryptoJS.AES.encrypt(gl_psw, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  249. /*请求后台*/
  250. $.ajax({
  251. type: "post",
  252. url: huayi.config.callcenter_url + "/Login/login",
  253. dataType: 'json',
  254. async: true,
  255. data: {
  256. username: gl_user,
  257. password: encrypted.toString(),
  258. LoginTime:currenttime,
  259. Code:$(".verification_user").val()
  260. },
  261. success: function(data) {
  262. /*验证请求*/
  263. if(data.state == "success") {
  264. $.cookie("token", data.data.token, {
  265. expires: 7
  266. });
  267. $.cookie("zx_user", gl_user, {
  268. expires: 7
  269. });
  270. window.location.href = "home.html";
  271. }
  272. //else{
  273. // $(".gl_user").val('');
  274. // $(".gl_psw").val('');
  275. //}
  276. }
  277. });
  278. }
  279. })
  280. $(".btnVerifi").click(function(){
  281. if (!$(".zx_user").val()) {
  282. layer.msg('请输入账号')
  283. return false;
  284. }
  285. var mobile = $(".zx_user").val();
  286. sendMsg(mobile);
  287. })
  288. $(".btnVerifi_user").click(function(){
  289. if (!$(".gl_user").val()) {
  290. layer.msg('请输入账号')
  291. return false;
  292. }
  293. var mobile = $(".gl_user").val();
  294. sendMsg(mobile);
  295. })
  296. function sendMsg(mobile){
  297. console.log(mobile)
  298. $.ajax({
  299. type:"post",
  300. url:huayi.config.callcenter_url+"Login/SendCode",
  301. async:true,
  302. dataType:'json',
  303. // beforeSend: function() { //触发ajax请求开始时执行
  304. // $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  305. // $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  306. // },s
  307. data:{
  308. usercode:mobile
  309. },
  310. success:function(data){
  311. if (data.state == "success") {
  312. layer.msg('发送成功')
  313. // $('.btnVerifi').removeAttr('disabled')
  314. // $('.btnVerifi_user').removeAttr('disabled')
  315. verifi();
  316. }
  317. }
  318. });
  319. }
  320. function verifi(){
  321. var time = 60;
  322. var timer = null;
  323. $('.btnVerifi').text(time + '秒后重新发送');
  324. $('.btnVerifi').attr('disabled', 'disabled'); // 禁用按钮
  325. $('.btnVerifi_user').text(time + '秒后重新发送');
  326. $('.btnVerifi_user').attr('disabled', 'disabled'); // 禁用按钮
  327. timer = setInterval(function(){
  328. // 定时器到底了 兄弟们回家啦
  329. if(time == 1){
  330. clearInterval(timer);
  331. $('.btnVerifi').text("获取验证码")
  332. $('.btnVerifi_user').text('获取验证码')
  333. $('.btnVerifi').removeAttr('disabled')
  334. $('.btnVerifi_user').removeAttr('disabled')
  335. }else{
  336. time--;
  337. $('.btnVerifi').text(time + '秒后重新发送');
  338. $('.btnVerifi_user').text(time+'秒后重新发送');
  339. }
  340. }, 1000)
  341. }
  342. })
  343. </script>
  344. </body>
  345. </html>