login.blade.php 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!DOCTYPE html>
  2. <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
  7. <!-- CSRF Token -->
  8. <meta name="csrf-token" content="{{ csrf_token() }}">
  9. <title>宝时SWAS</title>
  10. <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  11. <link href="{{ mix('css/reset.css') }}" rel="stylesheet">
  12. <link href="{{ mix('css/swiper-bundle.min.css') }}" rel="stylesheet">
  13. <!--[if lt IE 9]>
  14. <script type="text/javascript" src="{{mix('js/login/html5.js')}}"></script>
  15. <script type="text/javascript" src="{{mix('js/login/respond.min.js')}}"></script>
  16. <script type="text/javascript" src="{{mix('js/login/PIE_IE678.js')}}"></script>
  17. <![endif]-->
  18. <script type="text/javascript" src="{{mix('js/login/jquery-1.9.min.js')}}"></script>
  19. <script type="text/javascript" src="{{mix('js/login/swiper-bundle.min.js')}}"></script>
  20. </head>
  21. <body>
  22. <div class="lgoinbox" id="list">
  23. <div class="left swiper-container">
  24. <div class="swiper-wrapper">
  25. <div class="swiper-slide" style="background-image: url({{url('images/login/log01.jpg')}});"><a href="#"></a>
  26. </div>
  27. <div class="swiper-slide" style="background-image: url({{url('images/login/log01.jpg')}});"><a href="#"></a>
  28. </div>
  29. <div class="swiper-slide" style="background-image: url({{url('images/login/log01.jpg')}});"><a href="#"></a>
  30. </div>
  31. </div>
  32. <!-- Add Pagination -->
  33. <div class="swiper-pagination"></div>
  34. </div>
  35. <div class="right">
  36. <div class="formbox">
  37. <div class="logo"><img src="{{url('images/login/loglogo.png')}}" alt=""></div>
  38. <ul>
  39. <li v-if="message"><div class="text-primary">
  40. @{{ message }}
  41. </div></li>
  42. <li v-if="errorMessage">
  43. <div class="text-danger">
  44. @{{ errorMessage }}
  45. </div>
  46. </li>
  47. <li>
  48. <input class="input" name="" type="text" placeholder="用户名/邮箱/手机号" v-model="inputting.name" @click="errorMessage =null">
  49. <div class="bar"></div>
  50. </li>
  51. <li>
  52. <input class="input" name="" type="password" placeholder="密码" v-model="inputting.password" @click="errorMessage =null">
  53. <div class="bar"></div>
  54. </li>
  55. <li>
  56. <button class="inbtn" type="button" value="登录" @click="login">
  57. 登录
  58. </button>
  59. {{-- <input class="inbtn" name="" type="button" value="登录" onclick="loginSubmit"></li>--}}
  60. {{-- <li class="lia"><a href="#" class="a1">立即注册</a><a class="a2" href="#">忘记密码?</a></li>--}}
  61. </ul>
  62. </div>
  63. <div class="banquan">沪ICP备123456789号-1 Copyright © 2021</div>
  64. </div>
  65. </div>
  66. <script type="text/javascript" src="{{mix('js/app.js')}}"></script>
  67. <script>
  68. </script>
  69. <script>
  70. let vue = new Vue({
  71. el: "#list",
  72. data: {
  73. inputting: {name: '', password: '', is_json: true},
  74. errors: {name: [], password: [],},
  75. message:null,
  76. errorMessage:null,
  77. bannerSwiper:null,
  78. },
  79. mounted: function () {
  80. this.bannerSwiper = new Swiper('.swiper-container', {
  81. pagination: '.swiper-pagination',
  82. paginationClickable: true,
  83. autoplay: 2500,
  84. autoplayDisableOnInteraction: false,
  85. loop: true,
  86. });
  87. },
  88. methods: {
  89. passwordInput: function (e) {
  90. setTimeout(function () {
  91. vue.errors.password = ''
  92. }, 10);
  93. if (e.key === 'Enter') {
  94. loginSubmit()
  95. }
  96. },
  97. login(){
  98. window.tempTip.setDuration(99999);
  99. window.tempTip.setIndex(10);
  100. window.tempTip.waitingTip('提交中');
  101. this.message = '正在登录';
  102. window.axios.post('{{ route('login') .'?rand='.microtime(true)}}',this.inputting).then(res=>{
  103. window.tempTip.setDuration(2000);
  104. window.tempTip.cancelWaitingTip();
  105. this.message = null;
  106. if (res.data.success !== true) {
  107. if (res.data.errors) {
  108. let message = null;
  109. for (const resKey in res.data.errors) {
  110. if (message) break;
  111. if (res.data.errors[`${resKey}`]){
  112. message = res.data.errors[`${resKey}`][0];
  113. }
  114. }
  115. this.errorMessage = message;
  116. // this.errors = res.data.errors;
  117. return;
  118. }
  119. if (res.data.message) {
  120. this.errorMessage = res.data.message;
  121. // window.tempTip.show(res.data.message)
  122. return;
  123. }
  124. } else {
  125. tempTip.setDuration(99999);
  126. tempTip.waitingTip('页面跳转中');
  127. localStorage.setItem("menus", JSON.stringify(res.data.menus));
  128. location = res.data.url;
  129. }
  130. }).catch(err=>{
  131. tempTip.setDuration(6000);
  132. tempTip.waitingTip('错误');
  133. });
  134. }
  135. }
  136. });
  137. function loginSubmit() {
  138. console.log(123);
  139. tempTip.setDuration(99999);
  140. tempTip.waitingTip('提交中');
  141. axios.post('{{ route('login') .'?rand='.microtime(true)}}', vue.inputting).then(function (response) {
  142. tempTip.setDuration(2000);
  143. tempTip.cancelWaitingTip();
  144. if (response.data.success !== true) {
  145. if (response.data.errors) {
  146. vue.errors = response.data.errors;
  147. return;
  148. }
  149. if (response.data.message) {
  150. tempTip.show(response.data.message)
  151. return;
  152. }
  153. } else {
  154. tempTip.setDuration(99999);
  155. tempTip.waitingTip('页面跳转中');
  156. localStorage.setItem("menus", JSON.stringify(response.data.menus));
  157. location = response.data.url;
  158. }
  159. }).catch(function (response) {
  160. tempTip.setDuration(6000);
  161. tempTip.waitingTip('错误');
  162. })
  163. }
  164. </script>
  165. </body>
  166. </html>