素材库

package.json

@@ -22,6 +22,7 @@
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
+    "uuid": "^3.3.3",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {

src/app/app.module.ts

@@ -9,6 +9,7 @@ import {AuthModule} from './auth/auth.module';
 import {HttpClientModule} from '@angular/common/http';
 import {LifeCommonModule} from './common/life-common.module';
 import {httpInterceptorProviders} from './http-interceptors/index';
+import {DatePipe} from "@angular/common";
 
 @NgModule({
   declarations: [
@@ -23,7 +24,7 @@ import {httpInterceptorProviders} from './http-interceptors/index';
     HttpClientModule,
     AppRoutingModule
   ],
-  providers: [httpInterceptorProviders],
+  providers: [DatePipe, httpInterceptorProviders],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/auth/login/login.component.ts

@@ -43,7 +43,7 @@ export class LoginComponent implements OnInit, OnDestroy {
           this.authService.login({mobileNo: this.userInfo.mobileNo}).subscribe((response) => {
             if (response['success']) {
               this.authService.isLoggedIn = true;
-              const lifeCustomerInfo = {...response.data, commonResult: null};
+              const lifeCustomerInfo = {...response.data, mobileNo: this.userInfo.mobileNo, commonResult: null};
               if (lifeCustomerInfo['customerId'] && lifeCustomerInfo['practitionerId']) {
                 localStorage.setItem('lifeCustomerInfo', JSON.stringify(lifeCustomerInfo));
                 const redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/my';

src/app/common/life-common.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LifeCommonService } from './life-common.service';
+
+describe('LifeCommonService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LifeCommonService = TestBed.get(LifeCommonService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/common/life-common.service.ts

+import {Injectable} from '@angular/core';
+import {DatePipe} from '@angular/common';
+import {Meta, Title} from '@angular/platform-browser';
+import * as uuid from 'uuid';
+@Injectable({
+  providedIn: 'root'
+})
+export class LifeCommonService {
+
+  constructor(private datePipe: DatePipe,
+              private titleService: Title,
+              private metaService: Meta) {
+  }
+
+  /**
+   * 检测操作系统
+   */
+  checkOs() {
+    let os;
+    const isWin = (navigator.platform === 'Win32') || (navigator.platform === 'Windows');
+    const isMac = (navigator.platform === 'Mac68K') ||
+      (navigator.platform === 'MacPPC') ||
+      (navigator.platform === 'Macintosh') ||
+      (navigator.platform === 'MacIntel');
+    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+      os = 1;
+      return os; // 这是iOS平台下浏览器
+    } else if (/android/i.test(navigator.userAgent)) {
+      os = 2;
+      return os; // 这是Android平台下浏览器
+    } else if (isWin) {
+      os = 3;
+      return os; // 这是Android平台下浏览器
+    } else if (isMac) {
+      os = 4;
+      return os; // 这是mac系统
+    } else if (/Linux/i.test(navigator.userAgent)) {
+      os = 5;
+      return os; // 这是Linux平台下浏览器
+    } else {
+      os = 6;
+      return os;
+    }
+  }
+
+  /**
+   * shareCode生成器
+   */
+  generateShareCode(jsonParams?: any) {
+    const shareCode = {
+      shareCode: uuid.v4(),
+      shareType: '1',
+      os: this.checkOs(),
+      channel: '0',
+      isOrder: 0,
+      jsonParams: JSON.stringify(jsonParams)
+    };
+    return shareCode;
+  }
+
+  // 设置title
+  setTitle(title) {
+    this.titleService.setTitle(title);
+  }
+
+  // 更新meta标签
+  updateMeta(keywords, description) {
+    this.metaService.updateTag({content: keywords}, 'name=keywords');
+    this.metaService.updateTag({content: description}, 'name=description');
+  }
+}

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

+<!-- 这个元素用来承载生成的二维码 不显示 -->
+<div id="qrcode" style="display: none"></div>
+
+<!-- 点击这个按钮之后下载图片 -->
+<!--<button id="download"> 下载图片</button>-->
+
+<!-- canvas 标签 主要用来进行图形的绘制-->
+<canvas id="canvas" width="375" height="667" #canvas></canvas>
+
+<!--生成图片-->
+<img src="" alt="" id="bannerImg">

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MkMaterialDetailComponent } from './mk-material-detail.component';
+
+describe('MkMaterialDetailComponent', () => {
+  let component: MkMaterialDetailComponent;
+  let fixture: ComponentFixture<MkMaterialDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MkMaterialDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MkMaterialDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {environment} from '../../../environments/environment';
+import {LifeCommonService} from '../../common/life-common.service';
+import {MyService} from '../my.service';
+declare var QRCode: any;
+@Component({
+  selector: 'ydlife-mk-material-detail',
+  templateUrl: './mk-material-detail.component.html',
+  styleUrls: ['./mk-material-detail.component.scss']
+})
+export class MkMaterialDetailComponent implements OnInit {
+  @ViewChild('canvas') canvas: ElementRef<any>;
+  materialItemId: string;
+  lifeCustomerInfo: any;
+  shareInfo: any;
+
+  constructor(private activateRoute: ActivatedRoute,
+              private lifeCommonService: LifeCommonService,
+              private myService: MyService) {
+  }
+
+  ngOnInit() {
+    this.materialItemId = this.activateRoute.snapshot.paramMap.get('itemId');
+    this.lifeCustomerInfo = localStorage.getItem('lifeCustomerInfo') ? JSON.parse(localStorage.getItem('lifeCustomerInfo')) : null;
+    // 分享信息
+    this.shareInfo = {
+      ...this.lifeCommonService.generateShareCode(),
+      customerId: this.lifeCustomerInfo.customerId,
+      productId: this.materialItemId,
+      url: `${environment.ORIGINNAME}/life/${this.materialItemId}?shareCode=${this.lifeCommonService.generateShareCode().shareCode}`
+    };
+    // 发送请求保存分享码
+    this.shareCallBack();
+    this.canvas.nativeElement.width = window.screen.width;
+    this.canvas.nativeElement.height = window.screen.height;
+    const canvas = this.canvas.nativeElement as HTMLCanvasElement;
+    canvas.width = canvas.width * 1;
+    canvas.height = canvas.height * 1;
+    const qr = document.querySelector('#qrcode');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
+    img.src = `${environment.ORIGINNAME}/ydLife/assets/images/mk-material/${this.materialItemId}.jpg`;
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+      // 对二维码进行初始化
+      const qrCode = new QRCode(qr, {
+        width: 100,
+        height: 100,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+      });
+      // 为二维码设置内容
+      qrCode.makeCode(this.shareInfo.url);
+      // 我们的qrcode生成二维码之后也会有一个canvas对象我们获取到这个元素
+      const newCanvas = qr.firstChild as HTMLCanvasElement;
+      const base64 = newCanvas.toDataURL('image/png', 1);
+      // 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
+      const shareQr = new Image();
+      // 设置base64编码格式值
+      shareQr.src = base64;
+      shareQr.onload = () => {
+        // 绘制图像  就是绘制二维码到我们自己写的canvas中去
+        ctx.drawImage(shareQr, this.canvas.nativeElement.width - 120, this.canvas.nativeElement.height - 125, 100, 100);
+        document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
+      };
+      // 绘制字体
+      ctx.font = '14px 微软雅黑';
+      ctx.fillStyle = '#081a71';
+      ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 8);
+      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 15, this.canvas.nativeElement.height - 100);
+      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 15, this.canvas.nativeElement.height - 70);
+      ctx.fillText('微信号：123456', 15, this.canvas.nativeElement.height - 40);
+    };
+  }
+
+  download(canvas) {
+    const a = document.createElement('a');
+    // 设置地址
+    a.href = canvas.toDataURL('image/png', 1);
+    // 设置下载名称
+    a.download = '银盾保险在线';
+    // 触发点击事件
+    a.click();
+  }
+
+  shareCallBack() {
+    this.myService.shareCallBack(this.shareInfo).subscribe(res => {
+      console.log(res);
+    })
+  }
+
+}

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

-<!-- 这个元素用来承载生成的二维码 不显示 -->
-<div id="qrcode" style="display: none"></div>
-
-<!-- 点击这个按钮之后下载图片 -->
-<!--<button id="download"> 下载图片</button>-->
-
-<!-- canvas 标签 主要用来进行图形的绘制-->
-<canvas id="canvas" width="375" height="667" #canvas></canvas>
-
-<!--生成图片-->
-<img src="" alt="" id="bannerImg">
+<div class="materialContainer">
+  <div class="materialItem" *ngFor="let materialItem of materialLists;index as i"
+       [routerLink]="['/material',materialItem.itemId]">
+    <div>
+      <img src="{{'assets/images/mk-material/'+materialItem.itemId+'.png'}}" alt="" class="img-responsive">
+    </div>
+    <div class="title">{{materialItem.title}}</div>
+  </div>
+</div>

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

+.materialContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2,240px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  .materialItem {
+    height: 200px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f7f7f7;
+    padding: 14px;
+    .title {
+      font-size: 12px;
+      line-height: 1.1;
+    }
+  }
+}

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

-import {Component, ElementRef, OnInit, TemplateRef, ViewChild} from '@angular/core';
-declare var QRCode: any;
+import {Component, OnInit} from '@angular/core';
+import {Router} from "@angular/router";
 @Component({
   selector: 'ydlife-mk-material',
   templateUrl: './mk-material.component.html',
   styleUrls: ['./mk-material.component.scss']
 })
 export class MkMaterialComponent implements OnInit {
-  @ViewChild('canvas') canvas: ElementRef<any>;
-  public hide: boolean = true;
+  materialLists: Array<any>;
 
-  constructor() {
+  constructor(private router: Router) {
   }
 
   ngOnInit() {
-    this.canvas.nativeElement.width = window.screen.width;
-    this.canvas.nativeElement.height = window.screen.height;
-    const canvas = this.canvas.nativeElement as HTMLCanvasElement;
-    canvas.width = canvas.width * 1;
-    canvas.height = canvas.height * 1;
-    const qr = document.querySelector('#qrcode');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
-    img.src = 'https://mdev.zuihuibi.cn/ydLife/assets/images/mk-material/life.jpg';
-    img.onload = () => {
-      ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
-      // 对二维码进行初始化
-      const qrCode = new QRCode(qr, {
-        width: 100,
-        height: 100,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-      });
-      // 为二维码设置内容
-      qrCode.makeCode('http://mdev.zuihuibi.cn');
-      // 我们的qrcode生成二维码之后也会有一个canvas对象我们获取到这个元素
-      const newCanvas = qr.firstChild as HTMLCanvasElement;
-      const base64 = newCanvas.toDataURL('image/png', 1);
-      // 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
-      const shareQr = new Image();
-      // 设置base64编码格式值
-      shareQr.src = base64;
-      shareQr.onload = () => {
-        // 绘制图像  就是绘制二维码到我们自己写的canvas中去
-        ctx.drawImage(shareQr, this.canvas.nativeElement.width - 120, this.canvas.nativeElement.height - 150, 100, 100);
-        document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
-      };
-      // 绘制字体
-      ctx.font = '14px 微软雅黑';
-      ctx.fillStyle = '#081a71';
-      ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 30);
-    };
-  }
-
-  download(canvas) {
-    const a = document.createElement('a');
-    // 设置地址
-    a.href = canvas.toDataURL('image/png', 1);
-    // 设置下载名称
-    a.download = '银盾保险在线';
-    // 触发点击事件
-    a.click();
+    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: '中信保诚祯爱增额定期寿险'},
+    ];
   }
 
 }

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

 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
-import {MyCenterHomeComponent} from "./my-center-home/my-center-home.component";
-import {AuthGuard} from "../auth/auth.guard";
-import {MkMaterialComponent} from "./mk-material/mk-material.component";
+import {MyCenterHomeComponent} from './my-center-home/my-center-home.component';
+import {AuthGuard} from '../auth/auth.guard';
+import {MkMaterialComponent} from './mk-material/mk-material.component';
+import {MkMaterialDetailComponent} from './mk-material-detail/mk-material-detail.component';
 const myRoutes: Routes = [
   {path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard]},
-  {path: 'material', component: MkMaterialComponent}
+  {path: 'material', component: MkMaterialComponent},
+  {path: 'material/:itemId', component: MkMaterialDetailComponent},
 ];
 
 @NgModule({

src/app/my/my.module.ts

@@ -5,9 +5,10 @@ import {MyRoutingModule} from './my-routing.module';
 import {MyCenterHomeComponent} from './my-center-home/my-center-home.component';
 import {LifeCommonModule} from "../common/life-common.module";
 import { MkMaterialComponent } from './mk-material/mk-material.component';
+import { MkMaterialDetailComponent } from './mk-material-detail/mk-material-detail.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/my.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MyService } from './my.service';
+
+describe('MyService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MyService = TestBed.get(MyService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/my/my.service.ts

+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {environment} from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyService {
+  constructor(private http: HttpClient) {
+  }
+
+  private API = environment.BACKEND_URL_CONFIG_VALUE;
+//  保存分享码
+  shareCallBack(shareInfo) {
+    const url = this.API + '/shareCallBack';
+    return this.http
+      .post(url, JSON.stringify(shareInfo));
+  }
+}

src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+html, body {
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  min-width: 320px;
+  max-width: 640px;
+  margin: 0 auto;
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+  SimSun, sans-serif;
+  font-variant-numeric: tabular-nums;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.img-responsive{
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+}

yarn.lock

@@ -6108,7 +6108,7 @@ utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"