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

南骏 池

2025-05-06 0ab6cdbb96d1efc00cbca105917aa021ad2491ef

 H5/Js/Config.js

@@ -3,7 +3,9 @@
    data: function () {
        return {
            isLoading: false,
            textInput:''
            textInput: '',
            scanWorkstation: '', // 新增：扫描工位绑定字段
            html5QrCode: null    // 新增：扫码器实例
        }
    },
    mounted() {
@@ -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');
        }
    }
})
})