产品海报对接和教育培训

src/app/app.module.ts

@@ -10,11 +10,13 @@ import {HttpClientModule} from '@angular/common/http';
 import {LifeCommonModule} from './common/life-common.module';
 import {httpInterceptorProviders} from './http-interceptors/index';
 import {DatePipe} from "@angular/common";
+import { SafeHtmlPipe } from './safe-html.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
+    SafeHtmlPipe
   ],
   imports: [
     BrowserModule,

src/app/my/file-upload/file-upload.component.ts

 import {Component, OnInit} from '@angular/core';
 import {LifeCommonService} from "../../common/life-common.service";
 import {MyService} from "../my.service";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'ydlife-file-upload',
@@ -9,12 +10,20 @@ import {MyService} from "../my.service";
 })
 export class FileUploadComponent implements OnInit {
   fileUploadItemList: Array<any>;
+  // 判断是文件下载还是教育培训
+  type: string;
 
-  constructor(private myService: MyService) {
+  constructor(private myService: MyService, private activatedRoute: ActivatedRoute) {
   }
 
   ngOnInit() {
-    this.fileUpload(3, 0, 19);
+    this.type = this.activatedRoute.snapshot.data[0]['type'];
+    if (this.type === 'fileUpload') {
+      this.fileUpload(3, 0, 19);
+    } else if (this.type === 'training') {
+      this.fileUpload(3, 0, 23);
+    }
+
   }
 
 //  文件下载

src/app/my/important-announcement/important-announcement.component.html

 <div>
   <div class="announcementItem" *ngFor="let announcementItem of announcementLists">
-    <div class="announcement_title"><span class="announcement_type">【{{announcementItem.announcementTypeName}}】</span><span [innerHtml]="announcementItem.title"></span></div>
-    <div [innerHtml]="announcementItem.content" class="announcement_content"></div>
+    <div class="announcement_title"><span class="announcement_type">【{{announcementItem.announcementTypeName}}】</span><span [innerHtml]="announcementItem.title |safeHtml"></span></div>
+    <div [innerHtml]="announcementItem.content | safeHtml" class="announcement_content"></div>
     <div class="announcement_at">{{announcementItem.announcementAt}}</div>
   </div>
 </div>

src/app/my/mk-material-detail/mk-material-detail.component.ts

@@ -4,8 +4,10 @@ import {environment} from '../../../environments/environment';
 import {LifeCommonService} from '../../common/life-common.service';
 import {MyService} from '../my.service';
 import {Buffer} from 'buffer';
+
 declare var QRCode: any;
 import * as uuid from 'uuid';
+
 @Component({
   selector: 'ydlife-mk-material-detail',
   templateUrl: './mk-material-detail.component.html',
@@ -14,6 +16,10 @@ import * as uuid from 'uuid';
 export class MkMaterialDetailComponent implements OnInit {
   @ViewChild('canvas') canvas: ElementRef<any>;
   materialItemId: string;
+  // 1是指itemId 是productID 2是指planid
+  materialItemType: string;
+  // 海报图
+  productPosterPath: string;
   lifeCustomerInfo: any;
   shareInfo: any;
   // 自定义内容部分高度
@@ -32,18 +38,9 @@ export class MkMaterialDetailComponent implements OnInit {
 
   ngOnInit() {
     this.materialItemId = this.activateRoute.snapshot.paramMap.get('itemId');
+    this.materialItemType = this.activateRoute.snapshot.queryParams['itemType'];
     this.lifeCustomerInfo = localStorage.getItem('lifeCustomerInfo') ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
-    // 分享信息
-    const shareCodeUuid = uuid.v4();
-    this.shareInfo = {
-      ...this.lifeCommonService.generateShareCode(),
-      shareCode: shareCodeUuid,
-      customerId: this.lifeCustomerInfo.customerId,
-      productId: this.materialItemId,
-      url: `${environment.ORIGINNAME}/life/${this.materialItemId}?shareCode=${shareCodeUuid}`
-    };
-    // 发送请求保存分享码
-    this.shareCallBack();
+    this.posterQuery(this.materialItemId, this.materialItemType);
   }
 
   async canvasPic() {
@@ -58,6 +55,7 @@ export class MkMaterialDetailComponent implements OnInit {
     canvas.style.width = W + 'px';
     canvas.style.height = H + 'px';
     const img = new Image();
+    img.setAttribute('crossOrigin', 'anonymous');
     // 画圆形头像
     const avatarurlWidth = 50 * ratio;    // 绘制的头像宽度
     const avatarurlHeigth = 50 * ratio;  // 绘制的头像高度
@@ -66,12 +64,12 @@ export class MkMaterialDetailComponent implements OnInit {
     const avatarImg = new Image();
     avatarImg.setAttribute('crossOrigin', 'anonymous');
     if (this.lifeCustomerInfo.practitionerBasicInfo.headImagePath) {
-      avatarImg.src = this.lifeCustomerInfo.practitionerBasicInfo.headImagePath;
+      avatarImg.src = this.lifeCustomerInfo.practitionerBasicInfo.headImagePath + '?v=' + new Date().getTime();
     } else {
-      avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png`;
+      avatarImg.src = `${environment.ORIGINNAME}/assets/img/meng.png?v=${new Date().getTime()}`;
     }
-    // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
-    img.src = `${environment.ORIGINNAME}/ydLife/assets/images/mk-material/${this.materialItemId}.jpg`;
+    // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
+    img.src = this.productPosterPath;
     img.onload = () => {
       // 加载海报图
       ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
@@ -188,4 +186,42 @@ export class MkMaterialDetailComponent implements OnInit {
       }, 100)
     });
   }
+
+//  获取大图
+  posterQuery(itemId, itemType) {
+    this.myService.posterQuery({
+      paginationInfo: {
+        noLimitFlag: 'CONFIRM'
+      }
+    }).subscribe(res => {
+      if (res['success']) {
+        const posterInfos = res['data']['posterInfos'];
+        const posterInfo = posterInfos.filter(item => item.itemId == itemId && item.itemType == itemType).pop();
+        this.productPosterPath = posterInfo.productPosterPath + '?v=' + new Date().getTime();
+        // 分享信息
+        const shareCodeUuid = uuid.v4();
+        this.shareInfo = {
+          ...this.lifeCommonService.generateShareCode(),
+          shareCode: shareCodeUuid,
+          customerId: this.lifeCustomerInfo.customerId,
+          productId: this.materialItemId,
+          url: `${environment.ORIGINNAME}/life/${this.materialItemId}?shareCode=${shareCodeUuid}`
+        };
+        if (itemType == '2') {
+          this.shareInfo.productId = null;
+          this.shareInfo.planId = this.materialItemId;
+        }
+        // 0是有plan，1是无plan
+        if (posterInfo.isPlan == '0') {
+          if (posterInfo.productCategoryId == '2') {
+            this.shareInfo.url = `${environment.ORIGINNAME}/hProductDetail/${this.materialItemId}?shareCode=${shareCodeUuid}&type=7`;
+          } else if (posterInfo.productCategoryId == '5') {
+            this.shareInfo.url = `${environment.ORIGINNAME}/hProductDetail/${this.materialItemId}?shareCode=${shareCodeUuid}&type=9`;
+          }
+        }
+        // 发送请求保存分享码
+        this.shareCallBack();
+      }
+    });
+  }
 }

src/app/my/mk-material/mk-material.component.html

 <div class="materialContainer">
-  <div class="materialItem" *ngFor="let materialItem of materialLists;index as i"
-       [routerLink]="['/material',materialItem.itemId]">
+  <div class="materialItem" *ngFor="let posterInfo of posterInfos;index as i"
+       [routerLink]="['/material',posterInfo.itemId]" [queryParams]="{itemType:posterInfo.itemType}">
     <div>
-      <img src="{{'./assets/images/mk-material/'+materialItem.itemId+'thumb.jpg'}}" alt="" class="img-responsive">
+      <img src="{{posterInfo.thumbnailPath}}" alt="" class="img-responsive">
     </div>
-    <div class="title">{{materialItem.title}}</div>
+    <div class="title">{{posterInfo.title}}</div>
   </div>
 </div>

src/app/my/mk-material/mk-material.component.ts

 import {Component, OnInit} from '@angular/core';
 import {Router} from "@angular/router";
+import {MyService} from "../my.service";
+
 @Component({
   selector: 'ydlife-mk-material',
   templateUrl: './mk-material.component.html',
   styleUrls: ['./mk-material.component.scss']
 })
 export class MkMaterialComponent implements OnInit {
-  materialLists: Array<any>;
+  posterInfos: Array<any>;
 
-  constructor(private router: Router) {
+  constructor(private router: Router, private myService: MyService) {
   }
 
   ngOnInit() {
-    this.materialLists = [
-      {id: 1, itemId: '118', title: '百年康惠保（旗舰版）重大疾病保险'},
-      {id: 2, itemId: '133', title: '康乐一生重大疾病保险（C款升级款）'},
-      {id: 3, itemId: '131', title: '复星联合妈咪宝贝少儿重大疾病保险'},
-      {id: 4, itemId: '117', title: '百年定惠保'},
-      {id: 5, itemId: '136', title: '中信保诚祯爱两全定期寿险'},
-      {id: 6, itemId: '137', title: '中信保诚祯爱优选定期寿险'},
-      {id: 7, itemId: '138', title: '中信保诚祯爱减额定期寿险'},
-      {id: 8, itemId: '139', title: '中信保诚祯爱增额定期寿险'},
-    ];
+    this.posterQuery();
+  }
+
+  posterQuery() {
+    this.myService.posterQuery({
+      paginationInfo: {
+        noLimitFlag: 'CONFIRM'
+      }
+    }).subscribe(res => {
+      if (res['success']) {
+        this.posterInfos = res['data']['posterInfos'];
+      }
+    });
   }
 
 }

src/app/my/my-center-home/my-center-home.component.html

@@ -18,9 +18,6 @@
         <div><span class="ydTitle">{{lifeCustomerInfo?.practitionerBasicInfo?.levelName}}</span></div>
       </div>
     </div>
-    <!--<div class="shareSelfInfoBtn">-->
-    <!--<span (click)="shareIdCard()">分享名片</span>-->
-    <!--</div>-->
   </div>
   <div class="weui-panel__bd">
     <div class="weui-media-box weui-media-box_small-appmsg">

src/app/my/my-center-home/my-center-home.component.ts

@@ -33,7 +33,7 @@ export class MyCenterHomeComponent implements OnInit {
       {no: 2, title: '业绩资讯', path: '', icon: 'icon-icon-test', routerLink: ''},
       {no: 3, title: '我的客户', path: '', icon: 'icon-kehu', routerLink: ''},
       {no: 4, title: '保单查询', path: '', icon: 'icon-baodanyangben', routerLink: ''},
-      {no: 5, title: '教育训练', path: '', icon: 'icon-jiaoyu', routerLink: ''},
+      {no: 5, title: '教育训练', path: '', icon: 'icon-jiaoyu', routerLink: 'training'},
       {
         no: 6,
         title: '文件下载',

src/app/my/my-routing.module.ts

@@ -5,12 +5,14 @@ import {AuthGuard} from '../auth/auth.guard';
 import {MkMaterialComponent} from './mk-material/mk-material.component';
 import {MkMaterialDetailComponent} from './mk-material-detail/mk-material-detail.component';
 import {FileUploadComponent} from './file-upload/file-upload.component';
-import {ImportantAnnouncementComponent} from "./important-announcement/important-announcement.component";
+import {ImportantAnnouncementComponent} from './important-announcement/important-announcement.component';
+
 const myRoutes: Routes = [
   {path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard]},
   {path: 'material', component: MkMaterialComponent, canActivate: [AuthGuard]},
   {path: 'material/:itemId', component: MkMaterialDetailComponent, canActivate: [AuthGuard]},
-  {path: 'fileUpload', component: FileUploadComponent, canActivate: [AuthGuard]},
+  {path: 'fileUpload', component: FileUploadComponent, canActivate: [AuthGuard], data: [{type: 'fileUpload'}]},
+  {path: 'training', component: FileUploadComponent, canActivate: [AuthGuard], data: [{type: 'training'}]},
   {path: 'importantAnnouncement', component: ImportantAnnouncementComponent, canActivate: [AuthGuard]},
 ];
 

src/app/my/my.service.ts

@@ -10,6 +10,7 @@ export class MyService {
   }
 
   private API = environment.BACKEND_URL_CONFIG_VALUE;
+
 //  保存分享码
   shareCallBack(shareInfo) {
     const url = this.API + '/shareCallBack';
@@ -30,4 +31,11 @@ export class MyService {
     return this.http
       .post(url, JSON.stringify({id: id, announcementTypeId: announcementTypeId}));
   }
+
+//  产品海报
+  posterQuery(paginationInfo) {
+    const url = this.API + '/posterQuery';
+    return this.http
+      .post(url, JSON.stringify(paginationInfo));
+  }
 }

src/app/safe-html.pipe.spec.ts

+import { SafeHtmlPipe } from './safe-html.pipe';
+
+describe('SafeHtmlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeHtmlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/safe-html.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+@Pipe({
+  name: 'safeHtml'
+})
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) {
+  }
+
+  transform(value: any, args?: any): any {
+    return this.sanitized.bypassSecurityTrustHtml(value);
+  }
+
+}