login.php 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <?php
  2. /* @var $this yii\web\View */
  3. /* @var $form yii\bootstrap4\ActiveForm */
  4. /* @var $model LoginForm */
  5. use common\forms\LoginForm;
  6. use yii\bootstrap4\ActiveForm;
  7. use yii\bootstrap4\Html;
  8. use yii\captcha\Captcha;
  9. use backend\assets\BaseAsset;
  10. use yii\helpers\Url;
  11. BaseAsset::register($this);
  12. $this->title = Yii::$app->params['adminTitle'];
  13. ?>
  14. <style>
  15. .login-box {
  16. width: 360px;
  17. margin: 7% auto;
  18. }
  19. .wechat-qr-box {
  20. height: 178px;
  21. width: 178px;
  22. top: 10px
  23. }
  24. .wechat-qr-img {
  25. height: 178px;
  26. width: 178px;
  27. padding: 10px;
  28. border: 1px solid #e8eaec;
  29. margin-left: 80px
  30. }
  31. .wechat-qr-shade {
  32. background-color: rgba(0, 0, 0, 0.7);
  33. width: 100%;
  34. height: 100%;
  35. left: 80px;
  36. overflow: hidden;
  37. position: absolute;
  38. right: -2px;
  39. top: -2px;
  40. z-index: 10;
  41. }
  42. .wechat-qr-shade-loading-text,
  43. .wechat-qr-shade-lose-text {
  44. position: relative;
  45. top: 70px;
  46. color: #d2d2d2
  47. }
  48. </style>
  49. <?php $this->beginPage() ?>
  50. <!DOCTYPE html>
  51. <html lang="<?= Yii::$app->language ?>">
  52. <head>
  53. <meta charset="<?= Yii::$app->charset ?>">
  54. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  55. <meta name="renderer" content="webkit">
  56. <?= Html::csrfMetaTags() ?>
  57. <title><?= Html::encode($this->title) ?></title>
  58. <?php $this->head() ?>
  59. </head>
  60. <body class="login-page">
  61. <?php $this->beginBody() ?>
  62. <div class="login-box">
  63. <div class="login-logo">
  64. <?= Html::encode(Yii::$app->params['adminTitle']); ?>
  65. </div>
  66. <!-- /.login-logo -->
  67. <div class="card card-primary card-outline card-outline-tabs">
  68. <div class="card-header border-bottom-0 <?= !empty($hasWechat) ? '' : 'hide'; ?>">
  69. <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist" style="padding-left: 70px">
  70. <li class="nav-item">
  71. <a class="nav-link active" data-toggle="pill" href="#custom-1">账号登录</a>
  72. </li>
  73. <li class="nav-item wechat-login">
  74. <a class="nav-link" data-toggle="pill" href="#custom-2">二维码登录</a>
  75. </li>
  76. </ul>
  77. </div>
  78. <div class="card-body login-card-body">
  79. <div class="tab-content" id="custom-tabs-four-tabContent">
  80. <div class="tab-pane fade active show" id="custom-1">
  81. <p class="login-box-msg <?= empty($hasWechat) ? '' : 'hide'; ?>">Welcome to</p>
  82. <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
  83. <?= $form->field($model, 'username')->textInput(['placeholder' => '登录账号'])->label(false); ?>
  84. <?= $form->field($model, 'password')->passwordInput(['placeholder' => '登录密码'])->label(false); ?>
  85. <?php if ($model->scenario == 'captchaRequired') { ?>
  86. <?= $form->field($model, 'verifyCode')->widget(Captcha::class, [
  87. 'template' => '<div class="row"><div class="col-sm-7">{input}</div><div class="col-sm-5">{image}</div></div>',
  88. 'imageOptions' => [
  89. 'alt' => '点击换图',
  90. 'title' => '点击换图',
  91. 'style' => 'cursor:pointer',
  92. ],
  93. 'options' => [
  94. 'class' => 'form-control',
  95. 'placeholder' => '验证码',
  96. ],
  97. ])->label(false); ?>
  98. <?php } ?>
  99. <?= $form->field($model, 'rememberMe')->checkbox() ?>
  100. <div class="form-group">
  101. <?= Html::submitButton('立即登录',
  102. ['class' => 'btn btn-primary btn-block', 'name' => 'login-button']) ?>
  103. </div>
  104. <?php ActiveForm::end(); ?>
  105. </div>
  106. <div class="tab-pane fade" id="custom-2">
  107. <div class="text-center">
  108. <span class="help">请使用 "微信扫一扫" 进行登录</span><br>
  109. <div class="position-relative wechat-qr-box">
  110. <img src="<?= Url::to(['qr', 'url' => 'loading'])?>" class="wechat-qr-img">
  111. <div class="wechat-qr-shade">
  112. <div class="wechat-qr-shade-loading-text pt-2">
  113. 加载中...
  114. </div>
  115. <div class="wechat-qr-shade-lose-text hide">
  116. <span class="pb-3">二维码已过期</span><br>
  117. <span class="blue pointer" onclick="initWechatLoginQr()">刷新</span>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="pt-3">
  122. <span class="help wechat-lose hide">二维码已过期</span>
  123. <span class="help wechat-expire-seconds">剩余有效期 <span id="expire-seconds">300</span> 秒</span>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="social-auth-links text-center">
  129. <p><?= Html::encode(Yii::$app->services->config->backendConfig('web_copyright')); ?></p>
  130. </div>
  131. </div>
  132. <!-- /.login-card-body -->
  133. </div>
  134. </div>
  135. <script>
  136. //判断是否存在父窗口
  137. if (window.parent !== this.window) {
  138. parent.location.reload();
  139. }
  140. // 配置
  141. let config = {
  142. tag: "<?= Yii::$app->services->config->backendConfig('sys_tags') ?? false; ?>",
  143. isMobile: "<?= Yii::$app->params['isMobile'] ?? false; ?>",
  144. };
  145. var timer;
  146. var ticket;
  147. $('.wechat-login').click(function () {
  148. initWechatLoginQr();
  149. })
  150. // 启动重新
  151. function initWechatLoginQr() {
  152. clearInterval(timer);
  153. ticket = '';
  154. // 底部文字显示
  155. $(".wechat-expire-seconds").removeClass('hide');
  156. $(".wechat-lose").addClass('hide');
  157. // 遮罩(显示加载中)
  158. $('.wechat-qr-shade').removeClass('hide');
  159. $('.wechat-qr-shade-lose-text').addClass('hide');
  160. $('.wechat-qr-shade-loading-text').removeClass('hide');
  161. $.ajax({
  162. type: "get",
  163. url: "<?= Url::to(['get-wechat-login-qr'])?>",
  164. dataType: "json",
  165. success: function (data) {
  166. if (parseInt(data.code) !== 200) {
  167. rfMsg(data.message);
  168. } else {
  169. $('.wechat-qr-img').attr('src', '<?= Url::to(['qr'])?>' + '?url=' + data.data.url);
  170. $('.wechat-qr-shade').addClass('hide');
  171. $('#expire-seconds').text(data.data.expire_seconds);
  172. timer = setInterval(setTime, 1000);
  173. ticket = data.data.ticket;
  174. }
  175. }
  176. });
  177. }
  178. // 定时器启动
  179. function setTime() {
  180. var seconds = $("#expire-seconds").text();
  181. if (parseInt(seconds) > 0) {
  182. $("#expire-seconds").text(parseInt(seconds) - 1);
  183. // 判断登录
  184. $.ajax({
  185. type: "get",
  186. url: "<?= Url::to(['wechat-login'])?>",
  187. dataType: "json",
  188. data: {ticket: ticket},
  189. success: function (data) {
  190. if (parseInt(data.code) === 200) {
  191. window.location.href = "<?= Url::to(Yii::$app->getHomeUrl())?>";
  192. }
  193. }
  194. });
  195. } else {
  196. // 底部文字显示
  197. $(".wechat-expire-seconds").addClass('hide');
  198. $(".wechat-lose").removeClass('hide');
  199. // 遮罩(显示二维码过期)
  200. $('.wechat-qr-shade').removeClass('hide');
  201. $('.wechat-qr-shade-lose-text').removeClass('hide');
  202. $('.wechat-qr-shade-loading-text').addClass('hide');
  203. // 去除定时器
  204. clearInterval(timer);
  205. }
  206. }
  207. </script>
  208. <?php $this->endBody() ?>
  209. </body>
  210. </html>
  211. <?php $this->endPage() ?>
粤ICP备19079148号