1.安装
npm install @zxing/library --save
封装组件
二维码绑定
扫码填入
解绑
</div>
</div>
</div>
</div>
<!-- 扫描盒子 -->
<div class="scan-box" v-if="scanTextData.showScanBox">
<div class="scan-cacel" @click="cancelScan" v-show="scanTextData.showScanBoxInfo">
<!-- <img src="" alt=""> -->
取消
</div>
<video ref="video" id="video" class="scan-video" v-show="scanTextData.showScanBoxInfo" autoplay></video>
<div class="scan-img" v-show="scanTextData.showScanBoxInfo">
<div class="scan-frame">
<span class="left-t"></span>
<span class="right-t"></span>
<span class="left-b"></span>
<span class="right-b"></span>
<span class="cross-line"></span>
</div>
</div>
<!-- <img src="/static/img/scan.svg" alt="" v-show="scanTextData.showScanBoxInfo"> -->
<div class="scan-tip" v-show="scanTextData.showScanBoxInfo"> {{scanTextData.tipMsg}} </div>
</div>name: 'scanCodePage',
data() {
return {
scanTextData:{
loadingShow: false,
codeReader: null,
scanText: '',
vin: null,
tipMsg: '将二维码置于屏幕中，即可识别',
tipShow: false,
showScanBox:false,
showScanBoxInfo:false,
},
hasBind:false
}
},
methods: {
toScanCode(){
console.log('识别二维码',this.dataObj)
scanTextData.codeReader = new BrowserMultiFormatReader();
this.scanTextData.showScanBox = true
this.openScan();
},
cancelScan(){
//识别完停止使用摄像头
let thisVideo = document.getElementById("video");
thisVideo.srcObject.getTracks()[0].stop()
scanTextData.codeReader.reset(); // 重置
this.scanTextData.showScanBox = false
setTimeout(()=>{
this.scanTextData.showScanBoxInfo = false
},1000)
},
async openScan() {
scanTextData.codeReader.getVideoInputDevices().then((videoInputDevices) => {
scanTextData.tipShow = true;
scanTextData.tipMsg = '正在调用摄像头...';
console.log('videoInputDevices', videoInputDevices);
// 默认获取第一个摄像头设备id
let firstDeviceId = videoInputDevices[0].deviceId;
// 获取第一个摄像头设备的名称
const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label);
if (videoInputDevices.length > 1) {
// 判断是否后置摄像头
if (videoInputDeviceslablestr.indexOf('back') > -1) {
firstDeviceId = videoInputDevices[0].deviceId;
} else {
firstDeviceId = videoInputDevices[1].deviceId;
}
}
this.decodeFromInputVideoFunc(firstDeviceId);
}).catch(err => {
scanTextData.tipShow = false;
console.error(err);
});
},
decodeFromInputVideoFunc(firstDeviceId) {
scanTextData.codeReader.reset(); // 重置
scanTextData.scanText = '';
scanTextData.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {
scanTextData.tipMsg = '将二维码置于屏幕中，即可识别';
scanTextData.scanText = '';
setTimeout(()=>{
this.scanTextData.showScanBoxInfo = true
},1000)
if (result) {
console.log('扫描结果', result.text);
if (result.text) {
console.log('扫描结果11', result.text);
this.scanTextData.showScanBox = false
this.scanTextData.showScanBoxInfo = false
this.scanTextData.scanText = result.text
//这里扫描出结果可以调用你想要的方法
//识别完停止使用摄像头
let thisVideo = document.getElementById("video");
thisVideo.srcObject.getTracks()[0].stop()
scanTextData.codeReader.reset(); // 重置
}
}else{
// console.log('没出来？',result,err)
}
if (err && !(err)) {
scanTextData.tipMsg = '识别失败';
setTimeout(() => {
scanTextData.tipShow = false;
}, 2000)
console.error(err);
}
});
},
},
props:['dataObj']}
width:100%;
height: 100px;
padding-top: 50px;
background: #fff;
.topTitle{
width:100%;
position: relative;
.pullTitle{
display: flex;
height: 80px;
line-height: 80px;
margin-top: -40px;
background: #fff;
align-items: center;
justify-content: space-between;
.pullName{
font-size: 30px;
color: rgba(0,0,0,0.85);
}
img{
width: 40px;
height: 40px;
}
.left-icon{
margin:0 15px;
}
span{
text-decoration: underline;
text-decoration-color: #42a5ff;
color: #42a5ff;
margin-left: 5px;
}
.right-part{
flex: 1;
display: flex;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
text-overflow: ellipsis;
input{
border:none;
flex: 1;
}
}
}
}}
.scan-index-bar{
background-image: linear-gradient( -45deg, #42a5ff ,#59cfff);}
.van-nav-bar__title{
color: #fff !important;}
.scan-box{
position: fixed;
top: 0;
left: 0;
z-index: 5;
height: 100%;
width: 100vw;
.scan-cacel{
position: absolute;
top: 30px;
left: 30px;
z-index: 9;
color: #fff;
font-size: 35px;
}}
.scan-video{
height: 100vh;
width: 100vw;
object-fit:cover;}
.scan-img{
width: 500px;
height: 500px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
z-index: 6;
.scan-frame{
width: 100%;
height: 100%;
position: relative;
.left-t,.right-t,.left-b,.right-b{
position: absolute;
width: 80px;
height: 80px;
}
.left-t{
top: 0;
left: 0;
border-top:2px solid #17B1B7;
border-left:2px solid #17B1B7;
}
.right-t{
top: 0;
right: 0;
border-top:2px solid #17B1B7;
border-right:2px solid #17B1B7;
}
.left-b{
bottom: 0;
left: 0;
border-bottom:2px solid #17B1B7;
border-left:2px solid #17B1B7;
}
.right-b{
bottom: 0;
right: 0;
border-bottom:2px solid #17B1B7;
border-right:2px solid #17B1B7;
}
.cross-line{
width: 600px;
height: 10px;
background: linear-gradient(to right, rgba(255, 255, 255, 0),#5DDDD3,rgba(255,255,255,0));
position: absolute;
top: 0;
left: -50px;
animation: identifier_p 5s infinite;
}
@keyframes identifier_p {
0%{
top: 0%;
}
50%{
top: 100%;
}
100%{
top: 0;
}
}
}}
.scan-tip{
width: 100vw;
text-align: center;
margin-bottom: 10vh;
color: white;
font-size: 5vw;
position: absolute;
bottom: 50px;
left: 0;
color: #fff;}
.page-scan{
overflow-y: hidden;
// background-color: #363636;}
