From 57214d3ef6e7a32685b791ff3c8f1fc49539e055 Mon Sep 17 00:00:00 2001
From: Fixiaobai <fixiaobai@163.com>
Date: 星期四, 14 十二月 2023 22:59:10 +0800
Subject: [PATCH] Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before
---
src/views/common/qrCodeApp.vue | 245 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 245 insertions(+), 0 deletions(-)
diff --git a/src/views/common/qrCodeApp.vue b/src/views/common/qrCodeApp.vue
new file mode 100644
index 0000000..c50d1d4
--- /dev/null
+++ b/src/views/common/qrCodeApp.vue
@@ -0,0 +1,245 @@
+<template>
+ <div class="scan" style="height: 100%; width: 100%;">
+ <qrcode-stream v-show="isShow" :camera="camera" @decode="onDecode" @init="onInit"
+ style="height: 100%;">
+ <div>
+ <div class="qr-scanner">
+ <div style="display: flex;justify-content: end;">
+ <el-button plain @click="switchCamera">鍙嶈浆鐩告満</el-button>
+ <el-button plain @click="cancelCode">閫�鍑烘壂鐮�</el-button>
+ </div>
+ <div class="box">
+ <div class="line"></div>
+ <div class="angle"></div>
+ </div>
+ </div>
+ </div>
+ </qrcode-stream>
+ </div>
+</template>
+<script>
+// 涓嬭浇鎻掍欢
+// cnpm install --save vue-qrcode-reader
+// 寮曞叆
+import { QrcodeStream } from "vue-qrcode-reader";
+export default {
+ name: "codeCompont",
+ // 娉ㄥ唽
+ components: { QrcodeStream },
+ data() {
+ return {
+ isShow: true,
+ camera: "front",
+ result: "", // 鎵爜缁撴灉淇℃伅
+ error: "" // 閿欒淇℃伅
+ };
+ },
+ created() { },
+ methods: {
+ openCamera(){
+ this.camera="front"
+ },
+ //鍥炶皟鎵弿缁撴灉
+ onDecode(result) {
+ console.log(result);
+ if (result !== "") {
+ this.$emit("onDecode", result);
+ alert(result)
+ }
+ },
+ // 鐩告満鍙嶈浆
+ switchCamera() {
+ switch (this.camera) {
+ //鍓嶇疆
+ case 'front':
+ //杞�
+ this.camera = 'rear'
+ break
+ //鍙嶄箣
+ case 'rear':
+ this.camera = 'front'
+ break
+ default:
+ this.$toast('閿欒')
+ }
+ },
+ // 鍏抽棴鐩告満
+ turnCameraOff() {
+ this.camera = 'off'
+ },
+ cancelCode() {
+ this.turnCameraOff()
+ this.$emit("cancelCodeDialog")
+ },
+ // 妫�鏌ユ槸鍚﹁皟鐢ㄦ憚鍍忓ご
+ async onInit(promise) {
+ try {
+ const { capabilities } = await promise;
+ console.log(
+ "馃殌 ~ file: cameracomponent.vue:47 ~ onInit ~ capabilities",
+ capabilities
+ );
+ } catch (error) {
+ // console.log()
+ this.$toast(error.name);
+ 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";
+ } else if (error.name === "InsecureContextError") {
+ this.error =
+ "ERROR: 浠呭厑璁稿湪瀹夊叏涓婁笅鏂囦腑璁块棶鎽勫儚鏈恒�備娇鐢℉TTPS鎴栨湰鍦颁富鏈猴紝鑰屼笉鏄疕TTP銆�";
+ } else {
+ this.error = "ERROR:鎽勫儚鏈洪敊璇�";
+ }
+
+ this.$emit("err", this.error);
+ }
+ }
+ },
+ watch: {
+ "result": {
+ handler(newVal) {
+ console.log('鎵弿鍊�' + newVal);
+ },
+ deep: true
+ }
+ }
+};
+</script>
+<style scoped>
+.error {
+ font-weight: bold;
+ color: red;
+}
+</style>
+<style scoped>
+.scan {
+ width: 100%;
+ height: 100%;
+ border-color: #585858;
+ position: fixed;
+ top: 0;
+ left: 0;
+}
+
+.qrcode-stream-camera {
+ width: 100%;
+ height: 100%;
+ display: block;
+ -o-object-fit: cover;
+ object-fit: cover;
+ position: absolute;
+ top: 0%;
+ left: 0%;
+}
+
+.qr-scanner {
+ background-image: linear-gradient(0deg,
+ transparent 24%,
+ rgba(32, 255, 77, 0.1) 25%,
+ rgba(32, 255, 77, 0.1) 26%,
+ transparent 27%,
+ transparent 74%,
+ rgba(32, 255, 77, 0.1) 75%,
+ rgba(32, 255, 77, 0.1) 76%,
+ transparent 77%,
+ transparent),
+ linear-gradient(90deg,
+ transparent 24%,
+ rgba(32, 255, 77, 0.1) 25%,
+ rgba(32, 255, 77, 0.1) 26%,
+ transparent 27%,
+ transparent 74%,
+ rgba(32, 255, 77, 0.1) 75%,
+ rgba(32, 255, 77, 0.1) 76%,
+ transparent 77%,
+ transparent);
+ background-size: 3rem 3rem;
+ background-position: -1rem -1rem;
+ width: 100%;
+ /* height: 100%; */
+ height: 100vh;
+ position: relative;
+ /* background-color: #1110;*/
+
+ /* background-color: #111; */
+}
+
+.qr-scanner .box {
+ width: 213px;
+ height: 213px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ border: 0.1rem solid rgba(0, 255, 51, 0.2);
+ /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
+}
+
+.qr-scanner .line {
+ height: calc(100% - 2px);
+ width: 100%;
+ /* background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%); */
+ border-bottom: 3px solid #00ff33;
+ 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;
+ border: 0.2rem solid transparent;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .box:before {
+ top: 0;
+ border-top-color: #00ff33;
+}
+
+.qr-scanner .angle:after,
+.qr-scanner .angle:before {
+ bottom: 0;
+ border-bottom-color: #00ff33;
+}
+
+.qr-scanner .box:before,
+.qr-scanner .angle:before {
+ left: 0;
+ border-left-color: #00ff33;
+}
+
+.qr-scanner .box:after,
+.qr-scanner .angle:after {
+ right: 0;
+ border-right-color: #00ff33;
+}
+
+@keyframes radar-beam {
+ 0% {
+ transform: translateY(-100%);
+ }
+
+ 100% {
+ transform: translateY(0);
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3