3 changed files with 218 additions and 266 deletions
@ -1,287 +1,181 @@ |
|||||
<template> |
<template> |
||||
<div class="scanCode"> |
<div style="height: 100vh"> |
||||
<div class="container"> |
<qrcode-stream @detect="onDecode" @error="onInit" style="height: 100%"> |
||||
<div class="qrcode"> |
<div> |
||||
|
<div class="qr-scanner"> |
||||
|
<!--顶部左边的返回箭头--> |
||||
<!-- 新增扫描线 --> |
<div> |
||||
<div class="scan-line"></div> |
<!-- <van-icon class="scanImg" @click="onClickLeft" name="arrow-left" /> --> |
||||
<!-- 新增边框装饰 --> |
<button @click="onClickLeft" name="arrow-left" ></button> |
||||
<div class="border-decor top-left"></div> |
|
||||
<div class="border-decor top-right"></div> |
|
||||
<div class="border-decor bottom-left"></div> |
|
||||
<div class="border-decor bottom-right"></div> |
|
||||
|
|
||||
<div class="btn"> |
|
||||
<div class="left-back" style="float: left;"> |
|
||||
|
|
||||
<el-icon @click="clickBack" style="border: white solid 0px;"> |
|
||||
<Back /> |
|
||||
</el-icon> |
|
||||
</div> |
</div> |
||||
<!-- <div class="right-file"> |
<!--中间的扫码框--> |
||||
|
<div class="box"> |
||||
<van-uploader |
<div class="line"></div> |
||||
v-model="fileList" |
<div class="angle"></div> |
||||
:preview-image="false" |
|
||||
:after-read="dealSelectFiles" |
|
||||
> |
|
||||
<el-icon><Picture /></el-icon> |
|
||||
</van-uploader> |
|
||||
</div> --> |
|
||||
</div> |
</div> |
||||
|
<div class="txt"> |
||||
|
将二维码/条码放入框内，即自动扫描 |
||||
<div id="reader"></div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<!--<div class="btn"> |
|
||||
<div class="left-back"> |
|
||||
|
|
||||
<el-icon @click="clickBack"> |
|
||||
<Back /> |
|
||||
</el-icon> |
|
||||
</div> |
</div> |
||||
<div class="right-file"> |
</qrcode-stream> |
||||
|
|
||||
<van-uploader |
|
||||
v-model="fileList" |
|
||||
:preview-image="false" |
|
||||
:after-read="dealSelectFiles" |
|
||||
> |
|
||||
<el-icon><Picture /></el-icon> |
|
||||
</van-uploader> |
|
||||
</div> |
|
||||
</div> --> |
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
<script setup lang="ts"> |
||||
<script setup> |
import {QrcodeStream} from "vue-qrcode-reader"; |
||||
import { reactive } from "vue"; |
import {ref} from "vue"; |
||||
import { defineComponent, toRefs, onMounted, onUnmounted } from "vue"; |
|
||||
import { Html5Qrcode } from "html5-qrcode"; |
|
||||
import { useRouter } from 'vue-router' |
// 定义变量 |
||||
|
const dataList = ref('') |
||||
const router = useRouter() |
const result = ref(true) |
||||
|
const error = ref('') |
||||
const state = reactive({ |
|
||||
html5QrCode: null, |
|
||||
fileList: [], |
// 扫码后返回的结果 |
||||
}); |
const onDecode = (res: any) => { |
||||
const start = () => { |
dataList.value = res |
||||
state.html5QrCode |
result.value = false |
||||
.start( |
console.log('你好',dataList.value) |
||||
{ facingMode: "environment" }, |
alert(dataList.value) |
||||
{ |
//showSuccessToast('扫描成功')--------------------------------------- |
||||
fps: 5, |
// 调用后台接口存入数据库 |
||||
qrbox: { width: 300, height: 210 }, |
// 数据存入数据库后跳转页面 |
||||
aspectRatio: 1.7,// |
} |
||||
}, |
// 初始化摄像头 |
||||
(decodedText, decodedResult) => { |
const onInit = async (promise: any) => { |
||||
window.location.href = decodedText; |
console.log('初始化摄像头',promise) |
||||
if (state.html5QrCode&&state.html5QrCode.isScanning) { |
|
||||
stop(); |
|
||||
} |
|
||||
console.log("decodedText", decodedText); |
|
||||
console.log("decodedResult", decodedResult); |
|
||||
} |
|
||||
) |
|
||||
.catch((err) => { |
|
||||
console.log("扫码错误信息", err); |
|
||||
let message = ""; // 错误信息处理仅供参考，具体描述自定义 |
|
||||
if (typeof err == "string") { |
|
||||
message = "二维码识别失败！"; |
|
||||
alert(message) |
|
||||
} else { |
|
||||
if (err.name == "NotAllowedError") { |
|
||||
message = "您需要授予相机访问权限！"; |
|
||||
} |
|
||||
if (err.name == "NotFoundError") { |
|
||||
message = "这个设备上没有摄像头！"; |
|
||||
} |
|
||||
if (err.name == "NotSupportedError") { |
|
||||
message = |
|
||||
"摄像头访问只支持在安全的上下文中，如https或localhost！"; |
|
||||
} |
|
||||
if (err.name == "NotReadableError") { |
|
||||
message = "相机被占用！"; |
|
||||
} |
|
||||
if (err.name == "OverconstrainedError") { |
|
||||
message = "安装摄像头不合适！"; |
|
||||
} |
|
||||
if (err.name == "StreamApiNotSupportedError") { |
|
||||
message = "此浏览器不支持流API！"; |
|
||||
} |
|
||||
alert(message) |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
const clickBack = () => { |
|
||||
//console.log(1) |
|
||||
if (state.html5QrCode&&state.html5QrCode.isScanning) { |
|
||||
stop(); |
|
||||
} |
|
||||
router.back(); |
|
||||
} |
|
||||
const getCameras = () => { |
|
||||
Html5Qrcode.getCameras() |
|
||||
.then((devices) => { |
|
||||
if (devices && devices.length) { |
|
||||
state.html5QrCode = new Html5Qrcode("reader"); |
|
||||
start(); |
|
||||
} |
|
||||
}) |
|
||||
.catch((err) => { |
|
||||
console.log(err) |
|
||||
alert("摄像头无访问权限！"); |
|
||||
}); |
|
||||
}; |
|
||||
const stop = () => { |
|
||||
state.html5QrCode |
|
||||
.stop() |
|
||||
.then((ignore) => { |
|
||||
console.log("停止扫码", ignore); |
|
||||
}) |
|
||||
.catch((err) => { |
|
||||
console.log(err); |
|
||||
alert("停止扫码失败"); |
|
||||
}); |
|
||||
}; |
|
||||
const dealSelectFiles = () => { |
|
||||
try { |
try { |
||||
window.qrcode.callback = (result) => { |
await promise |
||||
alert("成功了，结果是：" + result); |
}catch (err: any) { |
||||
}; // get select files. |
if (err.name === 'NotAllowedError') { |
||||
let file = state.fileList[0].file; |
error.value = 'ERROR: 您需要授予相机访问权限'; |
||||
var reader = new FileReader(); |
} else if (err.name === 'NotFoundError') { |
||||
reader.onload = (function () { |
error.value = 'ERROR: 这个设备上没有摄像头'; |
||||
return function (e) { |
} else if (err.name === 'NotSupportedError') { |
||||
window.qrcode.decode(e.target.result); |
error.value = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'; |
||||
}; |
} else if (err.name === 'NotReadableError') { |
||||
})(file); |
error.value = 'ERROR: 相机被占用'; |
||||
reader.readAsDataURL(file); |
} else if (err.name === 'OverconstrainedError') { |
||||
} catch (error) { |
error.value = 'ERROR: 安装摄像头不合适'; |
||||
alert("图片识别失败！"); |
} else if (err.name === 'StreamApiNotSupportedError') { |
||||
|
error.value = 'ERROR: 此浏览器不支持流API'; |
||||
} |
} |
||||
}; |
|
||||
onMounted(() => { |
|
||||
getCameras(); |
|
||||
}); |
|
||||
onUnmounted(() => { |
|
||||
//扫描设备是否在运行 |
|
||||
if (state.html5QrCode&&state.html5QrCode.isScanning) { |
|
||||
stop(); |
|
||||
} |
} |
||||
}); |
|
||||
|
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
|
|
||||
|
|
||||
// 新增动画样式 |
|
||||
@keyframes scanLine { |
|
||||
0% { transform: translateY(-100%); } |
|
||||
100% { transform: translateY(300%); } |
|
||||
} |
} |
||||
|
// 返回上一页箭头 |
||||
@keyframes borderPulse { |
const onClickLeft = () => { |
||||
0% { opacity: 0.8; } |
history.back(); |
||||
50% { opacity: 0.2; } |
|
||||
100% { opacity: 0.8; } |
|
||||
} |
} |
||||
|
</script> |
||||
.scan-line { |
<style scoped> |
||||
|
:deep(i.van-badge__wrapper.van-icon.van-icon-arrow-left.scanImg){ |
||||
|
font-size: 40px; |
||||
|
color: white; |
||||
|
} |
||||
|
.scanImg{ |
||||
|
margin-top: 30px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.error { |
||||
|
font-weight: bold; |
||||
|
color: red; |
||||
|
} |
||||
|
.cameraMessage { |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
} |
||||
|
.qr-scanner { |
||||
|
background-size: 3rem 3rem; |
||||
|
background-position: -1rem -1rem; |
||||
|
width: 100%; |
||||
|
/* height: 100%; */ |
||||
|
height: 100vh; |
||||
|
/* height: 288px; */ |
||||
|
position: relative; |
||||
|
background-color: #1110; |
||||
|
} |
||||
|
.qr-scanner .box { |
||||
|
width: 213px; |
||||
|
height: 213px; |
||||
position: absolute; |
position: absolute; |
||||
top: 0; |
|
||||
left: 50%; |
left: 50%; |
||||
transform: translateX(-50%); |
top: 50%; |
||||
width: 90%; |
transform: translate(-50%, -50%); |
||||
height: 2px; |
overflow: hidden; |
||||
background: linear-gradient(180deg, rgba(0,255,255,0) 0%, rgba(51,204,255,1) 50%, rgba(0,255,255,0) 100%); |
border: 1px solid #3aa5ff; |
||||
animation: scanLine 2s infinite linear; |
} |
||||
z-index: 2; |
.qr-scanner .txt { |
||||
} |
width: 100%; |
||||
|
height: 35px; |
||||
.border-decor { |
line-height: 35px; |
||||
|
font-size: 14px; |
||||
|
text-align: center; |
||||
|
/* color: #f9f9f9; */ |
||||
|
margin: 0 auto; |
||||
position: absolute; |
position: absolute; |
||||
width: 20px; |
top: 70%; |
||||
height: 20px; |
left: 0; |
||||
border: 2px solid #33ccff; |
} |
||||
animation: borderPulse 1.5s infinite ease-in-out; |
.qr-scanner .myQrcode { |
||||
|
text-align: center; |
||||
&.top-left { |
color: #3aa5ff; |
||||
top: -1px; |
} |
||||
left: -1px; |
.qr-scanner .line { |
||||
border-right: none; |
height: calc(100% - 2px); |
||||
border-bottom: none; |
width: 100%; |
||||
|
background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #3aa5ff 211%); |
||||
|
border-bottom: 1px solid #3aa5ff; |
||||
|
transform: translateY(-100%); |
||||
|
animation: radar-beam 2s infinite alternate; |
||||
|
animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99); |
||||
|
animation-delay: 1.4s; |
||||
|
} |
||||
|
|
||||
|
.qr-scanner .box:after, |
||||
|
.qr-scanner .box:before, |
||||
|
.qr-scanner .angle:after, |
||||
|
.qr-scanner .angle:before { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
width: 3vw; |
||||
|
height: 3vw; |
||||
} |
} |
||||
|
|
||||
&.top-right { |
.qr-scanner .box:after, |
||||
top: -1px; |
.qr-scanner .box:before { |
||||
right: -1px; |
top: 0; |
||||
border-left: none; |
border-top-color: #3aa5ff; |
||||
border-bottom: none; |
|
||||
} |
} |
||||
|
|
||||
&.bottom-left { |
.qr-scanner .angle:after, |
||||
bottom: -1px; |
.qr-scanner .angle:before { |
||||
left: -1px; |
bottom: 0; |
||||
border-right: none; |
border-bottom-color: #3aa5ff; |
||||
border-top: none; |
|
||||
} |
} |
||||
|
|
||||
&.bottom-right { |
.qr-scanner .box:before, |
||||
bottom: -1px; |
.qr-scanner .angle:before { |
||||
right: -1px; |
left: 0; |
||||
border-left: none; |
border-left-color: #3aa5ff; |
||||
border-top: none; |
|
||||
} |
} |
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
.scanCode { |
.qr-scanner .box:after, |
||||
height: 100vh; |
.qr-scanner .angle:after { |
||||
display: flex; |
right: 0; |
||||
flex-direction: column; |
border-right-color: #3aa5ff; |
||||
background: rgba(0, 0, 0); |
|
||||
} |
|
||||
// 调整原有样式 |
|
||||
.container { |
|
||||
position: relative; // 添加定位上下文 |
|
||||
} |
} |
||||
|
|
||||
#reader { |
@keyframes radar-beam { |
||||
position: relative; // 建立定位上下文 |
0% { |
||||
&::after { |
transform: translateY(-100%); |
||||
content: ''; |
|
||||
position: absolute; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
width: calc(100% - 4px); |
|
||||
height: calc(100% - 4px); |
|
||||
border: 2px solid rgba(255,255,255,0.1); |
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
.qrcode { |
100% { |
||||
position: relative; // 新增定位 |
transform: translateY(0); |
||||
} |
} |
||||
|
|
||||
.btn { |
|
||||
flex: 1; |
|
||||
padding-top: 2vw; |
|
||||
display: flex; |
|
||||
padding-left: 3vw; |
|
||||
color: #fff; |
|
||||
font-size: 6vw; |
|
||||
align-items: flex-start; |
|
||||
/* border: green solid 7px; */ |
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
Loading…
Reference in new issue