本地要用localhost。发布之后要用https的才可以看到。(你的设备也必须有摄像头)切记
<p class="title">卡号 <el-button type="primary" @click="toScanCode"><img src="../../assets/tubiao/saoma.png" alt=""><span>扫码</span> </el-button></p>
<div class="kahao">
<p><span>卡号:</span><el-input v-model="scanTextData.scanText"></el-input></p>
</div>
//安装
npm install @zxing/library --save
在这里插入代码片
<script>
// import VConsole from 'vconsole';
import { BrowserMultiFormatReader } from '@zxing/library';
let scanTextData = {
loadingShow: false,
codeReader: null,
scanText: '',
vin: null,
tipMsg: '将二维码置于屏幕中,即可识别',
tipShow: false
}
export default {
data(){
return{
// ops: {
// bar: {
// hoverStyle: true,
// onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
// showDelay: 0, // 在鼠标离开容器后多长时间隐藏滚动条。
// keepShow: false, // 滚动条是否保持显示。
// background: '#ccc' ,// 滚动条背景色。
// "overflow-x": "hidden"
// }
// },
input:'',
dataObj:{
qrCodeId:''
},
scanTextData:{
loadingShow: false,
codeReader: null,
scanText: '',
vin: null,
tipMsg: '将二维码置于屏幕中,即可识别',
tipShow: false,
showScanBox:false,
showScanBoxInfo:false,
},
hasBind:false
}
},
created(){
// let vConsole = new VConsole();
// console.log(vConsole)
},
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);
}
});
},
}
}
</script>
<style>
// 扫码
.pullWrap{
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;
}
}
}
}
}
</style>