20 changed files with 620 additions and 1234 deletions
@ -1,307 +0,0 @@ |
|||||
<template> |
|
||||
<div class="test"> |
|
||||
<div class="fixBox"> |
|
||||
<div class="iconBox" |
|
||||
@click="() => { |
|
||||
this.$router.history.go(-1); |
|
||||
}"> |
|
||||
<i class="iconfont icon-fanhuitubiao"></i> |
|
||||
</div> |
|
||||
<div class="videoBox"> |
|
||||
<div class="outVideo" v-if="isAnimation"> |
|
||||
<video |
|
||||
autoPlay |
|
||||
ref="outVideo" |
|
||||
webkit-playsinline |
|
||||
x5-video-player-type="h5" |
|
||||
x5-video-player-fullscreen="true" |
|
||||
x-webkit-airplay="true" |
|
||||
playsinline |
|
||||
v-if="!trueFlag" |
|
||||
id="myVideo" |
|
||||
></video> |
|
||||
</div> |
|
||||
<div class="codebg" v-if="!trueFlag"> |
|
||||
<div class="line"></div> |
|
||||
</div> |
|
||||
<canvas |
|
||||
id="qr-canvas" |
|
||||
style="width:6rem;height:6rem;" |
|
||||
ref="canvas" |
|
||||
></canvas> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import jsQR from "jsqr"; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
photoBase: "", |
|
||||
trueFlag: false, |
|
||||
isAnimation: true |
|
||||
}; |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.outvideo = this.$refs.outVideo; |
|
||||
this.cvsele = this.$refs.canvas; |
|
||||
this.canvas = this.cvsele.getContext("2d"); |
|
||||
this.video = document.createElement("video"); |
|
||||
this.$nextTick(() => { |
|
||||
this.getVideo(); |
|
||||
}); |
|
||||
}, |
|
||||
methods: { |
|
||||
getVideo() { |
|
||||
let self = this; |
|
||||
try { |
|
||||
navigator.getUserMedia = |
|
||||
navigator.mediaDevices.getUserMedia || |
|
||||
navigator.mediaDevices.webkitGetUserMedia || |
|
||||
navigator.mediaDevices.mozGetUserMedia; |
|
||||
self.URL = |
|
||||
window.URL || window.webkitURL || window.mozURL || window.msURL; |
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
|
||||
//console.log(navigator.mediaDevices.getUserMedia); |
|
||||
navigator.mediaDevices |
|
||||
.getUserMedia({ |
|
||||
video: {facingMode: {exact: "environment"}} |
|
||||
// video: { facingMode: "environment" } |
|
||||
}) |
|
||||
.then(stream => { |
|
||||
this.outvideo.srcObject = stream; |
|
||||
this.video.srcObject = stream; |
|
||||
this.video.setAttribute("playsinline", true); |
|
||||
this.video.setAttribute("webkit-playsinline", true); |
|
||||
this.video.addEventListener("loadedmetadata", () => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
setTimeout(() => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
}, 150); |
|
||||
}) |
|
||||
.catch(function (err) { |
|
||||
console.log(err); |
|
||||
alert("请允许网站使用您的摄像头权限"); |
|
||||
self.$router.history.go(-1); |
|
||||
}); |
|
||||
} else if (navigator.getUserMedia) { |
|
||||
navigator |
|
||||
.getUserMedia({ |
|
||||
video: true |
|
||||
}) |
|
||||
.then(stream => { |
|
||||
this.outvideo.srcObject = stream; |
|
||||
this.video.srcObject = stream; |
|
||||
this.video.setAttribute("playsinline", true); |
|
||||
this.video.setAttribute("webkit-playsinline", true); |
|
||||
this.video.addEventListener("loadedmetadata", () => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
setTimeout(() => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
}, 150); |
|
||||
}) |
|
||||
.catch(function (err) { |
|
||||
alert(err); |
|
||||
}); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
console.error(err); |
|
||||
} |
|
||||
}, |
|
||||
sweep() { |
|
||||
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) { |
|
||||
const {videoWidth, videoHeight} = this.video; |
|
||||
this.cvsele.width = videoWidth; |
|
||||
this.cvsele.height = videoHeight; |
|
||||
this.canvas.drawImage(this.video, 0, 0, videoWidth, videoHeight); |
|
||||
try { |
|
||||
const img = this.canvas.getImageData(0, 0, videoWidth, videoHeight); |
|
||||
this.imgurl = img; |
|
||||
const obj = jsQR(img.data, img.width, img.height, { |
|
||||
inversionAttempts: "dontInvert" |
|
||||
}); |
|
||||
console.log(obj); |
|
||||
if (obj) { |
|
||||
const loc = obj.location; |
|
||||
this.draw(loc.topLeftCorner, loc.topRightCorner); |
|
||||
this.draw(loc.topRightCorner, loc.bottomRightCorner); |
|
||||
this.draw(loc.bottomRightCorner, loc.bottomLeftCorner); |
|
||||
this.draw(loc.bottomLeftCorner, loc.topLeftCorner); |
|
||||
if (obj.data) { |
|
||||
console.info("识别结果：", obj.data); |
|
||||
this.isAnimation = false; |
|
||||
} |
|
||||
} else { |
|
||||
// console.error("识别失败，请检查二维码是否正确！"); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
// console.error("识别失败，请检查二维码是否正确！", err); |
|
||||
} |
|
||||
} |
|
||||
if (this.isAnimation) { |
|
||||
this.timer = requestAnimationFrame(() => { |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
draw(begin, end) { |
|
||||
this.canvas.beginPath(); |
|
||||
this.canvas.moveTo(begin.x, begin.y); |
|
||||
this.canvas.lineTo(end.x, end.y); |
|
||||
this.canvas.lineWidth = 3; |
|
||||
this.canvas.strokeStyle = "red"; |
|
||||
this.canvas.stroke(); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.test { |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.biginSearch { |
|
||||
outline: none; |
|
||||
border: none; |
|
||||
width: 3.15rem; |
|
||||
height: 0.8rem; |
|
||||
background: var(--themeColorzc); |
|
||||
border-radius: 0.1rem; |
|
||||
color: #fff; |
|
||||
font-weight: 700; |
|
||||
margin-top: 0.3rem; |
|
||||
font-size: 0.3rem; |
|
||||
} |
|
||||
|
|
||||
.fixBox { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
// background: rgba(47, 47, 47, 0.81); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.videoBox { |
|
||||
// border: 2px solid rgba(247, 241, 241, 0.81); |
|
||||
// width: 6rem; |
|
||||
// height: 6rem; |
|
||||
// overflow: hidden; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
background-color: black; |
|
||||
|
|
||||
.outVideo { |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
z-index: 999; |
|
||||
background-color: black; |
|
||||
|
|
||||
video { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: fill; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
canvas { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
} |
|
||||
|
|
||||
.codebg { |
|
||||
position: absolute; |
|
||||
width: 6rem; |
|
||||
height: 6rem; |
|
||||
margin: 0px auto; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
|
|
||||
z-index: 999; |
|
||||
/*此处为了居中*/ |
|
||||
// background: url(img/ewm1.jpg) center top no-repeat; |
|
||||
/*二维码*/ |
|
||||
} |
|
||||
|
|
||||
.line { |
|
||||
position: absolute; |
|
||||
left: 0px; |
|
||||
z-index: 2; |
|
||||
height: 3px; |
|
||||
width: 6rem; |
|
||||
/* background: url(img/share/dapai.png) no-repeat; */ |
|
||||
/*上下扫的线*/ |
|
||||
background-color: var(--themeColorzc); |
|
||||
opacity: 0.5; |
|
||||
/*动画效果*/ |
|
||||
animation: myScan 1s infinite alternate; |
|
||||
-webkit-animation: myScan 1s infinite alternate; |
|
||||
} |
|
||||
|
|
||||
@keyframes myScan { |
|
||||
from { |
|
||||
top: 0px; |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
top: 300px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: "iconfont"; /* Project id 2570754 */ |
|
||||
src: url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.woff2?t=1629957776725") format("woff2"), |
|
||||
url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.woff?t=1629957776725") format("woff"), |
|
||||
url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.ttf?t=1629957776725") format("truetype"); |
|
||||
} |
|
||||
|
|
||||
.iconfont { |
|
||||
font-family: "iconfont" !important; |
|
||||
font-size: 16px; |
|
||||
font-style: normal; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
.icon-fanhuitubiao:before { |
|
||||
font-size: 0.48rem; |
|
||||
color: #fff; |
|
||||
content: "\e65c"; |
|
||||
} |
|
||||
|
|
||||
.iconBox { |
|
||||
position: absolute; |
|
||||
top: 0.3rem; |
|
||||
left: 0.3rem; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
|
||||
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<p class="error">{{ error }}</p><!--错误信息--> |
|
||||
|
|
||||
<p class="decode-result">扫描结果: <b>{{ result }}</b></p><!--扫描结果--> |
|
||||
|
|
||||
<qrcode-stream @decode="onDecode" @init="onInit"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
//下载插件 |
|
||||
//cnpm install --save vue-qrcode-reader |
|
||||
|
|
||||
//引入 |
|
||||
import {QrcodeStream} from 'static/lib/vue-qrcode-reader'; |
|
||||
|
|
||||
export default { |
|
||||
|
|
||||
//注册 |
|
||||
name: "scanCode", |
|
||||
components: {QrcodeStream}, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
result: '',//扫码结果信息 |
|
||||
error: '',//错误信息 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
onDecode(result) { |
|
||||
alert(result); |
|
||||
this.result = result |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
async onInit(promise) { |
|
||||
try { |
|
||||
await promise |
|
||||
} catch (error) { |
|
||||
if (error.name === 'NotAllowedError') { |
|
||||
this.error = "ERROR: 您需要授予相机访问权限" |
|
||||
} else if (error.name === 'NotFoundError') { |
|
||||
this.error = "ERROR: 这个设备上没有摄像头" |
|
||||
} else if (error.name === 'NotSupportedError') { |
|
||||
this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)" |
|
||||
} else if (error.name === 'NotReadableError') { |
|
||||
this.error = "ERROR: 相机被占用" |
|
||||
} else if (error.name === 'OverconstrainedError') { |
|
||||
this.error = "ERROR: 安装摄像头不合适" |
|
||||
} else if (error.name === 'StreamApiNotSupportedError') { |
|
||||
this.error = "ERROR: 此浏览器不支持流API" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.error { |
|
||||
font-weight: bold; |
|
||||
color: red; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,53 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>首页二</title> |
||||
|
<meta name="renderer" content="webkit"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
||||
|
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
||||
|
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<input th:value="${mcode}" style="display:none;" id="mcode"> |
||||
|
<div class="layui-btn-container"> |
||||
|
<button class="layui-btn layui-btn-primary select_this" th:each="material,iterStar:${materialList}" th:value="${material.getCode()}" |
||||
|
th:text="${material.getMname()}"> |
||||
|
<i class="layui-icon layui-icon-down layui-font-12"></i> |
||||
|
</button> |
||||
|
</div> |
||||
|
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
||||
|
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
||||
|
|
||||
|
<script> |
||||
|
layui.use(['layer'], function () { |
||||
|
var $ = layui.jquery, |
||||
|
layer = layui.layer; |
||||
|
|
||||
|
let mcode = $("#mcode").val(); |
||||
|
|
||||
|
// 给每个按钮添加点击事件 |
||||
|
$(".select_this").on("click",function () { |
||||
|
// 获取当前点击物料编码 |
||||
|
var code = this.value; |
||||
|
// 获取当前点击物料名称 |
||||
|
var mname = this.innerText; |
||||
|
if(code !== mcode){ |
||||
|
// 如果点击的不是要出库的物料 |
||||
|
layer.msg("请选择正确物料",{ |
||||
|
icon:0, |
||||
|
time:500 |
||||
|
},function () { |
||||
|
|
||||
|
}) |
||||
|
}else{ |
||||
|
var index = parent.layer.getFrameIndex(window.name); |
||||
|
parent.layer.close(index); |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -1,307 +0,0 @@ |
|||||
<template> |
|
||||
<div class="test"> |
|
||||
<div class="fixBox"> |
|
||||
<div class="iconBox" |
|
||||
@click="() => { |
|
||||
this.$router.history.go(-1); |
|
||||
}"> |
|
||||
<i class="iconfont icon-fanhuitubiao"></i> |
|
||||
</div> |
|
||||
<div class="videoBox"> |
|
||||
<div class="outVideo" v-if="isAnimation"> |
|
||||
<video |
|
||||
autoPlay |
|
||||
ref="outVideo" |
|
||||
webkit-playsinline |
|
||||
x5-video-player-type="h5" |
|
||||
x5-video-player-fullscreen="true" |
|
||||
x-webkit-airplay="true" |
|
||||
playsinline |
|
||||
v-if="!trueFlag" |
|
||||
id="myVideo" |
|
||||
></video> |
|
||||
</div> |
|
||||
<div class="codebg" v-if="!trueFlag"> |
|
||||
<div class="line"></div> |
|
||||
</div> |
|
||||
<canvas |
|
||||
id="qr-canvas" |
|
||||
style="width:6rem;height:6rem;" |
|
||||
ref="canvas" |
|
||||
></canvas> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import jsQR from "jsqr"; |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
photoBase: "", |
|
||||
trueFlag: false, |
|
||||
isAnimation: true |
|
||||
}; |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.outvideo = this.$refs.outVideo; |
|
||||
this.cvsele = this.$refs.canvas; |
|
||||
this.canvas = this.cvsele.getContext("2d"); |
|
||||
this.video = document.createElement("video"); |
|
||||
this.$nextTick(() => { |
|
||||
this.getVideo(); |
|
||||
}); |
|
||||
}, |
|
||||
methods: { |
|
||||
getVideo() { |
|
||||
let self = this; |
|
||||
try { |
|
||||
navigator.getUserMedia = |
|
||||
navigator.mediaDevices.getUserMedia || |
|
||||
navigator.mediaDevices.webkitGetUserMedia || |
|
||||
navigator.mediaDevices.mozGetUserMedia; |
|
||||
self.URL = |
|
||||
window.URL || window.webkitURL || window.mozURL || window.msURL; |
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
|
||||
//console.log(navigator.mediaDevices.getUserMedia); |
|
||||
navigator.mediaDevices |
|
||||
.getUserMedia({ |
|
||||
video: {facingMode: {exact: "environment"}} |
|
||||
// video: { facingMode: "environment" } |
|
||||
}) |
|
||||
.then(stream => { |
|
||||
this.outvideo.srcObject = stream; |
|
||||
this.video.srcObject = stream; |
|
||||
this.video.setAttribute("playsinline", true); |
|
||||
this.video.setAttribute("webkit-playsinline", true); |
|
||||
this.video.addEventListener("loadedmetadata", () => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
setTimeout(() => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
}, 150); |
|
||||
}) |
|
||||
.catch(function (err) { |
|
||||
console.log(err); |
|
||||
alert("请允许网站使用您的摄像头权限"); |
|
||||
self.$router.history.go(-1); |
|
||||
}); |
|
||||
} else if (navigator.getUserMedia) { |
|
||||
navigator |
|
||||
.getUserMedia({ |
|
||||
video: true |
|
||||
}) |
|
||||
.then(stream => { |
|
||||
this.outvideo.srcObject = stream; |
|
||||
this.video.srcObject = stream; |
|
||||
this.video.setAttribute("playsinline", true); |
|
||||
this.video.setAttribute("webkit-playsinline", true); |
|
||||
this.video.addEventListener("loadedmetadata", () => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
setTimeout(() => { |
|
||||
this.$refs.outVideo.play(); |
|
||||
this.video.play(); |
|
||||
}, 150); |
|
||||
}) |
|
||||
.catch(function (err) { |
|
||||
alert(err); |
|
||||
}); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
console.error(err); |
|
||||
} |
|
||||
}, |
|
||||
sweep() { |
|
||||
if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) { |
|
||||
const {videoWidth, videoHeight} = this.video; |
|
||||
this.cvsele.width = videoWidth; |
|
||||
this.cvsele.height = videoHeight; |
|
||||
this.canvas.drawImage(this.video, 0, 0, videoWidth, videoHeight); |
|
||||
try { |
|
||||
const img = this.canvas.getImageData(0, 0, videoWidth, videoHeight); |
|
||||
this.imgurl = img; |
|
||||
const obj = jsQR(img.data, img.width, img.height, { |
|
||||
inversionAttempts: "dontInvert" |
|
||||
}); |
|
||||
console.log(obj); |
|
||||
if (obj) { |
|
||||
const loc = obj.location; |
|
||||
this.draw(loc.topLeftCorner, loc.topRightCorner); |
|
||||
this.draw(loc.topRightCorner, loc.bottomRightCorner); |
|
||||
this.draw(loc.bottomRightCorner, loc.bottomLeftCorner); |
|
||||
this.draw(loc.bottomLeftCorner, loc.topLeftCorner); |
|
||||
if (obj.data) { |
|
||||
console.info("识别结果：", obj.data); |
|
||||
this.isAnimation = false; |
|
||||
} |
|
||||
} else { |
|
||||
// console.error("识别失败，请检查二维码是否正确！"); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
// console.error("识别失败，请检查二维码是否正确！", err); |
|
||||
} |
|
||||
} |
|
||||
if (this.isAnimation) { |
|
||||
this.timer = requestAnimationFrame(() => { |
|
||||
this.sweep(); |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
draw(begin, end) { |
|
||||
this.canvas.beginPath(); |
|
||||
this.canvas.moveTo(begin.x, begin.y); |
|
||||
this.canvas.lineTo(end.x, end.y); |
|
||||
this.canvas.lineWidth = 3; |
|
||||
this.canvas.strokeStyle = "red"; |
|
||||
this.canvas.stroke(); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.test { |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.biginSearch { |
|
||||
outline: none; |
|
||||
border: none; |
|
||||
width: 3.15rem; |
|
||||
height: 0.8rem; |
|
||||
background: var(--themeColorzc); |
|
||||
border-radius: 0.1rem; |
|
||||
color: #fff; |
|
||||
font-weight: 700; |
|
||||
margin-top: 0.3rem; |
|
||||
font-size: 0.3rem; |
|
||||
} |
|
||||
|
|
||||
.fixBox { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
// background: rgba(47, 47, 47, 0.81); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.videoBox { |
|
||||
// border: 2px solid rgba(247, 241, 241, 0.81); |
|
||||
// width: 6rem; |
|
||||
// height: 6rem; |
|
||||
// overflow: hidden; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
background-color: black; |
|
||||
|
|
||||
.outVideo { |
|
||||
width: 100vw; |
|
||||
height: 100vh; |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
z-index: 999; |
|
||||
background-color: black; |
|
||||
|
|
||||
video { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
object-fit: fill; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
canvas { |
|
||||
position: absolute; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
} |
|
||||
|
|
||||
.codebg { |
|
||||
position: absolute; |
|
||||
width: 6rem; |
|
||||
height: 6rem; |
|
||||
margin: 0px auto; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
|
|
||||
z-index: 999; |
|
||||
/*此处为了居中*/ |
|
||||
// background: url(img/ewm1.jpg) center top no-repeat; |
|
||||
/*二维码*/ |
|
||||
} |
|
||||
|
|
||||
.line { |
|
||||
position: absolute; |
|
||||
left: 0px; |
|
||||
z-index: 2; |
|
||||
height: 3px; |
|
||||
width: 6rem; |
|
||||
/* background: url(img/share/dapai.png) no-repeat; */ |
|
||||
/*上下扫的线*/ |
|
||||
background-color: var(--themeColorzc); |
|
||||
opacity: 0.5; |
|
||||
/*动画效果*/ |
|
||||
animation: myScan 1s infinite alternate; |
|
||||
-webkit-animation: myScan 1s infinite alternate; |
|
||||
} |
|
||||
|
|
||||
@keyframes myScan { |
|
||||
from { |
|
||||
top: 0px; |
|
||||
} |
|
||||
|
|
||||
to { |
|
||||
top: 300px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@font-face { |
|
||||
font-family: "iconfont"; /* Project id 2570754 */ |
|
||||
src: url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.woff2?t=1629957776725") format("woff2"), |
|
||||
url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.woff?t=1629957776725") format("woff"), |
|
||||
url("//at.alicdn.com/t/font_2570754_w4gqnoegfag.ttf?t=1629957776725") format("truetype"); |
|
||||
} |
|
||||
|
|
||||
.iconfont { |
|
||||
font-family: "iconfont" !important; |
|
||||
font-size: 16px; |
|
||||
font-style: normal; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
|
||||
.icon-fanhuitubiao:before { |
|
||||
font-size: 0.48rem; |
|
||||
color: #fff; |
|
||||
content: "\e65c"; |
|
||||
} |
|
||||
|
|
||||
.iconBox { |
|
||||
position: absolute; |
|
||||
top: 0.3rem; |
|
||||
left: 0.3rem; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
|
||||
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<p class="error">{{ error }}</p><!--错误信息--> |
|
||||
|
|
||||
<p class="decode-result">扫描结果: <b>{{ result }}</b></p><!--扫描结果--> |
|
||||
|
|
||||
<qrcode-stream @decode="onDecode" @init="onInit"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
|
|
||||
//下载插件 |
|
||||
//cnpm install --save vue-qrcode-reader |
|
||||
|
|
||||
//引入 |
|
||||
import {QrcodeStream} from 'static/lib/vue-qrcode-reader'; |
|
||||
|
|
||||
export default { |
|
||||
|
|
||||
//注册 |
|
||||
name: "scanCode", |
|
||||
components: {QrcodeStream}, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
result: '',//扫码结果信息 |
|
||||
error: '',//错误信息 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
|
|
||||
onDecode(result) { |
|
||||
alert(result); |
|
||||
this.result = result |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
async onInit(promise) { |
|
||||
try { |
|
||||
await promise |
|
||||
} catch (error) { |
|
||||
if (error.name === 'NotAllowedError') { |
|
||||
this.error = "ERROR: 您需要授予相机访问权限" |
|
||||
} else if (error.name === 'NotFoundError') { |
|
||||
this.error = "ERROR: 这个设备上没有摄像头" |
|
||||
} else if (error.name === 'NotSupportedError') { |
|
||||
this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)" |
|
||||
} else if (error.name === 'NotReadableError') { |
|
||||
this.error = "ERROR: 相机被占用" |
|
||||
} else if (error.name === 'OverconstrainedError') { |
|
||||
this.error = "ERROR: 安装摄像头不合适" |
|
||||
} else if (error.name === 'StreamApiNotSupportedError') { |
|
||||
this.error = "ERROR: 此浏览器不支持流API" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.error { |
|
||||
font-weight: bold; |
|
||||
color: red; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue