Skip to content

Y
ydLife
Commit 57ca4297 by Sweet Zhang
Options

增加统一头像

parent 47018add
Showing with 27 additions and 7 deletions
src/app/auth/login/login.component.html
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<div class="weui-cell"> <div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">手机号</label></div> <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
<div class="weui-cell__bd"> <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"> [(ngModel)]="userInfo.mobileNo">
</div> </div>
</div> </div>
<div class="weui-cell weui-cell_vcode"> <div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div> <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
<div class="weui-cell__bd"> <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"> maxlength="4" name="verificationCode" [(ngModel)]="userInfo.verificationCode">
</div> </div>
<div class="weui-cell__ft"> <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 { ...@@ -53,10 +53,25 @@ export class MkMaterialDetailComponent implements OnInit {
const qr = document.querySelector('#qrcode'); const qr = document.querySelector('#qrcode');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const img = new Image(); 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.src = `${environment.ORIGINNAME}/ydLife/assets/images/mk-material/${this.materialItemId}.jpg`;
img.onload = () => { img.onload = () => {
ctx.drawImage(img, 0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); 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, { const qrCode = new QRCode(qr, {
width: 100, width: 100,
...@@ -83,9 +98,9 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -83,9 +98,9 @@ export class MkMaterialDetailComponent implements OnInit {
ctx.font = '14px 微软雅黑'; ctx.font = '14px 微软雅黑';
ctx.fillStyle = '#081a71'; ctx.fillStyle = '#081a71';
ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 8); 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['practitionerBasicInfo']['name']}`, 70, this.canvas.nativeElement.height - 100);
ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 15, this.canvas.nativeElement.height - 70); ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 70, this.canvas.nativeElement.height - 70);
ctx.fillText('微信号：123456', 15, this.canvas.nativeElement.height - 40); // 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 { ...@@ -22,7 +22,7 @@ export class MyCenterHomeComponent implements OnInit {
{no: 4, title: '保单查询', path: '', icon: 'icon-baodanyangben', 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: ''},
{no: 6, title: '文件下载', path: 'https://www.ydinsurance.cn/?page_id=13957', icon: 'icon-xiazai', 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: ''}, {no: 0, title: '退出登录', path: '', icon: 'icon-tuichu', routerLink: ''},
]; ];
} }
......
src/styles.scss
...@@ -14,8 +14,13 @@ html, body { ...@@ -14,8 +14,13 @@ html, body {
overflow-y: scroll; overflow-y: scroll;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.img-responsive{
.img-responsive {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
width: 100%; width: 100%;
} }
input::placeholder {
font-size: 14px;
}
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