|
|
|
@ -4,7 +4,7 @@ |
|
|
|
<view class="pad"> |
|
|
|
<view class="card"> |
|
|
|
<view class="qcode"> |
|
|
|
|
|
|
|
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -16,12 +16,40 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import UQRCode from 'uqrcodejs'; |
|
|
|
export default { |
|
|
|
onReady() { |
|
|
|
// 获取uQRCode实例 |
|
|
|
var qr = new UQRCode(); |
|
|
|
let {coachId, nickname, schoolId, tenantId} = this.vuex_userInfo.user |
|
|
|
// 设置二维码内容 |
|
|
|
qr.data = JSON.stringify({ |
|
|
|
coachId, |
|
|
|
schoolId, |
|
|
|
nickname: encodeURIComponent(nickname) |
|
|
|
}) |
|
|
|
// 设置二维码大小，必须与canvas设置的宽高一致 |
|
|
|
qr.size = 200; |
|
|
|
qr.margin = 20; |
|
|
|
// 调用制作二维码方法 |
|
|
|
qr.make(); |
|
|
|
// 获取canvas上下文 |
|
|
|
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入 |
|
|
|
// 设置uQRCode实例的canvas上下文 |
|
|
|
qr.canvasContext = canvasContext; |
|
|
|
// 调用绘制方法将二维码图案绘制到canvas上 |
|
|
|
qr.drawCanvas(); |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.qcode { |
|
|
|
width: 100%; |
|
|
|
height: 600rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.card { |
|
|
|
padding: 28rpx; |
|
|
|
|
