Merge branch 'master' of http://114.132.189.42:9002/r/mes-ocea-before

zouyu

2023-12-15 2e403b0ffa43b5411161d86b9c041acfb02831a1

 src/views/common/qrCodeApp.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,244 @@
<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>
// å¼•å…¥
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.result=result
                this.$emit("ok",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: ä»…允许在安全上下文中访问摄像机。使用HTTPS或本地主机，而不是HTTP。";
                } 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>