提交一部分民政评分新版

src/components/AiDrawer.vue

@@ -1,7 +1,8 @@
 <template>
   <section class="AiDrawer">
-    <AiPagePicker type="custom" :ops="ops">
-      <div class="placeholder">{{ placeholder }}</div>
+    <AiPagePicker type="custom" :ops="ops" @select="getSeal">
+      <img class="sealImage" v-if="seal" :src="seal"/>
+      <div v-else class="placeholder">{{ placeholder }}</div>
     </AiPagePicker>
   </section>
 </template>
@@ -17,7 +18,7 @@ export default {
     event: "input"
   },
   props: {
-    seal: String,
+    seal: {default: null},
     placeholder: {type: String, default: "请在此处清晰书写你的签名"},
   },
   data() {
@@ -26,6 +27,11 @@ export default {
         url: "/components/pages/sealDrawer"
       }
     }
+  },
+  methods: {
+    getSeal(image) {
+      this.$emit("input", image)
+    }
   }
 }
 </script>
@@ -42,6 +48,11 @@ export default {
     & > div {
       height: 100%;
     }
+
+    .sealImage {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .placeholder {

src/components/pages/sealDrawer.vue

@@ -1,13 +1,11 @@
 <template>
   <section class="sealDrawer">
     <slot name="tools"/>
-    <div class="resetSignature" @click.stop="handleClean">
-      <span>重写</span>
-    </div>
+    <div class="resetSignature left" @click.stop="handleClean">重写</div>
+    <div class="resetSignature" @click.stop="submit">提交</div>
     <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
-    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart($event)"
-            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd"
-            @mousemove.stop="handleDrawing($event)"
+    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
+            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
             @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
   </section>
 </template>
@@ -16,12 +14,7 @@
 export default {
   name: "sealDrawer",
   appName: "签名",
-  model: {
-    prop: "seal",
-    event: "input"
-  },
   props: {
-    seal: String,
     placeholder: {type: String, default: "请在此处清晰书写你的签名"},
   },
   data() {
@@ -45,48 +38,51 @@ export default {
         let canvas = uni.createCanvasContext("drawer")
         if (canvas) {
           this.drawer = canvas
-          this.drawer.lineWidth = 3
-          this.drawer.shadowColor = '#333'
-          this.drawer.strokeStyle = '#333'
-          this.drawer.shadowBlur = 2
+          this.drawer.setLineWidth(3)
+          this.drawer.setShadow(0, 0, 2, '#333')
+          this.drawer.setStrokeStyle('#333')
         }
       })
     },
     handleDrawStart(e) {
       this.drawing = true
-      const canvasX = e.offsetX
-      const canvasY = e.offsetY
+      const {x, y} = e.changedTouches?.[0] || {}
       this.drawer?.beginPath()
-      this.drawer?.moveTo(canvasX, canvasY)
+      this.drawer?.moveTo(x, y)
     },
     handleDrawEnd() {
       this.drawing = false
-      const result = this.drawer.canvas?.toDataURL("image/png", 1)
-      this.$emit("input", result)
-      this.$emit("update:seal", result)
     },
     handleDrawing(e) {
-      console.log(e)
       if (this.drawing) {
-        const t = e.target?.getBoundingClientRect()
-        let canvasX
-        let canvasY
-        // 根据触发事件类型来进行定位
-        if (e.type == "touchmove") {
-          canvasX = e.changedTouches[0].clientX - t.x
-          canvasY = e.changedTouches[0].clientY - t.y
-        } else {
-          canvasX = e.offsetX
-          canvasY = e.offsetY
-        }
-        // 连接到移动的位置并上色
-        this.drawer?.lineTo(canvasX, canvasY)
-        this.drawer?.stroke()
+        const {x, y} = e.changedTouches?.[0] || {}
+        // // 连接到移动的位置并上色
+        this.drawer.lineTo(x, y)
+        this.drawer.stroke()
+        this.drawer.draw(true)
+        this.drawer?.beginPath()
+        this.drawer?.moveTo(x, y)
       }
     },
     handleClean() {
-      this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height)
+      this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight)
+      this.drawer.draw()
       this.drawPlaceholder = true
+    },
+    submit() {
+      uni.canvasToTempFilePath({
+        canvasId: 'drawer',
+        quality: 1,
+        success: res => {
+          // 在H5平台下，tempFilePath 为 base64
+          const result = res.tempFilePath
+          uni.navigateBack({
+            success: () => {
+              uni.$emit("pagePicker:custom", result)
+            }
+          })
+        }
+      })
     }
   }
 }
@@ -116,19 +112,16 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    color: rgba(#fff, .6);
+    color: #fff;
     cursor: pointer;
     right: 16px;
     top: 16px;
+    font-size: 20px;
+    z-index: 2;
 
-    .AiIcon {
-      width: auto;
-      height: auto;
-    }
-
-    &:hover {
-      color: #fff;
+    &.left {
+      right: unset;
+      left: 16px;
     }
   }