@ganwei-web/ganwei-pc-cli 6.2.1 → 6.2.3

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/qrcodeReader/qrcodeReader.vue

@@ -0,0 +1,328 @@
+<template>
+    <div class="qrcode">
+        <div class="code" v-if="!isIos">
+            <button v-if="isFlag" class="close iconfont-app icongw-icon-fanghui" @click="turnCameraOff"></button>
+            <!-- decode是扫描结果的函数，torch用于是否需要打开手电筒，init用于检查该设备是否能够调用摄像头的权限，camera可用于打开前面或者后面摄像头  -->
+            <qrcode-stream ref="qrcodeStream" @decode="onRichScanCallback" :torch="lightingControl" @init="onInit"
+                :camera="camera" />
+            <div class="code-button" v-if="isFlag">
+                <el-row>
+                    <el-col :span="12">
+                        <button class="iconfont-app icongw-icon-shoudianton" @click="openLighting"
+                            v-if="!lightingControl"></button>
+                        <button class="iconfont-app icongw-icon-shoudianton torchActive" @click="closeLighting"
+                            v-else></button>
+                    </el-col>
+                    <el-col :span="12"><qrcode-capture @decode="onRichScanCallback"></qrcode-capture></el-col>
+                </el-row>
+            </div>
+            <div class="qr-scanner-box" v-if="isFlag">
+                <b class="txt">{{ text }}</b>
+                <div class="qr-scanner">
+                    <div class="box">
+                        <div class="line"></div>
+                        <div class="angle"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+import { MyJavaFun, Platform } from '@ganwei-web/gw-app-mfe'
+
+import QrcodeCapture from '../vue-qrcode-reader/src/components/QrcodeCapture.vue'
+import QrcodeStream from '../vue-qrcode-reader/src/components/QrcodeStream.vue'
+
+export interface IQRCodeProps {
+    camera: string
+    qrcode: boolean
+}
+
+export interface IQRCodeEmits {
+    (e: 'changeCamera', camera: string): void
+    (e: 'changeQrcode', qrcode: boolean): void
+    (e: 'onRichScanCallback', res: string): void
+}
+
+const props = withDefaults(
+    defineProps<IQRCodeProps>(),
+    {
+        camera: 'off',
+        qrcode: false
+    }
+)
+
+const emits = defineEmits<IQRCodeEmits>()
+alert(111)
+const isIos = (MyJavaFun.MoblieType === Platform.IOS || MyJavaFun.MoblieType === Platform.Harmony)
+console.log("isIos", isIos)
+const isFlag = ref(false)
+const text = ref('')
+const lightingControl = ref(false)
+
+const onInit = async (promise: Promise<unknown>) => {
+    try {
+        await promise;
+    } catch (err) {
+        isFlag.value = false
+        turnCameraOff()
+        ElMessageBox.alert('请使用HTTPS地址访问以及开启相机权限!', '提示', {
+            confirmButtonText: '确定',
+            callback: () => {
+                try {
+                    MyJavaFun.getCameraPermissions();
+                } catch (e) {
+                    console.log(e)
+                }
+            }
+        })
+    }
+    isFlag.value = true
+}
+
+const openLighting = () => {
+    MyJavaFun.TurnTorchOn() && (lightingControl.value = true)
+}
+
+const closeLighting = () => {
+    MyJavaFun.TurnTorchOn() && (lightingControl.value = false)
+}
+
+const turnCameraOff = () => {
+    emits('changeCamera', 'off')
+    emits('changeQrcode', false)
+}
+
+const onRichScanCallback = (res: string) => {
+    text.value = res
+    emits('onRichScanCallback', res)
+}
+
+const onRichScanClose = () => {
+    emits('changeQrcode', false)
+}
+
+onBeforeMount(() => {
+    window.onRichScanCallback = onRichScanCallback;
+    window.onRichScanClose = onRichScanClose;
+})
+
+onMounted(() => {
+    if (isIos) {
+        MyJavaFun.RichScan()
+    }
+})
+
+onBeforeUnmount(() => {
+    window.onRichScanCallback = undefined
+    window.onRichScanClose = undefined
+})
+</script>
+
+<style lang='scss' scoped>
+.qrcode {
+    position: fixed;
+    z-index: 99999;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background: black;
+}
+
+.code {
+    height: 100%;
+
+    .close {
+        position: absolute;
+        z-index: 2;
+        top: 20px;
+        left: 10px;
+
+        width: 30px;
+        height: 30px;
+
+        font-size: 20px;
+
+        background: rgb(255 255 255 / 50%);
+        border: none;
+        border-radius: 50%;
+    }
+
+    >div {
+        height: 100%;
+    }
+
+    .qrcode-stream-wrapper {
+        background: rgb(0 0 0 / 100%);
+    }
+
+    .code-button {
+        position: absolute;
+        z-index: 999999;
+        bottom: 0;
+        left: 0;
+
+        overflow: hidden;
+
+        width: 100%;
+        height: 100px;
+
+        background: rgb(255 255 255 / 50%);
+
+        .el-row {
+            display: flex;
+            align-items: center;
+            height: 100%;
+
+            .el-col-12 {
+                text-align: center;
+
+                button {
+                    font-size: 50px;
+                    background: transparent;
+                    border: 0;
+                }
+            }
+        }
+
+        .torchActive {
+            color: #00b4c6;
+        }
+    }
+}
+
+.qr-scanner-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    .txt {
+        position: absolute;
+        top: 20%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .qr-scanner {
+        position: relative;
+
+        width: 100%;
+        height: 100vh;
+
+        background-color: #1110;
+        background-image: linear-gradient(0deg,
+                transparent 24%,
+                rgb(32 255 77 / 10%) 25%,
+                rgb(32 255 77 / 10%) 26%,
+                transparent 27%,
+                transparent 74%,
+                rgb(32 255 77 / 10%) 75%,
+                rgb(32 255 77 / 10%) 76%,
+                transparent 77%,
+                transparent),
+            linear-gradient(90deg,
+                transparent 24%,
+                rgb(32 255 77 / 10%) 25%,
+                rgb(32 255 77 / 10%) 26%,
+                transparent 27%,
+                transparent 74%,
+                rgb(32 255 77 / 10%) 75%,
+                rgb(32 255 77 / 10%) 76%,
+                transparent 77%,
+                transparent);
+        background-position: -1rem -1rem;
+        background-size: 3rem 3rem;
+
+        .box {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+
+            overflow: hidden;
+
+            width: 213px;
+            height: 213px;
+
+            border: 0.1rem solid rgb(0 255 51 / 20%);
+        }
+
+        .line {
+            transform: translateY(-100%);
+
+            width: 100%;
+            height: calc(100% - 2px);
+
+            background: linear-gradient(180deg,
+                    rgb(0 255 51 / 0%) 43%,
+                    #0f3 211%);
+            border-bottom: 3px solid #0f3;
+
+            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: "";
+
+    position: absolute;
+
+    display: block;
+
+    width: 3vw;
+    height: 3vw;
+
+    border: 0.2rem solid transparent;
+}
+
+.qr-scanner .box::after,
+.qr-scanner .box::before {
+    top: 0;
+    border-top-color: #0f3;
+}
+
+.qr-scanner .angle::after,
+.qr-scanner .angle::before {
+    bottom: 0;
+    border-bottom-color: #0f3;
+}
+
+.qr-scanner .box::before,
+.qr-scanner .angle::before {
+    left: 0;
+    border-left-color: #0f3;
+}
+
+.qr-scanner .box::after,
+.qr-scanner .angle::after {
+    right: 0;
+    border-right-color: #0f3;
+}
+
+@keyframes radar-beam {
+    0% {
+        transform: translateY(-100%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/components/QrcodeCapture.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+        <button class="iconfont-app icongw-icon-beijing proxyClick" @click="proxyClick"></button>
+        <input
+            ref="input"
+            style="display: none;"
+            @change="onChangeInput"
+            type="file"
+            name="image"
+            accept="image/*"
+            capture="environment"
+            multiple
+        />
+    </div>
+</template>
+
+<script>
+import { processFile } from "../misc/scanner.js";
+import CommonAPI from "../mixins/CommonAPI.vue";
+
+export default {
+  name: "qrcode-capture",
+
+  mixins: [CommonAPI],
+
+  methods: {
+    proxyClick() {
+        try{
+          myJavaFun.getPictureMode(1);
+        }catch(e){
+            console.log(e)
+        }
+        this.$refs.input.click();
+    },
+    onChangeInput(event) {
+      const files = [...event.target.files];
+      const resultPromises = files.map(processFile);
+
+      resultPromises.forEach(this.onDetect);
+    }
+  }
+};
+</script>
+<style scoped>
+.proxyClick {
+    width: 50px;
+    height: 50px;
+
+    font-size: 50px;
+
+    background: transparent;
+    border: none;
+}
+</style>

package/ganwei-app-6.2.1/packages/ganwei-app-index/src/components/vue-qrcode-reader/src/components/QrcodeDropZone.vue

@@ -0,0 +1,42 @@
+<template lang="html">
+  <div
+    @drop.prevent.stop="onDrop"
+    @dragenter.prevent.stop="onDragOver(true)"
+    @dragleave.prevent.stop="onDragOver(false)"
+    @dragover.prevent.stop
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { processFile, processUrl } from "../misc/scanner.js";
+import CommonAPI from "../mixins/CommonAPI.vue";
+
+export default {
+  name: "qrcode-drop-zone",
+
+  mixins: [CommonAPI],
+
+  methods: {
+    onDragOver(isDraggingOver) {
+      this.$emit("dragover", isDraggingOver);
+    },
+
+    onDrop({ dataTransfer }) {
+      this.onDragOver(false);
+
+      const droppedFiles = [...dataTransfer.files];
+      const droppedUrl = dataTransfer.getData("text/uri-list");
+
+      droppedFiles.forEach(file => {
+        this.onDetect(processFile(file));
+      });
+
+      if (droppedUrl !== "") {
+        this.onDetect(processUrl(droppedUrl));
+      }
+    }
+  }
+};
+</script>