com_auth_mobile.blade.php 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. @extends('mobile.module.layouts.content')
  2. @push('meta')
  3. @endpush
  4. @push('css')
  5. <link rel="stylesheet" href="{{theme_asset('mobile/css/company.css')}}">
  6. @endpush
  7. @push('js')
  8. @endpush
  9. @section('content')
  10. <div class="mui-content">
  11. @if($mobile_audit == 0)
  12. <div class="split-block-title">手机认证后,您可以用手机号登录和找回密码!</div>
  13. @else
  14. <div class="split-block-title font_blue">当前手机已认证,修改手机后您的登录手机号将同步修改</div>
  15. @endif
  16. <form action="post" id="logingForm">
  17. <div class="loging-input-group">
  18. <div class="group-list mobile">
  19. <input id="mobile" name="mobile" type="text" class="l-input font14" placeholder="请输入手机号码" autocomplete="off" @if(!$mobile_audit) value="{{ $mobile or '' }}" @endif @if($mobile_audit ==1) mobile="{{ $mobile }}" @endif>
  20. <a href="javascript:;" id="getVerfyCode" class="qs-btn qs-btn-inline qs-btn-medium qs-btn-border-gray font14">获取验证码</a>
  21. </div>
  22. <div class="group-list verfy">
  23. <input id="verifycode" name="verifycode" type="text" class="l-input font14" placeholder="请输入手机验证码" autocomplete="off">
  24. </div>
  25. </div>
  26. <div id="pop" style="display:none"></div>
  27. <input type="hidden" id="mobileVerify" value="0">
  28. </form>
  29. <div class="split-block"></div>
  30. <div class="btn-spacing">
  31. <a id="loginBtn" href="javascript:;" class="qs-btn qs-btn-blue font18">提交</a>
  32. </div>
  33. </div>
  34. @endsection
  35. @section('script')
  36. <script type="text/javascript">
  37. var timer,ountdownVal = 180,
  38. ountdown = function(){
  39. ountdownVal--;
  40. if(ountdownVal<=0){
  41. clearInterval(timer);
  42. ountdownVal = 180;
  43. $('#getVerfyCode').html('获取验证码').removeClass('qs-btn-border-disabled').prop('disabled', 0);
  44. }else{
  45. $('#getVerfyCode').html('重新发送'+ ountdownVal +'秒').addClass('qs-btn-border-disabled').prop('disabled', !0);
  46. }
  47. };
  48. /**
  49. * ajax 登录
  50. */
  51. function doAjax() {
  52. $('#pop').hide();
  53. var mobile = $.trim($('#mobile').val());
  54. $.ajax({
  55. url:"{{ route($sub_site.'mobile.firm.com.verify.code') }}",
  56. type:"POST",
  57. data:{mobile:mobile,id:"{{ $user->id }}",_token:"{{ csrf_token() }}"},
  58. success:function(result){
  59. if(result.status == 1){
  60. qsToast({type:1,context: result.msg});
  61. timer=setInterval(ountdown,1000);
  62. }else{
  63. qsToast({type:2,context: result.msg});
  64. }
  65. },
  66. error: function (errorData) {
  67. var response=$.parseJSON(errorData.response);
  68. if (errorData.status==422) {//验证错误
  69. // console.log(errorData);return ;
  70. $.each(response.errors,function (key,val) {
  71. qsToast({type:2,context: val[0]});
  72. });
  73. }
  74. else if(errorData.status==400) {//业务错误
  75. qsToast({type:2,context: response.message});
  76. }
  77. },
  78. });
  79. }
  80. /**
  81. * 配置极验
  82. */
  83. // $.ajax({
  84. // url: qscms.root+'?m=Mobile&c=captcha&type=mobile&t=' + (new Date()).getTime(),
  85. // type: 'get',
  86. // dataType: 'json',
  87. // success: function(config) {
  88. // initGeetest({
  89. // gt: config.gt,
  90. // challenge: config.challenge,
  91. // offline: !config.success
  92. // }, function(captchaObj) {
  93. // captchaObj.appendTo("#pop");
  94. // captchaObj.onSuccess(function() {
  95. // doAjax();
  96. // });
  97. // window.captchaObj = captchaObj
  98. // });
  99. // }
  100. // });
  101. $('#getVerfyCode').on('click',function(){
  102. if(ountdownVal<180) return false;
  103. var mobile = $.trim($('#mobile').val());
  104. if (mobile == '') {
  105. qsToast({type:2,context: '请输入手机号'});
  106. return false;
  107. }
  108. if($('#mobile').attr('mobile') == mobile){
  109. qsToast({type:2,context: '你的手机号已经通过认证!'});
  110. return false;
  111. }
  112. if (eval($('#mobileVerify').val())) {
  113. window.captchaObj.refresh();
  114. $('#pop').show();
  115. } else {
  116. doAjax();
  117. }
  118. });
  119. /**
  120. * 登录验证
  121. */
  122. $('#loginBtn').on('click', function(e) {
  123. var mobile = $.trim($('#mobile').val());
  124. var verifycode = $.trim($('#verifycode').val());
  125. if (mobile == '') {
  126. qsToast({type:2,context: '请输入手机号'});
  127. return false;
  128. }
  129. if (verifycode == '') {
  130. qsToast({type:2,context: '请输入验证码'});
  131. return false;
  132. }
  133. $.ajax({
  134. url:"{{ route($sub_site.'mobile.firm.com.mobile.auth') }}",
  135. type:"POST",
  136. data:{verifycode:verifycode,mobile:mobile,_token:"{{ csrf_token() }}"},
  137. success:function(result){
  138. if(result.status == 1){
  139. qsToast({type:1,context: result.msg});
  140. setTimeout(function(){
  141. window.location.href="{{ route($sub_site.'mobile.firm.com.security') }}";
  142. },2000);
  143. }else{
  144. qsToast({type:2,context: result.msg});
  145. }
  146. },
  147. error: function (errorData) {
  148. var response=$.parseJSON(errorData.response);
  149. if (errorData.status==422) {//验证错误
  150. // console.log(errorData);return ;
  151. $.each(response.errors,function (key,val) {
  152. qsToast({type:2,context: val[0]});
  153. });
  154. }
  155. else if(errorData.status==400) {//业务错误
  156. qsToast({type:2,context: response.message});
  157. }
  158. },
  159. });
  160. });
  161. </script>
  162. @endsection