经纪人名片

src/app/my/business-card/business-card.component.html

 <div class="businessCardContainer">
-  <div class="brokerCardPositive" id="brokerCardPositive" *ngIf="showFlag==false">
-    <!-- <div class="dividingContainer">
+  <div class="brokerCardPositive">
+    <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="dividingLine"></div>
-    </div> -->
+    </div>
     <div class="brokerInfo">
       <div class="brokerBasicInfo">
-        <div class="brokerName">
-          <div>
-            {{lifeCustomerInfo.practitionerBasicInfo.name}}
-            <span>Neo Zheng</span>
+        <div class="nameTitleContent">
+          <div class="brokerName">
+            <div>{{practitionerInfo?.practitionerName}}</div>
+            <div>{{practitionerInfo?.practitionerNameEn}}</div>
+          </div>
+          <div class="brokerTitle">
+            <div>{{practitionerInfo?.levelName}}</div>
+            <div>{{practitionerInfo?.levelNameEn}} </div>
           </div>
         </div>
-      </div>
-      <div class="brokerCompanyInfo">
-        <div style="font-size: 14px">上海银盾保险经纪有限公司</div>
-        <div style="font-size:10px;">上海市浦东新区张杨路560号中融恒瑞国际西楼1502室</div>
-      </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 class="certifyLists" *ngIf="practitionerInfo?.certificateList">
+          <p *ngFor="let item of practitionerInfo.certificateList">
+            <span>{{item.certName}}</span> <span style="margin-left: 5px;">{{item.certNameEn}}</span>
+          </p>
         </div>
       </div>
-    </div>
-    <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="{{lifeCustomerInfo.practitionerBasicInfo.qrCodePath ?lifeCustomerInfo.practitionerBasicInfo.qrCodePath:'assets/images/online.jpg'}}" alt="" class="img-responsive">
+      <div class="brokerCompanyInfo">
+        <div style="font-size: 18px">{{practitionerInfo?.insurerName}}</div>
+        <div style="font-size: 13px;">{{practitionerInfo?.insurerUrl}}</div>
+        <div>全球保险集团BHL成员</div>
+        <div>T: {{lifeCustomerInfo?.mobileNo}}</div>
+        <div>E: {{lifeCustomerInfo?.email}}</div>
+        <div>{{practitionerInfo?.insurerAddress}}</div>
       </div>
     </div>
   </div>
-  <img src="{{canvasImg}}" *ngIf="showFlag==true">
   <div class="brokerCardOpposite">
     <img src="assets/images/card_opposite.jpg" alt="" class="img-responsive">
   </div>
 </div>
-<!-- 
-<div (click) = "downLoadJspdfs()">导出pdf</div> -->

src/app/my/business-card/business-card.component.scss

 .businessCardContainer {
   display: flex;
   flex-direction: column;
+  color: #000;
+  font-weight: 600;
+  letter-spacing: 1px;
   .brokerCardPositive {
     display: flex;
-    padding:7% 5% 10% 5%;
+    padding-top: 7%;
+    padding-left: 5%;
+    margin-bottom: 10%;
     .qrcodeBox {
-      width: 18%;
+      width: 15%;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -27,31 +32,42 @@
     }
     .brokerInfo {
       flex: 1;
+      line-height: 1.5;
       .brokerBasicInfo {
         display: flex;
-        align-items: flex-end;
         justify-content: space-between;
-        padding-right: 5%;
-        margin-bottom: 10%;
-        color: #231f20;
+        padding-right: 8%;
+        margin-bottom: 5%;
+        flex-direction: column;
+        align-items: flex-start;
         .brokerName {
-            font-size: 20px;
+          div:first-child {
+            font-size: 29px;
+            letter-spacing: 3px;
             line-height: 1.1;
+          }
+          div:last-child {
+            font-size: 13px;
+          }
         }
-      }
-      .brokerCompanyInfo {
-        margin-bottom: 10%;
-      }
-      .brokerContactInfo {
-        line-height: 1.1;
-        div{
-          margin-bottom: 5px;
+        .brokerTitle {
+          font-size: 12px;
         }
-        .iconfont {
-          margin-right: 5px;
-          color: #ee262e;
+        .certifyLists{
+          margin-top: 10px;
         }
+        .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 jspdf from 'jspdf';
-import html2canvas from 'html2canvas';
+import {Component, OnInit} from '@angular/core';
+import { MyService } from '../my.service';
 
 @Component({
   selector: 'ydlife-business-card',
@@ -8,65 +7,22 @@ import html2canvas from 'html2canvas';
   styleUrls: ['./business-card.component.scss']
 })
 export class BusinessCardComponent implements OnInit {
-  element:any;
   lifeCustomerInfo: any;
-  canvasImg:any;
-  showFlag:boolean = false;
-  constructor() {
+  practitionerInfo:any;
+
+  constructor(private myService:MyService) {
   }
 
   ngOnInit() {
     this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
-    setTimeout(()=>{
-      this.getImg();
-    },500)
-   
+    this.businessCard();
   }
-
-  getImg(){
-    this.element = document.getElementById("brokerCardPositive");
-    html2canvas(this.element).then(canvas => {
-      // 修改生成的宽度
-      canvas.style.width = "1000px";
-      console.log(canvas, "生成的画布文件");
-      
-      this.canvasImg = canvas.toDataURL("image/png");
-      if(canvas){
-        this.showFlag = true;  
+  businessCard(){
+    this.myService.businessCard({practitionerId:this.lifeCustomerInfo.practitionerId}).subscribe(res=>{
+      if(res['success']){
+        this.practitionerInfo = res['data'];
       }
     })
   }
-  
-  // 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 {
           { no: 28, subtitle: '欢迎信', icon: 'welcome', path: '', routerLink: 'thanks',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: 38, subtitle: '我的名片', icon: 'practitionerCard', path: '', routerLink: 'businessCard',showSubMenu:true },
           { no: 32, subtitle: '公司介绍', icon: 'introduce', path: '', routerLink: '',showSubMenu:true },
           { no: 27, subtitle: '我的经纪合同', icon: 'contract', path: '', routerLink: 'my_application' ,showSubMenu:true},
           { no: 34, subtitle: '继续率承诺书', icon: 'jixu', path: '', routerLink: '' ,showSubMenu:true},

src/app/my/my.service.ts

@@ -869,4 +869,10 @@ export class MyService {
     const url = this.ydapi + "/practitioner/deleteOpportunity";
     return this.http.post(url,JSON.stringify(params))
   }
+
+  // 经纪人名片
+  businessCard(params){
+    const url = this.ydapi + "/practitioner/businessCard";
+    return this.http.post(url,JSON.stringify(params))
+  }
 }