zhgh_hrbnu/src/main/resources/static/components/sign/sign.vue

<template>
    <el-card class="box-card" shadow="never">
        <div class="signature-body">
            <el-collapse-transition>
                <div v-show="showQrCode" class="qr-code-div">
                    <el-link type="primary" :underline="false">{{ scan_title }}</el-link>
                    <QrCode v-if="postAddress" :options="{ width: 126 }" :value="postAddress"></QrCode>
                </div>
            </el-collapse-transition>

            <el-image fit="contain" v-show="!showQrCode" v-loading="loading" style="height: 100px; width: 100%" :src="imageUrl">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
            <el-link
                type="danger"
                style="font-size: 12px; margin-top: 20px"
                @click="
                    refresh()
                    clear()
                "
                icon="el-icon-edit"
                v-show="!showQrCode"
            >
                重签
            </el-link>
        </div>
    </el-card>
</template>

<script>
window.signatureInterval = null

module.exports = {
    name: "Signature",
    props: {
        scan_title: {
            type: String,
            default: "扫描下方二维码进行签字"
        },
        prefix: {
            type: String,
            default: "DEFAULT"
        },
        qz: {
            type: String,
            default: ""
        },
        value: {
            type: String,
            default: ""
        },
        is_value_base64: {
            type: Boolean,
            default: true
        }
    },
    model: {
        prop: "qz",
        event: "change"
    },
    data() {
        return {
            showQrCode: false,
            loading: true,
            postAddress: "",
            imageUrl: ""
        }
    },
    methods: {
        refresh() {
            this.qz = ""
        },
        getImageUrl(value) {
            if (this.is_value_base64) {
                this.imageUrl = value
            } else {
                this.imageUrl = "/signature/getSignData?path=" + value
            }
        },
        startRequest() {
            this.imageUrl = ""
            clearInterval(signatureInterval)
            const ts = new Date().getTime() + (Math.floor(Math.random() * (1000 - 1 + 1)) + 1).toString()
            console.log(ts)
            // this.postAddress = location.protocol + '//' + location.host + '/signature?prefix=' + this.prefix + '&id=' + ts + "&is_value_base64=" + this.is_value_base64
            this.postAddress = "https://zhgh.hrbnu.edu.cn/signature?prefix=" + this.prefix + "&id=" + ts + "&is_value_base64=" + this.is_value_base64

            this.showQrCode = true

            console.log(this.postAddress)
            window.signatureInterval = setInterval(() => {
                $.get("/signature/getBase64?prefix=" + this.prefix + "&id=" + ts).then((res) => {
                    if (res != null) {
                        this.$emit("change", res)
                        this.$emit("update:qz", res)
                        this.getImageUrl(res)
                        this.qz = res
                        this.loading = false
                        this.save()
                        clearInterval(signatureInterval)
                    }
                })
            }, 1000 * 3)
        },
        async save() {
            if (this.is_value_base64) {
                localStorage.setItem("signature", this.qz)
            } else {
                return localStorage.setItem("signatureWelfare", this.qz)
            }
        },
        clear() {
            if (this.is_value_base64) {
                localStorage.removeItem("signature")
            } else {
                localStorage.removeItem("signatureWelfare")
            }
        },
        getSignature() {
            if (this.is_value_base64) {
                return localStorage.getItem("signature")
            } else {
                return localStorage.getItem("signatureWelfare")
            }
        },
        async getMySign() {
            setTimeout(() => {
                if (this.qz) {
                    this.getImageUrl(this.qz)
                } else {
                    $.get("/mobile/common/signing/getMySign", { prefix: this.prefix }).then((data) => {
                        if (data) {
                            this.getImageUrl(data)
                            this.$emit("change", data)
                            this.$emit("update:qz", data)
                            this.qz = data
                        }
                    })
                }
            }, 500)
        }
    },
    created() {
        this.getMySign()
    },
    watch: {
        qz: {
            handler(s) {
                this.loading = !s
                if (!s) {
                    const qz = this.getSignature()
                    if (!qz) {
                        this.$emit("change", "")
                        this.$emit("update:qz", "")
                        this.startRequest()
                    } else {
                        this.qz = qz
                        this.$emit("change", qz)
                        this.$emit("update:qz", qz)
                    }
                } else {
                    this.qz = s
                    this.showQrCode = false
                }
            },
            immediate: true
        }
    }
}
</script>

<style scoped>
.el-card__body {
    position: relative !important;
}

.signature-body {
    width: 100%;
    height: 100%;
    min-height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.qr-code-div {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 999;
}
</style>