HomeLease/pages/signature/signature.vue
2025-09-15 17:23:09 +08:00

124 lines
3.7 KiB
Vue

<template>
<view style="width: 100vw; height: 80vh; background-color: #8f939c">
<l-signature
ref="signatureRef"
:openSmooth="openSmooth"
:penColor="penColor"
:penSize="penSize"
disableScroll
landscape
></l-signature>
</view>
<view class="btn-container">
<view style="width: 150rpx; background-color: #ffffff; transform: rotate(90deg); gap: 20rpx">
<button @click="onClick('clear')">清空</button>
<button @click="onClick('undo')">撤消</button>
<button @click="onClick('save')">提交</button>
</view>
</view>
</template>
<script>
import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'
import { postProtocolInstallation, postProtocolPartner } from '../../api/protocol/protocol'
export default {
onLoad(options) {
this.userInfo = {
name: decodeURIComponent(options.name || ''),
code: decodeURIComponent(options.code || ''),
phone: decodeURIComponent(options.phone || ''),
location: decodeURIComponent(options.location || ''),
businessLicenseUrl: decodeURIComponent(options.businessLicenseUrl || ''),
signatureUrl: decodeURIComponent(options.signatureUrl || ''),
templateId: decodeURIComponent(options.templateId || ''),
// 其他字段...
}
},
data() {
return {
title: 'Hello',
penColor: 'black',
penSize: 5,
url: '',
openSmooth: true,
resProtocolUrl: '',
resProtocol: '',
}
},
methods: {
async onClick(type) {
if (type === 'openSmooth') {
this.openSmooth = !this.openSmooth
return
}
if (type === 'save') {
await this.$refs.signatureRef.canvasToTempFilePath({
success: async res => {
// 是否为空画板 无签名
console.log('签名返回是否为空', res.isEmpty)
if (res.isEmpty) {
this.userInfo.signatureUrl = ''
return
}
// 生成图片的临时路径
// H5 生成的是base64
this.tempUrl = res.tempFilePath
console.log('临时路径', res.tempFilePath)
uni.showLoading({
title: '签名上传中',
mask: 'true',
})
this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
console.log('签名路径', this.userInfo.signatureUrl)
console.log('签名上传成功')
//uni.showToast({ title: '签名上传成功', icon: 'success' })
console.log('表单数据:', this.userInfo)
uni.hideLoading()
uni.showLoading({
title: '正在生成协议',
mask: 'true',
})
if (this.userInfo.templateId === '2') {
this.resProtocol = await postProtocolInstallation(this.userInfo)
} else if (this.userInfo.templateId === '1') {
this.resProtocol = await postProtocolPartner(this.userInfo)
}
uni.hideLoading()
//回跳首页
// await uni.switchTab({ url: '/pages/index/index' })
await uni.navigateBack({
delta: 2,
})
uni.downloadFile({
url: this.resProtocol.msg,
success: function (res) {
var filePath = res.tempFilePath
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {},
})
},
})
},
})
return
}
if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
},
},
}
</script>
<style lang="scss">
.btn-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>