1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <template>
| <view>
| <uni-popup ref="BarCodePopup" type="center" @change="onPupupStateChangeHandler">
| <view class="content">
| <view class="title">
| {{ title }}
| </view>
| <view class="img">
| <canvas id="barcodeCanvas" canvas-id="barcodeCanvas" style="width: 200px;height: 200px;"></canvas>
| </view>
| </view>
| </uni-popup>
| </view>
| </template>
|
| <script>
| import UQRCode from 'uqrcodejs'
| export default {
| name: "BarCodePopup",
| data() {
| return {
| imgSrc: '',
| title: '',
| };
| },
| methods: {
| open() {
| this.$refs.BarCodePopup.open()
| },
| async onPupupStateChangeHandler(e) {
| if (e.show === true) {
| // this.getBillList()
| await this.$nextTick()
| await this.initCanvas()
| } else {
| // 清理资源
| this.title = ''
| }
| },
| async initCanvas() {
| // 触发初始化canvas事件
| let title = this.title
| return new Promise((resolve, reject) => {
| let qr = new UQRCode();
| // 设置二维码内容
| qr.data = title;
| let canvasContext = uni.createCanvasContext('barcodeCanvas', this); // 如果是组件，this必须传入
| // 设置二维码大小，必须与canvas设置的宽高一致
| qr.size = 200;
| // 调用制作二维码方法
| qr.make();
| // 设置uQRCode实例的canvas上下文
| qr.canvasContext = canvasContext;
| // 调用绘制方法将二维码图案绘制到canvas上
| qr.drawCanvas();
| this.$forceUpdate()
| resolve()
| })
| },
| async setCodeInfo(title) {
| this.title = title
| }
| }
| }
| </script>
|
| <style lang="scss">
| .content {
| box-sizing: border-box;
| padding: 20rpx;
| background-color: #fff;
| // height: 400rpx;
| display: flex;
| justify-content: center;
| align-items: center;
| flex-direction: column;
| }
| </style>
|
|
