HomeLease/pages/signature/signature.vue

<template>
  <view style="width: 100vw; height: 80vh; background-color: #8f939c">
    <l-signature
      ref="signatureRef"
      :openSmooth="openSmooth"
      :penColor="penColor"
      :penSize="penSize"
      disableScroll
    ></l-signature>
  </view>
  <view style="width: 100vw; height: 20vh; background-color: #ffffff">
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">提交</button>
  </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"></style>