66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div id="canvas" style="position: relative;border: 1px dashed #d5d2d2;width: 100%">
|
|
<van-button plain type="danger" hairline size="small" class="clearBtn" @click="reset">清空重签</van-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
module.exports = {
|
|
props: {
|
|
my_sign: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
methods: {
|
|
reset() {
|
|
$('#canvas').jSignature('reset')
|
|
this.$emit("update:my_sign", null)
|
|
},
|
|
checkNull() {
|
|
if ($("#canvas").jSignature("isModified") || this.my_sign === null) {
|
|
return $('#canvas').jSignature('getData', 'native').length === 0
|
|
} else {
|
|
return $('#canvas').jSignature('getData').length === 0
|
|
}
|
|
},
|
|
submitSign() {
|
|
this.$emit("update:my_sign", this.checkNull() ? null : $('#canvas').jSignature('getData'))
|
|
},
|
|
async updateSign() {
|
|
const data = await $.post("/mobile/common/signing/update", {sign: $('#canvas').jSignature('getData')})
|
|
},
|
|
async getMySign() {
|
|
const data = await $.get("/mobile/common/signing/getMySign")
|
|
if (data) {
|
|
$('#canvas').jSignature("setData", data)
|
|
this.$emit("update:my_sign", data)
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
await this.getMySign()
|
|
},
|
|
async mounted() {
|
|
$("#canvas").jSignature({
|
|
width: '100%',
|
|
height: 300,
|
|
"decor-color": "transparent",
|
|
lineWidth: '3'
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.clearBtn {
|
|
position: absolute !important;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
color: red;
|
|
z-index: 99;
|
|
}
|
|
</style>
|