88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<template>
|
|
<v-layout row justify-center>
|
|
<v-dialog v-model="dialog_scanner" persistent max-width="290">
|
|
|
|
<v-card>
|
|
<v-card-title class="headline">Arahkan kamera ke QR / Barcode</v-card-title>
|
|
<v-card-text>
|
|
<div id="qr-reader" style="width:200px"></div>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="green darken-1" flat @click="startscan">mulai</v-btn>
|
|
<v-btn color="green darken-1" flat @click="dialog_scanner = false">tutup</v-btn>
|
|
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-layout>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
module.exports = {
|
|
components : {
|
|
'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
|
|
'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods : {
|
|
startscan(){
|
|
this.isScanning = true;
|
|
this.html5QrCode = new Html5Qrcode("qr-reader");
|
|
this.html5QrCode.start(
|
|
{ facingMode: "environment" },
|
|
{
|
|
fps: 10,
|
|
qrbox: { width: 250, height: 250 }
|
|
},
|
|
this.qrCodeSuccessCallback)
|
|
.catch(err => {
|
|
console.error(`Error scanning QR code: ${err}`);
|
|
this.isScanning = false;
|
|
});
|
|
},
|
|
qrCodeSuccessCallback(decodedText, decodedResult){
|
|
alert(`QR Code Content: ${decodedText}`);
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
|
|
|
|
dialog_scanner: {
|
|
get() {
|
|
return this.$store.state.patient.dialog_scanner
|
|
},
|
|
set(val) {
|
|
this.$store.commit("patient/update_dialog_scanner",val)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isDialogVisible: false,
|
|
isScanning: false,
|
|
html5QrCode: null
|
|
}
|
|
},
|
|
watch : {
|
|
dialog_scanner (n, o) {
|
|
console.log('blallal')
|
|
if (n == true) {
|
|
|
|
} else {
|
|
if (this.isScanning && this.html5QrCode) {
|
|
this.html5QrCode.stop().then(() => {
|
|
this.isScanning = false;
|
|
}).catch(err => {
|
|
console.error('Failed to stop QR code scanning.', err);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script> |