feat: 职工慰问 整改

src/main/resources/static/components/plugins/sysSignature/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="signature-wrap">
-        <canvas id="canvas"></canvas>
+        <canvas ref="canvas" @touchstart.stop @touchmove.stop></canvas>
         <div :class="isLikelyMobile() ? 'action-buttons' : 'action-buttons pc-action-buttons'">
             <button @click="clear" class="action-button-danger" type="button">清空</button>
             <button @click="undo" class="action-button-warning" type="button">撤销</button>
@@ -30,23 +30,23 @@
 // window.addEventListener("orientationchange", a)
 // a()
 
-let signature = null
 module.exports = {
     name: "sysSignature",
     data() {
         return {
-            content: null
+            content: null,
+            signature: null
         }
     },
     methods: {
         clear() {
-            signature.clear()
+            this.signature.clear()
         },
         undo() {
-            signature.undo()
+            this.signature.undo()
         },
         rotate() {
-            signature.getRotateCanvas(90)
+            this.signature.getRotateCanvas(90)
         },
         isLikelyMobile() {
           const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
@@ -56,7 +56,7 @@ module.exports = {
           return hasMobileUA || (isTouchDevice && isSmallScreen);
         },
         save() {
-            if (signature.isEmpty()) {
+            if (this.signature.isEmpty()) {
                 // H5 页面使用统一的 Vant 提示；未加载 Vant 的独立签字页保留原生提示作为兼容兜底。
                 if (typeof this.$toast === "function") {
                     this.$toast({
@@ -71,11 +71,11 @@ module.exports = {
             }
             // const png = signature.getPNG()
             //旋转一下 横过来
-            const rotateCanvas = signature.getRotateCanvas(-90)
+            const rotateCanvas = this.signature.getRotateCanvas(-90)
             if (this.isLikelyMobile()) {
               this.$emit("save", rotateCanvas.toDataURL())
             } else {
-              this.$emit("save", signature.toDataURL())
+              this.$emit("save", this.signature.toDataURL())
             }
         }
     },
@@ -83,10 +83,10 @@ module.exports = {
         const innerWidth = window.innerWidth
         const innerHeight = window.innerHeight
 
-        const canvas = document.getElementById("canvas")
+        const canvas = this.$refs.canvas
         canvas.width = window.innerWidth
         canvas.height = window.innerHeight
-        signature = new SmoothSignature(canvas, {
+        this.signature = new SmoothSignature(canvas, {
             width: innerWidth - 30,
             height: innerHeight - 30,
             scale: 2,
@@ -95,6 +95,15 @@ module.exports = {
             color: "#000000"
             // bgColor: "#f6f6f6"
         })
+        canvas.addEventListener("touchstart", this.signature.onDrawStart, { passive: false })
+        canvas.addEventListener("touchmove", this.signature.onDrawMove, { passive: false })
+        document.addEventListener("touchend", this.signature.onDrawEnd, { passive: false })
+        document.addEventListener("touchcancel", this.signature.onDrawEnd, { passive: false })
+    },
+    beforeDestroy() {
+        if (this.signature) {
+            this.signature.removeListener()
+        }
     }
 }
 </script>