9 changed files with 298 additions and 11 deletions
@ -0,0 +1,251 @@ |
|||||
|
<template> |
||||
|
<div class="page bgc-f4f4f4"> |
||||
|
<label class="backlab" @click="back()"></label> |
||||
|
<div class="video-show" /> |
||||
|
<video id="video" ref="video" class="video vjs-fluid" autoplay /> |
||||
|
<span class="change" @click="change"> |
||||
|
<i class="el-icon-refresh" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<!-- import Vconsolefrom from 'vconsole'; --> |
||||
|
<!-- new Vconsolefrom(); --> |
||||
|
|
||||
|
<script> |
||||
|
// 看到这个没，这个是一个小插件，能在手机上打开控制台，你打印的控制台信息和报错都能在这显示，具体方法自己百度 |
||||
|
import Vconsole from "vconsole"; |
||||
|
import { BrowserMultiFormatReader } from "@zxing/library"; |
||||
|
import {szyptGetToken} from '../../api/Home'; |
||||
|
import wx from 'weixin-js-sdk'; |
||||
|
export default { |
||||
|
name: "QrCodeSearch", |
||||
|
components: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
loadingShow: false, |
||||
|
// 这个就是从@zxing/library导出来的方法，new一个实例 |
||||
|
codeReader: new BrowserMultiFormatReader(), |
||||
|
// 这个，用来储存扫码得到的结果 |
||||
|
textContent: null, |
||||
|
// 这个，就是当前调用的摄像头的索引，为什么是6，我会在后面说的 |
||||
|
num: 6, |
||||
|
// 这个就是扫描到的摄像头的数量 |
||||
|
videoLength: "" |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// 让我们调用这个方法尝试打开摄像头 |
||||
|
this.openScan(); |
||||
|
// new Vconsole(); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 开打开打 |
||||
|
openScan() { |
||||
|
let that = this; |
||||
|
let fullUrl = window.location.href; |
||||
|
let code = fullUrl.substring(fullUrl.indexOf('code=')+5, fullUrl.indexOf('&state=')); |
||||
|
let paramUrl = window.location.href.split("#")[0]; |
||||
|
let param = { code: code, url: paramUrl }; |
||||
|
szyptGetToken(param,success =>{ |
||||
|
let resMsg = success.data; |
||||
|
console.log(resMsg); |
||||
|
wx.config({ |
||||
|
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 |
||||
|
debug: false, |
||||
|
// 必填，公众号的唯一标识 |
||||
|
appId: resMsg.corpid, |
||||
|
// 必填，生成签名的时间戳 |
||||
|
timestamp: resMsg.timestamp, |
||||
|
// 必填，生成签名的随机串 |
||||
|
nonceStr: resMsg.nonceStr, |
||||
|
// 必填，签名，见附录1 |
||||
|
signature: resMsg.signature, |
||||
|
// 必填，需要使用的JS接口列表，所有JS接口列表见附录2 |
||||
|
jsApiList: ["scanQRCode"], |
||||
|
}); |
||||
|
wx.ready(() => { |
||||
|
//微信扫一扫请求操作 |
||||
|
this.ClickScan() |
||||
|
}); |
||||
|
wx.error((res) => { |
||||
|
console.log("获取失败"); |
||||
|
}); |
||||
|
},error =>{}); |
||||
|
}, |
||||
|
ClickScan() { |
||||
|
wx.scanQRCode({ |
||||
|
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， |
||||
|
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有 |
||||
|
success: (res) => { |
||||
|
// 页面跳转 |
||||
|
console.log("=========== 扫码返回 ===========") |
||||
|
console.log(res) |
||||
|
this.$router.push({ |
||||
|
path:"/enterpriseScanPreview", |
||||
|
query:{ |
||||
|
enterpriseNumber: res.resultStr |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
cancel: (res) => { |
||||
|
console.log('err', res); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
//这就是在openScan里调的另一个方法，传入想调用的摄像头id和摄像头数量 |
||||
|
decodeFromInputVideoFunc(firstDeviceId, length) { |
||||
|
const that = this; |
||||
|
that.codeReader.reset(); // 重置 |
||||
|
that.textContent = null; // 重置 |
||||
|
// 看不懂不重要，打印出来自己琢磨琢磨 |
||||
|
that.codeReader.decodeFromInputVideoDeviceContinuously( |
||||
|
firstDeviceId, |
||||
|
"video", |
||||
|
(result, err) => { |
||||
|
that.textContent = null; |
||||
|
// 扫描成功 这个result就是扫描结果，长啥样自己打印出来看看 |
||||
|
if (result) { |
||||
|
that.textContent = result; |
||||
|
// 这里写你要对扫描结果做什么，我这里扫描出来的是个网址，写的页面跳转 |
||||
|
if (that.textContent) { |
||||
|
setTimeout(() => { |
||||
|
this.$router.push({ |
||||
|
path:"/enterpriseScanPreview", |
||||
|
query:{ |
||||
|
enterpriseNumber: that.textContent |
||||
|
} |
||||
|
}) |
||||
|
// 记得重置，不然在微信里用会有问题 |
||||
|
that.textContent = null; |
||||
|
that.codeReader && that.codeReader.reset(); |
||||
|
}, 100); |
||||
|
} |
||||
|
} |
||||
|
// 扫描失败，我这里是直接找下一个摄像头，其实可以不写 |
||||
|
if (err && !err) { |
||||
|
this.num++; |
||||
|
setTimeout(() => { |
||||
|
that.tipShow = false; |
||||
|
}, 2000); |
||||
|
if (this.num <= length) { |
||||
|
that.openScan(); |
||||
|
} |
||||
|
console.error(err); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
// 点击切换前后摄像头 |
||||
|
change() { |
||||
|
const that = this; |
||||
|
if (this.videoLength > 2) { |
||||
|
if (this.num < 2) { |
||||
|
this.num = 6; |
||||
|
} else { |
||||
|
this.num = 1; |
||||
|
} |
||||
|
that.textContent = null; |
||||
|
that.codeReader && that.codeReader.reset(); |
||||
|
that.openScan(); |
||||
|
} else { |
||||
|
if (that.num === 0) { |
||||
|
that.num = 1; |
||||
|
} else { |
||||
|
that.num = 0; |
||||
|
} |
||||
|
that.textContent = null; |
||||
|
that.codeReader && that.codeReader.reset(); |
||||
|
that.openScan(); |
||||
|
} |
||||
|
}, |
||||
|
back(){ |
||||
|
this.$router.go(-1); |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.backlab { |
||||
|
position: absolute; |
||||
|
z-index: 999999; |
||||
|
top: 0.5rem; |
||||
|
left: 0.35rem; |
||||
|
padding-left: 0; |
||||
|
width: 0.6rem; |
||||
|
height: 0.6rem; |
||||
|
background: url(../../assets/images/icon_arbw.png) no-repeat left 40% center; |
||||
|
background-size: auto 50%; |
||||
|
background-color: rgba(255, 255, 255, .2); |
||||
|
border: 1px solid rgba(255, 255, 255, .7); |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
.video { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.video-show { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 70vw; |
||||
|
height: 70vw; |
||||
|
z-index: 2; |
||||
|
background: linear-gradient(to left, #fff, #fff) left top no-repeat, |
||||
|
linear-gradient(to bottom, #fff, #fff) left top no-repeat, |
||||
|
linear-gradient(to left, #fff, #fff) right top no-repeat, |
||||
|
linear-gradient(to bottom, #fff, #fff) right top no-repeat, |
||||
|
linear-gradient(to left, #fff, #fff) left bottom no-repeat, |
||||
|
linear-gradient(to bottom, #fff, #fff) left bottom no-repeat, |
||||
|
linear-gradient(to left, #fff, #fff) right bottom no-repeat, |
||||
|
linear-gradient(to left, #fff, #fff) right bottom no-repeat; |
||||
|
background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; |
||||
|
} |
||||
|
.tip { |
||||
|
width: 10vw; |
||||
|
height: 10vw; |
||||
|
background-color: rgb(45, 236, 45); |
||||
|
border: 1px solid #ffffff; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
.bgc-f4f4f4 { |
||||
|
background-color: #363636; |
||||
|
} |
||||
|
|
||||
|
.page { |
||||
|
position: relative; |
||||
|
overflow-y: auto; |
||||
|
position: relative; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
.change { |
||||
|
z-index: 100; |
||||
|
position: fixed; |
||||
|
bottom: 40px; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
background-color: #fff; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 50%; |
||||
|
line-height: 60px; |
||||
|
/* align-content: center; */ |
||||
|
} |
||||
|
.el-icon-refresh { |
||||
|
color: #000; |
||||
|
font-size: 25px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue