partnerApp/pages/carInsure1/quoteOffer1.vue

<template>
	<view class="page page-fill" :style="getHeight">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="pending-wapper">
			<image id="face" :src="imgBase64" class="pending-face" mode="scaleToFill" v-if="imgBase64"></image>
		</view>
		<view class="footer-opertor">
			<view class="opertor-words" @click="save">保存到本地</view>
			<!-- #ifndef H5 -->
			<view class="opertor-words" @click="share">分享到微信</view>
			<!-- #endif -->
		</view>
		<!-- 绘制掌柜报价单模板 -->
		<canvas canvas-id="myCanvas" id='canvasImg' @error="canvasIdErrorCallback" style=""></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgBase64: null, //掌柜报价单图片

				orderno: "", //订单号

				icon: "", //保险公司logo
				name: "", //保险公司名称
				insCompanyCode: "", //保险公司表示
				carInfo: {}, //车辆信息
				ownerInfo: {}, //车主信息
				policyHolderInfo: {}, //投保人信息
				insuredPersonInfo: {}, //被保人信息
				riskList: [], //险种大类信息
				kindList: [], //商业险险别
				sumPermium: "", //报价金额
				taxAmount: "", //车船税金额
				insureList: [{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "投保",
							"value": "1"
						}],
						kindCode: "A",
						isMainRisk: true,
						kindName: "机动车损失险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}, {
							"label": "30万",
							"value": "300000"
						}, {
							"label": "50万",
							"value": "500000"
						}, {
							"label": "100万",
							"value": "1000000"
						}, {
							"label": "150万",
							"value": "1500000"
						}, {
							"label": "200万",
							"value": "2000000"
						}, {
							"label": "250万",
							"value": "2500000"
						}, {
							"label": "300万",
							"value": "3000000"
						}, {
							"label": "500万",
							"value": "5000000"
						}, {
							"label": "1000万",
							"value": "10000000"
						}],
						kindCode: "B",
						isMainRisk: true,
						kindName: "第三者责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "1万",
							"value": "10000"
						}, {
							"label": "2万",
							"value": "20000"
						}, {
							"label": "5万",
							"value": "50000"
						}, {
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}],
						kindCode: "D3",
						isMainRisk: true,
						kindName: "司机责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "1万",
							"value": "10000"
						}, {
							"label": "2万",
							"value": "20000"
						}, {
							"label": "5万",
							"value": "50000"
						}, {
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}],
						kindCode: "D4",
						isMainRisk: true,
						kindName: "乘客责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "2000",
							"value": "2000"
						}, {
							"label": "5000",
							"value": "5000"
						}, {
							"label": "1万",
							"value": "10000"
						}],
						isMainRisk: false,
						kindCode: "L",
						kindName: "车身划痕险",
						mainRiskCodeList: "A"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ1",
						kindName: "绝对免赔率特约险（车损）",
						mainRiskCodeList: "A"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ2",
						kindName: "绝对免赔率特约险（三者）",
						mainRiskCodeList: "B"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ3",
						kindName: "绝对免赔率特约险（司机）",
						mainRiskCodeList: "D3"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ4",
						kindName: "绝对免赔率特约险（乘客）",
						mainRiskCodeList: "D4"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "投保",
							"value": "1"
						}],
						isMainRisk: false,
						kindCode: "BD",
						kindName: "法定节假日限额翻倍险",
						mainRiskCodeList: "B"
					}
				],
				box: {},

			}
		},
		computed: {
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `height: ${height}px;`;
			}
		},
		async onLoad(params) {
			uni.getSystemInfo({
			    success(res) {
					console.log(res)
			    	this.popWidth = res.windowWidth;
			    	this.popWidth = res.windowWidth;
			    	// 设备像素比大于1
			    	if (res.devicePixelRatio > 1) {
			    		this.devicePixelRatio = res.devicePixelRatio;
			    	}
			    }
			});
			if (params.orderno != undefined) {
				this.orderno = params.orderno;
				let res = await this.$http.get('/insOrder/queryOrder?orderno=' + params.orderno);
				console.log(res)
				if (res.code == 200) {
					//获取前一个页面传过来的信息（车辆信息，人员信息，险种信息）
					this.insCompanyCode = res.data.inscompany;
					this.icon = "";
					this.name = res.data.inscompany;
					this.carInfo = res.data.carinfo;
					this.ownerInfo = res.data.ownerinfo;
					this.policyHolderInfo = res.data.applyinfo;
					this.insuredPersonInfo = res.data.insureinfo;
					this.riskList = res.data.riskinfo;
					this.kindList = res.data.kindinfo;
					this.sumPermium = res.data.sumpremium;
					this.taxAmount = res.data.taxamount;

					if (this.riskList.length > 0) {
						for (let i = 0; i < this.riskList.length; i++) {
							if (this.riskList[i].riskCode == '0510') {
								for (let j = 0; j < this.kindList.length; j++) {
									for (let m = 0; m < this.insureList.length; m++) {
										if (this.kindList[j].kindCode == this.insureList[m].kindCode) {
											this.insureList[m].coveragePremium = this.kindList[j].coveragePremium;
											if (this.kindList[j].kindCode == 'B') {
												this.insureList[9].amtList[0].value = this.kindList[j].amount;
											}

											if (this.kindList[j].kindCode == 'A') {
												this.insureList[m].amount = '1';
											} else if (this.insureList[m].kindCode == 'D4') {
												this.insureList[m].amount = this.kindList[j].unitAmount;
											} else if (this.insureList[m].isMainRisk || (this.insureList[m].kindCode ==
													'BD') || (this.insureList[m].kindCode == 'L')) {
												this.insureList[m].amount = this.kindList[j].amount;
											} else {
												this.insureList[m].amount = this.kindList[j].deductibleRate;
											}

										}
									}
								}
							}
						}
					}
					this.mounted();
				}
			} else {
				uni.showModal({
					showCancel: false,
					title: "未查询到该订单"
				})
			}




		},

		methods: {
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			},
		
			// 保存到本地
			save() {
				uni.saveImageToPhotosAlbum({ //保存图片
					filePath: this.imgBase64,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
						})
					}
				})
			},
			// 分享到微信
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.imgBase64
				})
			},
			// 绘制掌柜报价单
			drawQuoteOffer() {
				uni.showLoading({ //增加loading等待效果
					mask: true,
					title: "报价单生成中"
				})
				let ww, hh;
				const query = uni.createSelectorQuery().in(this);
				query.select('#canvasImg').boundingClientRect((data) => { //获取canvas-dom
					ww = data.width; //准确的宽高
					hh = data.height;
					var ctx = uni.createCanvasContext('myCanvas') //绑定画布
					var rectH = 10;
					var rectW = 20;
					ctx.lineWidth = 0.1; //线条的宽度
					ctx.strokeStyle = "#000"; //线条的颜色

					ctx.setFillStyle('#FFF'); //设置颜色为白色
					ctx.fillRect(0, 0, ww, hh); //把画布
					// ctx.drawImage('../../static/logo.png', 0, 0, ww, hh); //填充进图片

					for (var p = 0; p < 8; p++) { //水印
						for (var q = 0; q < 10; q++) {
							// 绘制文字  注意：：绘制斜体文字 旋转以后会发生位移，所以必须在旋转之后进行位置的调整；
							var text = "掌柜车险";
							ctx.save(); //保存原来的状态  绘制字体都是需要旋转倾斜  那么之前绘制的图片就要进行状态的保存
							ctx.rotate(-Math.PI / 6); //绘制倾斜字体
							ctx.translate(q * -80, 40 * p); //发生位移进行位移的恢复
							ctx.font = "10px serif";
							ctx.fillStyle = 'rgba(30, 30, 30, 0.1)';
							ctx.fillText(text, p * 50, (q * 30) + 50);
							ctx.restore(); //状态的恢复
						}
					}
					ctx.setFillStyle('#f00') //设置内容1的文字样式
					ctx.font = "12px 楷体";
					ctx.setTextAlign('center') //设置对于坐标点的对齐方式
					ctx.fillText("掌柜车险报价方案", ww / 2, 25) //计算距离，将文字定位于图片的某处

					ctx.setFillStyle('#000') //设置内容1的文字样式
					ctx.font = "6px 宋体";
					ctx.setTextAlign('left') //设置对于坐标点的对齐方式
					var today = new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date()
						.getDate() + '日';
					ctx.fillText("尊敬的客户，您于" + today + "车险投保方案如下：", 20, 40) //计算距离，将文字定位于图片的某处

					ctx.font = "8px 楷体";
					ctx.setTextAlign('center') //设置对于坐标点的对齐方式
					// ctx.setFillStyle(company.color) //设置内容1的文字样式
					ctx.fillText(this.name + "车险投保方案", ww / 2, 55) //计算距离，将文字定位于图片的某处

					//绘制表格
					for (var i = 0; i < 8; i++) { //绘制横线
						ctx.moveTo(20, rectH * i + 60); //如果不设置moveTo，当前画笔没有位置
						ctx.lineTo(ww - 20, rectH * i + 60);
					}
					ctx.moveTo(20, 60); //五条竖线
					ctx.lineTo(20, 130);
					ctx.moveTo(65, 60);
					ctx.lineTo(65, 130);
					ctx.moveTo(150, 60);
					ctx.lineTo(150, 130);
					ctx.moveTo(200, 60);
					ctx.lineTo(200, 130);
					ctx.moveTo(ww - 20, 60);
					ctx.lineTo(ww - 20, 130);

					// 填充表格内容
					ctx.setFillStyle('#000') //设置内容1的文字样式
					ctx.font = "5px 宋体";
					ctx.setTextAlign('center') //设置对于坐标点的对齐方式
					ctx.fillText("被保险人", 42, 67)
					ctx.fillText("发动机号", 42, 77)
					ctx.fillText("车辆类型", 42, 87)
					ctx.fillText("车辆型号", 42, 97)
					ctx.fillText("核定载质量", 42, 107)
					ctx.fillText("新车购置价", 42, 117)
					ctx.fillText("交强险起保日期", 42, 127)

					ctx.fillText(this.ownerInfo.name, 107, 67)
					ctx.fillText(this.carInfo.engineNo, 107, 77)
					ctx.fillText(this.carInfo.licenseTypeCode, 107, 87)
					ctx.fillText(this.carInfo.brandName, 107, 97)
					ctx.fillText(this.carInfo.limitLoad, 107, 107)
					ctx.fillText(this.carInfo.purchasePrice, 107, 117)
					for (let i = 0; i < this.riskList.length; i++) {
						if (this.riskList[i].riskCode == '0507') {
							ctx.fillText(this.riskList[i].startDate, 107, 127);
						} 
					}

					ctx.fillText("车牌号码", 175, 67)
					ctx.fillText("车架号", 175, 77)
					ctx.fillText("能源类型", 175, 87)
					ctx.fillText("初登日期", 175, 97)
					ctx.fillText("核定载客量", 175, 107)
					ctx.fillText("汽车排量", 175, 117)
					ctx.fillText("商业险起保日期", 175, 127)
					ctx.fillText(String(this.carInfo.licenseNo), (ww + 180) / 2, 67)
					ctx.fillText(String(this.carInfo.vinNo), (ww + 180) / 2, 77)
					ctx.fillText(String(this.carInfo.powertype), (ww + 180) / 2, 87)
					/*  */
					if (!!this.carInfo.registerDate) {
						let year1 = new Date(this.carInfo.registerDate).getFullYear()
						let month1 = new Date(this.carInfo.registerDate).getMonth() + 1
						if (month1 < 10) {
							month1 = '0' + month1;
						}
						let day1 = new Date(this.carInfo.registerDate).getDate()
						if (day1 < 10) {
							day1 = '0' + day1;
						}
						this.carInfo.registerDate = year1 + '-' + month1 + '-' + day1
					}
					ctx.fillText(this.carInfo.registerDate, (ww + 180) / 2, 97)
					ctx.fillText(this.carInfo.seatCount, (ww + 180) / 2, 107)
					ctx.fillText(this.carInfo.enginedesc, (ww + 180) / 2, 117)
					for (let i = 0; i < this.riskList.length; i++) {
						if (this.riskList[i].riskCode == '0510') {
							ctx.fillText(this.riskList[i].startDate, (ww + 180) / 2, 127)
						}
					}

					if ((this.riskList.length == 1) && (this.riskList[0].riskCode == '0507')) { //单交强
						ctx.moveTo(20, 140); //标题栏
						ctx.lineTo(ww - 20, 140);
						ctx.moveTo(20, 150);
						ctx.lineTo(ww - 20, 150);
						ctx.moveTo(20, 160);
						ctx.lineTo(ww - 20, 160);
						ctx.moveTo(20, 170);
						ctx.lineTo(ww - 20, 170);
						ctx.moveTo(20, 180);
						ctx.lineTo(ww - 20, 180);

						ctx.moveTo(20, 140); //三条竖线
						ctx.lineTo(20, 180);
						ctx.moveTo(120, 140);
						ctx.lineTo(120, 180);
						ctx.moveTo(200, 140);
						ctx.lineTo(200, 160);
						ctx.moveTo(ww - 20, 140);
						ctx.lineTo(ww - 20, 180);

						ctx.setTextAlign('center')
						ctx.fillText("险别名称", 70, 147)
						ctx.fillText("保额(元)", 160, 147)
						ctx.fillText("保费(元)", (ww + 200) / 2, 147)

						ctx.fillText("交强险", 70, 157)
						ctx.setTextAlign('right')
						ctx.fillText(this.riskList[0].amount, 165, 157)
						ctx.fillText(this.riskList[0].premium, ww - 24, 157)

						ctx.setTextAlign('center')
						ctx.fillText("代收车船税", 70, 167)
						ctx.setTextAlign('right')
						ctx.fillText(this.taxAmount, ww - 24, 167)
						ctx.setTextAlign('center')
						ctx.fillText("保费合计", 70, 177)
						ctx.setTextAlign('right')
						ctx.fillText(this.sumPermium, ww - 24, 177)


						// ctx.setFillStyle(company.color) //设置内容1的文字样式

						// ctx.setFillStyle('#f00')
						ctx.font = "8px 楷体";
						ctx.setTextAlign('left')
						ctx.fillText("掌柜车险，您全方位立体式的车服务管家，为您的爱车保驾护航！", 20, 197) //计算距离，将文字定位于图片的某处
						ctx.fillText("祝您幸福安康，工作顺心！", 20, 207) //计算距离，将文字定位于图片的某处

					}
					if ((this.riskList.length == 1) && (this.riskList[0].riskCode == '0510')) { //单商业
						ctx.moveTo(20, 140); //标题栏
						ctx.lineTo(ww - 20, 140);
						ctx.moveTo(20, 150);
						ctx.lineTo(ww - 20, 150);

						ctx.moveTo(20, 140); //三条竖线
						ctx.lineTo(20, 150);
						ctx.moveTo(120, 140);
						ctx.lineTo(120, 150);
						ctx.moveTo(200, 140);
						ctx.lineTo(200, 150);
						ctx.moveTo(ww - 20, 140);
						ctx.lineTo(ww - 20, 150);

						ctx.setTextAlign('center')
						ctx.fillText("险别名称", 70, 147)
						ctx.fillText("保额(元)", 160, 147)
						ctx.fillText("保费(元)", (ww + 200) / 2, 147)

						var lineSum = 0;
						var deductiblePriceSum = 0;

						for (let i = 0; i < this.insureList.length; i++) {
							if (this.insureList[i].amount != 0) {
								ctx.setTextAlign('center')
								ctx.fillText(this.insureList[i].kindName, 70, 157 + rectH * lineSum)

								for (let j = 0; j < this.insureList[i].amtList.length; j++) {
									if (this.insureList[i].amount == this.insureList[i].amtList[j].value) {
										ctx.fillText(this.insureList[i].amtList[j].label, 160, 157 + rectH *
											lineSum)
										ctx.fillText(this.insureList[i].coveragePremium, (ww + 200) / 2, 157 +
											rectH * lineSum)
									}
								}
								lineSum++;
							}
						}

						for (var i = 0; i < lineSum; i++) {
							ctx.moveTo(20, 150 + rectH * i); //三条竖线
							ctx.lineTo(20, 160 + rectH * i);
							ctx.moveTo(120, 150 + rectH * i);
							ctx.lineTo(120, 160 + rectH * i);
							ctx.moveTo(200, 150 + rectH * i);
							ctx.lineTo(200, 160 + rectH * i);
							ctx.moveTo(ww - 20, 150 + rectH * i);
							ctx.lineTo(ww - 20, 160 + rectH * i);

							ctx.moveTo(20, 160 + rectH * i);
							ctx.lineTo(ww - 20, 160 + rectH * i);
						}

						ctx.moveTo(20, 160 + rectH * lineSum);
						ctx.lineTo(ww - 20, 160 + rectH * lineSum);


						ctx.moveTo(20, 150 + rectH * lineSum); //三条竖线
						ctx.lineTo(20, 170 + rectH * lineSum);
						ctx.moveTo(120, 150 + rectH * lineSum);
						ctx.lineTo(120, 170 + rectH * lineSum);
						ctx.moveTo(ww - 20, 150 + rectH * lineSum);
						ctx.lineTo(ww - 20, 170 + rectH * lineSum);

						// 合计
						for (var j = 0; j < 1; j++) {
							ctx.moveTo(20, 170 + rectH * (lineSum + j));
							ctx.lineTo(ww - 20, 170 + rectH * (lineSum + j));
						}

						// 填充合计
						ctx.setTextAlign('center')
						ctx.fillText("商业险合计", 70, 157 + rectH * lineSum)
						ctx.setTextAlign('right')
						ctx.fillText(this.riskList[0].premium, ww - 24, 157 + rectH * lineSum)
						ctx.setTextAlign('center')
						ctx.fillText("保费合计", 70, 167 + rectH * lineSum)
						ctx.setTextAlign('right')
						ctx.fillText(this.sumPermium, ww - 24, 167 + rectH * lineSum)

						// ctx.setFillStyle(company.color) //设置内容1的文字样式

						// ctx.setFillStyle('#f00')
						ctx.font = "8px 楷体";
						ctx.setTextAlign('left')
						ctx.fillText("掌柜车险，您全方位立体式的车服务管家，为您的爱车保驾护航！", 20, 185 + rectH * lineSum) //计算距离，将文字定位于图片的某处
						ctx.fillText("祝您幸福安康，工作顺心！", 20, 195 + rectH * lineSum) //计算距离，将文字定位于图片的某处

					}
					if (this.riskList.length == 2) {
						ctx.moveTo(20, 140); //标题栏
						ctx.lineTo(ww - 20, 140);
						ctx.moveTo(20, 150);
						ctx.lineTo(ww - 20, 150);

						ctx.moveTo(20, 140); //三条竖线
						ctx.lineTo(20, 150);
						ctx.moveTo(120, 140);
						ctx.lineTo(120, 150);
						ctx.moveTo(200, 140);
						ctx.lineTo(200, 150);
						ctx.moveTo(ww - 20, 140);
						ctx.lineTo(ww - 20, 150);

						ctx.setTextAlign('center')
						ctx.fillText("险别名称", 70, 147)
						ctx.fillText("标准保费", 160, 147)
						ctx.fillText("保费(元)", (ww + 200) / 2, 147)

						var lineSum = 0;
						var deductiblePriceSum = 0;

						for (let i = 0; i < this.insureList.length; i++) {
							if (this.insureList[i].amount != 0) {
								ctx.setTextAlign('center')
								ctx.fillText(this.insureList[i].kindName, 70, 157 + rectH * lineSum)

								for (let j = 0; j < this.insureList[i].amtList.length; j++) {
									if (this.insureList[i].amount == this.insureList[i].amtList[j].value) {
										ctx.fillText(this.insureList[i].amtList[j].label, 160, 157 + rectH *
											lineSum)
										ctx.fillText(this.insureList[i].coveragePremium, (ww + 200) / 2, 157 +
											rectH * lineSum)
									}
								}
								lineSum++;
							}
						}

						for (var i = 0; i < lineSum; i++) {
							ctx.moveTo(20, 150 + rectH * i); //三条竖线
							ctx.lineTo(20, 160 + rectH * i);
							ctx.moveTo(120, 150 + rectH * i);
							ctx.lineTo(120, 160 + rectH * i);
							ctx.moveTo(200, 150 + rectH * i);
							ctx.lineTo(200, 160 + rectH * i);
							ctx.moveTo(ww - 20, 150 + rectH * i);
							ctx.lineTo(ww - 20, 160 + rectH * i);

							ctx.moveTo(20, 160 + rectH * i);
							ctx.lineTo(ww - 20, 160 + rectH * i);
						}

						ctx.moveTo(20, 160 + rectH * lineSum);
						ctx.lineTo(ww - 20, 160 + rectH * lineSum);


						ctx.moveTo(20, 150 + rectH * lineSum); //三条竖线
						ctx.lineTo(20, 190 + rectH * lineSum);
						ctx.moveTo(120, 150 + rectH * lineSum);
						ctx.lineTo(120, 190 + rectH * lineSum);
						ctx.moveTo(200, 160 + rectH * lineSum);
						ctx.lineTo(200, 170 + rectH * lineSum);
						ctx.moveTo(ww - 20, 150 + rectH * lineSum);
						ctx.lineTo(ww - 20, 190 + rectH * lineSum);

						// 			// 合计
						for (var j = 0; j < 3; j++) {
							ctx.moveTo(20, 170 + rectH * (lineSum + j));
							ctx.lineTo(ww - 20, 170 + rectH * (lineSum + j));
						}

						// 填充合计
						ctx.setTextAlign('center')
						ctx.fillText("商业险合计", 70, 157 + rectH * lineSum)
						ctx.setTextAlign('right')
						for (let i = 0; i < this.riskList.length; i++) {
							if (this.riskList[i].riskCode == '0510') {
								ctx.fillText(this.riskList[i].premium, ww - 24, 157 + rectH * lineSum)
							}
						}

						ctx.setTextAlign('center')
						ctx.fillText("交强险", 70, 167 + rectH * lineSum)
						ctx.setTextAlign('right')
						for (let i = 0; i < this.riskList.length; i++) {
							if (this.riskList[i].riskCode == '0507') {
								ctx.fillText(this.riskList[i].amount, 170, 167 + rectH * lineSum)
								ctx.fillText(this.riskList[i].premium, ww - 24, 167 + rectH * lineSum)
							}
						}
						ctx.setTextAlign('center')
						ctx.fillText("代收车船税", 70, 177 + rectH * lineSum)
						ctx.setTextAlign('right')
						ctx.fillText(this.taxAmount, ww - 24, 177 + rectH * lineSum)
						ctx.setTextAlign('center')
						ctx.fillText("保费合计", 70, 187 + rectH * lineSum)
						ctx.setTextAlign('right')
						ctx.fillText(this.sumPermium, ww - 24, 187 + rectH * lineSum)

						// 			ctx.setFillStyle(company.color) //设置内容1的文字样式

						// 			// ctx.setFillStyle('#f00')
						ctx.font = "8px 楷体";
						ctx.setTextAlign('left')
						ctx.fillText("掌柜车险，您全方位立体式的车服务管家，为您的爱车保驾护航！", 20, 205 + rectH * lineSum) //计算距离，将文字定位于图片的某处
						ctx.fillText("祝您幸福安康，工作顺心！", 20, 215 + rectH * lineSum) //计算距离，将文字定位于图片的某处

					}

					setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
						ctx.stroke(); //画线
						ctx.draw(); //输出到画布中
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas',
							success: (res) => {
								this.imgBase64 = res.tempFilePath;
								uni.hideLoading();
							}
						})

					}, 1200)
				}).exec();
			},

		},
		mounted() {
			setTimeout(() => {
				this.drawQuoteOffer();
			}, 300);
		},
	}
</script>

<style>
	#canvasImg {
		position: absolute;
		width: 595rpx;
		height: 842rpx;
		top: -99999899rpx;
	}

	/* 页面铺满屏幕 */
	.page-fill {
		width: 100%;
		position: absolute;
		background-color: black;
	}

	.pending-wapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 120upx;
	}

	.pending-face {
		width: 595upx;
		height: 842upx;
	}

	/* 底部操作Start */
	.footer-opertor {
		position: fixed;
		bottom: 0;

		border-top: #515050 solid 1px;
		width: 100%;

		display: flex;
		flex-direction: row;
		justify-content: space-between;

		padding: 30upx;
	}

	.opertor-words {
		color: #e8e5e5;
		font-size: 32upx;
		width: 200upx;
	}

	/* 底部操作End */
</style>