76 lines
2.0 KiB
Vue
76 lines
2.0 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'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: 'Hello',
|
|
penColor: 'white',
|
|
penSize: 5,
|
|
url: '',
|
|
openSmooth: true,
|
|
signatureUrl: '',
|
|
}
|
|
},
|
|
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.signatureUrl = ''
|
|
return
|
|
}
|
|
|
|
// 生成图片的临时路径
|
|
// H5 生成的是base64
|
|
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
|
|
}
|
|
if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.btn-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|