初始化

packages/processManagement/personalSignature/drawInPhone.vue

@@ -0,0 +1,110 @@
+<template>
+  <section class="drawInPhone" @touchmove.prevent>
+    <div class="endPage" v-if="finished">操作结束请关闭页面</div>
+    <ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
+      <template #tools>
+        <div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
+          <ai-icon icon="iconPublish"/>
+          <span>提交</span>
+        </div>
+      </template>
+    </ai-drawer>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "drawInPhone",
+  inject: ['signature'],
+  data() {
+    return {
+      sealData: null,
+      device: {width: 0, height: 0},
+      finished: false
+    }
+  },
+  created() {
+    this.device.width = document.body.clientWidth
+    this.device.height = document.body.clientHeight
+    window.onresize = () => {
+      this.device.width = document.body.clientWidth
+      this.device.height = document.body.clientHeight
+    }
+  },
+  methods: {
+    handleSubmit() {
+      let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
+          {userId} = this.$route.query
+      if (!userId) return alert("缺少必要参数")
+      sealData && this.signature.instance({
+        url: '/app/syssignaccount/upload-sealdata',
+        headers: {"Content-Type": "application/json"},
+        method: 'post',
+        params: {userId},
+        data: sealData,
+        withoutToken: true
+      }).then(res => {
+        if (res?.code == 0) {
+          alert("添加成功!")
+          this.finished = true
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawInPhone {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20210205932;
+
+  .endPage {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 20210205933;
+    background: rgba(#000, .8);
+    color: #999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+  }
+
+  .AiDrawer {
+    margin: 0;
+  }
+
+  .writeInPhone {
+    position: absolute;
+    width: 72px;
+    height: 32px;
+    background: rgba(#000, .5);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: rgba(#fff, .6);
+    cursor: pointer;
+    left: 16px;
+    top: 16px;
+
+    .AiIcon {
+      width: auto;
+      height: auto;
+    }
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>