yige/blog-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加微信登录

Browse Source
This commit is contained in:
yi-ge 2020-07-22 14:07:07 +08:00
parent dd78f3af82
commit 78ff669765
2 changed files with 106 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
pages/post/_id.vue
View File

@ -52,8 +52,16 @@
p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容 p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
.comment-default-commit .comment-default-commit
.login(v-if="!visitorToken") .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(v-show="!useWeixinLogin" 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/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 #editor
.comment-toolbar .comment-toolbar
.comment-no-userinfo(v-if="!visitorToken") 尚未登陆 .comment-no-userinfo(v-if="!visitorToken") 尚未登陆
@ -64,9 +72,17 @@
.comment-logout(@click="commentLogout") 退出 .comment-logout(@click="commentLogout") 退出
.comment-btn(@click="commentCommit('editor')") 发布 .comment-btn(@click="commentCommit('editor')") 发布
.comment-reply-commit(id="comment-reply-commit", v-show="replyID") .comment-reply-commit(id="comment-reply-commit", v-show="replyID")
.login(v-show="!visitorToken", @click="login") .login(v-show="!visitorToken")
img(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/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/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 #editor-reply
.comment-toolbar .comment-toolbar
.comment-no-userinfo(v-if="!visitorToken") 尚未登陆 .comment-no-userinfo(v-if="!visitorToken") 尚未登陆
@ -152,7 +168,10 @@ export default {
blog: null blog: null
}, },
editorObj: null, editorObj: null,
editorReplyObj: null editorReplyObj: null,
commentLoading: false,
useWeixinLogin: false,
weixinLoginQrcode: null
} }
}, },
mounted () { mounted () {
@ -598,58 +617,63 @@ export default {
this.visitorToken = null this.visitorToken = null
}, },
getCode (uuid, last) { getCode (uuid, last) {
// $.ajax({ try {
// type: "GET", this.$axios({
// url: "https://weixin.openapi.site/check?uuid=" + uuid + (last ? '&last=' + last : ''), type: 'get',
// dataType: "json", url: 'https://weixin.openapi.site/check?uuid=' + uuid + (last ? '&last=' + last : ''),
// cache: !1, timeout: 6e4
// timeout: 6e4, }).then((res) => {
// success: function (data) { if (res.status === 405) {
// if (data.status === 405) { alert(res.data.code)
// $('#code').text('登陆成功，code = ' + data.result.code) } else if (res.status === 404) {
// } else if (data.status === 404) { console.log(res)
// $('#code').text(data.msg.title + ', ' + data.msg.content) this.getCode(uuid, res.data.wxErrCode)
// getCode(uuid, data.result.wxErrCode) } else if (res.status === 403) {
// } else if (data.status === 403) { console.log(res)
// $('#code').text(data.msg.title + ', ' + data.msg.content) this.getCode(uuid, res.data.wxErrCode)
// getCode(uuid, data.result.wxErrCode) } else if (res.status === 500) {
// } else if (data.status === 500) { this.login('weixin')
// getUUID() } else {
// } else { setTimeout(() => {
// setTimeout(function () { this.getCode(uuid)
// getCode(uuid) }, 2000)
// }, 2000) }
// } })
// }, } catch (err) {
// error: function () { setTimeout(function () {
// setTimeout(function () { this.getCode(uuid)
// getCode(uuid) }, 2000)
// }, 2000) }
// }
// })
}, },
async login (type) { async login (type) {
if (type === 'github') { 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') 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') { } else if (type === 'weixin') {
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') const { data } = await this.$axios.get('https://weixin.openapi.site/img?appid=wx2d1d6aa2f86768d7&redirect_uri=https://wyr.me')
if (data.status === 1) { if (data.status === 1) {
const uuid = data.result.wxUUID const uuid = data.result.wxUUID
// $('#qrcode').attr('src', data.result.imgData) this.weixinLoginQrcode = data.result.imgData
// getCode(uuid) this.getCode(uuid)
console.log(uuid) this.commentLoading = false
} else { } else {
this.commentLoading = false
this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', { this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', {
position: 'top-center', position: 'top-center',
duration: 5000 duration: 5000
}) })
} }
} catch (err) {
this.$toasted.show('敬请期待，请先使用Github登录', { this.commentLoading = false
this.useWeixinLogin = false
this.$toasted.show('暂时无法使用Github登录，请尝试其它登录方式或重试。', {
position: 'top-center', position: 'top-center',
duration: 5000 duration: 5000
}) })
}
} else { } else {
this.$toasted.show('敬请期待', { this.$toasted.show('敬请期待', {
position: 'top-center', position: 'top-center',
@ -938,12 +962,44 @@ export default {
user-select none user-select none
img img
width auto
.login-img
margin 70px 20px 0 20px margin 70px 20px 0 20px
z-index 100 z-index 100
position absolute position absolute
.login-img:hover .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 .login:hover
background-color #fff background-color #fff

2
static/css/begin.css
View File

@ -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)}}