unknown
8 months ago
5 changed files with 224 additions and 33 deletions
-
4config/api.js
-
2pages/tabbar/mine/index.vue
-
111pages/userCenter/scanCode/scanCode - 副本.vue
-
140pages/userCenter/scanCode/scanCode.vue
-
BINstatic/images/coach/教练.png
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<view class="pageBgImg"> |
|||
<topNavbar title="个人二维码"></topNavbar> |
|||
<view class="pad"> |
|||
<view class="card"> |
|||
<view class="refresh_row" @click="refresh"> |
|||
<view class="text">刷新二维码</view> |
|||
<view class="icon"> |
|||
<image src="@/static/images/index/ic_shuaxin.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="qcode"> |
|||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> |
|||
</view> |
|||
</view> |
|||
<view class="card"> |
|||
<user-info/> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import UQRCode from 'uqrcodejs'; |
|||
var qr = new UQRCode(); |
|||
export default { |
|||
data() { |
|||
return { |
|||
timer: null |
|||
} |
|||
}, |
|||
onShow() { |
|||
this.$nextTick(()=>{ |
|||
this.refresh() |
|||
}) |
|||
|
|||
}, |
|||
// onHide() { |
|||
// console.log('清除了') |
|||
// clearTimeout(this.timer) |
|||
// this.timer = null |
|||
|
|||
// }, |
|||
beforeDestroy() { |
|||
clearTimeout(this.timer) |
|||
this.timer = null |
|||
// this.refresh = null |
|||
}, |
|||
methods: { |
|||
refresh() { |
|||
let {coachId, nickname, schoolId, tenantId, schoolName} = this.vuex_userInfo.user |
|||
// 设置二维码内容 |
|||
qr.data = JSON.stringify({ |
|||
coachId, |
|||
schoolId, |
|||
nickname: encodeURIComponent(nickname), |
|||
timer: Date.now(), |
|||
schoolName: encodeURIComponent(schoolName), |
|||
}) |
|||
|
|||
// 设置二维码大小,必须与canvas设置的宽高一致 |
|||
qr.size = 200; |
|||
qr.margin = 10; |
|||
qr.errorCorrectLevel = UQRCode.errorCorrectLevel.L |
|||
// 调用制作二维码方法 |
|||
qr.make() |
|||
qr.foregroundImageSrc = require('./coach.png') |
|||
// 获取canvas上下文 |
|||
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入 |
|||
// 设置uQRCode实例的canvas上下文 |
|||
qr.canvasContext = canvasContext; |
|||
// 调用绘制方法将二维码图案绘制到canvas上 |
|||
qr.drawCanvas(); |
|||
this.timer = setTimeout(()=>{ |
|||
console.log('刷新了') |
|||
this.refresh() |
|||
},1000*20) |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.qcode { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 50rpx 0; |
|||
} |
|||
.card { |
|||
padding: 28rpx; |
|||
margin-bottom: 24rpx; |
|||
} |
|||
.refresh_row { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
padding: 10rpx 0; |
|||
.text { |
|||
color: $themC; |
|||
font-size: 28rpx; |
|||
} |
|||
.icon { |
|||
width: 24rpx; |
|||
height: 24rpx; |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
</style> |
Before Width: 26 | Height: 26 | Size: 904 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue