签名页

pages.json

@@ -128,6 +128,12 @@
       "style": {
         "navigationBarTitleText": "签署安装协议"
       }
+    },
+    {
+      "path": "pages/signature/signature",
+      "style": {
+        "navigationBarTitleText": "签名"
+      }
     }
   ],
   "subPackages": [

pages/signature/signature.vue

@@ -0,0 +1,45 @@
+<template>
+  <view style="width: 100vw; height: 100vh">
+    <l-signature landscape></l-signature>
+  </view>
+  <view style="transform: rotate(90deg)">
+    <button @click="onClick('clear')">清空</button>
+    <button @click="onClick('undo')">撤消</button>
+    <button @click="onClick('save')">保存</button>
+    <button @click="onClick('openSmooth')">压感{{ openSmooth ? '开' : '关' }}</button>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      title: 'Hello',
+      penColor: 'red',
+      penSize: 5,
+      url: '',
+      openSmooth: true,
+    }
+  },
+  methods: {
+    onClick(type) {
+      if (type === 'openSmooth') {
+        this.openSmooth = !this.openSmooth
+        return
+      }
+      if (type === 'save') {
+        this.$refs.signatureRef.canvasToTempFilePath({
+          success: res => {
+            // 是否为空画板 无签名
+            console.log(res.isEmpty)
+            // 生成图片的临时路径
+            // H5 生成的是base64
+            this.url = res.tempFilePath
+          },
+        })
+        return
+      }
+      if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
+    },
+  },
+}
+</script>