电子签名撤销&清除

package-lock.json

@@ -1109,6 +1109,11 @@
         "tslib": "^2.0.0"
       },
       "dependencies": {
+        "signature_pad": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npm.taobao.org/signature_pad/download/signature_pad-2.3.2.tgz",
+          "integrity": "sha1-ynIwAhyJzt7q0nsz2NFv8lTl8Eo="
+        },
         "tslib": {
           "version": "2.0.3",
           "resolved": "https://registry.npm.taobao.org/tslib/download/tslib-2.0.3.tgz?cache=0&sync_timestamp=1602286724979&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-2.0.3.tgz",
@@ -8402,9 +8407,9 @@
       "dev": true
     },
     "signature_pad": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npm.taobao.org/signature_pad/download/signature_pad-2.3.2.tgz",
-      "integrity": "sha1-ynIwAhyJzt7q0nsz2NFv8lTl8Eo="
+      "version": "3.0.0-beta.4",
+      "resolved": "https://registry.npm.taobao.org/signature_pad/download/signature_pad-3.0.0-beta.4.tgz",
+      "integrity": "sha1-KoRBVZ6fQ55/L1Jdo+5jDvlz7PY="
     },
     "slash": {
       "version": "1.0.0",

package.json

@@ -32,6 +32,7 @@
     "ngx-echarts": "^3.2.0",
     "rxjs": "~6.3.3",
     "save": "^2.4.0",
+    "signature_pad": "^3.0.0-beta.4",
     "tslib": "^1.9.0",
     "uuid": "^3.3.3",
     "zone.js": "~0.8.26"

src/app/my/application-process/personal-statement/personal-statement.component.scss

@@ -93,8 +93,8 @@
   }
   #toastContent {
     position: fixed;
-    bottom: 80px;
-    width: 90%;
+    bottom: 0;
+    width: 100%;
     height: 80%;
     left: 0;
     right: 0;
@@ -102,7 +102,6 @@
     background-color: #fff;
     z-index: 2;
     animation: slowUp .5s ease both;
-    border-radius: 12px;
     overflow: auto;
     .title{
         text-align: center;
@@ -123,6 +122,8 @@
         color: #fff;
         font-size: 20px;
         font-weight: bold;
+        position: absolute;
+        bottom: 0;
     }
   }
   

src/app/my/application-process/signature/signature.component.html

@@ -6,13 +6,17 @@
     </div>
     <span class="page_mark"> 8/8</span>
   </div>
-  <!-- <div id="signature"></div> -->
- 
-    <signature-pad #signaturePad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()">
-  
-      
-  </signature-pad>
+  <div class="signatureContent">
+    <signature-pad *ngIf="!isSignatureShow" #signaturePad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()">
+    </signature-pad>
+    <img [src]="this.imgStr" alt="签名" *ngIf="isSignatureShow">
+  </div>
+  <div class="signature_action">
+    <img src="assets/images/clear.png" alt="清除" (click)="clearSignature();"/>
+    <img src="assets/images/revoke.png" alt="上一步" (click)="revokeSignature()"/>
+  </div>
   <footer class="fixed" (click)="next()">
     我自愿签订经纪人合同书
   </footer>
-</div>
\ No newline at end of file
+</div>
+<ydlife-alert *ngIf="isNeedAlert" [dialogInfo]="dialogInfo" (popInfo)="getPopInfo()"></ydlife-alert>
\ No newline at end of file

src/app/my/application-process/signature/signature.component.scss

@@ -11,8 +11,15 @@
         justify-content: space-between;
         font-weight: bold;
         align-items: center;
+        margin-bottom: 20px;
     }
     .signatureContent{
-        
+        margin: 0 13px 20px 13px;
+        background: #f8f8f8;
+    }
+    .signature_action{
+        display: flex;
+        justify-content: space-evenly;
+        img{max-width: 18%;}
     }
 }
\ No newline at end of file

src/app/my/application-process/signature/signature.component.ts

@@ -15,11 +15,16 @@ export class SignatureComponent implements OnInit {
   signatureImage:string;
   signaturePadOptions:any;
   imgStr:any;
+  isNeedAlert: boolean;
+  dialogInfo: any;
+  isSignatureShow:boolean;
   @ViewChild(SignaturePad) signaturePad : SignaturePad;
   constructor(private activatedRoute: ActivatedRoute,
     private router: Router,public lifeCommonService:LifeCommonService,
     public myService:MyService) { 
       
+       
+      
     }
 
   ngOnInit() {
@@ -29,55 +34,86 @@ export class SignatureComponent implements OnInit {
       dotSize: 1.5,
       penColor: "#333",
       /* INVERSE BECAUSE IT IS SHOW ONLY IN LANDSCAPE */
-      canvasWidth: 800,
-      canvasHeight: 600,
-      backgroundColor:"rgb(248 248 248)"
+      canvasWidth: document.body.clientWidth-26,
+      canvasHeight: 300,
+      // backgroundColor:"rgb(248 248 248)"
     }
     const title = this.activatedRoute.snapshot.data[0]['title'];
     this.lifeCommonService.setTitle(title);
     this.hiringBasicInfoId = this.activatedRoute.snapshot.queryParams.hiringBasicInfoId?this.activatedRoute.snapshot.queryParams.hiringBasicInfoId:null;
-    var ele = document.getElementById("signature");
-    var eleSign = new EleSign();//实例化对象
-    eleSign.init({setBgColor:'#333333'}); //初始化
-    eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中
     this.queryWholeInfo(this.hiringBasicInfoId)
   }
 
   next(){
     this.saveDigitalSignatures();
-    // this.router.navigate(['/employee_submit']);
   }
 
   drawComplete() {
-    // will be notified of szimek/signature_pad's onEnd event
-    console.log(this.signaturePad.toDataURL());
     this.imgStr = this.signaturePad.toDataURL();
   }
 
   drawStart() {
-    // will be notified of szimek/signature_pad's onBegin event
-    console.log('begin drawing');
+    // console.log('begin drawing');
   }
 
   saveDigitalSignatures(){
+    if (this.signaturePad.isEmpty()) {
+      this.openPopInfo('您还没有签名！');
+      return;
+    }
     const param = {
       hiringBasicInfoId:this.hiringBasicInfoId,
       imgStr:this.imgStr
     }
     this.myService.saveDigitalSignatures(param).subscribe((res)=>{
-      console.log(res)
       if(res['success']){
-
+        this.queryWholeInfo(this.hiringBasicInfoId);
+        this.router.navigate(['/employee_submit']);
+      }else{
+        this.openPopInfo(res['message']);
       }
     })
   }
 
   queryWholeInfo(hiringBasicInfoId){
     this.myService.queryWholeInfo({hiringBasicInfoId:hiringBasicInfoId}).subscribe((res)=>{
-      console.log(res)
       if(res['success']){
         this.imgStr = res['data']['hiringBasicInfo']['personalSignOssPath'];
+        this.isSignatureShow = true;
+      }else{
+        this.isSignatureShow = false;
       }
     })
   }
+
+  revokeSignature(){
+    var data = this.signaturePad.toData();
+    if (data) {
+      data.pop(); // remove the last dot or line
+      this.signaturePad.fromData(data);
+    }
+    this.drawComplete();
+  }
+
+  // 打开弹窗
+  openPopInfo(message) {
+    this.isNeedAlert = true;
+    this.dialogInfo = {
+      title: null,
+      content: { value: message, align: 'center' },
+      footer: [{ value: '我知道了', routerLink: '', className: 'weui-dialog__btn_primary' }],
+    };
+  }
+
+  // 关闭弹窗
+  getPopInfo() {
+    this.isNeedAlert = false;
+  }
+
+  clearSignature(){
+    if(this.isSignatureShow == true){
+      this.isSignatureShow = false;
+      this.signaturePad.clear();
+    }
+  }
 }