You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<template>
|
|
|
|
<view class="scan-bg">
|
|
|
|
<!-- <text>{{ result }}</text> -->
|
|
|
|
<qrcode-stream @decode="onDecode" @init="initQR" class="scan-code"/>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
//引入
|
|
|
|
import { QrcodeStream } from "vue-qrcode-reader";
|
|
|
|
export default {
|
|
|
|
name: "scanCodeVue",
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
result: '', //扫码结果信息
|
|
|
|
error: '',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {QrcodeStream},
|
|
|
|
methods: {
|
|
|
|
onDecode(result) {
|
|
|
|
this.result = result;
|
|
|
|
this.$emit("success", result)
|
|
|
|
},
|
|
|
|
async initQR(promise) {
|
|
|
|
let _this = this
|
|
|
|
try {
|
|
|
|
|
|
|
|
const { capabilities } = await promise;
|
|
|
|
|
|
|
|
const TORCH_IS_SUPPORTED = !!capabilities.torch;
|
|
|
|
|
|
|
|
let res = await promise;
|
|
|
|
console.log(res)
|
|
|
|
} catch (error) {
|
|
|
|
if (error.name === "NotAllowedError") {
|
|
|
|
this.error = "ERROR: 您需要授予相机访问权限";
|
|
|
|
} else if (error.name === "NotFoundError") {
|
|
|
|
this.error = "ERROR: 这个设备上没有摄像头";
|
|
|
|
} else if (error.name === "NotSupportedError") {
|
|
|
|
this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)";
|
|
|
|
} else if (error.name === "NotReadableError") {
|
|
|
|
this.error = "ERROR: 相机被占用";
|
|
|
|
} else if (error.name === "OverconstrainedError") {
|
|
|
|
this.error = "ERROR: 安装摄像头不合适";
|
|
|
|
} else if (error.name === "StreamApiNotSupportedError") {
|
|
|
|
this.error = "ERROR: 此浏览器不支持流API";
|
|
|
|
} else {
|
|
|
|
this.error = '获取摄像头权限失败'
|
|
|
|
}
|
|
|
|
_this.$emit("fail", this.error)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
*{
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.scan-bg{
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100vh;
|
|
|
|
background: black;
|
|
|
|
z-index: 99999;
|
|
|
|
|
|
|
|
.scan-code{
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|