提交一部分民政评分新版

src/components/AiDrawer.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="AiDrawer">
+    <AiPagePicker type="custom" :ops="ops">
+      <div class="placeholder">{{ placeholder }}</div>
+    </AiPagePicker>
+  </section>
+</template>
+
+<script>
+import AiPagePicker from "./AiPagePicker";
+
+export default {
+  name: "AiDrawer",
+  components: {AiPagePicker},
+  model: {
+    prop: "seal",
+    event: "input"
+  },
+  props: {
+    seal: String,
+    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
+  },
+  data() {
+    return {
+      ops: {
+        url: "/components/pages/sealDrawer"
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiDrawer {
+  background: #F7F7F7;
+  border: 1px solid #CCCCCC;
+  position: relative;
+
+  ::v-deep.AiPagePicker {
+    height: 200px;
+
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .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;
+  }
+}
+</style>

src/components/AiGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="AiGroup" :class="{noBorder,description}" :style="{paddingLeft:left+'rpx'}">
+  <section class="AiGroup" :class="{noBorder,description,bottomBorder}" :style="{paddingLeft:left+'rpx'}">
     <div class="groupHeader" v-if="title" v-text="title"/>
     <slot/>
   </section>
@@ -21,7 +21,8 @@ export default {
     left: {default: 32},
     labelColor: {default: "#333"},
     description: {default: false}, //用于展示则不会又红星,会把标签的内间距去掉
-    activeStep: {default: 1}//用于步骤组件的当前步数
+    activeStep: {default: 1},//用于步骤组件的当前步数,
+    bottomBorder: Boolean
   },
   data() {
     return {
@@ -44,6 +45,10 @@ export default {
     margin-top: 16px;
   }
 
+  &.bottomBorder + .AiGroup {
+    margin-top: 0 !important;
+  }
+
   .groupHeader {
     font-weight: bold;
     font-size: 36px;

src/components/pages/sealDrawer.vue

@@ -0,0 +1,147 @@
+<template>
+  <section class="sealDrawer">
+    <slot name="tools"/>
+    <div class="resetSignature" @click.stop="handleClean">
+      <span>重写</span>
+    </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)"
+            @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "sealDrawer",
+  appName: "签名",
+  model: {
+    prop: "seal",
+    event: "input"
+  },
+  props: {
+    seal: String,
+    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
+  },
+  data() {
+    return {
+      drawing: false,//判断是否处于绘画中
+      drawer: {},
+      drawPlaceholder: true
+    }
+  },
+  watch: {
+    drawing() {
+      this.drawPlaceholder = false
+    }
+  },
+  mounted() {
+    this.initDrawer()
+  },
+  methods: {
+    initDrawer() {
+      this.$nextTick(() => {
+        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
+        }
+      })
+    },
+    handleDrawStart(e) {
+      this.drawing = true
+      const canvasX = e.offsetX
+      const canvasY = e.offsetY
+      this.drawer?.beginPath()
+      this.drawer?.moveTo(canvasX, canvasY)
+    },
+    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()
+      }
+    },
+    handleClean() {
+      this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height)
+      this.drawPlaceholder = true
+    }
+  }
+}
+</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: 76px;
+    height: 32px;
+    background: rgba(#000, .5);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: rgba(#fff, .6);
+    cursor: pointer;
+    right: 16px;
+    top: 16px;
+
+    .AiIcon {
+      width: auto;
+      height: auto;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .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;
+  }
+}
+</style>