userLogin.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>kmall_pt</title>
  7. <!-- Tell the browser to be responsive to screen width -->
  8. <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  9. <link rel="stylesheet" href="statics/css/bootstrap.min.css">
  10. <link rel="stylesheet" href="statics/css/font-awesome.min.css">
  11. <link rel="stylesheet" href="statics/css/style.css">
  12. <link rel="stylesheet" href="statics/css/userLogin.css">
  13. <link rel="stylesheet" href="statics/css/main.css">
  14. <link rel="stylesheet" href="statics/css/iview.css">
  15. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  16. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  17. <!--[if lt IE 9]>
  18. <script src="statics/libs/html5shiv.min.js"></script>
  19. <script src="statics/libs/respond.min.js"></script>
  20. <![endif]-->
  21. </head>
  22. <body class="signin hold-transition login-page" >
  23. <div class="loginscreen animated fadeInDown signinpanel" id="loginBox" v-cloak>
  24. <div class="row" style="background: rgba(109, 109, 109, 0.45);border-radius: 20px;border: 0px solid #6d6d6d;padding:13px 22px 35px 22px;">
  25. <div class="row" style="border: 0px solid #6d6d6d">
  26. <p style="font-size: 45px;font-family: 微软雅黑;color: #ffffff;text-shadow: 5px 5px 5px #000;margin-bottom: 10px" align="center"><b>珠 免 线 下 店</b></p>
  27. <hr/>
  28. </div>
  29. <div class="col-md-7" >
  30. <p style="font-size: 35px;font-family: 微软雅黑;color: #fff;text-shadow: 2px 2px 5px #000;padding-right: 10px;margin: 45px 0 0;" align="center">
  31. <br/>
  32. <span style="font-size: 45px">收 银 系 统</span>
  33. <br/>
  34. </p>
  35. <!--<p style="font-size: 20px;font-family: 微软雅黑;color: #3bc8ff;text-shadow: 2px 2px 5px #000;padding-right: 10px;margin: 30px 0 0;"></p>-->
  36. </div>
  37. <div class="col-md-5">
  38. <div class="m-t text-center" style="border: 0px solid #dddee1;">
  39. <div class="form-group has-feedback">
  40. <i-input class="userinput" v-model="username" @on-enter="login" placeholder="账号" style="width: 250px;" autofocus/>
  41. </div>
  42. <div class="form-group has-feedback">
  43. <i-input class="userinput" type="password" v-model="password" @on-enter="login" style="width: 250px;"
  44. placeholder="密码"/>
  45. </div>
  46. <!--<div class="form-group has-feedback" id="authcode">
  47. <div style="display: inline-block;width: 150px;height:45px;padding-left: 2px">
  48. <i-input v-model="captcha" @on-enter="login"
  49. placeholder="验证码" class="authcode" />
  50. </div>
  51. <div style="display: inline-block;width: 100px;">
  52. <img style="height: 45px;width: 96px;border-radius: 4px;" alt="如果看不清楚,请单击图片刷新!" title="点击刷新"
  53. class="pointer" :src="src" @click="refreshCode">
  54. </div>
  55. </div>-->
  56. <div>
  57. <i-button @click="login" style="width: 125px;height: 45px">登录</i-button>
  58. <i-button @click="change" style="width: 125px;height: 45px">切换管理端</i-button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- /.login-box -->
  65. <script src="statics/libs/jquery.min.js"></script>
  66. <script src="statics/libs/vue.min.js"></script>
  67. <script src="statics/libs/iview.min.js"></script>
  68. <script src="statics/libs/bootstrap.min.js"></script>
  69. <script src="statics/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  70. <script src="statics/libs/fastclick.min.js"></script>
  71. <script type="text/javascript">
  72. var vm = new Vue({
  73. el: '#loginBox',
  74. data: {
  75. username: '',
  76. password: '',
  77. captcha: '',
  78. machineCode: '' ,
  79. src: 'captcha.jpg'
  80. },
  81. beforeCreate: function () {
  82. if (self != top) {
  83. top.location.href = self.location.href;
  84. }
  85. },
  86. beforeMount: function(){
  87. // TODO 调用接口获取机器码
  88. $.ajax({
  89. url:"http://127.0.0.1:21600/api/reg/gen",
  90. success:function(r){
  91. if(r.code == "0"){
  92. vm.machineCode = r.rows[0].data.code;
  93. console.log(vm.machineCode);
  94. vm.machineCode = vm.machineCode.replace("+","%2B");
  95. sessionStorage.setItem("machineCode",vm.machineCode);
  96. }
  97. },
  98. error:function(XMLHttpRequest, textStatus, errorThrown){
  99. alert("获取机器码失败,请联系管理员");
  100. }
  101. })
  102. // 本地调试的时候打开下面的注释代码
  103. // vm.machineCode = "0z4kBPFEve0=";
  104. // sessionStorage.setItem("machineCode","0z4kBPFEve0=");
  105. // $.get("http://127.0.0.1:8000/api/reg/gen" , function (r) {
  106. // console.log(r);
  107. // if(r.code == "0"){
  108. // vm.machineCode = r.rows[0].data.code;
  109. // console.log(vm.machineCode);
  110. // vm.machineCode = vm.machineCode.replace("+","%2B");
  111. // sessionStorage.setItem("machineCode",vm.machineCode);
  112. // }
  113. // });
  114. },
  115. methods: {
  116. refreshCode: function () {
  117. this.src = "captcha.jpg?t=" + $.now();
  118. },
  119. login: function (event) {
  120. var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha + "&machineCode=" + vm.machineCode+"&loginType=2"; //TODO 新增加一个机器码;
  121. // var data = "username=" + vm.username + "&password=" + vm.password + "&captcha=" + vm.captcha + "&machineCode=0z4kBPFEve0=&loginType=2"; //TODO 新增加一个机器码;
  122. sessionStorage.removeItem("permsSet");
  123. var code = sessionStorage.getItem("machineCode");
  124. // if(!code){
  125. // alert("正在获取机器码,请稍后登录,大约5s");
  126. // return;
  127. // }
  128. $.ajax({
  129. type: "POST",
  130. url: "sys/login",
  131. data: data,
  132. dataType: "json",
  133. success: function (result) {
  134. if (result.code == 0) {//登录成功
  135. sessionStorage.setItem("permsSet", JSON.stringify(result.permsSet))
  136. sessionStorage.setItem("storeId", result.storeId)
  137. // if(result.storeId != null){
  138. parent.location.href = '/sale/sale.html';
  139. // }else{
  140. // parent.location.href = 'index.html';
  141. // }
  142. } else {
  143. iview.Message.error(result.msg);
  144. vm.refreshCode();
  145. }
  146. }
  147. });
  148. },
  149. change:function(){
  150. parent.location.href = 'login.html';
  151. },
  152. mounted:function(){
  153. this.$Message.config({
  154. duration:3
  155. })
  156. }
  157. }
  158. });
  159. </script>
  160. </body>
  161. </html>