Skip to content

Y
ydLife
Commit 027fec29 by Sweet Zhang
Options

经纪人名片

parent d6076472
Showing with 81 additions and 108 deletions
src/app/my/business-card/business-card.component.html
<div class="businessCardContainer"> <div class="businessCardContainer">
<div class="brokerCardPositive" id="brokerCardPositive" *ngIf="showFlag==false"> <div class="brokerCardPositive">
<!-- <div class="dividingContainer"> <div class="qrcodeBox">
<div>
<div style="margin-bottom: 20%;"><img src="assets/images/ydShield.png" alt="银盾保险经纪" class="img-responsive">
</div>
<div><img src="assets/images/ydCompanyName.png" alt="银盾保险经纪" class="img-responsive"></div>
</div>
<div><img [src]="practitionerInfo?.wxQRImgUrl" alt="" class="img-responsive"></div>
</div>
<div class="dividingContainer">
<div class="dividingBox"></div> <div class="dividingBox"></div>
<div class="dividingLine"></div> <div class="dividingLine"></div>
</div> --> </div>
<div class="brokerInfo"> <div class="brokerInfo">
<div class="brokerBasicInfo"> <div class="brokerBasicInfo">
<div class="brokerName"> <div class="nameTitleContent">
<div> <div class="brokerName">
{{lifeCustomerInfo.practitionerBasicInfo.name}} <div>{{practitionerInfo?.practitionerName}}</div>
<span>Neo Zheng</span> <div>{{practitionerInfo?.practitionerNameEn}}</div>
</div>
<div class="brokerTitle">
<div>{{practitionerInfo?.levelName}}</div>
<div>{{practitionerInfo?.levelNameEn}} </div>
</div> </div>
</div> </div>
</div> <div class="certifyLists" *ngIf="practitionerInfo?.certificateList">
<div class="brokerCompanyInfo"> <p *ngFor="let item of practitionerInfo.certificateList">
<div style="font-size: 14px">上海银盾保险经纪有限公司</div> <span>{{item.certName}}</span> <span style="margin-left: 5px;">{{item.certNameEn}}</span>
<div style="font-size:10px;">上海市浦东新区张杨路560号中融恒瑞国际西楼1502室</div> </p>
</div>
<div class="brokerContactInfo">
<div>
<i class="iconfont icon-shouji"></i>
<span>手机: {{lifeCustomerInfo.mobileNo}}</span>
</div>
<div>
<i class="iconfont icon-youxiang1"></i>
<span>邮箱：50262253@qq.com</span>
</div>
<div style="margin-bottom: 0;">
<i class="iconfont icon-gongsiwangzhi"></i>
<span>网址：www.ydinsurance.com</span>
</div> </div>
</div> </div>
</div> <div class="brokerCompanyInfo">
<div class="qrcodeBox"> <div style="font-size: 18px">{{practitionerInfo?.insurerName}}</div>
<div> <div style="font-size: 13px;">{{practitionerInfo?.insurerUrl}}</div>
<div style="margin-bottom: 20%;"><img src="assets/images/ydShield.png" alt="银盾保险经纪" class="img-responsive"> <div>全球保险集团BHL成员</div>
</div> <div>T: {{lifeCustomerInfo?.mobileNo}}</div>
<div><img src="assets/images/ydCompanyName.png" alt="银盾保险经纪" class="img-responsive"></div> <div>E: {{lifeCustomerInfo?.email}}</div>
</div> <div>{{practitionerInfo?.insurerAddress}}</div>
<div>
<img src="{{lifeCustomerInfo.practitionerBasicInfo.qrCodePath ?lifeCustomerInfo.practitionerBasicInfo.qrCodePath:'assets/images/online.jpg'}}" alt="" class="img-responsive">
</div> </div>
</div> </div>
</div> </div>
<img src="{{canvasImg}}" *ngIf="showFlag==true">
<div class="brokerCardOpposite"> <div class="brokerCardOpposite">
<img src="assets/images/card_opposite.jpg" alt="" class="img-responsive"> <img src="assets/images/card_opposite.jpg" alt="" class="img-responsive">
</div> </div>
</div> </div>
<!--
<div (click) = "downLoadJspdfs()">导出pdf</div> -->
src/app/my/business-card/business-card.component.scss
.businessCardContainer { .businessCardContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #000;
font-weight: 600;
letter-spacing: 1px;
.brokerCardPositive { .brokerCardPositive {
display: flex; display: flex;
padding:7% 5% 10% 5%; padding-top: 7%;
padding-left: 5%;
margin-bottom: 10%;
.qrcodeBox { .qrcodeBox {
width: 18%; width: 15%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
...@@ -27,31 +32,42 @@ ...@@ -27,31 +32,42 @@
} }
.brokerInfo { .brokerInfo {
flex: 1; flex: 1;
line-height: 1.5;
.brokerBasicInfo { .brokerBasicInfo {
display: flex; display: flex;
align-items: flex-end;
justify-content: space-between; justify-content: space-between;
padding-right: 5%; padding-right: 8%;
margin-bottom: 10%; margin-bottom: 5%;
color: #231f20; flex-direction: column;
align-items: flex-start;
.brokerName { .brokerName {
font-size: 20px; div:first-child {
font-size: 29px;
letter-spacing: 3px;
line-height: 1.1; line-height: 1.1;
}
div:last-child {
font-size: 13px;
}
} }
} .brokerTitle {
.brokerCompanyInfo { font-size: 12px;
margin-bottom: 10%;
}
.brokerContactInfo {
line-height: 1.1;
div{
margin-bottom: 5px;
} }
.iconfont { .certifyLists{
margin-right: 5px; margin-top: 10px;
color: #ee262e;
} }
.nameTitleContent{
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline
}
}
.brokerCompanyInfo {
font-size: 14px;
line-height: 1.4;
} }
} }
} }
......
src/app/my/business-card/business-card.component.ts
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import jspdf from 'jspdf'; import { MyService } from '../my.service';
import html2canvas from 'html2canvas';
@Component({ @Component({
selector: 'ydlife-business-card', selector: 'ydlife-business-card',
...@@ -8,65 +7,22 @@ import html2canvas from 'html2canvas'; ...@@ -8,65 +7,22 @@ import html2canvas from 'html2canvas';
styleUrls: ['./business-card.component.scss'] styleUrls: ['./business-card.component.scss']
}) })
export class BusinessCardComponent implements OnInit { export class BusinessCardComponent implements OnInit {
element:any;
lifeCustomerInfo: any; lifeCustomerInfo: any;
canvasImg:any; practitionerInfo:any;
showFlag:boolean = false;
constructor() { constructor(private myService:MyService) {
} }
ngOnInit() { ngOnInit() {
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')); this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
setTimeout(()=>{ this.businessCard();
this.getImg();
},500)
} }
businessCard(){
getImg(){ this.myService.businessCard({practitionerId:this.lifeCustomerInfo.practitionerId}).subscribe(res=>{
this.element = document.getElementById("brokerCardPositive"); if(res['success']){
html2canvas(this.element).then(canvas => { this.practitionerInfo = res['data'];
// 修改生成的宽度
canvas.style.width = "1000px";
console.log(canvas, "生成的画布文件");
this.canvasImg = canvas.toDataURL("image/png");
if(canvas){
this.showFlag = true;
} }
}) })
} }
// downLoadJspdfs(){
// this.element = document.getElementById("brokerCardPositive");
// html2canvas(this.element,{
// logging:false //一开始canvas设置不渲染页面
// }).then((canvas)=>{
// let pdf:any = new jspdf('p','mm','a4') //纵向，单位mm，A4纸张大小
// let ctx:any = canvas.getContext('2d'); //预设2维画布
// let a4w:number = 190; //设置显示内容的大小，A4大小：210*297；最后显示在A4内部区域大小为：190*360
// let a4h:number = 200;
// let imgHeight:number = Math.floor(a4h*canvas.width/a4w); //按A4显示比例换算一页图像的像素高度
// let renderedHeight:number = 0;
// while(renderedHeight<canvas.height){//判断页面有内容时
// let page:any = document.createElement('canvas'); //创建画布
// page.width = canvas.width; //设置画布宽高等于内容宽高
// page.height = Math.min(imgHeight,canvas.height-renderedHeight); //画布的高等于内容的最小的高度（不足一页）
// //用getImageData裁剪指定区域，并绘制到前面创建的canvas对象中
// let a:any = page.getContext('2d');
// a.putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight,canvas.height-renderedHeight)),0,0);
// pdf.addImage(page.toDataURL('image/jpeg',1.0),'JPEG',10,10,a4w,Math.min(a4h,a4w*page.height/page.width)); //添加图片到页面，保留10mm边距
// renderedHeight += imgHeight;
// if(renderedHeight < canvas.height){
// pdf.addPage();
// }
// }
// pdf.save('content.pdf')
// });
// }
} }
src/app/my/menu-item/menu-item.component.ts
...@@ -103,6 +103,7 @@ export class MenuItemComponent implements OnInit { ...@@ -103,6 +103,7 @@ export class MenuItemComponent implements OnInit {
{ no: 28, subtitle: '欢迎信', icon: 'welcome', path: '', routerLink: 'thanks',showSubMenu:true }, { no: 28, subtitle: '欢迎信', icon: 'welcome', path: '', routerLink: 'thanks',showSubMenu:true },
{ no: 31, subtitle: '新人入职包', icon: 'NewcomerBag', path: '', routerLink: '',showSubMenu:true }, { no: 31, subtitle: '新人入职包', icon: 'NewcomerBag', path: '', routerLink: '',showSubMenu:true },
{ no: 30, subtitle: '执业证书', icon: 'card', path: `https://${window.location.host}/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}?source=0`, routerLink: '',showSubMenu:true }, { no: 30, subtitle: '执业证书', icon: 'card', path: `https://${window.location.host}/brokerQry/#/brokerDetail/${this.lifeCustomerInfo.practitionerId}?source=0`, routerLink: '',showSubMenu:true },
{ no: 38, subtitle: '我的名片', icon: 'practitionerCard', path: '', routerLink: 'businessCard',showSubMenu:true },
{ no: 32, subtitle: '公司介绍', icon: 'introduce', path: '', routerLink: '',showSubMenu:true }, { no: 32, subtitle: '公司介绍', icon: 'introduce', path: '', routerLink: '',showSubMenu:true },
{ no: 27, subtitle: '我的经纪合同', icon: 'contract', path: '', routerLink: 'my_application' ,showSubMenu:true}, { no: 27, subtitle: '我的经纪合同', icon: 'contract', path: '', routerLink: 'my_application' ,showSubMenu:true},
{ no: 34, subtitle: '继续率承诺书', icon: 'jixu', path: '', routerLink: '' ,showSubMenu:true}, { no: 34, subtitle: '继续率承诺书', icon: 'jixu', path: '', routerLink: '' ,showSubMenu:true},
......
src/app/my/my.service.ts
...@@ -869,4 +869,10 @@ export class MyService { ...@@ -869,4 +869,10 @@ export class MyService {
const url = this.ydapi + "/practitioner/deleteOpportunity"; const url = this.ydapi + "/practitioner/deleteOpportunity";
return this.http.post(url,JSON.stringify(params)) return this.http.post(url,JSON.stringify(params))
} }
// 经纪人名片
businessCard(params){
const url = this.ydapi + "/practitioner/businessCard";
return this.http.post(url,JSON.stringify(params))
}
} }
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg

685 KB | W: | H:

src/assets/images/card_opposite.jpg

255 KB | W: | H:

src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
src/assets/images/card_opposite.jpg
  • 2-up
  • Swipe
  • Onion skin
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