Skip to content

Y
ydLife
Commit e816cabe by sunchao
Options

电子签名撤销&清除

parent 310566fe
Showing with 83 additions and 27 deletions
package-lock.json
...@@ -1109,6 +1109,11 @@ ...@@ -1109,6 +1109,11 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
}, },
"dependencies": { "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": { "tslib": {
"version": "2.0.3", "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", "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 @@ ...@@ -8402,9 +8407,9 @@
"dev": true "dev": true
}, },
"signature_pad": { "signature_pad": {
"version": "2.3.2", "version": "3.0.0-beta.4",
"resolved": "https://registry.npm.taobao.org/signature_pad/download/signature_pad-2.3.2.tgz", "resolved": "https://registry.npm.taobao.org/signature_pad/download/signature_pad-3.0.0-beta.4.tgz",
"integrity": "sha1-ynIwAhyJzt7q0nsz2NFv8lTl8Eo=" "integrity": "sha1-KoRBVZ6fQ55/L1Jdo+5jDvlz7PY="
}, },
"slash": { "slash": {
"version": "1.0.0", "version": "1.0.0",
......
package.json
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
"ngx-echarts": "^3.2.0", "ngx-echarts": "^3.2.0",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"save": "^2.4.0", "save": "^2.4.0",
"signature_pad": "^3.0.0-beta.4",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"uuid": "^3.3.3", "uuid": "^3.3.3",
"zone.js": "~0.8.26" "zone.js": "~0.8.26"
......
src/app/my/application-process/personal-statement/personal-statement.component.scss
...@@ -93,8 +93,8 @@ ...@@ -93,8 +93,8 @@
} }
#toastContent { #toastContent {
position: fixed; position: fixed;
bottom: 80px; bottom: 0;
width: 90%; width: 100%;
height: 80%; height: 80%;
left: 0; left: 0;
right: 0; right: 0;
...@@ -102,7 +102,6 @@ ...@@ -102,7 +102,6 @@
background-color: #fff; background-color: #fff;
z-index: 2; z-index: 2;
animation: slowUp .5s ease both; animation: slowUp .5s ease both;
border-radius: 12px;
overflow: auto; overflow: auto;
.title{ .title{
text-align: center; text-align: center;
...@@ -123,6 +122,8 @@ ...@@ -123,6 +122,8 @@
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
position: absolute;
bottom: 0;
} }
} }
......
src/app/my/application-process/signature/signature.component.html
...@@ -6,13 +6,17 @@ ...@@ -6,13 +6,17 @@
</div> </div>
<span class="page_mark"> 8/8</span> <span class="page_mark"> 8/8</span>
</div> </div>
<!-- <div id="signature"></div> --> <div class="signatureContent">
<signature-pad *ngIf="!isSignatureShow" #signaturePad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()">
<signature-pad #signaturePad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()">
</signature-pad> </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 class="fixed" (click)="next()">
我自愿签订经纪人合同书 我自愿签订经纪人合同书
</footer> </footer>
</div> </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 @@ ...@@ -11,8 +11,15 @@
justify-content: space-between; justify-content: space-between;
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
margin-bottom: 20px;
} }
.signatureContent{ .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 { ...@@ -15,11 +15,16 @@ export class SignatureComponent implements OnInit {
signatureImage:string; signatureImage:string;
signaturePadOptions:any; signaturePadOptions:any;
imgStr:any; imgStr:any;
isNeedAlert: boolean;
dialogInfo: any;
isSignatureShow:boolean;
@ViewChild(SignaturePad) signaturePad : SignaturePad; @ViewChild(SignaturePad) signaturePad : SignaturePad;
constructor(private activatedRoute: ActivatedRoute, constructor(private activatedRoute: ActivatedRoute,
private router: Router,public lifeCommonService:LifeCommonService, private router: Router,public lifeCommonService:LifeCommonService,
public myService:MyService) { public myService:MyService) {
} }
ngOnInit() { ngOnInit() {
...@@ -29,55 +34,86 @@ export class SignatureComponent implements OnInit { ...@@ -29,55 +34,86 @@ export class SignatureComponent implements OnInit {
dotSize: 1.5, dotSize: 1.5,
penColor: "#333", penColor: "#333",
/* INVERSE BECAUSE IT IS SHOW ONLY IN LANDSCAPE */ /* INVERSE BECAUSE IT IS SHOW ONLY IN LANDSCAPE */
canvasWidth: 800, canvasWidth: document.body.clientWidth-26,
canvasHeight: 600, canvasHeight: 300,
backgroundColor:"rgb(248 248 248)" // backgroundColor:"rgb(248 248 248)"
} }
const title = this.activatedRoute.snapshot.data[0]['title']; const title = this.activatedRoute.snapshot.data[0]['title'];
this.lifeCommonService.setTitle(title); this.lifeCommonService.setTitle(title);
this.hiringBasicInfoId = this.activatedRoute.snapshot.queryParams.hiringBasicInfoId?this.activatedRoute.snapshot.queryParams.hiringBasicInfoId:null; 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) this.queryWholeInfo(this.hiringBasicInfoId)
} }
next(){ next(){
this.saveDigitalSignatures(); this.saveDigitalSignatures();
// this.router.navigate(['/employee_submit']);
} }
drawComplete() { drawComplete() {
// will be notified of szimek/signature_pad's onEnd event
console.log(this.signaturePad.toDataURL());
this.imgStr = this.signaturePad.toDataURL(); this.imgStr = this.signaturePad.toDataURL();
} }
drawStart() { drawStart() {
// will be notified of szimek/signature_pad's onBegin event // console.log('begin drawing');
console.log('begin drawing');
} }
saveDigitalSignatures(){ saveDigitalSignatures(){
if (this.signaturePad.isEmpty()) {
this.openPopInfo('您还没有签名！');
return;
}
const param = { const param = {
hiringBasicInfoId:this.hiringBasicInfoId, hiringBasicInfoId:this.hiringBasicInfoId,
imgStr:this.imgStr imgStr:this.imgStr
} }
this.myService.saveDigitalSignatures(param).subscribe((res)=>{ this.myService.saveDigitalSignatures(param).subscribe((res)=>{
console.log(res)
if(res['success']){ if(res['success']){
this.queryWholeInfo(this.hiringBasicInfoId);
this.router.navigate(['/employee_submit']);
}else{
this.openPopInfo(res['message']);
} }
}) })
} }
queryWholeInfo(hiringBasicInfoId){ queryWholeInfo(hiringBasicInfoId){
this.myService.queryWholeInfo({hiringBasicInfoId:hiringBasicInfoId}).subscribe((res)=>{ this.myService.queryWholeInfo({hiringBasicInfoId:hiringBasicInfoId}).subscribe((res)=>{
console.log(res)
if(res['success']){ if(res['success']){
this.imgStr = res['data']['hiringBasicInfo']['personalSignOssPath']; 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();
}
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment