持续集成分支

library/components/pages/sealDrawer.vue

@@ -0,0 +1,157 @@
+<template>
+  <section class="sealDrawer">
+    <slot name="tools"/>
+    <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
+    <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"/>
+    <AiBottomBtn v-if="isVertical">
+      <div flex>
+        <div class="fill text reset" @click.stop="handleClean">重写</div>
+        <div class="fill text" @click.stop="submit">提交</div>
+      </div>
+    </AiBottomBtn>
+    <template v-else>
+      <div class="resetSignature left" @click.stop="handleClean">重写</div>
+      <div class="resetSignature" @click.stop="submit">提交</div>
+    </template>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "sealDrawer",
+  appName: "签名",
+  props: {
+    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
+  },
+  data() {
+    return {
+      drawing: false,//判断是否处于绘画中
+      drawer: {},
+      drawPlaceholder: true,
+      isVertical: true
+    }
+  },
+  watch: {
+    drawing() {
+      this.drawPlaceholder = false
+    }
+  },
+  mounted() {
+    window.onresize = () => {
+      this.isVertical = ![90, -90].includes(window.orientation)
+    }
+    this.initDrawer()
+  },
+  methods: {
+    initDrawer() {
+      this.$nextTick(() => {
+        let canvas = uni.createCanvasContext("drawer")
+        if (canvas) {
+          this.drawer = canvas
+          this.drawer.setLineWidth(3)
+          this.drawer.setShadow(0, 0, 2, '#333')
+          this.drawer.setStrokeStyle('#333')
+        }
+      })
+    },
+    handleDrawStart(e) {
+      this.drawing = true
+      const {x, y} = e.changedTouches?.[0] || {}
+      this.drawer?.beginPath()
+      this.drawer?.moveTo(x, y)
+    },
+    handleDrawEnd() {
+      this.drawing = false
+    },
+    handleDrawing(e) {
+      if (this.drawing) {
+        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, 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)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sealDrawer {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #F7F7F7;
+  position: relative;
+
+  #drawer {
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: crosshair;
+  }
+
+  .resetSignature {
+    position: absolute;
+    width: 152px;
+    height: 64px;
+    background: rgba(#000, .5);
+    border-radius: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    cursor: pointer;
+    right: 16px;
+    top: 16px;
+    font-size: 32px;
+    z-index: 2;
+
+    &.left {
+      right: unset;
+      left: 16px;
+    }
+  }
+
+  .placeholder {
+    pointer-events: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 407px;
+    text-align: center;
+    font-size: 64px;
+    color: #DDDDDD;
+  }
+
+  ::v-deep.reset {
+    background-color: #fff;
+    color: #333;
+  }
+}
+</style>