zhapp/pages/quote/quotation.vue

<template>
	<view class='page'>
		<view class="" id="panelcanvas">
			<image class="paymentCode-back" :src="detailbackimg" mode=""></image>
			<uni-NavBar headerTitle="报价单" background="transparent" :isShared="false" :isSlot="false"
				@share="share"></uni-NavBar>
			<view class="header-title dis a-c j-s ">
				<view class="dis a-c  left">
					<image :src="insCompanyVo.logo" mode=""></image>
					<text class="ml-1">{{companyName}}</text>
				</view>
				<text>{{order.createTime}}</text>
			</view>
			<view class="content dis f-c">
				<view class="scroll-content">
					<view class="view dis a-c j-s ">
						<text>车主</text>
						<text>{{ownersInfo.name}}</text>
					</view>
					<view class="view dis a-c j-s ">
						<text>车牌号</text>
						<text>{{carInfoVo.licenseNo}}</text>
					</view>
					<view class="view dis a-c j-s ">
						<text>车架号</text>
						<text>{{carInfoVo.vinNo}}</text>
					</view>
					<view class="view dis a-c j-s ">
						<text>品牌型号</text>
						<text>{{carInfoVo.brandName}}</text>
					</view>
					<view class="view dis a-c j-s ">
						<text>发动机号</text>
						<text>{{carInfoVo.engineNo}}</text>
					</view>
					<view class="view dis a-c j-s " v-if="ciRiskInfoVo">
						<text>交强险起保时间</text>
						<text>{{ciRiskInfoVo.startDate}}</text>
					</view>
					<view class="view dis a-c j-s " v-if="biRiskInfoVo">
						<text>商业险起保时间</text>
						<text>{{biRiskInfoVo.startDate}}</text>
					</view>
					<view class="tab dis f-c">
						<view class="header-title"
							style="background: linear-gradient( 180deg, #FFF8F8 0%, #FFFFFF 100%)">
							报价方案
						</view>
						<view class="items dis f-c ">
							<view class="table mb-3" v-if="kindInfoVo.length>0">
								<view class="header dis a-c j-s">
									<text class="th special">商业险</text>
									<text class="th">保额</text>
									<text class="th">保费</text>
								</view>
								<view class="tr dis a-c j-c" v-for="(item,index) in kindInfoVo" :key="index">
									<text class="td special">{{item.kindName}}</text>
									<text v-if="['A'].includes(item.kindCode)" class="td">{{item.amount}}</text>
									<text v-else-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)"
										class="td">{{convertedValue(item.unitAmount)}}</text>
									<text v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)"
										class="td">{{item.amount}}%</text>
									<text v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(item.kindCode)"
										class="td">{{item.unitAmount}}次</text>
									<text v-else class="td">{{convertedValue(item.amount)}}</text>
									<text class="td">{{item.premium?item.premium:'-'}}</text>
								</view>
							</view>
							<view class="table" v-if="accidentalDrivings.length>0">
								<view class="header dis a-c j-s">
									<text class="th special">驾意险</text>
									<text class="th">单价/数量</text>
									<text class="th">保费</text>
								</view>
								<view class="tr dis a-c j-c" v-for="(item,index) in accidentalDrivings" :key="index">
									<text class="td special">{{item.productName}}</text>
									<text class="td">{{item.quantity}}份</text>
									<text class="td">{{item.sumAmount}}</text>
								</view>
							</view>
							<view class="item dis a-c j-s mt-3">
								<text>交强险</text>
								<text>￥{{costs.ciPremium}} </text>
							</view>
							<view class="item dis a-c j-s">
								<text>车船税</text>
								<text>￥{{costs.vvTax}} </text>
							</view>
							<view class="item dis a-start j-s">
								<text>商业险</text>
								<text>￥{{costs.biPremium}} </text>
							</view>
							<view class="item dis a-start j-s">
								<text>驾意险</text>
								<text>￥{{costs.niPremium}} </text>
							</view>
							<view class="item dis a-c j-s ">
								<text>保费合计</text>
								<text class="price">￥{{costs.sumPremium}} </text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="" style="padding: 0 20rpx;box-sizing: border-box;">
			<view class="btn mt-3 dis a-c j-c " @click="sendPayCode">
				分享
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import {
		turnBase64Image
	} from '@/plugins/utils.js';
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import QR from "@/common/wxqrcode.js"
	export default {
		data() {
			return {
				detailbackimg: "", //背景图
				payImg: "",
				posterUrl: '',
				companyName: "",
				ordersNo: "",
				quoteNo: "",
				ciRiskInfoVo: {}, //交强险
				biRiskInfoVo: {}, //商业险
				kindInfoVo: [], //险别信息
				carInfoVo: {}, //车辆信息
				ownersInfo: {}, //车主信息
				policyHolderInfo: {}, //投保人信息
				insuredPersonInfo: {}, //被保人信息
				order: {},
				costs: {},
				accidentalDrivings: [], //驾意险
				insCompanyVo: {}, //保险公司信息
			}
		},
		onShow() {

		},
		async mounted() {
			this.detailbackimg = await turnBase64Image('/static/image/detailback.png');
		},
		async onLoad(options) {
			if (options.ordersNo) {
				let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + options.ordersNo);
				if (res.code == "200") {
					this.order = res.data.order;
					this.companyName = res.data.order.companyName;
					this.ordersNo = res.data.order.ordersNo;
					this.quoteNo = res.data.order.quoteNo;
					this.ciRiskInfoVo = res.data.ciRiskInfoVo;
					this.biRiskInfoVo = res.data.biRiskInfoVo;
					this.kindInfoVo = res.data.kindInfoVo;
					this.costs = res.data.costs;
					this.accidentalDrivings = res.data.accidentalDrivings;
					this.carInfoVo = res.data.carInfoVo;
					this.ownersInfo = res.data.ownersInfo;
					this.policyHolderInfo = res.data.policyHolderInfo;
					this.insuredPersonInfo = res.data.insuredPersonInfo;
					this.insCompanyVo = res.data.insCompanyVo[0];
					this.kindInfoVo = this.kindInfoVo.filter(item => item.kindCode != 'J1')

				}
			}
		},
		methods: {
			//商业险保额换算
			convertedValue(num) {
				if (num < 10000) {
					return num.toString();
				} else if (num < 100000000) {
					return (Math.floor(num / 10000 * 10) / 10) + '万';
				} else {
					return (Math.floor(num / 100000000 * 10) / 10) + '亿';
				}
			},
			//分享图片到微信
			sendPayCode() {
				console.log(this.payImg);
				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 => {
					console.log(error);
				});
			},
			showLoading() {
				uni.showLoading({
					title: '正在生成图片'
				});
			},

			hideLoading() {
				uni.hideLoading();
				this.loading = false;
			},
		}
	}
</script>
<script module="canvasImage" lang="renderjs">
	import html2canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			// #ifdef APP-PLUS
			setTimeout(() => {
				this.canvasImage.generateImage()
			}, 1000);
			// #endif


		},
		methods: {
			// #ifdef APP-PLUS
			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: 3, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					}).then((canvas) => {
						// 生成成功
						this.$ownerInstance.callMethod('hideLoading')
						this.$ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err => {
						console.log('323213213123_errAlert', `【生成图片失败，请重试】${err}`);
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
			// #endif
		},
	}
</script>
<style lang="scss" scoped>
	.page {

		background-color: #F8F8F8;

		height: 100vh;

	}

	.page {
		position: relative;
		background-color: #f8f8f8;
	}

	/* 背景图 */
	.paymentCode-back {
		width: 100%;
		height: 492rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.header-title {
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: 16rpx 0;

		.left {
			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
		}

		>text {
			font-size: 26rpx;
			color: rgba(51, 51, 51, 0.7);
		}
	}

	.content {
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;

		.scroll-content {
			height: calc(100vh - 200px);
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 20rpx 20rpx 10rpx 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			overflow: auto;

			.view {
				font-size: 30rpx;
				color: #666;
				margin-bottom: 30rpx;

				>text:last-child {
					color: #333;
					font-weight: bold;
					width: 65%;
					text-align: right;
				}
			}

			.qrCode {
				margin-top: 10px;

				>text {
					font-size: 30rpx;
					color: #333;
				}

				.qr {
					width: 290rpx;
					height: 290rpx;
					margin: 10rpx auto 0;
					padding: 10rpx;
					box-sizing: border-box;
				}

				.undoButton {
					padding: 13rpx 26rpx;
					box-sizing: border-box;
					background: rgba(253, 233, 53, 0.2);
					border-radius: 58rpx 58rpx 58rpx 58rpx;
					border: 1rpx solid #FDE935;
					font-size: 30rpx;
					color: #1F1F1F;
				}
			}

		}
	}

	.tab {
		background-color: #fff;
		border-radius: 0 0 10rpx 10rpx;

		.header-title {
			background: linear-gradient(180deg, #FFFCEA 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.items {
			padding: 0 20rpx;
			box-sizing: border-box;

			.item {
				margin-bottom: 30rpx;

				>text:first-child {
					font-size: 30rpx;
					color: #666;
				}

				>:nth-child(2) {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					width: 70%;
					text-align: right;
				}
			}

			.table {
				width: 100%;
				border-radius: 4rpx;
				border: 1rpx solid #FFD9D9;

				.header {
					background-color: #FFF8F8;
					border-radius: 4rpx 4rpx 0 0;

					.th {
						padding: 15rpx;
						box-sizing: border-box;
						text-align: center;
						font-size: 28rpx;
						color: #FF5B45;
						flex: 1;
					}

					.th.special {
						flex: 2;
					}
				}

				.tr {
					.td {
						padding: 15rpx;
						box-sizing: border-box;
						text-align: center;
						font-size: 28rpx;
						flex: 1;
					}

					.td.special {
						flex: 2;
					}

				}

				.tr:nth-child(odd) {
					background-color: #FBFBFB;
				}
			}
		}

	}

	.price {
		color: #FF540A !important;
	}

	.btn {
		width: 100%;
		height: 88rpx;
		background: #FDE935;
		margin: 30rpx auto 0;
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		font-size: 36rpx;
		color: #1F1F1F;
		font-weight: bold;
	}
</style>