From 78ff6697659b9714be19bdd863294b5bc3b2b1a4 Mon Sep 17 00:00:00 2001 From: yi-ge Date: Wed, 22 Jul 2020 14:07:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BE=AE=E4=BF=A1=E7=99=BB?= =?UTF-8?q?=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/post/_id.vue | 154 +++++++++++++++++++++++++++++-------------- static/css/begin.css | 2 +- 2 files changed, 106 insertions(+), 50 deletions(-) diff --git a/pages/post/_id.vue b/pages/post/_id.vue index 53614b6..92f4b0a 100644 --- a/pages/post/_id.vue +++ b/pages/post/_id.vue @@ -52,8 +52,16 @@ p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容 .comment-default-commit .login(v-if="!visitorToken") - img(class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;") - img(class="login-img", src="https://cdn.wyr.me/visitor-files/2020-07-21/1595344271134Weixin-Login.png", @click="login('weixin')") + img(v-show="!useWeixinLogin" class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;") + img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/Weixin-Login.png", @click="login('weixin')") + .comment-loading(v-show="commentLoading") + .allSpinner + .spinner + .bounce1 + .bounce2 + .bounce3 + img(v-show="!commentLoading && useWeixinLogin", class="weixin-qrcode", :src="weixinLoginQrcode") + p(v-show="!commentLoading && useWeixinLogin") 请使用微信扫码登录 #editor .comment-toolbar .comment-no-userinfo(v-if="!visitorToken") 尚未登陆 @@ -64,9 +72,17 @@ .comment-logout(@click="commentLogout") 退出 .comment-btn(@click="commentCommit('editor')") 发布 .comment-reply-commit(id="comment-reply-commit", v-show="replyID") - .login(v-show="!visitorToken", @click="login") - img(class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;") - img(class="login-img", src="https://cdn.wyr.me/visitor-files/2020-07-21/1595344271134Weixin-Login.png", @click="login('weixin')") + .login(v-show="!visitorToken") + img(v-show="!useWeixinLogin" class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;") + img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/Weixin-Login.png", @click="login('weixin')") + .comment-loading(v-show="commentLoading") + .allSpinner + .spinner + .bounce1 + .bounce2 + .bounce3 + img(v-show="!commentLoading && useWeixinLogin", class="weixin-qrcode", :src="weixinLoginQrcode") + p(v-show="!commentLoading && useWeixinLogin") 请使用微信扫码登录 #editor-reply .comment-toolbar .comment-no-userinfo(v-if="!visitorToken") 尚未登陆 @@ -152,7 +168,10 @@ export default { blog: null }, editorObj: null, - editorReplyObj: null + editorReplyObj: null, + commentLoading: false, + useWeixinLogin: false, + weixinLoginQrcode: null } }, mounted () { @@ -598,58 +617,63 @@ export default { this.visitorToken = null }, getCode (uuid, last) { - // $.ajax({ - // type: "GET", - // url: "https://weixin.openapi.site/check?uuid=" + uuid + (last ? '&last=' + last : ''), - // dataType: "json", - // cache: !1, - // timeout: 6e4, - // success: function (data) { - // if (data.status === 405) { - // $('#code').text('登陆成功，code = ' + data.result.code) - // } else if (data.status === 404) { - // $('#code').text(data.msg.title + ', ' + data.msg.content) - // getCode(uuid, data.result.wxErrCode) - // } else if (data.status === 403) { - // $('#code').text(data.msg.title + ', ' + data.msg.content) - // getCode(uuid, data.result.wxErrCode) - // } else if (data.status === 500) { - // getUUID() - // } else { - // setTimeout(function () { - // getCode(uuid) - // }, 2000) - // } - // }, - // error: function () { - // setTimeout(function () { - // getCode(uuid) - // }, 2000) - // } - // }) + try { + this.$axios({ + type: 'get', + url: 'https://weixin.openapi.site/check?uuid=' + uuid + (last ? '&last=' + last : ''), + timeout: 6e4 + }).then((res) => { + if (res.status === 405) { + alert(res.data.code) + } else if (res.status === 404) { + console.log(res) + this.getCode(uuid, res.data.wxErrCode) + } else if (res.status === 403) { + console.log(res) + this.getCode(uuid, res.data.wxErrCode) + } else if (res.status === 500) { + this.login('weixin') + } else { + setTimeout(() => { + this.getCode(uuid) + }, 2000) + } + }) + } catch (err) { + setTimeout(function () { + this.getCode(uuid) + }, 2000) + } }, async login (type) { if (type === 'github') { window.open('https://github.com/login/oauth/authorize?client_id=ce1673a37333e47e482d&redirect_uri=https://www.wyr.me/auth', 'Github授权', 'scrollbars=yes,resizable=yes,status=no,location=yes,toolbar=no,menubar=no,width=800,height=600,left=0,top=0') } else if (type === 'weixin') { - const { data } = await this.$axios.get('https://weixin.openapi.site/img?appid=wx2d1d6aa2f86768d7&redirect_uri=https://wyr.me') + this.useWeixinLogin = true + this.commentLoading = true + try { + const { data } = await this.$axios.get('https://weixin.openapi.site/img?appid=wx2d1d6aa2f86768d7&redirect_uri=https://wyr.me') - if (data.status === 1) { - const uuid = data.result.wxUUID - // $('#qrcode').attr('src', data.result.imgData) - // getCode(uuid) - console.log(uuid) - } else { - this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', { + if (data.status === 1) { + const uuid = data.result.wxUUID + this.weixinLoginQrcode = data.result.imgData + this.getCode(uuid) + this.commentLoading = false + } else { + this.commentLoading = false + this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', { + position: 'top-center', + duration: 5000 + }) + } + } catch (err) { + this.commentLoading = false + this.useWeixinLogin = false + this.$toasted.show('暂时无法使用Github登录，请尝试其它登录方式或重试。', { position: 'top-center', duration: 5000 }) } - - this.$toasted.show('敬请期待，请先使用Github登录', { - position: 'top-center', - duration: 5000 - }) } else { this.$toasted.show('敬请期待', { position: 'top-center', @@ -938,12 +962,44 @@ export default { user-select none img + width auto + + .login-img margin 70px 20px 0 20px z-index 100 position absolute .login-img:hover - filter contrast(50%) + filter contrast(20%) + + .comment-loading + position relative + width 100% + height 100% + + .allSpinner + position absolute + top 0 + left 0 + z-index 999999 + width 100% + height 100% + background-color #fff + + .spinner + position absolute + top 50% + left 50% + z-index 9999999 + margin 75pt auto 0 + margin-top -1pc + margin-left -75px + width 150px + text-align center + + .weixin-qrcode + width 250px + margin-top 10px .login:hover background-color #fff diff --git a/static/css/begin.css b/static/css/begin.css index 6eb4258..f650928 100644 --- a/static/css/begin.css +++ b/static/css/begin.css @@ -1 +1 @@ -.allSpinner{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background-color:#fff}.spinner{position:fixed;top:50%;left:50%;z-index:9999999;margin:75pt auto 0;margin-top:-1pc;margin-left:-75px;width:150px;text-align:center}.spinner>div{display:inline-block;width:30px;height:30px;border-radius:100%;background-color:#67cf22;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}} +.allSpinner{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;background-color:#fff}.spinner{position:fixed;top:50%;left:50%;z-index:9999999;margin:75pt auto 0;margin-top:-1pc;margin-left:-75px;width:150px;text-align:center}.spinner>div{display:inline-block;width:30px;height:30px;border-radius:100%;background-color:#272727;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}