153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<template>
|
||
<div class='QR-code-wrap'>
|
||
<div class="info-card">
|
||
<div class="title">身份二维码</div>
|
||
<div class="QR-wrap">
|
||
<div class="temp">
|
||
<div class="QRImg" ref="qrCodeUrl"></div>
|
||
</div>
|
||
<div class="hint">
|
||
<div>本码用于领取物资！请妥善保管二维码！</div>
|
||
<div>（刷新倒计时：<span style="color:red">{{times}}s</span>）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="button" @click="Update">刷新</div>
|
||
</div>
|
||
<img class="bottom-img" src="@/assets/image/logo.png" alt="">
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import QRCode from 'qrcodejs2'
|
||
import { GetQRCode } from 'api/QRCode'
|
||
|
||
export default {
|
||
name:'QRCode',
|
||
data(){
|
||
return {
|
||
times: 0,
|
||
Code: null,
|
||
timer: null,
|
||
upDateTime:30
|
||
}
|
||
},
|
||
activated(){
|
||
this.Code = sessionStorage.Code
|
||
if(this.Code){
|
||
this.getQRCode(this.Code)
|
||
}else{
|
||
this.$Toast.error('未认证人脸信息！即将返回！')
|
||
setTimeout(() => {
|
||
this.$router.push('/home')
|
||
},800)
|
||
}
|
||
},
|
||
deactivated(){
|
||
clearInterval(this.timer)
|
||
},
|
||
methods:{
|
||
getQRCode(code,flag){
|
||
GetQRCode(code).then(res =>{
|
||
if(res.code === 0){
|
||
this.QRCode = res.data.Code
|
||
this.creatQrCode(this.QRCode)
|
||
if(flag){ //如果是刷新操作则提示一下
|
||
this.$Toast.success('二维码刷新成功')
|
||
}
|
||
}else{
|
||
this.$Toast.error('查询二维码失败！即将返回！')
|
||
setTimeout(() => {
|
||
this.$router.push('/home')
|
||
},800)
|
||
}
|
||
})
|
||
},
|
||
Update(){ //刷新二维码
|
||
this.getQRCode(this.Code,true)
|
||
},
|
||
creatQrCode(text) { //创建二维码
|
||
clearInterval(this.timer)
|
||
this.times = this.upDateTime
|
||
this.$refs.qrCodeUrl.innerHTML = '' //每次创建二维码先清空之前的二维码图片
|
||
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
|
||
text:text,
|
||
width:200,
|
||
height:200,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
})
|
||
// 每三十秒刷新一次二维码
|
||
this.timer = setInterval(() => {
|
||
if(this.times == 0){
|
||
this.getQRCode(this.Code,true)
|
||
}else{
|
||
this.times --
|
||
}
|
||
},1000)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="stylus" scoped>
|
||
.QR-code-wrap
|
||
box-sizing border-box
|
||
width 100%
|
||
overflow hidden
|
||
height 100vh
|
||
position relative
|
||
.bottom-img
|
||
position absolute
|
||
bottom 0px
|
||
width 100%
|
||
left 0
|
||
.info-card
|
||
position relative
|
||
z-index 999
|
||
width 90%
|
||
border-radius 15px
|
||
background white
|
||
margin 0 auto
|
||
display flex
|
||
flex-direction column
|
||
justify-content center
|
||
align-items center
|
||
padding-bottom 30px
|
||
overflow hidden
|
||
margin-top 70px
|
||
.title
|
||
Title()
|
||
.button
|
||
Button()
|
||
.QR-wrap
|
||
width 100%
|
||
display flex
|
||
justify-content center
|
||
flex-direction column
|
||
align-items center
|
||
padding 20px
|
||
box-sizing border-box
|
||
.temp
|
||
width 224px
|
||
height 224px
|
||
box-sizing border-box
|
||
padding 10px
|
||
border 2px dotted #eee
|
||
border-radius 5px
|
||
.QRImg
|
||
display flex
|
||
justify-content center
|
||
font-size 0
|
||
.hint
|
||
font-size 12px
|
||
color #666
|
||
margin-top 10px
|
||
text-align center
|
||
div
|
||
margin-top 15px
|
||
|
||
|
||
|
||
|
||
</style>
|