UNION_HUTB/target/classes/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(data) {
            if (!data) {
                return
            }
            if (data.startsWith("/signature/getSignData?") || data.startsWith('data:image/png;')) {
                this.imageUrl = data
            } else {
                this.imageUrl = '/signature/getSignData?path=' + data
            }

            localStorage.setItem("signature", data)
            localStorage.setItem("signatureWelfare", data)
            clearInterval(signatureInterval)
        },
        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?id=' + ts
            // this.postAddress = 'https://zhgh.hmc.edu.cn/signature?id=' + ts

            this.showQrCode = true

            console.log(this.postAddress)
            window.signatureInterval = setInterval(() => {
                $.get("/signature/getBase64?id=" + ts).then(res => {
                    if (res != null) {
                        this.$emit("change", res)
                        this.$emit("update:qz", res)
                        console.log(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").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>