html代码
<el-card v-loading="looogin" class="el_add_card" shadow="hover"> <!-- element-ui卡片 -->
<img style="width:128px;height:128px" :src="urrl" alt="">
<button @click="login()" >获取二维码</button>
<p
style="line-height:100px;font-size:16px;"
>
<img
style="width:100px;height:100px;brder-radius:50%;"
:src="headImg" alt="">
<span>{{usNName}}</span>
</p>
</el-card>
用到的data
urrl:'',
key:'',
usNName:'',
cookier:'',
uid:'',
headImg:'',
事件
login(){
let date=new Date();
this.$axios({
method: "post",
url: `http://localhost:3000/login/qr/key?${date.getTime()}`,
data: '',
})
.then((res) => {//获取二维码key
// console.log(res.data.data.unikey)
// this.urrl=res.data.data.qrurl
this.key=res.data.data.unikey
let date=new Date
this.$axios({
method: "post",
url: `http://localhost:3000/login/qr/create?${date.getTime()}`,
data: {
key:this.key,
qrimg:true
},
})
.then((res) => {//获取二维码图片
// console.log(res.data.data)
this.urrl=res.data.data.qrimg
this.aaaar()
})
.catch((error) => {console.log(error)});
})
.catch((error) => {console.log(error)});
},
aaaar(){
let timerrr=setInterval(() => {//轮询检索二维码扫描状态
let date=new Date
this.$axios({
method: "post",
url: `http://localhost:3000/login/qr/check?${date.getTime()}`,
data: {
key:this.key,
},
})
.then((res) => {
// console.log(res.data.cookie)
//802:授权中
//800:授权成功
//803二维码失效
if(res.data.code=='802'){
this.looogin=true
}else if(res.data.code=='803'){
this.looogin=false
this.cookier=res.data.cookie
window.clearInterval(timerrr)
let date=new Date
this.$axios({
method: "post",
url: `http://localhost:3000/user/account?${date.getTime()}`,
data: {
cookie:this.cookier,
},
})
.then((res) => {
// console.log(res.data)
this.uid=res.data.account.id
this.usNName=res.data.profile.nickname
this.headImg=res.data.profile.avatarUrl
})
.catch((error) => {console.log(error)});
}
})
.catch((error) => {console.log(error)});
}, 1000);
},