添加微信登录
This commit is contained in:
parent
78ff669765
commit
fa69d02bc6
BIN
pages/.DS_Store
vendored
Normal file
BIN
pages/.DS_Store
vendored
Normal file
Binary file not shown.
@ -52,16 +52,10 @@
|
|||||||
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(v-show="!useWeixinLogin" class="login-img", src="https://cdn.wyr.me/imgs/GitHub-Login.png", @click="login('github')", style="margin-left: -140px;")
|
.item(v-for="(item, index) in loginPlatform", :key="index")
|
||||||
img(v-show="!useWeixinLogin", class="login-img", src="https://cdn.wyr.me/imgs/Weixin-Login.png", @click="login('weixin')")
|
transition(name="qrcode")
|
||||||
.comment-loading(v-show="commentLoading")
|
img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode")
|
||||||
.allSpinner
|
img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)")
|
||||||
.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") 尚未登陆
|
||||||
@ -75,6 +69,7 @@
|
|||||||
.login(v-show="!visitorToken")
|
.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/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/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")
|
.comment-loading(v-show="commentLoading")
|
||||||
.allSpinner
|
.allSpinner
|
||||||
.spinner
|
.spinner
|
||||||
@ -171,7 +166,26 @@ export default {
|
|||||||
editorReplyObj: null,
|
editorReplyObj: null,
|
||||||
commentLoading: false,
|
commentLoading: false,
|
||||||
useWeixinLogin: 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 () {
|
mounted () {
|
||||||
@ -623,15 +637,13 @@ export default {
|
|||||||
url: 'https://weixin.openapi.site/check?uuid=' + uuid + (last ? '&last=' + last : ''),
|
url: 'https://weixin.openapi.site/check?uuid=' + uuid + (last ? '&last=' + last : ''),
|
||||||
timeout: 6e4
|
timeout: 6e4
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
if (res.status === 405) {
|
if (res.data.status === 405) {
|
||||||
alert(res.data.code)
|
alert(res.data.result.code)
|
||||||
} else if (res.status === 404) {
|
} else if (res.data.status === 404) {
|
||||||
console.log(res)
|
this.getCode(uuid, res.data.result.wxErrCode)
|
||||||
this.getCode(uuid, res.data.wxErrCode)
|
} else if (res.data.status === 403) {
|
||||||
} else if (res.status === 403) {
|
this.getCode(uuid, res.data.result.wxErrCode)
|
||||||
console.log(res)
|
} else if (res.data.status === 500) {
|
||||||
this.getCode(uuid, res.data.wxErrCode)
|
|
||||||
} else if (res.status === 500) {
|
|
||||||
this.login('weixin')
|
this.login('weixin')
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -646,6 +658,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
async login (type) {
|
async login (type) {
|
||||||
|
this.currentLoginType = type
|
||||||
|
this.useWeixinLogin = false
|
||||||
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') {
|
||||||
@ -661,6 +675,7 @@ export default {
|
|||||||
this.commentLoading = false
|
this.commentLoading = false
|
||||||
} else {
|
} else {
|
||||||
this.commentLoading = false
|
this.commentLoading = false
|
||||||
|
this.currentLoginType = null
|
||||||
this.$toasted.show('获取微信登录所需参数错误,请暂时换用其它登录方式或重试。', {
|
this.$toasted.show('获取微信登录所需参数错误,请暂时换用其它登录方式或重试。', {
|
||||||
position: 'top-center',
|
position: 'top-center',
|
||||||
duration: 5000
|
duration: 5000
|
||||||
@ -668,6 +683,7 @@ export default {
|
|||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
this.commentLoading = false
|
this.commentLoading = false
|
||||||
|
this.currentLoginType = null
|
||||||
this.useWeixinLogin = false
|
this.useWeixinLogin = false
|
||||||
this.$toasted.show('暂时无法使用Github登录,请尝试其它登录方式或重试。', {
|
this.$toasted.show('暂时无法使用Github登录,请尝试其它登录方式或重试。', {
|
||||||
position: 'top-center',
|
position: 'top-center',
|
||||||
@ -721,6 +737,10 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus">
|
||||||
|
$qrcode-width = 96px
|
||||||
|
$qrcode-height = 96px
|
||||||
|
$logo-width = 64px
|
||||||
|
|
||||||
.postPage
|
.postPage
|
||||||
.articleDetails
|
.articleDetails
|
||||||
margin-top 30px
|
margin-top 30px
|
||||||
@ -960,46 +980,76 @@ export default {
|
|||||||
z-index 99
|
z-index 99
|
||||||
cursor pointer
|
cursor pointer
|
||||||
user-select none
|
user-select none
|
||||||
|
display flex
|
||||||
|
align-items center
|
||||||
|
justify-content center
|
||||||
|
|
||||||
img
|
.item
|
||||||
width auto
|
flex 1
|
||||||
|
display flex
|
||||||
.login-img
|
width 100%
|
||||||
margin 70px 20px 0 20px
|
height 100%
|
||||||
z-index 100
|
flex-direction column
|
||||||
position absolute
|
align-items center
|
||||||
|
|
||||||
.login-img:hover
|
|
||||||
filter contrast(20%)
|
|
||||||
|
|
||||||
.comment-loading
|
|
||||||
position relative
|
position relative
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
|
|
||||||
.allSpinner
|
.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
|
position absolute
|
||||||
top 0
|
z-index 1000
|
||||||
left 0
|
top 'calc(50% - %s / 2)' % $qrcode-height
|
||||||
z-index 999999
|
|
||||||
width 100%
|
.logo
|
||||||
height 100%
|
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
|
background-color #fff
|
||||||
|
|
||||||
.spinner
|
.qrcode-enter, .qrcode-leave-to
|
||||||
position absolute
|
transform scale(0)
|
||||||
top 50%
|
|
||||||
left 50%
|
|
||||||
z-index 9999999
|
|
||||||
margin 75pt auto 0
|
|
||||||
margin-top -1pc
|
|
||||||
margin-left -75px
|
|
||||||
width 150px
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
.weixin-qrcode
|
.qrcode-enter-active, .qrcode-leave-active
|
||||||
width 250px
|
transition transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)
|
||||||
margin-top 10px
|
|
||||||
|
.qrcode-enter-to
|
||||||
|
transform scale(1)
|
||||||
|
|
||||||
|
@keyframes spin
|
||||||
|
from
|
||||||
|
transform rotate(0)
|
||||||
|
|
||||||
|
to
|
||||||
|
transform rotate(360deg)
|
||||||
|
|
||||||
.login:hover
|
.login:hover
|
||||||
background-color #fff
|
background-color #fff
|
||||||
|
Loading…
Reference in New Issue
Block a user