鑫苑新版本前端代码

login.html 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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|ie-comp|ie-stand" />
  10. <link rel="shortcut icon" href="img/32.ico" />
  11. <script src="Script/Common/huayi.load.js"></script>
  12. <script src="Script/Common/huayi.config.js"></script>
  13. <link href="./css/login.css" rel="stylesheet">
  14. </head>
  15. <body>
  16. <div class="login">
  17. <!--背景图片-->
  18. <div class="login_bg"></div>
  19. <!--登陆部分-->
  20. <div class="login_center">
  21. <div class="title_img"><img src="img/login_title.png"/></div>
  22. <div class="login_text" id="signin">
  23. <ul>
  24. <li>
  25. <div class="fl flbox">用户账号</div>
  26. <div class="fl"><input type="" name="" id="user" value="" placeholder="请输入您的管理账号"/></div>
  27. </li>
  28. <li>
  29. <div class="fl flbox">分机号</div>
  30. <div class="fl"><input type="" name="" id="userSeat" value="" placeholder="请输入分机号"/></div>
  31. </li>
  32. <li>
  33. <div class="fl flbox">用户密码</div>
  34. <div class="fl">
  35. <input type="password" placeholder="请输入您的密码" name="" id="password" value="" />
  36. </div>
  37. </li>
  38. </ul>
  39. <div class="alert_box">
  40. <i class="alert_iocn"></i>
  41. <span class="">
  42. 账号密码不能为空
  43. </span>
  44. </div>
  45. <button class="btns">登陆</button>
  46. </div>
  47. </div>
  48. </div>
  49. <script>
  50. $(function () {
  51. /*输入框样式改变*/
  52. $("#user").focus(function () {
  53. $(this).parent().addClass("_success");
  54. });
  55. $("#user").blur(function () {
  56. $(this).parent().removeClass("_success");
  57. });
  58. $("#password").focus(function () {
  59. $(this).parent().addClass("_success");
  60. });
  61. $("#password").blur(function () {
  62. $(this).parent().removeClass("_success");
  63. });
  64. /*输入框绑定验证*/
  65. // $('#signin').find("input[class='form-control']").on('focus input propertychange', valideInput);
  66. /*cook存储数据*/
  67. if ($.cookie("username")) {
  68. //取值如果存在则赋值
  69. $("#user").val($.cookie("user"));//用户名
  70. }
  71. $(".btns").click(function () {
  72. login();
  73. });
  74. $('input').bind('keypress', function (event) {
  75. if (event.keyCode == "13") {
  76. $('.btns').trigger("click");
  77. }
  78. });
  79. });
  80. /*点击提交*/
  81. function login() {
  82. var User = $("#user").val();
  83. var Password = $("#password").val();
  84. var userSeat = $("#userSeat").val();
  85. /*保存COOK*/
  86. /*表单验证*/
  87. if (User == "" || Password == "") {
  88. $(".alert_box").show();
  89. if ($("#user").val() == "") {
  90. $("#user").focus(function () {
  91. $(".alert_box").hide();
  92. });
  93. } else {
  94. $(".user_ts").addClass("Yz_success");
  95. }
  96. } else {
  97. // jQuery.support.cors = true;
  98. /*请求后台*/
  99. $.ajax({
  100. type: "post",
  101. url: huayi.config.callcenter_url + "/Login/login",
  102. dataType: 'json',
  103. async: true,
  104. beforeSend: function() { //触发ajax请求开始时执行
  105. $('.btns').text('登录中...');
  106. loadIndex = layer.load();
  107. },
  108. // crossDomain: true == !(document.all),
  109. data: {
  110. username: User,
  111. extensionphone: userSeat,
  112. password: Password
  113. },
  114. success: function (data) {
  115. layer.close(loadIndex);
  116. /*验证请求*/
  117. if (data.state == "success") {
  118. helper.cookies.setday("token", data.data.token, '7');
  119. helper.cookies.setday("extno", userSeat, '7');
  120. // $.cookie("extno", userSeat, { expires: 7 });
  121. window.location.href = "index.html";
  122. } else {
  123. layer.msg("登录失败");
  124. $("#user").val('');
  125. $("#userSeat").val('');
  126. $("#password").val('');
  127. }
  128. },
  129. error: function(textStatus) {
  130. layer.close(loadIndex);
  131. $('.btns').text('登录');
  132. },
  133. complete: function(XMLHttpRequest, textStatus) {
  134. layer.close(loadIndex);
  135. if(textStatus == 'timeout') {
  136. var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
  137. xmlhttp.abort();
  138. layer.confirm('网络超时,请稍后再试...', {
  139. closeBtn: 0,
  140. btn: ['确定'] //按钮
  141. });    
  142. }
  143. $('.btns').text('登录');
  144. },
  145. });
  146. }
  147. }
  148. </script>
  149. </body>
  150. </html>