增加统一头像

src/app/auth/login/login.component.html

@@ -9,14 +9,14 @@
           <div class="weui-cell">
             <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
             <div class="weui-cell__bd">
-              <input class="weui-input" type="tel" maxlength="11" pattern="[0-9]*" placeholder="请输入手机号" name="mobileNo"
+              <input class="weui-input" type="tel" maxlength="11" pattern="[0-9]*" placeholder="您的手机号" name="mobileNo"
                      [(ngModel)]="userInfo.mobileNo">
             </div>
           </div>
           <div class="weui-cell weui-cell_vcode">
             <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
             <div class="weui-cell__bd">
-              <input autofocus="" class="weui-input" type="tel" pattern="[0-9]*" id="js_input" placeholder="输入验证码"
+              <input autofocus="" class="weui-input" type="tel" pattern="[0-9]*" id="js_input" placeholder="手机验证码"
                      maxlength="4" name="verificationCode" [(ngModel)]="userInfo.verificationCode">
             </div>
             <div class="weui-cell__ft">

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

@@ -53,10 +53,25 @@ export class MkMaterialDetailComponent implements OnInit {
     const qr = document.querySelector('#qrcode');
     const ctx = canvas.getContext('2d');
     const img = new Image();
+    // 画圆形头像
+    const avatarurlWidth = 50;    // 绘制的头像宽度
+    const avatarurlHeigth = 50;  // 绘制的头像高度
+    const avatarurlX = 10;  // 绘制的头像在画布上的位置
+    const avatarurlY = this.canvas.nativeElement.height - 115;  // 绘制的头像在画布上的位置
+    const avatarImg = new Image();
+    avatarImg.src = 'https://mdev.zuihuibi.cn/assets/img/meng.png';
     // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
     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);
+      ctx.save();
+      ctx.beginPath(); // 开始绘制
+      // 先画个圆  前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
+      ctx.arc(avatarurlWidth / 2 + avatarurlX, avatarurlHeigth / 2 + avatarurlY, avatarurlWidth / 2, 0, Math.PI * 2, false);
+      ctx.clip(); // 画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
+      ctx.drawImage(avatarImg, avatarurlX, avatarurlY, avatarurlWidth, avatarurlHeigth); // 推进去图片，必须是https图片
+      ctx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
+      ctx.save();
       // 对二维码进行初始化
       const qrCode = new QRCode(qr, {
         width: 100,
@@ -83,9 +98,9 @@ export class MkMaterialDetailComponent implements OnInit {
       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);
+      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo['practitionerBasicInfo']['name']}`, 70, this.canvas.nativeElement.height - 100);
+      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 70, this.canvas.nativeElement.height - 70);
+      // ctx.fillText('微信号：123456', 70, this.canvas.nativeElement.height - 40);
     };
   }
 

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

@@ -22,7 +22,7 @@ export class MyCenterHomeComponent implements OnInit {
       {no: 4, title: '保单查询', path: '', icon: 'icon-baodanyangben', routerLink: ''},
       {no: 5, title: '教育训练', path: '', icon: 'icon-jiaoyu', routerLink: ''},
       {no: 6, title: '文件下载', path: 'https://www.ydinsurance.cn/?page_id=13957', icon: 'icon-xiazai', routerLink: ''},
-      {no: 7, title: '素材库', path: '', icon: 'icon-sucai', routerLink: 'material'},
+      {no: 7, title: '产品海报', path: '', icon: 'icon-sucai', routerLink: 'material'},
       {no: 0, title: '退出登录', path: '', icon: 'icon-tuichu', routerLink: ''},
     ];
   }

src/styles.scss

@@ -14,8 +14,13 @@ html, body {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.img-responsive{
+
+.img-responsive {
   max-width: 100%;
   height: auto;
   width: 100%;
 }
+
+input::placeholder {
+  font-size: 14px;
+}