WindowBird/HomeLease
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现安装协议信息填写后去签名页面，分步提交

Browse Source
This commit is contained in:
WindowBird 2025-09-11 18:01:31 +08:00
parent ef8c6d1705
commit b5ef305654
2 changed files with 78 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
pages/InstallationAgreement/InstallationAgreement.vue
View File

@ -46,9 +46,9 @@
</uv-button> </uv-button>
<uv-button <uv-button
customStyle="margin-top: 10px" customStyle="margin-top: 10px"
text="已阅读协议并去签名" text="确认协议并提交"
type="primary" type="primary"
@click="goToSignature" @click="submit"
> >
</uv-button> </uv-button>
<!-- <uv-button--> <!-- <uv-button-->
@ -148,9 +148,7 @@ export default {
}, },
}) })
}, },
goToSignature() {
uni.navigateTo(/pages/)
},
handleUploadSuccess(result) { handleUploadSuccess(result) {
console.log('图片上传成功:', result.url) console.log('图片上传成功:', result.url)
this.userInfo.businessLicenseUrl = result.url this.userInfo.businessLicenseUrl = result.url
@ -170,13 +168,13 @@ export default {
}) })
return return
} }
if (this.userInfo.signatureUrl === '') { // if (this.userInfo.signatureUrl === '') {
uni.showToast({ // uni.showToast({
icon: 'error', // icon: 'error',
title: '请确认签名', // title: '请确认签名',
}) // })
return // return
} // }
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
this.$refs.form this.$refs.form
@ -188,6 +186,9 @@ export default {
}) })
// 这里可以添加实际的提交逻辑 // 这里可以添加实际的提交逻辑
console.log('表单数据:', this.userInfo) console.log('表单数据:', this.userInfo)
uni.navigateTo({
url: '/pages/signature/signature',
})
}) })
.catch(errors => { .catch(errors => {
uni.showToast({ uni.showToast({
@ -207,39 +208,39 @@ export default {
hideKeyboard() { hideKeyboard() {
uni.hideKeyboard() uni.hideKeyboard()
}, },
async onClick(type) { // async onClick(type) {
if (type === 'openSmooth') { // if (type === 'openSmooth') {
this.openSmooth = !this.openSmooth // this.openSmooth = !this.openSmooth
return // return
} // }
if (type === 'save') { // if (type === 'save') {
await this.$refs.signatureRef.canvasToTempFilePath({ // await this.$refs.signatureRef.canvasToTempFilePath({
success: async res => { // success: async res => {
// 是否为空画板 无签名 // // 是否为空画板 无签名
console.log('签名返回是否为空', res.isEmpty) // console.log('签名返回是否为空', res.isEmpty)
if (res.isEmpty) { // if (res.isEmpty) {
this.userInfo.signatureUrl = '' // this.userInfo.signatureUrl = ''
return // return
} // }
//
// 生成图片的临时路径 // // 生成图片的临时路径
// H5 生成的是base64 // // H5 生成的是base64
this.tempUrl = res.tempFilePath // this.tempUrl = res.tempFilePath
console.log('临时路径', res.tempFilePath) // console.log('临时路径', res.tempFilePath)
//
this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath) // this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
console.log('签名路径', this.userInfo.signatureUrl) // console.log('签名路径', this.userInfo.signatureUrl)
console.log('签名上传成功') // console.log('签名上传成功')
uni.showToast({ title: '签名上传成功', icon: 'success' }) // uni.showToast({ title: '签名上传成功', icon: 'success' })
}, // },
}) // })
return // return
} // }
if (type === 'clear') { // if (type === 'clear') {
this.userInfo.signatureUrl = '' // this.userInfo.signatureUrl = ''
} // }
if (this.$refs.signatureRef) this.$refs.signatureRef[type]() // if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
}, // },
}, },
} }
</script> </script>

43
pages/signature/signature.vue
View File

@ -1,39 +1,59 @@
<template> <template>
<view style="width: 100vw; height: 100vh"> <view style="width: 100vw; height: 80vh; background-color: #8f939c">
<l-signature landscape></l-signature> <l-signature
ref="signatureRef"
:openSmooth="openSmooth"
:penColor="penColor"
:penSize="penSize"
disableScroll
></l-signature>
</view> </view>
<view style="transform: rotate(90deg)"> <view style="width: 100vw; height: 20vh; background-color: #ffffff">
<button @click="onClick('clear')">清空</button> <button @click="onClick('clear')">清空</button>
<button @click="onClick('undo')">撤消</button> <button @click="onClick('undo')">撤消</button>
<button @click="onClick('save')">保存</button> <button @click="onClick('save')">提交</button>
<button @click="onClick('openSmooth')">压感{{ openSmooth ? '开' : '关' }}</button>
</view> </view>
</template> </template>
<script> <script>
import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'
export default { export default {
data() { data() {
return { return {
title: 'Hello', title: 'Hello',
penColor: 'red', penColor: 'white',
penSize: 5, penSize: 5,
url: '', url: '',
openSmooth: true, openSmooth: true,
signatureUrl: '',
} }
}, },
methods: { methods: {
onClick(type) { async onClick(type) {
if (type === 'openSmooth') { if (type === 'openSmooth') {
this.openSmooth = !this.openSmooth this.openSmooth = !this.openSmooth
return return
} }
if (type === 'save') { if (type === 'save') {
this.$refs.signatureRef.canvasToTempFilePath({ await this.$refs.signatureRef.canvasToTempFilePath({
success: res => { success: async res => {
// 是否为空画板 无签名 // 是否为空画板 无签名
console.log(res.isEmpty) console.log('签名返回是否为空', res.isEmpty)
if (res.isEmpty) {
this.signatureUrl = ''
return
}
// 生成图片的临时路径 // 生成图片的临时路径
// H5 生成的是base64 // H5 生成的是base64
this.url = res.tempFilePath this.tempUrl = res.tempFilePath
console.log('临时路径', res.tempFilePath)
this.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
console.log('签名路径', this.signatureUrl)
console.log('签名上传成功')
uni.showToast({ title: '签名上传成功', icon: 'success' })
}, },
}) })
return return
@ -43,3 +63,4 @@ export default {
}, },
} }
</script> </script>
<style lang="scss"></style>