Merge branch 'Dev' of http://101.37.171.70:10101/r/~jhz/STUWMS into Dev

zrg

2025-09-05 46cc7a29dc1f9b3dffee5cdcb9b7f9dfdac3b16d

 components/BarCodePopup/BarCodePopup.vue

New file
@@ -0,0 +1,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>