pref#hmc_签字组件、福利
This commit is contained in:
Paidax
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div class="signature-wrap">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="action-buttons">
|
||||
<button @click="clear" class="action-button-danger" type="button">清空</button>
|
||||
<button @click="undo" class="action-button-warning" type="button">撤销</button>
|
||||
<button @click="save" class="action-button-primary" type="button">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// function a() {
|
||||
// // 检查当前屏幕方向
|
||||
// if (window.orientation === 0 || window.orientation === 180) {
|
||||
// // 竖屏状态
|
||||
// console.log("竖屏状态")
|
||||
// alert("当前不支持竖屏，请将设备调整为横屏！")
|
||||
// } else {
|
||||
// // 横屏状态，执行禁止旋转的操作
|
||||
// alert("当前不支持横屏，请将设备调整为竖屏！")
|
||||
// // 可以在这里使内容固定在竖屏方向
|
||||
// const innerWidth = window.innerWidth
|
||||
// const innerHeight = window.innerHeight
|
||||
// alert(innerHeight)
|
||||
// alert(innerWidth)
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// window.addEventListener("orientationchange", a)
|
||||
// a()
|
||||
|
||||
let signature = null
|
||||
module.exports = {
|
||||
name: "sysSignature",
|
||||
data() {
|
||||
return {
|
||||
content: null,
|
||||
initialized: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
signature.clear()
|
||||
},
|
||||
undo() {
|
||||
signature.undo()
|
||||
},
|
||||
rotate() {
|
||||
signature.getRotateCanvas(90)
|
||||
},
|
||||
save() {
|
||||
if (signature.isEmpty()) {
|
||||
alert("请签字后再保存")
|
||||
return
|
||||
}
|
||||
// const png = signature.getPNG()
|
||||
//旋转一下 横过来
|
||||
const rotateCanvas = signature.getRotateCanvas(-90)
|
||||
this.$emit("save", rotateCanvas.toDataURL())
|
||||
},
|
||||
|
||||
initSignature() {
|
||||
if (this.initialized) return;
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (!canvas) return;
|
||||
|
||||
// 检查 canvas 是否已有有效尺寸
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
if (rect.width <= 0 || rect.height <= 0) {
|
||||
// 尺寸无效，稍后重试
|
||||
setTimeout(() => this.initSignature(), 50);
|
||||
return;
|
||||
}
|
||||
|
||||
const padding = 30;
|
||||
const width = window.innerWidth - padding;
|
||||
const height = window.innerHeight - padding;
|
||||
|
||||
// 设置 CSS 尺寸
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
|
||||
// 高清绘制
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = width * dpr;
|
||||
canvas.height = height * dpr;
|
||||
|
||||
// 销毁旧实例（防止重复）
|
||||
if (signature) {
|
||||
signature.clear();
|
||||
}
|
||||
|
||||
signature = new SmoothSignature(canvas, {
|
||||
width: width,
|
||||
height: height,
|
||||
scale: dpr,
|
||||
minWidth: 4,
|
||||
maxWidth: 10,
|
||||
color: "#000000"
|
||||
});
|
||||
|
||||
this.initialized = true;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 延迟初始化，确保 DOM 渲染完成
|
||||
this.$nextTick(() => {
|
||||
this.initSignature();
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
signature = null;
|
||||
this.initialized = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.signature-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.signature-wrap .action {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-wrap .action-buttons {
|
||||
white-space: nowrap;
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 60px;
|
||||
transform: rotate(90deg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 20px;
|
||||
}
|
||||
|
||||
.action-buttons button {
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 3px 12px;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.action-button-primary {
|
||||
background-color: #1677ff;
|
||||
border: 1px solid #1677ff;
|
||||
}
|
||||
|
||||
.action-button-danger {
|
||||
background-color: #ff3141;
|
||||
border: 1px solid #ff3141;
|
||||
}
|
||||
|
||||
.action-button-warning {
|
||||
background-color: #ff8f1f;
|
||||
border: 1px solid #ff8f1f;
|
||||
}
|
||||
|
||||
.signature-wrap canvas {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
border: 2px dashed #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +1,136 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<van-image :src="imageUrl" v-if="!signDrawingBoardShow"
|
||||
style="width: 100%;height: 150px;border: 1px dashed"></van-image>
|
||||
<div style="text-align: right">
|
||||
<van-button plain type="danger" hairline size="small" @click="openSignDrawingBoard" native-type="button">
|
||||
打开签字版
|
||||
</van-button>
|
||||
<div class="h5-signature">
|
||||
<div v-if="!showSignaturePanel" class="main-panel">
|
||||
<slot v-if="$slots.default"></slot>
|
||||
<template v-else>
|
||||
<van-button @click="openSignature" class="open-button" size="middle" plain native-type="button">打开签字板</van-button>
|
||||
<van-image :src="signatureContent">
|
||||
<template v-slot:error>请点击下方打开签字板按钮进行签字</template>
|
||||
</van-image>
|
||||
</template>
|
||||
</div>
|
||||
<van-popup v-model="showSignaturePanel" :style="{ height: '100vh', width: '100vw', display: 'flex', 'align-items': 'center' }">
|
||||
<signature v-if="showSignaturePanel" @save="save"></signature>
|
||||
</van-popup>
|
||||
</div>
|
||||
<van-popup v-model="signDrawingBoardShow" position="bottom" :style="{ height: '60vh' }" get-container="body">
|
||||
<div id="canvas" style="position: relative;width: 100%;height:calc(100% - 50px)"></div>
|
||||
<div class="button-extra"
|
||||
style="height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
column-gap:20px">
|
||||
<van-button plain type="danger" block hairline @click="reset" native-type="button">清空重签</van-button>
|
||||
<van-button plain type="primary" block hairline @click="confirm" native-type="button">确定</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
module.exports = {
|
||||
props: {
|
||||
my_sign: {
|
||||
type: String
|
||||
name: "h5",
|
||||
components: {
|
||||
signature: httpVueLoader("/components/sign/index.vue?v=" + new Date().getTime())
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
},
|
||||
is_value_base64: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signDrawingBoardShow: false,
|
||||
signData: null,
|
||||
imageUrl: "",
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (val) {
|
||||
if (val) {
|
||||
this.getImageUrl(val)
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//打开签字画板
|
||||
openSignDrawingBoard() {
|
||||
this.signDrawingBoardShow = true
|
||||
this.$nextTick(() => {
|
||||
// 删除之前的canvas
|
||||
$("#canvas").empty()
|
||||
$("#canvas").jSignature({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
"decor-color": "transparent",
|
||||
lineWidth: '3'
|
||||
})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
$('#canvas').jSignature('reset')
|
||||
this.$emit("update:my_sign", null)
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const isNull = $('#canvas').jSignature('getData', 'native').length === 0
|
||||
if (isNull) {
|
||||
this.$modal.msgError("请签字后再确定")
|
||||
return
|
||||
}
|
||||
this.signData = $('#canvas').jSignature('getData')
|
||||
this.signDrawingBoardShow = false
|
||||
this.uploadSignData()
|
||||
},
|
||||
|
||||
async uploadSignData() {
|
||||
if (this.is_value_base64) {
|
||||
this.$emit('input', this.signData)
|
||||
this.$emit("update:my_sign", this.signData)
|
||||
this.getImageUrl(this.signData)
|
||||
} else {
|
||||
const {data, code, msg} = await $.post('/signature/uploadSignData', {data: this.signData})
|
||||
if (code === 0) {
|
||||
console.log(data)
|
||||
this.getImageUrl(data)
|
||||
this.$emit('input', data)
|
||||
this.$emit("update:my_sign", data)
|
||||
} else {
|
||||
this.$modal.msgError(msg)
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (!val) {
|
||||
this.signatureContent = val
|
||||
return
|
||||
}
|
||||
if (val.startsWith("/signature/getSignData?") || val.startsWith('data:image/png;')) {
|
||||
this.signatureContent = val
|
||||
} else {
|
||||
this.signatureContent = '/signature/getSignData?path=' + val
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signatureContent: null,
|
||||
showSignaturePanel: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openSignature() {
|
||||
this.showSignaturePanel = true
|
||||
},
|
||||
|
||||
save(signature) {
|
||||
$.post("/mobile/common/signing/update", {sign: signature})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success("保存成功")
|
||||
this.showSignaturePanel = false
|
||||
this.getMySign()
|
||||
} else {
|
||||
this.$toast.fail("保存失败")
|
||||
}
|
||||
})
|
||||
},
|
||||
base64ToFile(base64Data, filename) {
|
||||
// 将base64的数据部分提取出来
|
||||
const parts = base64Data.split(";base64,")
|
||||
const contentType = parts[0].split(":")[1]
|
||||
const raw = window.atob(parts[1])
|
||||
const rawLength = raw.length
|
||||
const uInt8Array = new Uint8Array(rawLength)
|
||||
|
||||
},
|
||||
getImageUrl(value) {
|
||||
if (this.is_value_base64) {
|
||||
this.imageUrl = value
|
||||
} else {
|
||||
this.imageUrl = '/signature/getSignData?path=' + value
|
||||
}
|
||||
this.$emit('input', value)
|
||||
},
|
||||
checkNull() {
|
||||
return $('#canvas').jSignature('getData', 'native').length === 0
|
||||
},
|
||||
submitSign() {
|
||||
this.$emit("update:my_sign", $('#canvas').jSignature('getData'))
|
||||
},
|
||||
async updateSign() {
|
||||
const data = await $.post("/mobile/common/signing/update", {
|
||||
sign: $('#canvas').jSignature('getData'),
|
||||
prefix: this.prefix
|
||||
})
|
||||
},
|
||||
async getMySign() {
|
||||
const data = await $.get("/mobile/common/signing/getMySign", {prefix: this.prefix})
|
||||
if (data) {
|
||||
this.getImageUrl(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getMySign()
|
||||
},
|
||||
async mounted() {
|
||||
for (let i = 0; i < rawLength; ++i) {
|
||||
uInt8Array[i] = raw.charCodeAt(i)
|
||||
}
|
||||
|
||||
}
|
||||
// 使用Blob对象创建File对象
|
||||
const blob = new Blob([uInt8Array], { type: contentType })
|
||||
blob.lastModifiedDate = new Date()
|
||||
blob.name = filename
|
||||
return new File([blob], filename, { type: contentType })
|
||||
},
|
||||
async getMySign() {
|
||||
const data = await $.get("/mobile/common/signing/getMySign")
|
||||
if (data) {
|
||||
if (data.startsWith("/signature/getSignData?") || data.startsWith('data:image/png;')) {
|
||||
this.signatureContent = data
|
||||
} else {
|
||||
this.signatureContent = '/signature/getSignData?path=' + data
|
||||
}
|
||||
this.$emit("input", data)
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.getMySign()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.clearBtn {
|
||||
position: absolute !important;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
color: red;
|
||||
z-index: 99;
|
||||
<style>
|
||||
.h5-signature {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
height: calc(60vh - 100px);
|
||||
width: 100vw;
|
||||
.main-panel {
|
||||
position: relative;
|
||||
flex-direction: column-reverse;
|
||||
display: flex;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
.button-extra {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
.main-panel .van-image {
|
||||
min-height: 150px;
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.button-extra button {
|
||||
width: 40%;
|
||||
.main-panel .open-button {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
background: rgb(33, 109, 179);
|
||||
border-color: rgb(33, 109, 179);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="never">
|
||||
<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 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-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>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -30,174 +30,182 @@
|
||||
window.signatureInterval = null
|
||||
|
||||
module.exports = {
|
||||
name: "Signature",
|
||||
props: {
|
||||
scan_title: {
|
||||
type: String,
|
||||
default: '请使用【手机钉钉】扫描二维码进行签字'
|
||||
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
|
||||
}
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'DEFAULT'
|
||||
model: {
|
||||
prop: 'qz',
|
||||
event: 'change'
|
||||
},
|
||||
qz: {
|
||||
type: String,
|
||||
default: ''
|
||||
data() {
|
||||
return {
|
||||
showQrCode: false,
|
||||
loading: true,
|
||||
postAddress: '',
|
||||
imageUrl: '',
|
||||
}
|
||||
},
|
||||
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.hmc.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
|
||||
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)
|
||||
|
||||
|
||||
}
|
||||
}, 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
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-card__body {
|
||||
position: relative !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.signature-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user