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 18:02:37 +08:00
parent 78ff669765
commit fa69d02bc6
2 changed files with 103 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
pages/.DS_Store vendored Normal file
View File

Binary file not shown.

156
pages/post/_id.vue
View File

@ -52,16 +52,10 @@
p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
.comment-default-commit
.login(v-if="!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") 请使用微信扫码登录
.item(v-for="(item, index) in loginPlatform", :key="index")
transition(name="qrcode")
img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode")
img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)")
#editor
.comment-toolbar
.comment-no-userinfo(v-if="!visitorToken") 尚未登陆
@ -75,6 +69,7 @@
.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')")
img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/QQ-Login.png", @click="login('qq')")
.comment-loading(v-show="commentLoading")
.allSpinner
.spinner
@ -171,7 +166,26 @@ export default {
editorReplyObj: null,
commentLoading: false,
useWeixinLogin: false,
weixinLoginQrcode: null
weixinLoginQrcode: null,
currentLoginType: null,
loginPlatform: [
{
type: 'github',
logo: 'https://cdn.wyr.me/imgs/GitHub-Login.png'
},
{
type: 'weixin',
logo: 'https://cdn.wyr.me/imgs/Weixin-Login.png'
},
{
type: 'qq',
logo: 'https://cdn.wyr.me/imgs/QQ-Login.png'
},
{
type: 'weibo',
logo: 'https://cdn.wyr.me/imgs/Weibo-Login.png'
}
]
}
},
mounted () {
@ -623,15 +637,13 @@ export default {
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) {
if (res.data.status === 405) {
alert(res.data.result.code)
} else if (res.data.status === 404) {
this.getCode(uuid, res.data.result.wxErrCode)
} else if (res.data.status === 403) {
this.getCode(uuid, res.data.result.wxErrCode)
} else if (res.data.status === 500) {
this.login('weixin')
} else {
setTimeout(() => {
@ -646,6 +658,8 @@ export default {
}
},
async login (type) {
this.currentLoginType = type
this.useWeixinLogin = false
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') {
@ -661,6 +675,7 @@ export default {
this.commentLoading = false
} else {
this.commentLoading = false
this.currentLoginType = null
this.$toasted.show('获取微信登录所需参数错误，请暂时换用其它登录方式或重试。', {
position: 'top-center',
duration: 5000
@ -668,6 +683,7 @@ export default {
}
} catch (err) {
this.commentLoading = false
this.currentLoginType = null
this.useWeixinLogin = false
this.$toasted.show('暂时无法使用Github登录，请尝试其它登录方式或重试。', {
position: 'top-center',
@ -721,6 +737,10 @@ export default {
</script>
<style lang="stylus">
$qrcode-width = 96px
$qrcode-height = 96px
$logo-width = 64px
.postPage
.articleDetails
margin-top 30px
@ -960,46 +980,76 @@ export default {
z-index 99
cursor pointer
user-select none
display flex
align-items center
justify-content center
img
width auto
.login-img
margin 70px 20px 0 20px
z-index 100
position absolute
.login-img:hover
filter contrast(20%)
.comment-loading
position relative
.item
flex 1
display flex
width 100%
height 100%
flex-direction column
align-items center
position relative
.allSpinner
position absolute
top 0
left 0
z-index 999999
width 100%
height 100%
.qrcode
width $qrcode-width
height $qrcode-height
display flex
align-items center
justify-content center
background blue
border-radius 12px
margin-bottom 10px
color #fff
overflow hidden
cursor pointer
position absolute
z-index 1000
top 'calc(50% - %s / 2)' % $qrcode-height
.logo
background-color #f5f4f4
width 64px
height 64px
border-radius 50%
color #fff
user-select none
cursor pointer
display flex
align-items center
justify-content center
position absolute
z-index 1000
top 'calc(50% - %s / 2)' % $logo-width
transition transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), top 0.2s cubic-bezier(0.075, 0.82, 0.165, 1)
&.active
top 'calc(50% + %s / 2 - %s / 4 + 5px)' % ($qrcode-height $logo-width)
transform scale(0.5)
&.loading
animation spin 1s linear infinite
&:hover
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
.qrcode-enter, .qrcode-leave-to
transform scale(0)
.weixin-qrcode
width 250px
margin-top 10px
.qrcode-enter-active, .qrcode-leave-active
transition transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
.qrcode-enter-to
transform scale(1)
@keyframes spin
from
transform rotate(0)
to
transform rotate(360deg)
.login:hover
background-color #fff