partnerApp/pages/orders/quotation.vue

<template>
	<view style="background-color: #ea552d;">
		<view class="page dis f-c a-c" id="panelcanvas">
			<view class="Basic-information dis f-c" style="background: bisque;border-radius: 0;">
				<view class=" dis a-c j-c" style="padding: 4px;">
					<image :src="logoimg" mode="" style="width: 30px;height: 30px;">
					</image>
					<text style="font-weight: bold;margin-left: 6px;">{{dataInfo.inscompany}}报价单</text>
				</view>
			</view>
			<view class="Basic-information dis f-c" style="border-top-right-radius: 0;border-top-left-radius: 0;">
				<view class="basic-logo dis a-c">
					<image :src="caricon" mode=""></image>
					<view class="dis f-c">
						<text>{{dataInfo.licenseno}}</text>
						<text>{{carinfo.modelcname}}</text>
					</view>
				</view>
				<view class="basic-data dis f-c">
					<view class="arrange ">
						<text>订单号：</text>
						<text>{{dataInfo.orderno}}</text>
					</view>
					<view class="arrange ">
						<text>车主姓名：</text>
						<text>{{ownerinfo.name}}</text>
					</view>
					<view class="arrange ">
						<text>投保人姓名：</text>
						<text>{{applyinfo.name}}</text>
					</view>
					<view class="arrange ">
						<text>发动机号：</text>
						<text>{{carinfo.engineNo}}</text>
					</view>
					<view class="arrange ">
						<text>车架号：</text>
						<text>{{carinfo.vinNo}}</text>
					</view>
					<view class="arrange " v-if="dataInfo.jqstartdate">
						<text>交强投保时间：</text>
						<text>{{ dataInfo.jqstartdate }}</text>
					</view>
					<view class="arrange " v-if="dataInfo.systartdate">
						<text>商业投保时间：</text>
						<text>{{ dataInfo.systartdate }}</text>
					</view>
				</view>
			</view>
			<view class="Basic-information Circle Circle1" style="padding-bottom: 10px;">
				<view class="bjdCarSum dis j-s ">
					<text>应缴金额</text>
					<text style="color:rgb(255, 30, 7)">￥{{dataInfo.sumpremium}}</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.jqpremium">
					<text>交强险</text>
					<text>￥{{dataInfo.jqpremium}}</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.sypremium">
					<text>商业险</text>
					<text>￥{{dataInfo.sypremium}}</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.taxamount">
					<text>车船税</text>
					<text>￥{{dataInfo.taxamount}}</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.jqdiscountrate">
					<text>交强险优惠比例</text>
					<text>{{dataInfo.jqdiscountrate}}%</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.sydiscountrate">
					<text>商业险优惠比例</text>
					<text>{{dataInfo.sydiscountrate}}%</text>
				</view>
				<view class="bjdCarSum dis j-s " v-if="dataInfo.sydiscountrate">
					<text>商业险优惠比例</text>
					<text>{{dataInfo.sydiscountrate}}%</text>
				</view>
				<view class="coverage dis j-s f-c" style="border: none;" v-if="dataInfo.sypremium">
					<view class="coverage-title dis">
						<view style="width: 200px;">
							<text>商业险金额</text>
						</view>
						<view>
							<text>保险金额</text>
						</view>
						<view>
							<text>保费</text>
						</view>
					</view>
					<view class="coverage-sum dis j-s" v-for="(item,index) in dataInfo.kindinfo" :key="index">
						<view style="width: 200px;">
							<text>{{item.kindName}}</text>
						</view>
						<view v-if="['D4', 'SY_FJ_YBW2', 'MJ3', 'MJ4'].includes(item.kindCode)">
							<text>{{item.unitAmount}}</text>
						</view>
						<view v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)">
							<text>{{item.deductibleRate}}</text>
						</view>
						<view v-else>
							<text>{{item.amount}}</text>
						</view>
						<view>
							<text>￥{{item.coveragePremium}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; padding-bottom: 20px; background-color: #ea552d;">
			<!-- #ifdef APP-PLUS -->
			<view class="tip d-flex a-center j-center" @tap="sendPayCode">发送到微信</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	export default {
		data() {
			return {
				payImg: "",
				posterUrl: "",
				caricon: "", //carlogo
				show: false,
				companyId: "",
				dataInfo: {},
				carinfo: {}, //车辆信息
				ownerinfo: {}, //车主信息
				applyinfo: {}, //投保人信息
				insCompanyList: [{
						name: "中煤财险",
						icon: "../../static/insuranceicon/zhongmei.png"
					}, //华农
					{
						name: "恒邦财险",
						icon: "../../static/insuranceicon/hengbang.png"
					},
					{
						name: "安盛天平",
						icon: "../../static/insuranceicon/ansheng.png"
					},
					{
						name: "中国人寿",
						icon: "../../static/insuranceicon/renshou.png"
					},
					{
						name: "众安财险",
						icon: "../../static/insuranceicon/zhongan.png"
					},
					{
						name: "永诚财险",
						icon: "../../static/insuranceicon/yongcheng.png"
					},
					{
						name: "永安财险",
						icon: "../../static/insuranceicon/yongan.png"
					},
				],
				logoimg: "",
			}
		},

		async onLoad(options) {
			this.companyId = options.companyId;
			let params = {
				companyId: options.companyId
			};
			let res = await this.$http.post('/insurance/order/getByCompanyId', params);
			var data = res.data;
			data.kindinfo.map((ele, index) => {
				switch (ele.kindCode) {
					case "A":
						ele.amount = "投保";
						break;
					case "D4":
					case "SY_FJ_YBW2":
						ele.unitAmount = this.toChinesNum(ele.unitAmount);
						break;
					case "MJ1":
					case "MJ2":
					case "MJ3":
					case "MJ4":
						ele.deductibleRate = ele.deductibleRate + "%";
						break;
					default:
						ele.amount = this.toChinesNum(ele.amount);
				}
				return ele;
			});
			this.insCompanyList.map(ele => {
				if (ele.name == data.inscompany) {
					uni.getImageInfo({
						src: ele.icon,
						success: image => {
							pathToBase64(image.path)
								.then(base64 => {
									this.logoimg = base64;
								})
								.catch(error => {});
						},
						fail: err => {}
					});
				}
				return ele;
			})
			this.dataInfo = data;
			this.carinfo = data.carinfo;
			this.ownerinfo = data.ownerinfo;
			this.applyinfo = data.applyinfo;
			uni.getImageInfo({
				src: '../../static/icon/bjdcar.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this.caricon = base64
						})
						.catch(error => {});
				},

			});
		},
		methods: {
			//本地图片转换成base64
			turnBase64Image() {
				this.
				uni.getImageInfo({
					src: img,
					success: image => {
						pathToBase64(image.path)
							.then(base64 => {
								this[key] = base64;
							})
							.catch(error => {});
					},
					fail: err => {}
				});
			},
			toChinesNum(num) {
				let changeNum = [
					"零", "一", "二", "三", "四", "五", "六", "七", "八", "九"
				];
				let unit = ["", "十", "百", "千", "万"];
				num = parseInt(num);
				let getWan = temp => {
					let strArr = temp
						.toString()
						.split("")
						.reverse();
					let newNum = "";
					let newArr = [];
					strArr.forEach((item, index) => {
						newArr.unshift(
							item === "0" ? changeNum[item] : changeNum[item] + unit[index]
						);
					});
					let numArr = [];
					newArr.forEach((m, n) => {
						if (m !== "零") numArr.push(n);
					});
					if (newArr.length > 1) {
						newArr.forEach((m, n) => {
							if (newArr[newArr.length - 1] === "零") {
								if (n <= numArr[numArr.length - 1]) {
									newNum += m;
								}
							} else {
								newNum += m;
							}
						});
					} else {
						newNum = newArr[0];
					}
					return newNum;
				};
				let overWan = Math.floor(num / 10000);
				let noWan = num % 10000;
				if (noWan.toString().length < 4) {
					noWan = "0" + noWan;
				}
				return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
			},
			//分享图片到微信
			sendPayCode() {
				if (this.payImg) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.payImg
					})
				}
			},
			//页面截图转路径
			receiveRenderData(val) {
				this.posterUrl = val.replace(/[\r\n]/g, ''); // 去除base64位中的空格
				const imageStr = this.posterUrl;
				// 将base64转化为临时地址
				base64ToPath(imageStr).then(path => {
					this.payImg = path
				}).catch(error => {});
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},
			hideLoading() {
				uni.hideLoading();
			},
		},
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			setTimeout(() => {
				this.canvasImage.generateImage()
			}, 1000);
		},
		methods: {

			generateImage() {
				setTimeout(() => {
					this.$ownerInstance.callMethod('showLoading')
					const dom = document.getElementById('panelcanvas') // 需要生成图片内容的 dom 节点
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域
						// allowTaint: false,
						scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: rgba(234, 85, 45, 1);
		padding: 20px 10px;
		box-sizing: border-box;
	}

	.Basic-information {
		background-color: white;
		width: 100%;
		height: auto;

		.basic-logo {
			padding: 10px 16px;
			border-bottom: 1px solid #f2f2f2;

			image {
				width: 50px;
				height: 50px;
				margin-right: 20px;
			}

			text {
				font-size: 12px;
			}

			text:first-child {
				font-weight: bold;
				font-size: 18px;
			}
		}

		.basic-data {
			padding: 16px;

			.arrange {
				margin: 4px 0;
				font-size: 14px;

				text:first-child {
					font-weight: bold;
					margin-right: 5px;
				}

				text:last-child {
					color: #606266;
				}

				&::before {
					content: "·";
					color: #606266;
					margin-right: 10px;
					font-weight: bold;
				}

			}
		}

		.bjdCarSum {
			padding: 10px 16px;
			border-bottom: 1px solid #f2f2f2;
			font-weight: bold;
			font-size: 14px;
		}

		.coverage {
			padding: 10px 16px;

			.coverage-title {
				width: 100%;

				view:first-child {
					border-top-left-radius: 8px;
				}

				view:last-child {
					border-top-right-radius: 8px;
				}

				view:nth-child(2) {
					border-left: none;
					border-right: none;
				}

				view {
					width: 33.33%;
					text-align: center;
					background: #ff8f63;
					color: #fff;
					padding: 6px 16px;
					border: 1px solid #fff;
					font-size: 12px;
					box-sizing: border-box;
				}

			}

			.coverage-sum {
				width: 100%;

				view:nth-child(2) {
					border-left: none;
					border-right: none;
				}

				view {
					width: 33.33%;
					text-align: center;
					font-size: 12px;
					background-color: #fbf6f7;
					padding: 6px 16px;
					border: 1px solid #fff;
					border-top: none;
				}
			}
		}

	}

	.Circle {
		position: relative;

		&::before {
			display: block;
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			background: rgba(234, 85, 45, 1);
			top: -10px;
			left: -10px;
			border-radius: 50%;
		}

		&::after {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			background: rgba(234, 85, 45, 1);
			top: -10px;
			right: -10px;
			border-radius: 50%;
		}

	}

	.footer-button {
		z-index: 9999;
		margin-top: 20px;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: white;
		padding: 10px 20px;

		button {
			width: 70%;
			cursor: pointer;
		}
	}

	.tip {
		width: 660upx;
		height: 90upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		font-size: 32upx;
		font-weight: bold;
		margin: 0 auto;
		padding: 20px;
		box-sizing: border-box;
	}
</style>