|
|
@@ -19,7 +19,10 @@
|
|
|
|
|
|
<div v-if='qrCodeLogin' class='flex flex-center flex-col'>
|
|
|
<span class='font-24 black bold '>欢迎来到梧桐树云平台👏</span>
|
|
|
- <img class='mt-20' src='../assets/img/code.png' style='width: 300px'/>
|
|
|
+ <div class='flex flex-col flex-center' style='height: 400rpx;width: 400rpx'>
|
|
|
+ <vue-qr :currentLevel='3' :logoCornerRadius='4' :logoScale='0.25' :logoSrc='logoSrc' :text='qrCodeText'
|
|
|
+ size='340'/>
|
|
|
+ </div>
|
|
|
<span class='mt-20 grey-6 bold '>请使用微信扫一扫,进行登录</span>
|
|
|
</div>
|
|
|
|
|
|
@@ -101,10 +104,23 @@
|
|
|
<script>
|
|
|
import md5 from 'js-md5'
|
|
|
import { useStore } from '@/store/user.js'
|
|
|
-import { setToken } from '../utils/auth.js'
|
|
|
+import { removeToken, setToken } from '../utils/auth.js'
|
|
|
import permissionStore from '@/store/permission.js'
|
|
|
+import VueQr from 'vue-qr/src/packages/vue-qr.vue'
|
|
|
export default {
|
|
|
name: 'login',
|
|
|
+ components: { VueQr },
|
|
|
+ watch: {
|
|
|
+ qrCodeLogin: {
|
|
|
+ handler (val) {
|
|
|
+ if (val) {
|
|
|
+ this.qrCode()
|
|
|
+ this.checkLogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
setup () {
|
|
|
const user = useStore()
|
|
|
const permission = permissionStore()
|
|
|
@@ -133,12 +149,20 @@ export default {
|
|
|
},
|
|
|
code: '',
|
|
|
header: '',
|
|
|
- qrCodeLogin: true
|
|
|
+ qrCodeLogin: true,
|
|
|
+ time: null,
|
|
|
+ qrCodeText: '',
|
|
|
+ sessionId: ''
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
+ this.permission.cleanPermission()
|
|
|
+ removeToken()
|
|
|
this.init()
|
|
|
},
|
|
|
+ unmounted () {
|
|
|
+ clearInterval(this.time)
|
|
|
+ },
|
|
|
methods: {
|
|
|
init () {
|
|
|
this.$api.login.captcha().then(res => {
|
|
|
@@ -190,6 +214,52 @@ export default {
|
|
|
this.permission.addPermission(res.data)
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ checkLogin () {
|
|
|
+ let count = 0
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ count = count + 1
|
|
|
+ if (this.qrCodeLogin === false) {
|
|
|
+ clearInterval(this.time)
|
|
|
+ }
|
|
|
+ if (count === 60) {
|
|
|
+ this.qrCode()
|
|
|
+ count = 0
|
|
|
+ }
|
|
|
+ if (this.sessionId) {
|
|
|
+ this.codeLogin()
|
|
|
+ } else {
|
|
|
+ this.codeLogin()
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ qrCode () {
|
|
|
+ this.$api.login.qrCode().then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.sessionId = res.data
|
|
|
+ this.qrCodeText = 'https://dev.wutongresearch.club/login?id=' + this.sessionId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ codeLogin () {
|
|
|
+ this.$api.login.qrCodeLogin({ sessionId: this.sessionId }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ const tmp = res.data
|
|
|
+ console.log(Object.prototype.hasOwnProperty.call(tmp, 'phone'))
|
|
|
+ if (Object.prototype.hasOwnProperty.call(tmp, 'phone')) {
|
|
|
+ const params = { tenantId: '000000', phone: res.data.phone, openId: res.data.openId, grant_type: 'qrcode', scope: 'all', type: 'account' }
|
|
|
+ this.$api.login.loginByCode(params).then(res => {
|
|
|
+ if (res.error_description) {
|
|
|
+ this.$message.error(res.error_description)
|
|
|
+ } else {
|
|
|
+ setToken(res.access_token)
|
|
|
+ this.getInfo()
|
|
|
+ this.$router.replace('/')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|