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

<template>
	<view style="height: 100vh;position: relative;">
		<public-module></public-module>
		<view class="page" id="panelcanvas">
			<image :src="bannerImg" mode="" style="width: 100%;height: 450px;position: absolute;"></image>
			<view class="content">
				<view class="price dis f-c">
					<view class="header  dis a-c">
						<image :src="logoimg" mode="" style="width: 20px;height: 20px;">
						</image>
						<text
							style="font-weight: bold;margin-left: 6px; font-size: 16px;">{{dataInfo.inscompany}}</text>
					</view>
					<view class="mt-2">
						<view class="dis a-c j-start">
							<image :src="baojiadanImg" mode="" style="width: 21px;height: 21px;"></image>
							<text style="font-weight: bold;color: #333;margin-left: 10px;">{{dataInfo.orderno}}</text>
						</view>
						<view class="dis a-c j-start mt-2" v-if="dataInfo.jqapplyno">
							<view style="color: #333;width: 70px;">投保单号：</view>
							<text style="color: #555;">{{dataInfo.jqapplyno}}（交强）</text>
						</view>
						<view class="dis a-c j-start" v-if="dataInfo.syapplyno">
							<view style="color: #333;width: 70px;">投保单号：</view>
							<text style="color: #555;">{{dataInfo.syapplyno}}（商业）</text>
						</view>
					</view>
				</view>
			</view>
			<view style="padding:0 16px;position: relative;">
				<view class="information">
					<view class="back">
						<view class="header dis a-c ">
							<view class="line"></view>
							<text>车辆信息</text>
						</view>
					</view>
					<view class="content dis f-c ">
						<view class="dis  a-c ">
							<view class="dis j-start">车牌号：</view>
							<view>{{dataInfo.licenseno}}</view>
						</view>
						<view class="dis  a-c ">
							<view class="dis j-start">车架号：</view>
							<view>{{carinfo.frameNo}}</view>
						</view>
						<view class="dis   a-c">
							<view class="dis j-start">发动机号：</view>
							<view>{{carinfo.engineNo}}</view>
						</view>
						<view class="dis  a-c">
							<view class="dis j-start">品牌型号：</view>
							<view>{{carinfo.modelcname}}</view>
						</view>

						<view class="dis   a-c">
							<view class="dis j-start">座位数：</view>
							<view>{{carinfo.seatCount}}</view>
						</view>
						<view class="dis   a-c">
							<view class="dis j-start">车辆用途：</view>
							<view>{{carinfo.vehicleUse}}</view>
						</view>
						<view class="dis   a-c">
							<view class="dis j-start">注册日期：</view>
							<view>{{carinfo.registerDate}}</view>
						</view>
						<view class="dis   a-c">
							<view class="dis j-start">发证日期：</view>
							<view>{{carinfo.issueDate}}</view>
						</view>
					</view>

				</view>
				<view class="information">
					<view class="back"
						style="background: linear-gradient( 180deg, #B9FFF2 0%, rgba(185,255,242,0) 100%);">
						<view class="header dis a-c ">
							<view class="line" style="background: #0DBDA8;"></view>
							<text>人员信息</text>
						</view>
					</view>
					<view class="content1 dis f-c ">
						<view class="dis  a-c">
							<view class=" dis j-start">车主姓名：</view>
							<view>{{ownerinfo.name}}</view>
						</view>
						<view class="dis  a-c">
							<view>车主身份证号：</view>
							<view class="dis j-start">
								{{ownerinfo.identifyNumber}}
							</view>
						</view>
						<view class="dis  a-c">
							<view>投保人姓名：</view>
							<view class="dis j-start">{{applyinfo.name}}</view>
						</view>
						<view class="dis  a-c">
							<view>投保人身份证号：</view>
							<view class="dis j-start">
								{{applyinfo.identifyNumber}}
							</view>
						</view>
						<view class="dis  a-c">
							<view>被保人姓名：</view>
							<view class="dis j-start">{{insureinfo.name}}</view>
						</view>
						<view class="dis  a-c">
							<view>被保人身份证号：</view>
							<view class="dis j-start">
								{{insureinfo.identifyNumber}}
							</view>

						</view>
					</view>
				</view>
				<view class="information">
					<view class="back"
						style="background: linear-gradient( 180deg, #FFD7C2 0%, rgba(255,215,194,0) 100%)">
						<view class="header dis a-c ">
							<view class="line" style="background: #FF5600;"></view>
							<text>保单信息</text>
						</view>
					</view>
					<view class=" dis f-c policyInfo">
						<view class="dis f-c " v-if="dataInfo.jqstartdate">
							<view class="dis j-s a-c">
								<text class="font-weight" style="color: #6B2709;font-size: 15px;">交强险</text>
								<text
									style="color: #8B563E;font-size: 13px;">{{dataInfo.jqstartdate}}至{{dataInfo.jqenddate}}</text>
							</view>
							<u-table border-color="#F8E9E3">
								<u-tr>
									<u-th>保险产品</u-th>
									<u-th>总计（元）</u-th>
								</u-tr>
								<u-tr>
									<u-td>交通事故强制责任险</u-td>
									<u-td>￥{{dataInfo.jqpremium}}</u-td>
								</u-tr>
							</u-table>
						</view>
						<view class="dis f-c " v-if="dataInfo.systartdate">
							<view class="dis j-s a-c">
								<text class="font-weight" style="color: #6B2709;font-size: 15px;">商业险</text>
								<text
									style="color: #8B563E;font-size: 13px;">{{dataInfo.systartdate}}至{{dataInfo.syenddate}}</text>
							</view>
							<u-table border-color="#F8E9E3">
								<u-tr>
									<u-th>险种</u-th>
									<u-th>保额</u-th>
									<u-th>保费（元）</u-th>
								</u-tr>
								<u-tr v-for="(item,index) in dataInfo.kindinfo" :key="index">
									<u-td>{{item.kindName}}</u-td>
									<u-td
										v-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)">{{item.unitAmount}}/座*{{dataInfo.carinfo.seatCount-1}}</u-td>
									<u-td v-else-if="['D3'].includes(item.kindCode)">{{item.amount}}/座*1</u-td>
									<u-td
										v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)">{{item.deductibleRate}}</u-td>
									<u-td
										v-else-if="['TY1', 'TY2', 'TY3', 'TY4'].includes(item.kindCode)">{{item.serviceTimes}}/次</u-td>
									<u-td v-else>{{item.amount}}</u-td>
									<u-td>￥{{item.coveragePremium}}</u-td>
								</u-tr>
							</u-table>
						</view>
						<view class="dis f-c mt-3" v-if="dataInfo.jyName">
							<view class="dis j-s a-c">
								<text class="font-weight" style="color: #6B2709;font-size: 15px;">驾意险</text>

							</view>
							<text class="tagHeader dis a-c">
								<text>{{dataInfo.jyName}}
									<view class="tag"></view>
								</text>
							</text>
							<u-table border-color="#F8E9E3" v-if="dataInfo.accidentInfo.length>0">
								<u-tr>
									<u-th width="50%">保险责任</u-th>
									<u-th>保额</u-th>
									<u-th>保费（元）</u-th>
								</u-tr>
								<view class="dis">
									<view class="accident dis f-c">
										<view class="dis" v-for="(item,index) in dataInfo.accidentInfo" :key="index">
											<view style="width: 67%;">{{item.name}}</view>
											<view style="width: 33%;">{{item.amount}}</view>
										</view>
									</view>
									<view class="right dis j-c a-c">
										{{dataInfo.jypremium}}
									</view>
								</view>
							</u-table>
							<u-table border-color="#F8E9E3" v-if="dataInfo.jyName">
								<u-tr>
									<u-th>座位数</u-th>
									<u-th>每份</u-th>
									<u-th>份数</u-th>
									<u-th>总计</u-th>
								</u-tr>
								<u-tr>
									<u-td>{{dataInfo.carinfo.seatCount}}</u-td>
									<u-td>{{dataInfo.jypremium / dataInfo.jyQuantity}}/每份</u-td>
									<u-td>{{dataInfo.jyQuantity}}份</u-td>
									<u-td>{{dataInfo.jypremium}}</u-td>
								</u-tr>
							</u-table>
						</view>
					</view>
				</view>
				<view class="information">
					<view class="back"
						style="background: linear-gradient( 180deg, #FFD1D1 0%, rgba(255,209,209,0) 100%);">
						<view class="header dis a-c ">
							<view class="line" style="background: #FF4D4D;"></view>
							<text>保费信息</text>
						</view>
					</view>
					<view class=" content2 dis f-c ">
						<view class="dis   a-c" v-if="dataInfo.jqpremium">
							<view class="dis j-start">交强险：</view>
							<view class="font-weight">{{dataInfo.jqpremium}}元</view>
						</view>
						<view class="dis   a-c" v-if="dataInfo.taxamount">
							<view class="dis j-start">车船税：</view>
							<view class="font-weight">{{dataInfo.taxamount}}元</view>
						</view>
						<view class="dis   a-c" v-if="dataInfo.sypremium">
							<view class="dis j-start">车辆商业险：</view>
							<view class="font-weight">{{dataInfo.sypremium}}元</view>
						</view>
						<view class="dis  a-c" v-if="dataInfo.jypremium">
							<view class="dis j-start">驾意险：</view>
							<view class="font-weight">{{dataInfo.jypremium}}元</view>
						</view>
						<view class="dis   a-c">
							<view style="color: #FF4D4D;" class="dis j-start">应缴金额：</view>
							<view style="color: #FF4D4D;font-weight: bold;">{{dataInfo.sumpremium}}元</view>
						</view>
					</view>
				</view>
			</view>
			<kxj-watermark type="fixation" color="#333" :texts="texts" :count="12"></kxj-watermark>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="fixed-bottom">
			<u-button type="primary" :loading="loading" style="background-color:#0052FF;"
				@tap="sendPayCode">发送微信</u-button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import kxjWatermark from '@/components/common/kxj-watermark/kxj-watermark.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	export default {
		components: {
			kxjWatermark
		},
		data() {
			return {
				loading: true,
				bannerImg: '',
				baojiadanImg: "",
				texts: [],
				payImg: "",
				posterUrl: "",
				caricon: "", //carlogo
				show: false,
				companyId: "",
				dataInfo: {},
				carinfo: {}, //车辆信息
				ownerinfo: {}, //车主信息
				applyinfo: {}, //投保人信息
				insureinfo: {}, //被保人信息
				logoimg: "",
				businessVehicleUseoptions: [],
				outOfBusinessVehicleUseoptions: [],
			}
		},
		computed: {
			...mapState(["userLoginId"])

		},
		async onLoad(options) {
			this.getDicType("businessVehicleUse"); //车辆用途（营业）
			this.getDicType("outOfBusinessVehicleUse"); //车辆用途（非营业）
			this.texts = [this.userLoginId]
			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":
						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.$base.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;
			data.carinfo.vehicleUse = data.carinfo.carnature == '02' ? this.dictionaryMatching(this
				.outOfBusinessVehicleUseoptions,
				data.carinfo
				.vehicleUse) : this.dictionaryMatching(this.businessVehicleUseoptions,
				data.carinfo
				.vehicleUse)
			data.ownerinfo.identifyNumber = data.ownerinfo.identifyNumber.slice(0, 4) + '*******' + data.ownerinfo
				.identifyNumber.slice(14, 18);
			data.applyinfo.identifyNumber = data.applyinfo.identifyNumber.slice(0, 4) + '*******' + data.applyinfo
				.identifyNumber.slice(14, 18);
			data.insureinfo.identifyNumber = data.insureinfo.identifyNumber.slice(0, 4) + '*******' + data.insureinfo
				.identifyNumber.slice(14, 18);
			this.carinfo = data.carinfo;
			this.ownerinfo = data.ownerinfo;
			this.applyinfo = data.applyinfo;
			this.insureinfo = data.insureinfo;

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

		},
		methods: {
			async getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == 200) {
					this[type + 'options'] = res.data.ddList;
					// if (type == "trafficManagementVehicleType") {
					// 
					// 	this.carInfo1.cimodelclass = this.dictionaryMatching(this.vehicleTypeoptions,
					// 		this
					// 		.carInfo
					// 		.cimodelclass)
					// }
				}
			},
			//字典name匹配
			dictionaryMatching(list, value) {
				let obj = list.find(val => val.dictValue == value);
				return obj.dictTag;
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			//本地图片转换成base64
			turnBase64Image() {
				this.
				uni.getImageInfo({
					src: img,
					success: image => {
						pathToBase64(image.path)
							.then(base64 => {
								this[key] = base64;
							})
							.catch(error => {});
					},
					fail: err => {}
				});
			},
			toChinesNum(num) {
				let overWan = Math.floor(num / 10000);
				let result = overWan + "万";
				return result;
			},
			//分享图片到微信
			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>
	@import '@/style/mixin.scss';

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

	.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 {
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px rgba(123, 160, 239, 0.2);
			border-radius: 6px;
			border: 1px solid #FFFFFF;
			padding: 8px;

			.header {
				padding-bottom: 5px;
				border-bottom: 1px solid #E1E1E1;
			}
		}
	}

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

		.back {
			padding: 8px;
			background: linear-gradient(180deg, #D5E3FF 0%, rgba(213, 227, 255, 0) 100%);
			border-radius: 6px 6px 0 0;

			.header {
				padding-bottom: 6px;
				border-bottom: 1px solid #EEEEEE;

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

				.line {
					width: 2px;
					height: 14px;
					background: #0052FF;
					border-radius: 2px;
					margin-right: 10px;
				}
			}
		}


		.content {
			padding: 4px 8px;

			>view {
				font-size: 14px;
				margin-bottom: 4px;

				:first-child {
					min-width: 70px;
					color: #333;
				}

				:last-child {
					color: #666;
				}
			}

		}

		.content1 {
			padding: 4px 8px;

			>view {
				font-size: 14px;
				margin-bottom: 4px;

				:first-child {
					width: 120px;
					color: #333;
				}

				:last-child {
					color: #666;
				}
			}

		}

		.content2 {
			padding: 4px 8px;

			>view {
				font-size: 14px;
				margin-bottom: 4px;

				:first-child {
					width: 100px;
					color: #333;
				}

				:last-child {
					color: #666;
				}
			}

		}

		.policyInfo {
			padding: 4px 8px;

			.tagHeader {
				font-family: Source Han Sans SC, Source Han Sans SC;

				text {
					position: relative;
					font-weight: bold;
					font-size: 13px;
					color: #333;
				}

				.tag {
					position: absolute;
					left: 0;
					bottom: -1px;
					width: 50%;
					height: 5px;
					background: linear-gradient(90deg, #FF884C 0%, rgba(255, 136, 76, 0) 80%);
					border-radius: 6px;

				}
			}

			.accident {
				width: 75%;

				.dis {
					border-bottom: 1px solid #F8E9E3;

					view {
						border-right: 1px solid #F8E9E3;
						text-align: center;
						padding: 5px 3px;
					}
				}
			}

			.right {
				width: 25%;
				border-right: 1px solid #F8E9E3;
				border-bottom: 1px solid #F8E9E3;
				padding: 5px 3px;
			}
		}
	}


	.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;
	}

	/deep/ {
		.u-th {
			background-color: #FEF9F6;
		}

		.u-td {
			height: auto;
		}
	}
</style>