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.
269 lines
8.0 KiB
269 lines
8.0 KiB
7 months ago
|
<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 { showFailToast } from 'vant';
|
||
|
|
import { BrowserMultiFormatReader } from "@zxing/library";
|
||
|
|
import {szyptGetToken} from '../../api/Home';
|
||
|
|
import {checkIsExists} from '@/api/enterprise';
|
||
|
|
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)
|
||
|
|
checkIsExists(res,success=>{
|
||
|
|
console.log(success.data)
|
||
|
|
if(success.data){
|
||
|
|
this.$router.push({
|
||
|
|
path:"/enterpriseScanPreview",
|
||
|
|
query:{
|
||
|
|
enterpriseNumber: res.resultStr
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
showFailToast('企业信息不存在，请确认二维码是否正确！');
|
||
|
|
this.$router.push({
|
||
|
|
path:"/enforce/scanQrCode",
|
||
|
|
query:{
|
||
|
|
enterpriseNumber: that.textContent
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},error =>{
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
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: 1.07rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #fff;
|
||
|
|
width: 1.33rem;
|
||
|
|
height: 1.33rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
line-height: 1.6rem;
|
||
|
|
/* align-content: center; */
|
||
|
|
}
|
||
|
|
.el-icon-refresh {
|
||
|
|
color: #000;
|
||
|
|
font-size: 0.66rem;
|
||
|
|
}
|
||
|
|
</style>
|