<template>
|
<BarScan ref="qrcode" @ok="getResult" @err="geterror"></BarScan>
|
</template>
|
|
<script>
|
import BarScan from "@/components/html5qrcode/index.vue";
|
import { Decrypt } from "@/utils/aes";
|
import { getVeghicleByNumApi } from "@/api/vehicle";
|
export default {
|
components: {
|
BarScan,
|
},
|
data() {
|
return {};
|
},
|
created() {
|
import("@/assets/js/media_750");
|
},
|
mounted() {},
|
beforeDestroy() {},
|
methods: {
|
getResult(result) {
|
console.log("xxxxxxx", result);
|
var urlParam = decodeURI(result.split("?")[1]);
|
console.log("xxxxxxx", result, urlParam);
|
|
if (urlParam) {
|
var queueNumber = urlParam.split("queueNumber=")[1].split("&")[0];
|
console.log("xxxxxxx", result, urlParam, queueNumber);
|
getVeghicleByNumApi(Decrypt(queueNumber))
|
.then((res) => {
|
this.$router.push({
|
path: "hexiaoInfo",
|
query: {
|
code: queueNumber,
|
},
|
});
|
})
|
.catch(() => {
|
this.$dialog.error("未查到车辆信息");
|
});
|
} else {
|
this.$dialog.error("未查到车辆信息");
|
}
|
},
|
geterror(e) {
|
this.$message.error(e);
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.qrcode1 {
|
position: relative;
|
width: 100vw;
|
height: 100%;
|
|
.box {
|
width: 253px;
|
height: 253px;
|
position: fixed;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
overflow: hidden;
|
border: 1px solid rgba(0, 164, 182, 0.2);
|
}
|
|
.line {
|
height: calc(100% - 2px);
|
width: 100%;
|
background: linear-gradient(180deg, rgba(0, 164, 182, 0) 43%, #00a4b6 211%);
|
border-bottom: 1px solid #00a4b6;
|
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;
|
}
|
|
.box:after,
|
.box:before,
|
.angle:after,
|
.angle:before {
|
content: "";
|
display: block;
|
position: absolute;
|
width: 2px;
|
height: 2px;
|
|
border: 1px solid transparent;
|
}
|
|
.box:after,
|
.box:before {
|
top: 0;
|
border-top-color: #00a4b6;
|
}
|
|
.angle:after,
|
.angle:before {
|
bottom: 0;
|
border-bottom-color: #00a4b6;
|
}
|
|
.box:before,
|
.angle:before {
|
left: 0;
|
border-left-color: #00a4b6;
|
}
|
|
.box:after,
|
.angle:after {
|
right: 0;
|
border-right-color: #00a4b6;
|
}
|
|
.kuang {
|
width: 280px;
|
height: 280px;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
@keyframes radar-beam {
|
0% {
|
transform: translateY(-100%);
|
}
|
|
100% {
|
transform: translateY(0);
|
}
|
}
|
}
|
</style>
|
