167 lines
3.7 KiB
Vue
167 lines
3.7 KiB
Vue
<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">
|
|
打开签字版
|
|
</van-button>
|
|
</div>
|
|
<van-popup v-model="signDrawingBoardShow" position="bottom" :style="{ height: '60vh' }">
|
|
<div id="canvas" style="position: relative;width: 100%"></div>
|
|
<div class="button-extra">
|
|
<van-button plain type="danger" hairline size="small" @click="reset">清空重签</van-button>
|
|
<van-button plain type="primary" hairline size="small" @click="confirm">确定</van-button>
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
module.exports = {
|
|
props: {
|
|
my_sign: {
|
|
type: String
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
immediate:true
|
|
}
|
|
},
|
|
methods: {
|
|
//打开签字画板
|
|
openSignDrawingBoard() {
|
|
this.signDrawingBoardShow = true
|
|
this.$nextTick(() => {
|
|
$("#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)
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
getImageUrl(value) {
|
|
if (this.is_value_base64) {
|
|
this.imageUrl = value
|
|
} else {
|
|
this.imageUrl = '/signature/getSignData?path=' + 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() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.clearBtn {
|
|
position: absolute !important;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
color: red;
|
|
z-index: 99;
|
|
}
|
|
|
|
#canvas {
|
|
height: calc(60vh - 100px);
|
|
width: 100vw;
|
|
}
|
|
|
|
.button-extra {
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.button-extra button {
|
|
width: 40%;
|
|
}
|
|
|
|
</style>
|