vue-insagent-app/pages/orders/priceComparison.vue

<template>
	<view style="height: 100vh;position: relative;">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="page" id="panelcanvas">
			<image :src="bannerImg" mode="" style="width: 100%;height: 450px;position: absolute;"></image>
			<view class="content">
				<view class="price dis a-c j-c">
					<image :src="iconImg" mode="" style="width: 20px;height: 20px;">
					</image>
					<text style="font-weight: bold;margin-left: 6px; font-size: 16px;">比价报价单</text>
				</view>
				<view
					style="background-color: #fff;border-radius:0 0  6px 6px ; box-shadow: 0px 4px 10px 0px rgba(123,160,239,0.2);"
					class="dis a-c j-c p-2 ">
					<view style="font-size: 15px;font-weight: bold;" class="dis j-s a-c ">
						<text style="color: #232832;">订单编号：{{insOrderVo.orderNo}}</text>
					</view>
				</view>
			</view>
			<view style="padding:0 16px;position: relative;">
				<view class="information">
					<text class="title">车辆信息</text>
					<view class="dis j-s a-c">
						<text>车牌号：</text>
						<text>{{insOrderVo.licenseNo}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>品牌型号：</text>
						<text>{{ insOrderVo.modelcname}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>车架号：</text>
						<text>{{ insOrderVo.frameNo}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>发动机号：</text>
						<text>{{ insOrderVo.engineNo}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>座位数：</text>
						<text>{{ insOrderVo.seatCount}}</text>
					</view>
				</view>
				<view class="information">
					<text class="title">人员信息</text>
					<view class="dis j-s a-c">
						<text>车主姓名：</text>
						<text>{{ insOrderVo.carOwnerName}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>车主身份证号：</text>
						<text>{{ insOrderVo.ownerIdentifyNumber}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>投保人姓名：</text>
						<text>{{ insOrderVo.applyName}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>投保人身份证号：</text>
						<text>{{ insOrderVo.applyIdentifyNumber}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>被保人姓名：</text>
						<text>{{ insOrderVo.insuredName}}</text>
					</view>
					<view class="dis j-s a-c">
						<text>被保人身份证号：</text>
						<text>{{ insOrderVo.insuredNumber}}</text>
					</view>
				</view>
				<view class="information">
					<text class="title">保费信息</text>
					<view class="dis j-start a-c" v-if="insOrderVo.jqstartDate">
						<text>交强起保日期：</text>
						<text style="letter-spacing: 1px;">{{ insOrderVo.jqstartDate}}</text>
					</view>
					<view class="dis j-start a-c" v-if="insOrderVo.jqendDate">
						<text>交强终保日期：</text>
						<text style="letter-spacing: 1px;">{{ insOrderVo.jqendDate}}</text>
					</view>
					<view class="dis j-start a-c" v-if="insOrderVo.systartDate">
						<text>商业起保日期：</text>
						<text style="letter-spacing: 1px;">{{ insOrderVo.systartDate}}</text>
					</view>
					<view class="dis j-start a-c" v-if="insOrderVo.syendDate">
						<text>商业终保日期：</text>
						<text style="letter-spacing: 1px;">{{ insOrderVo.syendDate}}</text>
					</view>
				</view>
				<view class="information1" v-for="(item,index) in subOrderVos" :key="index">
					<view class="title dis a-c j-s">
						<text>{{item.companyName}}</text>
						<text>总保费￥{{item.sumpremium}}</text>
					</view>
					<view class="dis f-c" v-if="item.jqpremium">
						<view class="dis a-c j-s" style="margin-bottom: 5px;">
							<text>交强险：</text>
							<text>￥{{item.jqpremium}}</text>
						</view>
						<view class="dis f-c" style="background-color: #F9F9F9;border-radius: 10px;padding: 6px;">
							<view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
								<text style="color: rgba(35,40,50,0.8)">险别/名称</text>
								<text style="color: rgba(35,40,50,0.8)">保额</text>
							</view>
							<view class="dis j-s a-c" v-for="(jqInsuranceitem,jqInsuranceindex) in item.jqInsuranceType"
								:key="jqInsuranceindex" style="margin-top: 6px;">
								<text>{{jqInsuranceitem.name}}</text>
								<text>{{jqInsuranceitem.amount}}</text>
							</view>
						</view>
					</view>
					<view class="dis j-s a-c" v-if="item.taxaMount">
						<text>车船税：</text>
						<text>￥{{ item.taxaMount}}</text>
					</view>
					<view class="dis f-c" v-if="item.sypremium">
						<view class="dis a-c j-s ">
							<text>商业险：</text>
							<text>￥{{ item.sypremium}}</text>
						</view>
						<view class=" dis j-s f-c p-2"
							style="border: none;background-color: #F9F9F9;border-radius: 10px;">
							<view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
								<view class="dis j-start" style="width: 50%;">
									<text style="color: rgba(35,40,50,0.8)">险别/名称</text>
								</view>
								<view class="dis j-c" style="width: 25%;">
									<text style="color: rgba(35,40,50,0.8)">保额</text>
								</view>
								<view class="dis j-end" style="width: 25%;">
									<text style="color: rgba(35,40,50,0.8)">保费(元)</text>
								</view>
							</view>
							<view class="coverage-sum dis j-s" v-for="(kindinfoitem,kindinfoindex) in item.kindinfo"
								:key="kindinfoindex" style="margin-top: 6px;">
								<view style="width: 50%;" class="dis a-c j-start">
									<text>{{kindinfoitem.kindName}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c"
									v-if="['D4', 'SY_FJ_YBW2'].includes(kindinfoitem.kindCode)">
									<text>{{kindinfoitem.unitAmount}}/座*{{insOrderVo.seatCount-1}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c"
									v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(kindinfoitem.kindCode)">
									<text>{{kindinfoitem.deductibleRate}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c"
									v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(kindinfoitem.kindCode)">
									<text>{{kindinfoitem.serviceTimes}}/次</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c" v-else>
									<text>{{kindinfoitem.amount}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-end">
									<text>￥{{kindinfoitem.coveragePremium}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="dis f-c" v-if="item.jypremium">
						<view class="dis a-c j-s">
							<text>附加险：意外险</text>
							<text>￥{{ item.jypremium}}</text>
						</view>
						<view class=" dis j-s f-c p-2" v-if="item.accidentInfo.length>0"
							style="border: none;background-color: #F9F9F9;border-radius: 10px;">
							<view class="dis j-s a-c" style="border-bottom: 1px solid #f2f2f2;">
								<view class="dis j-start" style="width: 50%;">
									<text style="color: rgba(35,40,50,0.8)">险别/名称</text>
								</view>
								<view class="dis j-c" style="width: 25%;">
									<text style="color: rgba(35,40,50,0.8)">保额</text>
								</view>
								<view class="dis j-end" style="width: 25%;">
									<text style="color: rgba(35,40,50,0.8)">保费(元)</text>
								</view>
							</view>
							<view class="coverage-sum dis j-s"
								v-for="(accidentInfoitem,accidentInfoindex) in item.accidentInfo"
								:key="accidentInfoindex" style="margin-top: 6px;">
								<view style="width: 50%;" class="dis a-c j-start">
									<text>{{accidentInfoitem.name}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c">
									<text>{{accidentInfoitem.amount}}</text>
								</view>
								<view style="width: 25%;" class="dis a-c j-c">
									<text>{{accidentInfoitem.premium}}</text>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="information2">
					<view class="dis j-s a-c" v-for="(item,index) in parityPriceVo" :key="index">
						<view class="dis j-c a-c p-1"
							:class="{ 'active': items.flag == true, 'active1': items.yzhFlag == true }"
							v-for="(items,indexs) in item" :key="indexs">{{items.value}}
						</view>
					</view>
				</view>
				<view class="massage dis a-c j-start">
					<image :src="jianyitoubaoImg" mode="" style="width: 105px;height: 25px;"></image>
					<text>{{companyName}}， 报价最低！</text>
				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<u-button type="primary" style="background-color:#23C1CB;" @tap="sendPayCode">发送微信</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	export default {
		data() {
			return {
				texts: [],
				payImg: "",
				posterUrl: "",
				show: false,
				insOrderVo: {},
				subOrderVos: [],
				parityPriceVo: [],
				companyName: "",
				bannerImg: "",
				iconImg: "",
				jianyitoubaoImg: "",
			}
		},
		computed: {
			...mapState(["userLoginId"])

		},
		async onLoad(options) {
			let item = JSON.parse(options.subOrderNoslist);
			let params = {
				subOrderNos: item,
			}
			let res = await this.$http.post('/insurance/order/getInquiryDetalsBySubOrderNos', params);
			if (res.code == '200') {
				res.data.subOrderVos.map(val => {
					val.kindinfo.map((ele, index) => {
						switch (ele.kindCode) {
							case "A":
								if (ele.amount == 1) {
									ele.amount = "投保"
								} else {
									ele.amount = 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.companyName = res.data.companyName;
				this.insOrderVo = res.data.insOrderVo;
				this.subOrderVos = res.data.subOrderVos;
				this.parityPriceVo = res.data.parityPriceVo;

			}
			uni.getImageInfo({
				src: '../../static/image/car-insure/bijiadan.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this.bannerImg = base64;
						})
						.catch(error => {});
				},
				fail: err => {}
			});
			uni.getImageInfo({
				src: '../../static/image/car-insure/bijia.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this.iconImg = base64;
						})
						.catch(error => {});
				},
				fail: err => {}
			});
			uni.getImageInfo({
				src: '../../static/image/car-insure/jianyitoubao.png',
				success: image => {
					pathToBase64(image.path)
						.then(base64 => {
							this.jianyitoubaoImg = base64;
						})
						.catch(error => {});
				},
				fail: err => {}
			});

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			//分享图片到微信
			sendPayCode() {
				if (this.payImg) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.payImg
					})
				}
			},
			toChinesNum(num) {
				let overWan = Math.floor(num / 10000);
				let result = overWan + "万";
				return result;
			},
			//页面截图转路径
			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() {
			// #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 => {
						// 生成失败 弹出提示弹窗
						this.$ownerInstance.callMethod('_errAlert', `【生成图片失败，请重试】${err}`)
					})
				}, 300)
			}
			// #endif
		},
	}
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		background-color: #F8FEFE;
		padding-bottom: 100px;
		box-sizing: border-box;
	}

	.active {
		background-color: #FFF5F3;
	}

	.active1 {
		color: #FF5600 !important;
		font-weight: bold;
	}

	.massage {
		width: 100%;
		height: 41px;
		background: linear-gradient(90deg, #FFDCCD 0%, #FFF1EE 100%);
		border-radius: 0px 0px 6px 6px;
		padding: 10px;

		text {
			font-size: 15px;
			font-weight: bold;
			color: #FF5600;
			margin-left: 10px;
		}
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 62px;
		background-color: #FFFFFF;
		padding: 16px;
		box-shadow: 0px -4px 10px 0px #DAE3F4;
		border-radius: 0px 0px 0px 0px;
	}

	.content {
		width: 100%;
		height: auto;
		padding: 16px 16px 0;
		position: relative;

		.price {
			width: 100%;
			height: 40px;
			background: #FFFFFF;
			border-radius: 6px 6px 0px 0px;
		}
	}

	.information {
		width: 100%;
		height: auto;
		background-color: #fff;
		box-shadow: 0px 4px 10px 0px rgba(35, 193, 203, 0.2);
		border-radius: 6px;
		margin-top: 10px;
		padding: 10px 10px 0;


		>view {
			padding: 10px 0;
			border-bottom: 1px solid #f2f2f2;

			text {
				font-size: 14px;
				color: #232832;
			}

		}

		.title {
			font-size: 15px;
			color: #232832;
			font-weight: bold;
		}

		:last-child {
			border: none;
		}
	}

	.information1 {
		width: 100%;
		height: auto;
		background-color: #fff;
		box-shadow: 0px 4px 10px 0px rgba(35, 193, 203, 0.2);
		border-radius: 6px;
		margin-top: 10px;

		>view {
			padding: 10px;
			border-bottom: 1px solid #f2f2f2;

			text {
				font-size: 14px;
				color: #232832;
			}
		}

		>view:first-child {
			border: none;
			background-color: #DCF5F6;
			border-radius: 6px 6px 0 0;

			text:nth-child(1) {
				font-weight: bold;
				color: #232832;
				font-size: 14px;
			}

			text:nth-child(2) {
				font-weight: bold;
				color: #088F98;
				font-size: 14px;
			}
		}



		:last-child {
			border: none;
		}
	}

	.information2 {
		width: 100%;
		height: auto;
		background-color: #fff;
		box-shadow: 0px 4px 10px 0px rgba(35, 193, 203, 0.2);
		border-radius: 6px;
		margin-top: 10px;

		>view {
			view {
				width: 25%;
				font-size: 14px;
				color: #232832;
			}

		}

		>view:first-child {
			border: none;
			background-color: #DCF5F6;
			border-radius: 6px 6px 0 0;
			font-weight: bold;
		}

		.title {
			font-size: 15px;
			color: #232832;
			font-weight: bold;
		}

		:last-child {
			border: none;
		}
	}

	.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 {
					font-size: 12px;
					padding: 6px 16px;
				}
			}
		}
	}

	.Circle {
		position: relative;

		&::before {
			display: block;
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #92b5fe;
			top: -5px;
			left: -15px;
			border-radius: 50%;
		}

		&::after {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #92b5fe;
			top: -5px;
			right: -15px;
			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: 100%;
		background-color: #fff;
		border-radius: 10upx;
		font-size: 32upx;
		font-weight: bold;
		margin: 0 auto;
		padding: 20px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}

	/* 底部的样式Start */
	.infoBottom {
		height: 140upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ea552d;
		border-top: 1upx solid #ea552d;
		z-index: 99;
		margin-top: 100px;
	}

	.infoBottom>button {
		// font-size: 30upx;
		background: #fff;
		color: #333;
		flex: 1;
		margin: 0upx 30px;
		font-weight: bold;
	}

	/* 底部的样式End */
	.watermark {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 24px;
		color: rgba(0, 0, 0, 0.3);
		pointer-events: none;
		z-index: 9999;
	}
</style>