diff --git a/components/common/FieldQr.vue b/components/common/FieldQr.vue index 112ba121..b22c17f5 100644 --- a/components/common/FieldQr.vue +++ b/components/common/FieldQr.vue @@ -12,7 +12,7 @@ }, props: { value: { - type: String, + type: [String, Number], required: true, }, $value: { diff --git a/components/common/QrScan.vue b/components/common/QrScan.vue index cf8d144c..1219a25c 100644 --- a/components/common/QrScan.vue +++ b/components/common/QrScan.vue @@ -5,8 +5,6 @@ QrScanner.WORKER_PATH = QrScannerWorkerPath; - /** @type QrScanner */ - let qrScanner; export default { components: { @@ -20,7 +18,8 @@ }, data() { return { - hasCamera: false, + /** @type QrScanner */ + qrScanner: null, cameraError: false, isModalVisible: false, isPlaying: false, @@ -29,30 +28,27 @@ mounted() { QrScanner.hasCamera() .then(() => { - this.hasCamera = true; this.$emit('update:qrVisible', true); - - qrScanner = new QrScanner(this.$refs.qrVideo, (result) => { + this.qrScanner = new QrScanner(this.$refs.qrVideo, (result) => { this.stopScanQr(); this.isModalVisible = false; this.$emit('qrScanned', result); }); }) .catch(() => { - this.hasCamera = false; this.$emit('update:qrVisible', false); }); }, destroyed() { - if (qrScanner) { - qrScanner.destroy(); + if (this.qrScanner) { + this.qrScanner.destroy(); } }, methods: { scanQr() { this.isModalVisible = true; this.$refs.qrVideo.addEventListener('canplay', this.handlePlayStart); - qrScanner.start() + this.qrScanner.start() .then(() => { this.cameraError = false; }) @@ -61,7 +57,7 @@ }); }, stopScanQr() { - qrScanner.stop(); + this.qrScanner.stop(); this.isPlaying = false; window.removeEventListener('resize', this.repositionOverlay); }, @@ -95,7 +91,7 @@