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

南骏 池

2025-05-06 0ab6cdbb96d1efc00cbca105917aa021ad2491ef

 H5/Js/Config.js

@@ -3,60 +3,59 @@
    data: function () {
        return {
            isLoading: false,
            textInput:''
            textInput: '',
            scanWorkstation: '', // 新增：扫描工位绑定字段
            html5QrCode: null    // 新增：扫码器实例
        }
    },
    mounted() {
        var that = this;
    },
    methods: {
        sendMessage() {
         var detail = "! 0 200 200 565 1\r\n" +
            "PAGE - WIDTH 400\r\n" +
            "BAR - SENSE\r\n" +
            "BOX 10 10 400 565 2\r\n" +
            "LINE 10 60 400 60 1\r\n" +
            "LINE 10 110 400 110 1\r\n" +
            "LINE 10 160 400 160 1\r\n" +
            "LINE 10 210 400 210 1\r\n" +
            "LINE 10 300 400 310 1\r\n" +
            "LINE 10 350 400 360 1\r\n" +
            "LINE 10 405 190 415 1\r\n" +
            "LINE 10 460 190 470 1\r\n" +
            "LINE 10 515 190 525 1\r\n" +
            "LINE 130 10 130 350 1\r\n" +
            "LINE 190 350 190 565 1\r\n" +
            "TEXT 24 0 15 25 " + '条码' + "   " + '001' + "\r\n" + //物料条码
            "TEXT 24 0 15 75 " + '条码' + "\r\n" + //物料名称
            "TEXT 55 0 140 75 " + '条码' + "\r\n" + //物料名称
            "TEXT 24 0 15 125 " + '条码' + "   " + '001' + "\r\n" + //物料编码
            "TEXT 24 0 15 175 " + '条码' + "   " + '001' + "\r\n" + //图号
            "TEXT 24 0 15 250 " + '条码' + "\r\n" +
            //   "TEXT 24 0 15 325 "+strt6+"   " + str6 + "\r\n" +
            "TEXT 24 0 15 315 " + '条码' + "     " + '001' + "\r\n" +
            "TEXT 55 0 140 218 " + '条码' + "\r\n" +
            "TEXT 55 0 140 238 " + '条码' + "\r\n" +
            "TEXT 55 0 140 258 " + '条码' + "\r\n" +
            "TEXT 55 0 140 272 " + '条码' + "\r\n" +
            "TEXT 24 0 50 365 " + '001' + "\r\n" +
            "TEXT 24 0 40 420 " + '001' + "\r\n" +
            "TEXT 24 0 50 475 " + '001' + "\r\n" +
            "TEXT 24 0 60 530 " + '001' + "\r\n" +
            "B QR 200 360 M 2 U 9\r\n" +
            "MA," + '001' + "\r\n" +
            "ENDQR\r\n" +
            // "B QR 25 285 M 2 U 4\r\n" + 
            // "MA," + str8 + "\r\n" +
            // "ENDQR\r\n" +
      sendMessage(obj) {
         var detail = ["第一组指令"+
                "! 0 203 203 480 1\r\n" +
                "PREFEED 0\n\r" +
                "POSTFEED 0\n\r" +
                "PAGE - WIDTH 640\r\n" +

                // 右上角放置一个方型二维码（80*80），扫描后的值为“123456”
                "BOX 560 10 640 90 2\r\n" + // 绘制二维码的方框
                "TEXT 570 20 5 \"条码\"\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" + // 显示条形码的位置和大小
                "TEXT 320 410 5 \"987654\"\r\n" + // 
                "GAP-SENSE\r\n" +
                "ENDQR\r\n" +
                "FORM\r\n" +
                "PRINT\r\n",
            "第二组指令" + "! 0 400 400 480 1\r\n" +
            "PREFEED 0\n\r" +
            "POSTFEED 0\n\r" +
            "PAGE - WIDTH 640\r\n" +
            "GAP-SENSE\r\n" +
            "BOX 5 10 620 450 2\r\n" +
            "LINE 5 60 620 60 1\r\n" + // 横线1  
            "LINE 5 110 620 110 1\r\n" + // 横线2  
            "LINE 5 160 620 160 1\r\n" + // 横线3  
            "LINE 5 210 620 210 1\r\n" + // 横线4  
            "LINE 5 260 620 260 1\r\n" + // 横线5  
            "LINE 120 10 120 260 1\r\n" + // 字段名称右侧竖线  
            "LINE 240 260 240 450 1\r\n" + // 规格型号左侧竖线  
            "LINE 285 210 285 450 1\r\n" + // 规格型号右侧竖线  
            "LINE 410 210 410 260 1\r\n" + // 到货日期右侧竖线  
            "ENDQR\r\n" +
            "FORM\r\n" +
            "PRINT\r\n";
            "PRINT\r\n" ];

            let sendData = {
                Type: 'Bar',
                Barcode: 'TM250304-000104-2',
            Detail: detail,
                Ip: '192.168.38.61',
            Ip: '192.168.38.25',
            Port: '9100',
            }
            console.log('sendMessage 开始1:')
            console.log('sendMessage 开始2:' + JSON.stringify(sendData))
@@ -64,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');
        }
    }
})
})