var vm = new Vue({ el: '#app', data: function () { return { isLoading: false, textInput: '', scanWorkstation: '', // 新增:扫描工位绑定字段 html5QrCode: null // 新增:扫码器实例 } }, mounted() { var that = this; }, methods: { 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" ]; let sendData = { Type: 'Bar', Barcode: 'TM250304-000104-2', Detail: detail, Ip: '192.168.38.25', Port: '9100', } console.log('sendMessage 开始1:') console.log('sendMessage 开始2:' + JSON.stringify(sendData)) uni.webView.postMessage({ data: JSON.stringify(sendData) }) }, // 修改sendScan方法为实际扫码功能 sendScan() { 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中添加
) 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); }); } } } })