login.blade.php 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. @extends('module.layouts.empty')
  2. @push('meta')
  3. @endpush
  4. @push('css')
  5. <link href="{{ theme_asset('app/css/login.css') }}" rel="stylesheet">
  6. <link href="{{ theme_asset('app/css/common.css') }}" rel="stylesheet">
  7. @endpush
  8. @push('js')
  9. <script type="text/javascript" src="{{ theme_asset('gt/gt.js') }}"></script>
  10. <script type="text/javascript" src="{{ theme_asset('gt/gt.handle.js') }}"></script>
  11. <script src="https://captcha.253.com/TCaptcha.js"></script>
  12. @endpush
  13. @section('content')
  14. <div class="login-box">
  15. <div class="login-logo"><a href="{{route('home')}}"><img src="{{upload_asset(subsite_config('aix.system.site.site.logo'))}}" alt="logo"/></a></div>
  16. <!--个人会员登录-->
  17. <div class="login-box-per-body">
  18. <div class="login-box-header">
  19. <p class="gohome" onclick="window.location.href='{{route('home')}}'">返回首页</p>
  20. <p class="header-title">个人会员登录</p>
  21. <p onclick="window.location='{{route('login.company')}}'" class="rightab">切到企业登录</p>
  22. </div>
  23. <div class="login-form">
  24. <div class="form-l">
  25. <div class="switch-title">
  26. <span class="active" data-type="1">普通账户登录</span>
  27. <span data-type="2">手机动态码登录</span>
  28. </div>
  29. <!--普通用户登录-->
  30. <div class="login-type user-login">
  31. <form id="form_account" action="{{route('login.account')}}" method="post">
  32. <input type="hidden" name="ticket" id="ticket">
  33. <input type="hidden" name="bizState" id="bizState">
  34. <input type="hidden" name="randstr" id="randstr">
  35. {{ csrf_field() }}
  36. <div id="account"></div>
  37. <div id="message_account"></div>
  38. <div class="form-group yhm">
  39. <div class="imgbg"></div>
  40. <input class="input-login" type="text" value="" name="account" placeholder="{{trans('auth.member.account.placeholder')}}"/>
  41. </div>
  42. <div id="password"></div>
  43. <div class="form-group mm">
  44. <div class="imgbg"></div>
  45. <input class="input-login" type="password" value="" name="password" placeholder="请输入密码"/>
  46. </div>
  47. <div class="txt-group">
  48. <input type="checkbox" name="autoLogin" value="1" checked />
  49. <span class="check-box yes" onclick="checkAutoLogin(this)">下次自动登录</span>
  50. <a class="txt-r" href="{{route('password.request')}}?utype=user" >忘记密码?</a>
  51. </div>
  52. <div>
  53. <input class="btn-group login-account" type="button" value="登录">
  54. </div>
  55. </form>
  56. </div>
  57. <!--手机登录-->
  58. <div class="login-type mob-login" style="display: none;">
  59. <form id="form_mobile" action="{{route('login.sms')}}" method="post">
  60. <input type="hidden" name="ticket" id="ticket1">
  61. <input type="hidden" name="bizState" id="bizState1">
  62. <input type="hidden" name="randstr" id="randstr1">
  63. {{ csrf_field() }}
  64. <div id="mobile"></div>
  65. <div id="message_mobile"></div>
  66. <div class="form-group yhm">
  67. <div class="imgbg"></div>
  68. <input class="input-login" type="text" value="" name="mobile" placeholder="请输入手机号"/>
  69. </div>
  70. <div id="code"></div>
  71. <div class="form-group mm">
  72. <div class="imgbg"></div>
  73. <input class="input-login code" type="text" value="" name="code" placeholder="请输入手机验证码"/>
  74. <input type="button" class="btn-getcode" value="获取验证码"/>
  75. </div>
  76. <div class="txt-group">
  77. <input type="checkbox" name="autoLogin" value="1" checked />
  78. <span class="check-box yes" onclick="checkAutoLogin(this)">下次自动登录</span>
  79. <a class="txt-r" href="{{route('password.request')}}" >忘记密码?</a>
  80. </div>
  81. <div >
  82. <input class="btn-group login-mobile" type="button" value="登录">
  83. </div>
  84. </form>
  85. </div>
  86. <div class="reg-link-box">
  87. 还没有账号?<a class="reg-txt register_user" url="{{route('register.index')}}" href="javascript:;" >立刻注册</a>
  88. </div>
  89. </div>
  90. <div class="form-r">
  91. <div id="thirdlogin-wechat-web" class="qr-code">
  92. </div>
  93. <div id="other-thirdlogin" class="appsparent">
  94. <p class="txt">使用合作账号直接登录</p>
  95. </div>
  96. </div>
  97. <div class="clear"></div>
  98. </div>
  99. </div>
  100. <div class="bottom-pic">
  101. <img src="{{theme_asset('app/images/login/login_bottom_pic.png')}}" class="bottom-pic"/>
  102. </div>
  103. </div>
  104. @endsection
  105. @section('script')
  106. <script type="text/javascript" src="{{theme_asset('app/js/jquery.disappear.tooltip.js ')}}"></script>
  107. @include('module.widgets.thirdlogin')
  108. <script>
  109. $(function () {
  110. // var is_need_geetest=0;//全局,是否使用极验.
  111. // var login_type=1;//登录模式,1用户账号登录,2用户手机登录,3企业登录.
  112. // var gt_call_back=function(captchaObj) {
  113. // captchaObj.onReady(function () {
  114. // //极验加载完成
  115. // });
  116. // captchaObj.onSuccess(function () {
  117. // ajax_login(login_type,captchaObj);
  118. //
  119. // });
  120. // captchaObj.onError(function () {
  121. // show_error(login_type,"请先进行验证");
  122. // });
  123. // captchaObj.onClose(function () {
  124. // show_error(login_type,"请先进行验证");
  125. // });
  126. // $('.login-account').on('click', function () {
  127. // login_type=1;
  128. // //clean_message();
  129. // if (is_need_geetest==1){
  130. // captchaObj.bindForm("#form_account");
  131. // captchaObj.verify();
  132. // }
  133. // else{
  134. // ajax_login(login_type,captchaObj);
  135. // }
  136. //
  137. // });
  138. //
  139. // $('.login-mobile').on('click', function () {
  140. // login_type=2;
  141. // //clean_message();
  142. // if (is_need_geetest==1){
  143. // captchaObj.bindForm("#form_mobile");
  144. // captchaObj.verify();
  145. // }
  146. // else{
  147. // ajax_login(login_type,captchaObj);
  148. // }
  149. // });
  150. //
  151. // $('.login-company').on('click', function () {
  152. // login_type=3;
  153. // //clean_message();
  154. // if (is_need_geetest==1){
  155. // captchaObj.bindForm("#form_company");
  156. // captchaObj.verify();
  157. // }
  158. // else{
  159. // ajax_login(login_type,captchaObj);
  160. // }
  161. // });
  162. // };
  163. var captcha_callback = function(res){
  164. if(res.hasOwnProperty('errorMessage')){
  165. alert(res.errorMessage)
  166. }
  167. if(res.ret == 0){
  168. console.log('行为验证通过');
  169. $("#ticket").val(res.ticket);
  170. $("#bizState").val(res.bizState);
  171. $("#randstr").val(res.randstr);
  172. ajax_login(1);
  173. }else{
  174. console.log('用户主动关闭验证码')
  175. }
  176. console.log('callback:', res);
  177. }
  178. var mobile_captcha_flag = false;
  179. var mobile_captcha_callback = function(res){
  180. if(res.hasOwnProperty('errorMessage')){
  181. alert(res.errorMessage)
  182. }
  183. if(res.ret == 0){
  184. mobile_captcha_flag = true;
  185. console.log('行为验证通过');
  186. $("#ticket1").val(res.ticket);
  187. $("#bizState1").val(res.bizState);
  188. $("#randstr1").val(res.randstr);
  189. submit_data={
  190. "mobile":$("input[name='mobile']").val(),
  191. "type":"login"
  192. };
  193. $.ajax({
  194. method: 'post',
  195. url: '{{route('sms.send')}}',
  196. data: submit_data,
  197. beforeSend:function () {
  198. // console.log('请求开始');
  199. $(".errinfo").text("");
  200. $(".errinfo").removeClass("errinfo");
  201. },
  202. complete:function() {
  203. console.log('请求结束');
  204. },
  205. success: function (data) {
  206. // console.log(data);
  207. $("#message_mobile").addClass("successinfo");
  208. $("#message_mobile").text("发送成功,请注意查收");
  209. settime();
  210. },
  211. error: function (errorData) {
  212. // console.log(errorData);
  213. if (errorData.status==422) {//验证错误
  214. $.each(errorData.responseJSON.errors,function (key,val) {
  215. $("#"+key).addClass("errinfo");
  216. $("#"+key).text(val[0]);
  217. });
  218. }
  219. else if(errorData.status==400) {//业务错误
  220. $("#message_mobile").addClass("errinfo");
  221. $("#message_mobile").text(errorData.responseJSON.message);
  222. }
  223. }
  224. });
  225. }else{
  226. console.log('用户主动关闭验证码')
  227. }
  228. console.log('callback:', res);
  229. }
  230. var captcha = new TencentCaptcha('196587903', captcha_callback, {});
  231. $('.login-account').on('click', function () {
  232. captcha.show();
  233. });
  234. var mobile_captcha = new TencentCaptcha('196587903', mobile_captcha_callback, {});
  235. $('.btn-getcode').on('click', function () {
  236. mobile_captcha.show();
  237. });
  238. $('.login-mobile').on('click', function () {
  239. login_type=2;
  240. if (mobile_captcha_flag){
  241. ajax_login(2);
  242. }
  243. else{
  244. alert('验证码组件异常')
  245. }
  246. });
  247. //gt_init(gt_call_back);//初始化极验
  248. $(".input-login").keydown(function(ev){
  249. ev = ev || window.event;
  250. var code = (ev.keyCode || ev.which);
  251. if (code == 10 || code == 13) {
  252. $(this).closest("form").find(".btn-group").click();
  253. }
  254. });
  255. $(".switch-title span").click(function () {
  256. var index = $(this).index();
  257. $(this).addClass("active").siblings("span").removeClass("active");
  258. $(".login-type").eq(index).show().siblings(".login-type").hide();
  259. });
  260. $(".register_user").click(function(){
  261. var url=$(this).attr("url")
  262. $.getJSON("{{route('register.status')}}", function (result) {
  263. if (result.status == 0) {
  264. disapperTooltip('remind', result.msg);
  265. } else{
  266. location.href=url;
  267. }
  268. });
  269. })
  270. function ajax_login(type) {
  271. console.log(type)
  272. if (type==1) {
  273. $.ajax({
  274. method: 'post',
  275. url: $("#form_account").attr('action'),
  276. data: $("#form_account").serialize(),
  277. beforeSend:function () {
  278. //console.log('请求开始');
  279. clean_message();
  280. $('.login-account').addClass("btn-disabled").prop('disabled', true);
  281. $('.login-account').val("登录中...");
  282. },
  283. complete:function() {
  284. //console.log('请求结束');
  285. $('.login-account').val("登录");
  286. $('.login-account').removeClass("btn-disabled").prop('disabled', false);
  287. },
  288. success: function (data) {
  289. //console.log(data);
  290. $("#message_account").addClass("successinfo");
  291. $("#message_account").text("登录成功, 正在跳转...");
  292. location.href=data.data.redirect_url;
  293. },
  294. error: function (errorData) {
  295. if (errorData.status==422) {//验证错误
  296. $.each(errorData.responseJSON.errors,function (key,val) {
  297. $("#"+key).addClass("errinfo");
  298. $("#"+key).text(val[0]);
  299. });
  300. }
  301. else if(errorData.status==400) {//业务错误
  302. $("#message_account").addClass("errinfo");
  303. $("#message_account").text(errorData.responseJSON.message);
  304. }
  305. }
  306. });
  307. }
  308. else if (type==2) {
  309. $.ajax({
  310. method: 'post',
  311. url: $("#form_mobile").attr('action'),
  312. data: $("#form_mobile").serialize(),
  313. beforeSend:function () {
  314. //console.log('请求开始');
  315. clean_message();
  316. $('.login-mobile').addClass("btn-disabled").prop('disabled', true);
  317. $('.login-mobile').val("登录中...");
  318. },
  319. complete:function() {
  320. //console.log('请求结束');
  321. $('.login-mobile').val("登录");
  322. $('.login-mobile').removeClass("btn-disabled").prop('disabled', false);
  323. },
  324. success: function (data) {
  325. //console.log(data);
  326. $("#message_mobile").addClass("successinfo");
  327. $("#message_mobile").text("登录成功, 正在跳转...");
  328. location.href=data.data.redirect_url;
  329. },
  330. error: function (errorData) {
  331. //console.log(errorData);
  332. if (is_need_geetest==1){
  333. captchaObj.reset();
  334. }
  335. if (errorData.status==422) {//验证错误
  336. $.each(errorData.responseJSON.errors,function (key,val) {
  337. $("#"+key).addClass("errinfo");
  338. $("#"+key).text(val[0]);
  339. });
  340. }
  341. else if(errorData.status==400) {//业务错误
  342. $("#message_mobile").addClass("errinfo");
  343. $("#message_mobile").text(errorData.responseJSON.message);
  344. is_need_geetest=errorData.responseJSON.errors.is_need_geetest;
  345. }
  346. }
  347. });
  348. }
  349. else if (type==3){
  350. $.ajax({
  351. method: 'post',
  352. url: $("#form_company").attr('action'),
  353. data: $("#form_company").serialize(),
  354. beforeSend:function () {
  355. //console.log('请求开始');
  356. clean_message();
  357. $('.login-company').addClass("btn-disabled").prop('disabled', true);
  358. $('.login-company').val("登录中...");
  359. },
  360. complete:function() {
  361. //console.log('请求结束');
  362. $('.login-company').val("登录");
  363. $('.login-company').removeClass("btn-disabled").prop('disabled', false);
  364. },
  365. success: function (data) {
  366. //console.log(data);
  367. $("#message_company").addClass("successinfo");
  368. $("#message_company").text("登录成功, 正在跳转...");
  369. location.href=data.data.redirect_url;
  370. },
  371. error: function (errorData) {
  372. //console.log(errorData);
  373. if (is_need_geetest==1){
  374. captchaObj.reset();
  375. }
  376. if (errorData.status==422) {//验证错误
  377. $.each(errorData.responseJSON.errors,function (key,val) {
  378. $("#"+key).addClass("errinfo");
  379. $("#"+key).text(val[0]);
  380. });
  381. }
  382. else if(errorData.status==400) {//业务错误
  383. $("#message_company").addClass("errinfo");
  384. $("#message_company").text(errorData.responseJSON.message);
  385. is_need_geetest=errorData.responseJSON.errors.is_need_geetest;
  386. }
  387. }
  388. });
  389. }
  390. };
  391. function show_error(type,message) {
  392. if (type==1) {
  393. $("#message_account").addClass("errinfo");
  394. $("#message_account").text(message);
  395. }
  396. else if (type==2) {
  397. $("#message_mobile").addClass("errinfo");
  398. $("#message_mobile").text(message);
  399. }
  400. else if (type==3){
  401. $("#message_company").addClass("errinfo");
  402. $("#message_company").text(message);
  403. }
  404. };
  405. function clean_message() {
  406. $(".errinfo").text("");
  407. $(".errinfo").removeClass("errinfo");
  408. $(".successinfo").text("");
  409. $(".successinfo").removeClass("successinfo");
  410. }
  411. });
  412. function checkAutoLogin(obj) {
  413. var isCheck = $(obj).hasClass("yes");
  414. if (isCheck) {
  415. $(obj).removeClass("yes");
  416. $(obj).closest(".txt-group").find("input[name=autoLogin]").prop("checked", false);
  417. } else {
  418. $(obj).addClass("yes");
  419. $(obj).closest(".txt-group").find("input[name=autoLogin]").prop("checked", true);
  420. }
  421. }
  422. // 倒计时
  423. var countdown = 60;
  424. function settime() {
  425. if (countdown == 0) {
  426. $('.btn-getcode').prop("disabled", false);
  427. $('.btn-getcode').removeClass('btn-disabled');
  428. $('.btn-getcode').val('获取验证码');
  429. countdown = 60;
  430. return;
  431. } else {
  432. $('.btn-getcode').prop("disabled", true);
  433. $('.btn-getcode').addClass('btn-disabled');
  434. $('.btn-getcode').val('重新发送' + countdown + '秒');
  435. countdown--;
  436. }
  437. setTimeout(function() {
  438. settime()
  439. },1000)
  440. }
  441. </script>
  442. @endsection