137 lines
4.0 KiB
Vue
137 lines
4.0 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">
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "h5",
|
|
components: {
|
|
signature: httpVueLoader("/components/sign/index.vue?v=" + new Date().getTime())
|
|
},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ""
|
|
}
|
|
},
|
|
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)
|
|
|
|
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>
|
|
.h5-signature {
|
|
width: 100%;
|
|
}
|
|
|
|
.main-panel {
|
|
position: relative;
|
|
flex-direction: column-reverse;
|
|
display: flex;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.main-panel .van-image {
|
|
min-height: 150px;
|
|
display: block;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.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>
|