sign

template/src/pages/applications/contractSign/signModal.vue

+/**
+* @Author Sean
+* @Date 2019/5/13
+*/
+<template>
+  <transition name="slide-fade">
+    <div ref="signModal" class="sign-modal" @click="hideModal">
+      <div class="pane" @click.stop>
+        <div class="layout">
+          <div id="data" @click="confirmData()">确定</div>
+          <div id="clear" @click="cleanData()">清除</div>
+        </div>
+        <div id="draw" class="draw">
+          <div id="sig" class="sig">
+            <canvas id="canvas"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+
+export default {
+  props: {
+    info: Object,
+  },
+  data () {
+    return {
+      signaturePad: {},
+      image_base64: '',
+    }
+  },
+  created: function () {
+    // console.log(this.timeInfo)
+  },
+  mounted: function () {
+    this.changeSize()
+  },
+  activated: function () {
+  },
+  deactivated: function () {
+  },
+  methods: {
+    hideModal () {
+      this.$emit('closeModal')
+    },
+    cleanData () {
+      let vm = this
+      vm.signaturePad.clear()
+    },
+    // 确认签名
+    confirmData () {
+      let vm = this
+      if (vm.signaturePad.isEmpty()) {
+        hlsPopup.showLongCenter('未创建签名!')
+      } else {
+        vm.hideModal()
+        var canvas = document.getElementById('canvas')
+        var canvasData = canvas.toDataURL('image/png')
+        vm.image_base64 = canvasData.split(',')[1]
+        hlsPopup.showLoading('正在签名请稍等!')
+        // 先创建账号
+        var url = process.env.rootPath + '/app/sign/register'
+        var param = {
+          'idNo': vm.info.id_number,
+          'name': vm.info.name,
+        }
+        vm.$post(url, param).then(function (res) {
+          if (!res.success) {
+            // 如果成功进行签名
+            // success_atm = []
+            var file_name = '测试e签宝' + '-盖章.pdf'
+            vm.getSignPdf(vm.info.name, vm.info.id_number, vm.image_base64, '', '', '', file_name, '', 'BOTH')
+          } else {
+            hlsPopup.hideLoading()
+            hlsPopup.showPopup('', '签名失败请返回重试', function () {
+              // window.history.go(-1)
+            })
+          }
+        })
+      }
+    },
+    getSignPdf (name, id_no, imgData, table_name, table_pk_value, attachment_id, file_name, user_id, sign_type) {
+      let vm = this
+      // debugger;
+      // 只签名客户"userPages":[{"page": "1", "x":505, "y":340},{"page": "2", "x":115, "y":410}]
+      // 签名客户和公司"userPages":[{"page": "1", "x":510, "y":245},{"page": "4", "x":460, "y":135}],
+      //             "selfPages":[{"page": "1", "x":200, "y":235},{"page": "4", "x":100, "y":135}],
+      var userPages = []
+      var selfPages = []
+      if (sign_type === 'BOTH') {
+        /* userPages = [{"page": "1", "x": 500, "y": 235}, {"page": "4", "x": 460, "y": 135}];
+        selfPages = [{"page": "1", "x": 200, "y": 235}, {"page": "4", "x": 100, "y": 135}]; */
+        // uat
+        // userPages=[{"page": "1", "x": 510, "y": 245}, {"page": "4", "x": 445, "y": 135}];
+        // selfPages=[{"page": "1", "x": 200, "y": 245}, {"page": "4", "x": 120, "y": 135}];
+        userPages = [{'page': '1', 'x': 510, 'y': 250}, {'page': '4', 'x': 445, 'y': 165}]
+        selfPages = [{'page': '1', 'x': 200, 'y': 250}, {'page': '4', 'x': 120, 'y': 165}]
+      } else {
+        userPages = [{'page': '1', 'x': 505, 'y': 205}, {'page': '2', 'x': 105, 'y': 230}]
+      }
+      var url = process.env.rootPath + '/app/sign/pdf'
+      var param = {
+        'idNo': id_no,
+        'name': name,
+        'userPages': userPages,
+        'selfPages': selfPages,
+        'attachmentInfo': {
+          'downloadApiName': 'attment_view',
+          'downloadSysName': 'HLS_APP',
+          'attachmentId': 6,
+          'uploadApiName': 'attachment_upload',
+          'uploadSysName': 'HLS_APP',
+          'userId': 1,
+          'sourceType': 'HLS_DOC_FILE_TEMPLET',
+          'pkValue': 42,
+          'fileName': file_name,
+        },
+        'personArea': 0,
+        'sealData': imgData,
+      }
+      vm.$post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.success) {
+          hlsPopup.showConfirm({
+            title: '签名成功',
+            content: '是否预览合同',
+            onConfirm: function (index) {
+              if (index === 1) {
+                // 签名合同预览
+                vm.PDF(parseInt(res.message))
+              }
+            },
+          })
+        } else {
+          hlsPopup.hideLoading()
+          hlsPopup.showLongCenter('签名失败请重试')
+        /*  hlsPopup.showPopup('', '签名失败请返回重试', function () {
+            // 调用删除
+            // window.history.go(-1)
+          }) */
+        }
+      })
+    },
+
+    changeSize () {
+      let vm = this
+      if (window.innerHeight > window.innerWidth) {
+        $('#canvas').attr({'height': ((window.innerHeight / 2) - 100), 'width': window.innerWidth})
+      } else {
+        $('#canvas').attr({'height': (window.innerHeight - 100), 'width': window.innerWidth})
+        $('html,body').animate({scrollTop: 0}, 'slow')
+      }
+      var canvasX = $('#canvas')[0]
+      vm.signaturePad = new SignaturePad(canvasX, {
+        dotSize: 0,
+        velocityFilterWeight: 1,
+        minWidth: 2.0,
+        maxWidth: 5.2,
+        penColor: '#FF0000',
+        backgroundColor: 'rgba(0,0,0,0)',
+      })
+    },
+    // pdf转图片预览
+    PDF (attachment_id) {
+      let vm = this
+      hlsPopup.showLoading('正在预览请稍等!')
+      var url = process.env.rootPath + '/app/pdf/png?sysName=HLS_APP&apiName=attment_view&attachment_id=' + attachment_id
+      var param = {}
+      vm.$post(url, param).then(function (res) {
+        if (res.success) {
+          var length = res.message
+          // PDF装图片数组
+          var pirtureList = []
+          for (var i = 0; i < length; i++) {
+            pirtureList.push({pic: process.env.file_url + 'esign/' + attachment_id + '/temp/' + 'temp_' + (i + 1) + '.png'})
+          }
+          hlsPopup.hideLoading()
+          vm.alpviewimg(pirtureList)
+        } else {
+          hlsPopup.hideLoading()
+          hlsPopup.showLongCenter('预览文件失败')
+        }
+      })
+    },
+    alpviewimg (pirtureList) {
+      this.$router.push({
+        name: 'EsignPicture',
+        params: {
+          pirtureList: pirtureList,
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="less" rel="stylesheet">
+  /* //name="modal-fade"
+   .modal-fade-enter, .modal-fade-leave-active { opacity: 0; } .modal-fade-enter-active, .modal-fade-leave-active { transition: opacity .5s ease }*/
+  /* 可以设置不同的进入和离开动画 */
+  /* 设置持续时间和动画函数 */
+
+  .slide-fade-enter-active {
+    transition: all .3s ease;
+  }
+  .slide-fade-leave-active {
+    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .slide-fade-enter, .slide-fade-leave-to
+    /* .slide-fade-leave-active for below version 2.1.8 */ {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+
+  /*//bounce
+  .bounce-enter-active {
+    animation: bounce-in .5s;
+  }
+  .bounce-leave-active {
+    animation: bounce-in .5s reverse;
+  }
+  @keyframes bounce-in {
+    0% {
+      transform: scale(0);
+    }
+    50% {
+      transform: scale(1.5);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }*/
+  .sign-modal{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    .pane{
+      background-color: #fff;
+      position: absolute;
+      width: 100%;
+      height: 50%;
+      bottom: 0;
+      padding: 10px 15px;
+      .layout{
+        height: 20px;
+        font-size: 16px;
+        color:#1e82d2;
+        line-height: 20px;
+        display: flex;
+        display: -webkit-flex;
+        justify-content:space-between;
+        -webkit-justify-content:space-between;
+      }
+      .draw {
+        width: 100%;
+        height: 95%;
+        .sig{
+          width: 100%;
+          height: 100%;
+          canvas{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+
+</style>