login.blade.php 19 KB

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