unknown
9 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