126 lines
3.8 KiB
Vue
126 lines
3.8 KiB
Vue
<template>
|
|
<div class="sign-container">
|
|
<template v-if="Object.keys(res).length === 0">
|
|
<div class="reader-container">
|
|
<div id="reader"></div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="weui-msg">
|
|
<div class="weui-msg__icon-area">
|
|
<i v-if="res?.code !== 0" class="weui-icon-warn weui-icon_msg"></i>
|
|
<i v-if="res?.code === 0" class="weui-icon-success weui-icon_msg"></i>
|
|
</div>
|
|
<div class="weui-msg__text-area">
|
|
<div class="weui-msg__title">温馨提醒</div>
|
|
<div v-html="res?.msg"></div>
|
|
</div>
|
|
<div class="weui-msg__opr-area">
|
|
<p class="weui-btn-area">
|
|
<a @click="res = {}; getCameras()"
|
|
class="weui-btn weui-btn_primary">重新扫描</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "scanCode",
|
|
props: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
html5QrCode: null,
|
|
scanStatus: true,
|
|
cameraId: '',
|
|
res: {},
|
|
}
|
|
},
|
|
methods: {
|
|
getCameras() {
|
|
Html5Qrcode.getCameras()
|
|
.then((devices) => {
|
|
if (devices && devices.length) {
|
|
// 如果有2个摄像头，1为前置的
|
|
if (devices.length > 1) {
|
|
this.cameraId = devices[1].id;
|
|
} else {
|
|
this.cameraId = devices[0].id;
|
|
}
|
|
let isHuawei = navigator.userAgent.toLowerCase().match(/huawei/i) === 'huawei';
|
|
if(isHuawei) {
|
|
const backCamera = devices.filter(o => o.label.includes('back'))
|
|
this.cameraId = backCamera[0].id;
|
|
}
|
|
this.start();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$toast('未获取到摄像头信息')
|
|
})
|
|
},
|
|
start() {
|
|
this.html5QrCode = new Html5Qrcode("reader");
|
|
this.html5QrCode.start(
|
|
this.cameraId, // retreived in the previous step.
|
|
{
|
|
fps: 100, // sets the framerate to 10 frame per second,
|
|
qrbox: {width: 1000, height: 1000}, // sets only 250 X 250 region of viewfinder to
|
|
},
|
|
async (decodedText, decodedResult) => {
|
|
this.res = await this.$axios.post(decodedText)
|
|
this.closeScan()
|
|
},
|
|
(errorMessage) => {
|
|
console.log(errorMessage);
|
|
}
|
|
)
|
|
.catch((err) => {
|
|
alert(err)
|
|
console.log(`Unable to start scanning, error: ` + err);
|
|
});
|
|
},
|
|
closeScan() {
|
|
this.html5QrCode?.stop()
|
|
.then((ignore) => {
|
|
console.log("QR Code scanning stopped.");
|
|
})
|
|
.catch((err) => {
|
|
console.log("Unable to stop scanning.");
|
|
});
|
|
},
|
|
init() {
|
|
this.getCameras()
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sign-container{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.reader-container {
|
|
padding-top: 50px;
|
|
}
|
|
#reader {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
.weui-msg__icon-area {
|
|
margin-top: 30px;
|
|
}
|
|
</style>
|