first commit

target/classes/static/components/plugins/sysScanCode/index.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="sign-container">
+        <template v-if="Object.keys(res).length === 0">
+            <div class="reader-container">
+                <div id="reader"></div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="weui-msg">
+                <div class="weui-msg__icon-area">
+                    <i v-if="res?.code !== 0" class="weui-icon-warn weui-icon_msg"></i>
+                    <i v-if="res?.code === 0" class="weui-icon-success weui-icon_msg"></i>
+                </div>
+                <div class="weui-msg__text-area">
+                    <div class="weui-msg__title">温馨提醒</div>
+                    <div v-html="res?.msg"></div>
+                </div>
+                <div class="weui-msg__opr-area">
+                    <p class="weui-btn-area">
+                        <a @click="res = {}; getCameras()"
+                           class="weui-btn weui-btn_primary">重新扫描</a>
+                    </p>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: "scanCode",
+    props: {
+
+    },
+    watch: {
+
+    },
+    data() {
+        return {
+            html5QrCode: null,
+            scanStatus: true,
+            cameraId: '',
+            res: {},
+        }
+    },
+    methods: {
+        getCameras() {
+            Html5Qrcode.getCameras()
+                .then((devices) => {
+                    if (devices && devices.length) {
+                        // 如果有2个摄像头，1为前置的
+                        if (devices.length > 1) {
+                            this.cameraId = devices[1].id;
+                        } else {
+                            this.cameraId = devices[0].id;
+                        }
+                        let isHuawei = navigator.userAgent.toLowerCase().match(/huawei/i) === 'huawei';
+                        if(isHuawei) {
+                            const backCamera = devices.filter(o => o.label.includes('back'))
+                            this.cameraId = backCamera[0].id;
+                        }
+                        this.start();
+                    }
+                })
+                .catch((err) => {
+                    this.$toast('未获取到摄像头信息')
+                })
+        },
+        start() {
+            this.html5QrCode = new Html5Qrcode("reader");
+            this.html5QrCode.start(
+                this.cameraId, // retreived in the previous step.
+                {
+                    fps: 100, // sets the framerate to 10 frame per second,
+                    qrbox: {width: 1000, height: 1000}, // sets only 250 X 250 region of viewfinder to
+                },
+                async (decodedText, decodedResult) => {
+                    this.res = await this.$axios.post(decodedText)
+                    this.closeScan()
+                },
+                (errorMessage) => {
+                    console.log(errorMessage);
+                }
+            )
+                .catch((err) => {
+                    alert(err)
+                    console.log(`Unable to start scanning, error: ` + err);
+                });
+        },
+        closeScan() {
+            this.html5QrCode?.stop()
+                .then((ignore) => {
+                    console.log("QR Code scanning stopped.");
+                })
+                .catch((err) => {
+                    console.log("Unable to stop scanning.");
+                });
+        },
+        init() {
+            this.getCameras()
+        }
+    },
+    created() {
+
+    },
+}
+</script>
+
+<style scoped>
+    .sign-container{
+        width: 100%;
+        height: 100%;
+    }
+    .reader-container {
+        padding-top: 50px;
+    }
+    #reader {
+        width: 90%;
+        margin: 0 auto;
+        text-align: center;
+    }
+    .weui-msg__icon-area {
+        margin-top: 30px;
+    }
+</style>