login_mobile.blade.php 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. @extends('mobile.module.layouts.content')
  2. @push('meta')
  3. @endpush
  4. @push('css')
  5. <link href="{{ theme_asset('mobile/css/members.css') }}" rel="stylesheet">
  6. @endpush
  7. @push('js')
  8. @endpush
  9. @section('content')
  10. <div class="qs-top-nav x2 list_height">
  11. <div class="n-cell" onclick="javascript:location.href='{{route($sub_site.'mobile.login')}}'">账号密码登录<div class="b-line"></div></div>
  12. <div class="n-cell active">手机动态码登录<div class="b-line"></div></div>
  13. <div class="clear"></div>
  14. </div>
  15. <div class="split-block"></div>
  16. <form method="post" id="form_mobile" action="{{route($sub_site.'mobile.login.mobile')}}" >
  17. {{csrf_field()}}
  18. <div class="loging-input-group">
  19. <div class="group-list mobile">
  20. <input id="mobile" name="mobile" type="text" class="l-input font14" placeholder="请输入手机号码" autocomplete="off">
  21. <a href="javascript:;" id="getVerfyCode" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-border-gray font14 btn-getcode">获取验证码</a>
  22. </div>
  23. <div class="group-list verfy">
  24. <input id="code" name="code" type="text" class="l-input font14" placeholder="请输入验证码" autocomplete="off">
  25. </div>
  26. </div>
  27. <div class="l-tool-bar list_height">
  28. <div class="auto-loging">
  29. <div class="for-checkbox active" id="for-checkbox">下次自动登录</div>
  30. </div>
  31. <div class="for-pwd link_gray6"><a href="{{route($sub_site.'mobile.password.request')}}">忘记密码</a></div>
  32. <div class="clear"></div>
  33. </div>
  34. <div id="pop" style="display:none"></div>
  35. <input type="hidden" name="autoLogin" id="autoLogin" value="1" >
  36. </form>
  37. <div class="btn-spacing login-mobile"><a id="loginBtn" href="javascript:;" class="qs-btn qs-btn-blue font18">验证并登录</a></div>
  38. <div class="qs-center login-btn-group">
  39. <div class="login-btn-group-box">
  40. <a href="{{route($sub_site.'mobile.register.index')}}" class="qs-btn qs-btn-medium qs-btn-border-orange font14" style="width: 2.45rem;">立即注册</a>
  41. <a href="{{route($sub_site.'mobile.login.company')}}" class="qs-btn qs-btn-medium qs-btn-border-blue font14" style="width: 2.45rem;margin-left: .5rem">企业用户登录</a>
  42. <div class="clear"></div>
  43. </div>
  44. </div>
  45. <div class="qs-center coop-title">使用合作账号登录/注册</div>
  46. <div class="coop-group qs-center" >
  47. <div class="coop-cell" id="other-thirdlogin">
  48. </div>
  49. <div class="clear"></div>
  50. </div>
  51. @endsection
  52. @section('script')
  53. @include('mobile.module.widgets.thirdlogin')
  54. <script>
  55. $(function () {
  56. var login_type=1;//登录模式,1用户账号登录,2用户手机登录,3企业登录.
  57. $('.login-account').on('click', function () {
  58. // var usernameValue = $.trim($('input[name=account]').val());
  59. // var passwordValue = $.trim($('input[name=password]').val());
  60. // if (usernameValue == '') {
  61. // qsToast({type:2,context: '请输入账户名/手机号/邮箱'});
  62. // return false;
  63. // }
  64. // if (passwordValue == '') {
  65. // qsToast({type:2,context: '请输入密码'});
  66. // return false;
  67. // }
  68. login_type=1;
  69. ajax_login(login_type);
  70. });
  71. $('.login-mobile').on('click', function () {
  72. var usernameValue = $.trim($('input[name=mobile]').val());
  73. var passwordValue = $.trim($('input[name=code]').val());
  74. if (usernameValue == '') {
  75. qsToast({type:2,context: '请输入手机号'});
  76. return false;
  77. }
  78. if (passwordValue == '') {
  79. qsToast({type:2,context: '请输入验证码'});
  80. return false;
  81. }
  82. login_type=2;
  83. ajax_login(login_type);
  84. });
  85. $('.login-company').on('click', function () {
  86. login_type=3;
  87. ajax_login(login_type);
  88. });
  89. $('.btn-getcode').on('click', function () {
  90. var mobile = $.trim($('input[name=mobile]').val());
  91. if (mobile == '') {
  92. qsToast({type:2,context: '请输入手机号码'});
  93. return false;
  94. }
  95. if ($('#getVerfyCode').hasClass('qs-btn-border-disabled')) {
  96. return false;
  97. }
  98. submit_data={
  99. "mobile":$("input[name='mobile']").val(),
  100. "type":"login",
  101. };
  102. $.ajax({
  103. type: 'post',
  104. url: '{{route('sms.send')}}',
  105. data: submit_data,
  106. beforeSend:function () {
  107. // console.log('请求开始');
  108. // $(".errinfo").text("");
  109. // $(".errinfo").removeClass("errinfo");
  110. },
  111. complete:function() {
  112. console.log('请求结束');
  113. },
  114. success: function (data) {
  115. // console.log(data);
  116. qsToast({type:2,context: '验证码已发送,请注意查收'});
  117. settime();
  118. },
  119. error: function (errorData) {
  120. // console.log(errorData);
  121. if (countdown == 60) {
  122. $('#getVerfyCode').removeClass('qs-btn-border-disabled');
  123. $('#getVerfyCode').text('获取验证码');
  124. }
  125. var response=$.parseJSON(errorData.response);
  126. if (errorData.status==422) {//验证错误
  127. $.each(response.errors,function (key,val) {
  128. qsToast({type:2,context: val[0]});
  129. return false;
  130. });
  131. }
  132. else if(errorData.status==400) {//业务错误
  133. qsToast({type:2,context: response.message});
  134. //is_need_geetest=response.errors.is_need_geetest;
  135. }
  136. }
  137. });
  138. });
  139. $('.login-mobile').on('click', function () {
  140. login_type=2;
  141. ajax_login();
  142. });
  143. $(".input-login").keydown(function(ev){
  144. ev = ev || window.event;
  145. var code = (ev.keyCode || ev.which);
  146. if (code == 10 || code == 13) {
  147. $(this).closest("form").find(".btn-group").click();
  148. }
  149. });
  150. // 自动登录
  151. $('#for-checkbox').on('click', function() {
  152. $(this).toggleClass('active');
  153. if ($(this).hasClass('active')) {
  154. $('#autoLogin').val('1');
  155. } else {
  156. $('#autoLogin').val('0');
  157. }
  158. })
  159. function ajax_login() {
  160. $.ajax({
  161. type: 'post',
  162. url: $("#form_mobile").attr('action'),
  163. data: $("#form_mobile").serialize(),
  164. beforeSend:function () {
  165. //console.log('请求开始');
  166. },
  167. complete:function() {
  168. //console.log('请求结束');
  169. },
  170. success: function (data) {
  171. //console.log(data);
  172. qsToast({type:2,context: "登录成功, 正在跳转..."});
  173. location.href=data.data.redirect_url+'?token='+data.data.token;
  174. },
  175. error: function (errorData) {
  176. var response=$.parseJSON(errorData.response);
  177. if (errorData.status==422) {//验证错误
  178. $.each(response.errors,function (key,val) {
  179. qsToast({type:2,context: val[0]});
  180. return false;
  181. });
  182. }
  183. else if(errorData.status==400) {//业务错误
  184. qsToast({type:2,context: response.message});
  185. }
  186. }
  187. });
  188. };
  189. });
  190. // 倒计时
  191. var countdown = 60;
  192. function settime() {
  193. if (countdown == 0) {
  194. $('#getVerfyCode').removeClass('qs-btn-border-disabled');
  195. $('#getVerfyCode').text('获取验证码');
  196. countdown = 60;
  197. return;
  198. } else {
  199. $('#getVerfyCode').addClass('qs-btn-border-disabled');
  200. $('#getVerfyCode').text('重新发送' + countdown + '秒');
  201. countdown--;
  202. }
  203. setTimeout(function() {
  204. settime()
  205. },1000)
  206. }
  207. $('.gohome').on('click', function () {
  208. location.href="{{route($sub_site.'home')}}";
  209. });
  210. </script>
  211. @endsection