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