113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<template>
|
|
<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"></van-image>
|
|
</template>
|
|
</div>
|
|
<van-popup v-model="showSignaturePanel" :style="{ height: '100vh', width: '100vw' }">
|
|
<signature @save="save"></signature>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "h5-signature",
|
|
components: {
|
|
signature: httpVueLoader("/components/plugins/sysSignature/index.vue?v=" + new Date().getTime())
|
|
},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
this.signatureContent = val
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
signatureContent: null,
|
|
showSignaturePanel: false
|
|
}
|
|
},
|
|
methods: {
|
|
openSignature() {
|
|
this.showSignaturePanel = true
|
|
},
|
|
|
|
save(signature) {
|
|
const file = this.base64ToFile(signature, "signature.png")
|
|
const formData = new FormData()
|
|
formData.append("file", file)
|
|
axios
|
|
.post("/platform/signature/saveH5Signature", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data"
|
|
}
|
|
})
|
|
.then((res) => {
|
|
return res.data
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
alert("保存成功")
|
|
this.showSignaturePanel = false
|
|
this.$emit("input", res.data)
|
|
} else {
|
|
alert("保存失败")
|
|
}
|
|
})
|
|
},
|
|
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)
|
|
|
|
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 })
|
|
}
|
|
},
|
|
created() {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.h5-signature {
|
|
width: 100%;
|
|
}
|
|
|
|
.main-panel {
|
|
position: relative;
|
|
flex-direction: column-reverse;
|
|
display: flex;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.main-panel .van-image {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.main-panel .open-button {
|
|
color: var(--color-primary);
|
|
}
|
|
</style>
|