login_mobile_back.blade.php 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  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. <script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
  9. <script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
  10. <script src="https://captcha.253.com/TCaptcha.js"></script>
  11. @endpush
  12. @section('content')
  13. <div class="qs-top-nav x2 list_height">
  14. <div class="n-cell" onclick="javascript:location.href='{{route($sub_site.'mobile.login')}}'">账号密码登录<div class="b-line"></div></div>
  15. <div class="n-cell active">手机动态码登录<div class="b-line"></div></div>
  16. <div class="clear"></div>
  17. </div>
  18. <div class="split-block"></div>
  19. <form method="post" id="form_mobile" action="{{route($sub_site.'mobile.login.mobile')}}" >
  20. {{csrf_field()}}
  21. <div class="loging-input-group">
  22. <div class="group-list mobile">
  23. <input id="mobile" name="mobile" type="text" class="l-input font14" placeholder="请输入手机号码" autocomplete="off">
  24. <a href="javascript:;" id="getVerfyCode" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-border-gray font14 btn-getcode">获取验证码</a>
  25. </div>
  26. <div class="group-list verfy">
  27. <input id="code" name="code" type="text" class="l-input font14" placeholder="请输入验证码" autocomplete="off">
  28. </div>
  29. </div>
  30. <div class="l-tool-bar list_height">
  31. <div class="auto-loging">
  32. <div class="for-checkbox active" id="for-checkbox">下次自动登录</div>
  33. </div>
  34. <div class="for-pwd link_gray6"><a href="{{route($sub_site.'mobile.password.request')}}">忘记密码</a></div>
  35. <div class="clear"></div>
  36. </div>
  37. <div id="pop" style="display:none"></div>
  38. <input type="hidden" name="autoLogin" id="autoLogin" value="1" >
  39. </form>
  40. <div class="btn-spacing login-mobile"><a id="loginBtn" href="javascript:;" class="qs-btn qs-btn-blue font18">验证并登录</a></div>
  41. <div class="qs-center login-btn-group">
  42. <div class="login-btn-group-box">
  43. <a href="{{route($sub_site.'mobile.register.index')}}" class="qs-btn qs-btn-medium qs-btn-border-orange font14" style="width: 2.45rem;">立即注册</a>
  44. <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>
  45. <div class="clear"></div>
  46. </div>
  47. </div>
  48. <div class="qs-center coop-title">使用合作账号登录/注册</div>
  49. <div class="coop-group qs-center" >
  50. <div class="coop-cell" id="other-thirdlogin">
  51. </div>
  52. <div class="clear"></div>
  53. </div>
  54. @endsection
  55. @section('script')
  56. @include('mobile.module.widgets.thirdlogin')
  57. <script>
  58. $(function () {
  59. var is_need_geetest=0;//全局,是否使用极验.
  60. var login_type=1;//登录模式,1用户账号登录,2用户手机登录,3企业登录.
  61. var gt_call_back=function(captchaObj) {
  62. captchaObj.onReady(function () {
  63. //极验加载完成
  64. });
  65. captchaObj.onSuccess(function () {
  66. ajax_login(login_type,captchaObj);
  67. });
  68. captchaObj.onError(function () {
  69. show_error(login_type,"请先进行验证");
  70. });
  71. captchaObj.onClose(function () {
  72. show_error(login_type,"请先进行验证");
  73. });
  74. $('.login-account').on('click', function () {
  75. // var usernameValue = $.trim($('input[name=account]').val());
  76. // var passwordValue = $.trim($('input[name=password]').val());
  77. // if (usernameValue == '') {
  78. // qsToast({type:2,context: '请输入账户名/手机号/邮箱'});
  79. // return false;
  80. // }
  81. // if (passwordValue == '') {
  82. // qsToast({type:2,context: '请输入密码'});
  83. // return false;
  84. // }
  85. login_type=1;
  86. //clean_message();
  87. if (is_need_geetest==1){
  88. captchaObj.bindForm("#form_account");
  89. captchaObj.verify();
  90. }
  91. else{
  92. ajax_login(login_type,captchaObj);
  93. }
  94. });
  95. $('.login-mobile').on('click', function () {
  96. var usernameValue = $.trim($('input[name=mobile]').val());
  97. var passwordValue = $.trim($('input[name=code]').val());
  98. if (usernameValue == '') {
  99. qsToast({type:2,context: '请输入手机号'});
  100. return false;
  101. }
  102. if (passwordValue == '') {
  103. qsToast({type:2,context: '请输入验证码'});
  104. return false;
  105. }
  106. login_type=2;
  107. //clean_message();
  108. if (is_need_geetest==1){
  109. captchaObj.bindForm("#form_mobile");
  110. captchaObj.verify();
  111. }
  112. else{
  113. ajax_login(login_type,captchaObj);
  114. }
  115. });
  116. $('.login-company').on('click', function () {
  117. login_type=3;
  118. //clean_message();
  119. if (is_need_geetest==1){
  120. captchaObj.bindForm("#form_company");
  121. captchaObj.verify();
  122. }
  123. else{
  124. ajax_login(login_type,captchaObj);
  125. }
  126. });
  127. };
  128. var mobile_captcha_flag = false;
  129. var mobile_captcha_callback = function(res){
  130. if(res.hasOwnProperty('errorMessage')){
  131. alert(res.errorMessage)
  132. }
  133. if(res.ret == 0){
  134. mobile_captcha_flag = true;
  135. console.log('行为验证通过');
  136. $("#ticket1").val(res.ticket);
  137. $("#bizState1").val(res.bizState);
  138. $("#randstr1").val(res.randstr);
  139. submit_data={
  140. "mobile":$("input[name='mobile']").val(),
  141. "type":"login",
  142. "ticket": res.ticket,
  143. "bizState": res.bizState,
  144. "randstr": res.randstr
  145. };
  146. $.ajax({
  147. type: 'post',
  148. url: '{{route('sms.send')}}',
  149. data: submit_data,
  150. beforeSend:function () {
  151. // console.log('请求开始');
  152. // $(".errinfo").text("");
  153. // $(".errinfo").removeClass("errinfo");
  154. },
  155. complete:function() {
  156. console.log('请求结束');
  157. },
  158. success: function (data) {
  159. // console.log(data);
  160. qsToast({type:2,context: '验证码已发送,请注意查收'});
  161. settime();
  162. },
  163. error: function (errorData) {
  164. // console.log(errorData);
  165. if (countdown == 60) {
  166. $('#getVerfyCode').removeClass('qs-btn-border-disabled');
  167. $('#getVerfyCode').text('获取验证码');
  168. }
  169. var response=$.parseJSON(errorData.response);
  170. if (errorData.status==422) {//验证错误
  171. $.each(response.errors,function (key,val) {
  172. qsToast({type:2,context: val[0]});
  173. return false;
  174. });
  175. }
  176. else if(errorData.status==400) {//业务错误
  177. qsToast({type:2,context: response.message});
  178. //is_need_geetest=response.errors.is_need_geetest;
  179. }
  180. }
  181. });
  182. }else{
  183. console.log('用户主动关闭验证码')
  184. }
  185. console.log('callback:', res);
  186. }
  187. var mobile_captcha = new TencentCaptcha('196587903', mobile_captcha_callback, {});
  188. $('.btn-getcode').on('click', function () {
  189. var mobile = $.trim($('input[name=mobile]').val());
  190. if (mobile == '') {
  191. qsToast({type:2,context: '请输入手机号码'});
  192. return false;
  193. }
  194. if ($('#getVerfyCode').hasClass('qs-btn-border-disabled')) {
  195. return false;
  196. }
  197. mobile_captcha.show();
  198. });
  199. $('.login-mobile').on('click', function () {
  200. login_type=2;
  201. if (mobile_captcha_flag){
  202. ajax_login();
  203. }
  204. else{
  205. alert('验证码组件异常')
  206. }
  207. });
  208. $(".input-login").keydown(function(ev){
  209. ev = ev || window.event;
  210. var code = (ev.keyCode || ev.which);
  211. if (code == 10 || code == 13) {
  212. $(this).closest("form").find(".btn-group").click();
  213. }
  214. });
  215. // 自动登录
  216. $('#for-checkbox').on('click', function() {
  217. $(this).toggleClass('active');
  218. if ($(this).hasClass('active')) {
  219. $('#autoLogin').val('1');
  220. } else {
  221. $('#autoLogin').val('0');
  222. }
  223. })
  224. function ajax_login() {
  225. $.ajax({
  226. type: 'post',
  227. url: $("#form_mobile").attr('action'),
  228. data: $("#form_mobile").serialize(),
  229. beforeSend:function () {
  230. //console.log('请求开始');
  231. },
  232. complete:function() {
  233. //console.log('请求结束');
  234. },
  235. success: function (data) {
  236. //console.log(data);
  237. qsToast({type:2,context: "登录成功, 正在跳转..."});
  238. location.href=data.data.redirect_url+'?token='+data.data.token;;
  239. },
  240. error: function (errorData) {
  241. var response=$.parseJSON(errorData.response);
  242. // if (is_need_geetest==1){
  243. // captchaObj.reset();
  244. // }
  245. if (errorData.status==422) {//验证错误
  246. $.each(response.errors,function (key,val) {
  247. qsToast({type:2,context: val[0]});
  248. return false;
  249. });
  250. }
  251. else if(errorData.status==400) {//业务错误
  252. qsToast({type:2,context: response.message});
  253. //is_need_geetest=response.errors.is_need_geetest;
  254. }
  255. }
  256. });
  257. };
  258. });
  259. // 倒计时
  260. var countdown = 60;
  261. function settime() {
  262. if (countdown == 0) {
  263. $('#getVerfyCode').removeClass('qs-btn-border-disabled');
  264. $('#getVerfyCode').text('获取验证码');
  265. countdown = 60;
  266. return;
  267. } else {
  268. $('#getVerfyCode').addClass('qs-btn-border-disabled');
  269. $('#getVerfyCode').text('重新发送' + countdown + '秒');
  270. countdown--;
  271. }
  272. setTimeout(function() {
  273. settime()
  274. },1000)
  275. }
  276. $('.gohome').on('click', function () {
  277. location.href="{{route($sub_site.'home')}}";
  278. });
  279. </script>
  280. @endsection