official_bind.blade.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. @extends('module.layouts.empty')
  2. @push('meta')
  3. @endpush
  4. @push('css')
  5. <style type="text/css">
  6. body,html {
  7. margin:0;
  8. padding:0;
  9. height:100%
  10. }
  11. body {
  12. background-color: rgb(51, 51, 51) !important; padding: 50px;
  13. }
  14. a {
  15. outline:0
  16. }
  17. h1,h2,h3,h4,h5,h6,p {
  18. margin:0;
  19. font-weight:400
  20. }
  21. a img,fieldset {
  22. border:0
  23. }
  24. body {
  25. font-family:"Microsoft Yahei";
  26. color:#fff;
  27. background:0 0
  28. }
  29. .impowerBox,.impowerBox .status_icon,.impowerBox .status_txt,.redesign-style_page .redesign-login__wrp {
  30. display:inline-block;
  31. vertical-align:middle
  32. }
  33. .impowerBox {
  34. line-height:1.6;
  35. position:relative;
  36. width:100%;
  37. z-index:1;
  38. text-align:center
  39. }
  40. .impowerBox .title {
  41. text-align:center;
  42. font-size:20px
  43. }
  44. .impowerBox .qrcode {
  45. width:280px;
  46. margin-top:15px;
  47. border:1px solid #E2E2E2
  48. }
  49. .impowerBox .info {
  50. width:280px;
  51. margin:0 auto
  52. }
  53. .impowerBox .status {
  54. padding:7px 14px;
  55. text-align:left
  56. }
  57. .impowerBox .status.status_browser,.redesign-msg {
  58. text-align:center
  59. }
  60. .impowerBox .status.normal {
  61. margin-top:15px;
  62. background-color:#232323;
  63. border-radius:100px;
  64. -moz-border-radius:100px;
  65. -webkit-border-radius:100px;
  66. box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444;
  67. -moz-box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444;
  68. -webkit-box-shadow:inset 0 5px 10px -5px #191919,0 1px 0 0 #444
  69. }
  70. .impowerBox .status p {
  71. font-size:13px
  72. }
  73. .impowerBox .status_icon {
  74. margin-right:5px
  75. }
  76. .impowerBox .status_txt p {
  77. top:-2px;
  78. position:relative;
  79. margin:0
  80. }
  81. .impowerBox .icon38_msg {
  82. display:inline-block;
  83. width:38px;
  84. height:38px
  85. }
  86. .impowerBox .icon38_msg.succ {
  87. background:url(images/icon_popup3696b4.png)0 -46px no-repeat
  88. }
  89. .impowerBox .icon38_msg.warn {
  90. background:url(images/icon_popup3696b4.png)0 -87px no-repeat
  91. }
  92. .new-template {
  93. height:100%
  94. }
  95. .qrcode-image {
  96. width:272px;
  97. height:272px;
  98. margin-top:44px;
  99. margin-bottom:30px
  100. }
  101. </style>
  102. @endpush
  103. @push('js')
  104. @endpush
  105. @section('content')
  106. <div class="old-template" style="">
  107. <div class="main impowerBox">
  108. <div class="loginPanel normalPanel">
  109. <div class="title">微信登录</div>
  110. <div class="waiting panelContent">
  111. <div class="wrp_code" id="thirdlogin-wechat-web"></div>
  112. <div class="info">
  113. <div class="status status_browser js_status js_wx_default_tip normal" id="wx_default_tip">
  114. <p>请使用微信扫描二维码登录</p>
  115. <p>“扫描后登录成功即可绑定账号”</p>
  116. </div>
  117. <div class="status status_succ js_status js_wx_after_scan normal" style="display:none" id="wx_after_scan">
  118. <i class="status_icon icon38_msg succ"></i>
  119. <div class="status_txt">
  120. <h4>扫描成功</h4>
  121. <p>请在微信中点击确认即可登录</p>
  122. </div>
  123. </div>
  124. <div class="status status_fail js_status js_wx_after_cancel normal" style="display:none" id="wx_after_cancel">
  125. <i class="status_icon icon38_msg warn"></i>
  126. <div class="status_txt">
  127. <h4>您已取消此次登录</h4>
  128. <p>您可再次扫描登录,或关闭窗口</p>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. @endsection
  137. @section('script')
  138. @php
  139. try{
  140. $wechatService=app('App\Services\Common\WechatService');
  141. $officil=$wechatService->getOfficialAccount();
  142. $qrcode=$officil->qrcode->temporary('BindEvent', 30*60);
  143. $qrcode_url=$officil->qrcode->url($qrcode['ticket']);
  144. }catch(Exception $e){
  145. $qrcode_url = "请在公众内添加ip白名单";
  146. $qrcode['ticket']="please set ip in the official";
  147. }
  148. @endphp
  149. <script>
  150. $(function () {
  151. //初始化微信登录
  152. var official_qrcode='<img class="qrcode lightBorder" src="{!! $qrcode_url !!}">';
  153. $('#thirdlogin-wechat-web').append(official_qrcode);
  154. setInterval(function () {
  155. $.ajax({
  156. method: 'get',
  157. url: "{{route('jkq.auth.thirdlogin.official.bindcheck', ['ticket'=>$qrcode['ticket']])}}",
  158. success: function (data) {
  159. //console.log(data);
  160. if (data.data.is_login == 1) {
  161. location.href="{{route('jkq.auth.thirdlogin.official.bindcheck', ['ticket'=>$qrcode['ticket']])}}";
  162. }
  163. }
  164. });
  165. }, 1000);
  166. });
  167. </script>
  168. @endsection