110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<template>
|
|
<el-card shadow="never" class="pc-signature-card">
|
|
<div class="pc-signature">
|
|
<el-link type="primary">扫描下方二维码进行签字</el-link>
|
|
<div class="signature-body" v-loading="loading">
|
|
<QrCode v-if="!signatureContent" :options="{ width: 126 }" :value="signatureAddress"
|
|
class="signature-qrcode"></QrCode>
|
|
<el-image v-if="signatureContent" :src="signatureContent" class="signature-image"></el-image>
|
|
</div>
|
|
<el-link type="danger" icon="el-icon-edit" @click="signatureAgain" v-if="signatureContent">重签</el-link>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "sysSignaturePc",
|
|
store,
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.signatureContent = val
|
|
this.$emit("input", this.signatureContent)
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
//前端唯一标识 当然后端还有用户id作为唯一标识
|
|
id: new Date().getTime() + Math.floor(Math.random() * 10000) + 1,
|
|
signatureAddress: null,
|
|
interval: null,
|
|
signatureContent: null,
|
|
loading: true,
|
|
}
|
|
},
|
|
methods: {
|
|
async init() {
|
|
const {code, data} = await this.$axios.post("/platform/signature/get")
|
|
if (code === 0) {
|
|
this.signatureContent = data && data.signature
|
|
this.$emit("input", this.signatureContent)
|
|
}
|
|
this.signatureAddress = origin + "/platform/signature/scanPcCode?id=" + this.id
|
|
},
|
|
signatureAgain() {
|
|
const val = sessionStorage.getItem("h5-scan-code-signature-" + this.id)
|
|
this.signatureContent = val
|
|
this.$emit("input", val)
|
|
}
|
|
},
|
|
async mounted() {
|
|
await this.init()
|
|
webSocketPubSub.subscribe("h5-scan-code-signature", (data) => {
|
|
console.info("ws:收到签字成功消息:", data)
|
|
this.signatureContent = data.value
|
|
this.$emit("input", data.value)
|
|
})
|
|
|
|
// 可选：轮询或 watch ready 状态
|
|
const checkReady = () => {
|
|
if (webSocketPubSub.ws && webSocketPubSub.ws.readyState === WebSocket.OPEN) {
|
|
console.info("ws.readyState is open");
|
|
this.loading = false;
|
|
console.log(this.signatureAddress)
|
|
} else {
|
|
setTimeout(checkReady, 100);
|
|
}
|
|
};
|
|
checkReady();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pc-signature-card {
|
|
border: 1px solid var(--border-color-base);
|
|
}
|
|
|
|
.pc-signature {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
row-gap: 20px;
|
|
}
|
|
|
|
.signature-body {
|
|
position: relative;
|
|
}
|
|
|
|
.signature-qrcode {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.signature-image {
|
|
height: 100px;
|
|
width: auto;
|
|
}
|
|
</style>
|