1.新增扫描成功和失败音效。

南骏 池

2025-05-06 0ab6cdbb96d1efc00cbca105917aa021ad2491ef

 H5/Js/Config.js

@@ -3,14 +3,16 @@
    data: function () {
        return {
            isLoading: false,
            textInput:''
            textInput: '',
            scanWorkstation: '', // 新增：扫描工位绑定字段
            html5QrCode: null    // 新增：扫码器实例
        }
    },
    mounted() {
        var that = this;
    },
    methods: {
      sendMessage() {
      sendMessage(obj) {
         var detail = ["第一组指令"+
                "! 0 203 203 480 1\r\n" +
                "PREFEED 0\n\r" +
@@ -20,7 +22,7 @@
                // 右上角放置一个方型二维码（80*80），扫描后的值为“123456”
                "BOX 560 10 640 90 2\r\n" + // 绘制二维码的方框
                "TEXT 570 20 5 \"条码\"\r\n" + // 在方框中上方显示“条码”
                "QRCODE 570 40 M 4 U 0 \"123456\"\r\n" + // 创建二维码
                "QRCODE 570 40 M 4 U 0 \"" + obj.qrcode+"\"\r\n" + // 创建二维码

                // 右下角显示一个条形码，最左在320位置，长度为100，同时这个条形码将其扫描的值显示在条形码下侧，条形码的值为“987654”
                "BARCODE 320 350 100 50 1 \"987654\"\r\n" + // 显示条形码的位置和大小
@@ -61,9 +63,82 @@
                data: JSON.stringify(sendData)
            })
        },
        // 修改sendScan方法为实际扫码功能
        sendScan() {
            var that = this;
            that.$toast.fail("暂时不能使用！");
            const that = this;
            if (!this.html5QrCode) {
                // 鸿蒙设备需要使用特定设备ID
                this.html5QrCode = new Html5Qrcode("qr-reader", {
                    experimentalFeatures: {
                        useBarCodeDetectorIfSupported: true
                    },
                    formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ]
                });
            }

            const config = {
                fps: 10,
                qrbox: 250,
                // 鸿蒙需要明确指定视频输入设备
                videoConstraints: {
                    deviceId: 'default' // 使用默认摄像头
                }
            };

            // 修改摄像头调用方式
            this.html5QrCode.start(
                config,
                qrCodeMessage => {
                    that.scanWorkstation = qrCodeMessage;
                    that.stopScan();
                    that.$toast.success("扫码成功！");
                },
                errorMessage => {
                    console.error("扫码失败:", errorMessage);
                    that.$toast.fail("扫码失败");
                }
            ).catch(err => {
                console.error("摄像头错误:", err);
                // 增加鸿蒙设备错误处理
                const errMsg = err.message || err.name || '摄像头不可用';
                that.$toast.fail("无法启动摄像头: " + errMsg);
                
                // 原生扫码备用方案
                if(window.plus && plus.barcode){
                    plus.barcode.scan(
                        'qr',
                        (type, result) => {
                            that.scanWorkstation = result;
                            that.$toast.success("扫码成功！");
                        },
                        (error) => {
                            that.$toast.fail("扫码失败: "+error.code);
                        }
                    );
                }
            });

            // 显示扫码框（需在ASPX中添加<div id="qr-reader"></div>）
            document.getElementById('qr-reader').style.display = 'block';
        },

        // 新增：停止扫码方法
        stopScan() {
            if (this.html5QrCode && this.html5QrCode.isScanning) {
                this.html5QrCode.stop().then(() => {
                    document.getElementById('qr-reader').style.display = 'none';
                }).catch(err => {
                    console.error("关闭摄像头失败:", err);
                });
            }
        },

        testSuccessSound() {
            this.$playSound('success');
        },
        
        testErrorSound() {
            this.$playSound('error');
        }
    }
})
})