vue-insagent-app/pages/carInsure/checkOption.vue

<template>
	<view class="page">
		<view class="" style="padding-bottom: 70px;">
			<view class="selectedCoverage dis j-s a-c">
				<view class="productName dis a-c j-c">
					<image src="../../static/image/car-insure/duigou.png" mode=""></image>
					<text>{{productName}}</text>
				</view>
				<view class="productName dis a-c j-c" style="border-radius: 6px;">
					<text style="margin: 0;">已选险种</text>
				</view>
			</view>
			<view class="planDetails">
				<image src="../../static/image/car-insure/yixuanchanpin.png" mode="" style="height: 22px;width: 88px;"
					class="mb-1"></image>
				<view class="Plancontent dis f-c  " style="padding:0;"
					v-if="['0330','0330034002','0330034001'].includes(productId)">
					<view class="dis j-s a-c">
						<image src="../../static/image/car-insure/jqrisk.png" mode="" style="height: 22px;width: 88px;"
							class="mb-1"></image>
						<u-button type="primary" style="background: linear-gradient(90deg, #FF4D4D 0%, #FF784D 100%);"
							size="mini" @click="jqterms">交强条款</u-button>
					</view>
					<text style="margin-left: 10px;">{{jqstartDate}}-{{jqendDate}} </text>
					<u-table border-color="#E3E9F8">
						<u-tr class="jq">
							<u-th width="70%" style="text-align: left;padding: 5px 10px !important;">保险产品
							</u-th>
							<u-th>总计（元） </u-th>
						</u-tr>
						<u-tr class="jq">
							<u-td width="70%" style="text-align: left;padding: 5px 10px !important;">
								<view class="dis a-c">
									<view class="circle dis a-c j-c"></view>
									<text style="margin-left: 10px;"> 交通事故强制责任险</text>
								</view>
							</u-td>
							<u-td>{{item.result.jqPremium?'￥'+item.result.jqPremium:'-'}}</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="Plancontent dis j-s " style="padding:0;">
					<image src="../../static/image/car-insure/chechuanshui.png" mode=""
						style="height: 22px;width: 88px;" class="mb-1"></image>
					<text>{{taxRelifFlag}}</text>
				</view>
				<view class="Plancontent dis f-c " style="padding: 0;"
					v-if="['034001','034002','0330034002','0330034001'].includes(productId)">
					<view class="dis j-s a-c">
						<image src="../../static/image/car-insure/syrisk.png" mode="" style="height: 22px;width: 88px;"
							class="mb-1"></image>
						<u-button type="primary" style="background: linear-gradient(90deg, #FF4D4D 0%, #FF784D 100%);"
							size="mini" @click="syterms">商业条款</u-button>
					</view>
					<text style="margin-left: 10px;">{{systartDate}}-{{syendDate}} </text>
					<u-table border-color="#E3E9F8" v-if="item.insurancePlanInfo.kinds.length>0">
						<u-tr class="sy">
							<u-th width="50%" style="text-align: left;padding: 5px 10px !important">险种
							</u-th>
							<u-th>保额 </u-th>
							<u-th>保费(元) </u-th>
						</u-tr>
						<u-tr v-for="(item,index) in item.insurancePlanInfo.kinds" :key="index">
							<u-td width="50%" style="text-align: left;padding: 5px 10px !important">
								<view class="dis a-c">
									<view class="circle dis a-c j-c"></view>
									<text style="margin-left: 10px;">{{item.kindName}}</text>
								</view>
							</u-td>
							<u-td v-if="['A'].includes(item.kindCode)">{{item.amount!='1'?item.amount:'投保'}}</u-td>
							<u-td
								v-else-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)">{{convertedValue(item.unitAmount)}}</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>{{convertedValue(item.amount)}}</u-td>
							<u-td>{{item.coveragePremium?item.coveragePremium:'-'}}</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="Plancontent dis  f-c " style="padding: 0;"
					v-if=" item.insurancePlanInfo.drivingList && item.insurancePlanInfo.drivingList.length>0 ">
					<image src="../../static/image/car-insure/ywrisk.png" mode="" style="height: 22px;width: 88px;"
						class="mb-1"></image>
					<view class="policyInfo" v-for="(drivingsitem,risksindex) in item.insurancePlanInfo.drivingList"
						:key="risksindex">
						<text class="tagHeader dis a-c">
							<text>{{drivingsitem.alias}}
								<view class="tag"></view>
							</text>
						</text>
						<u-table border-color="#E3E9F8" class="mt-2"
							v-if="drivingsitem.insDrivingIntentionInsuranceSon && drivingsitem.insDrivingIntentionInsuranceSon.length>0">
							<u-tr class="sy">
								<u-th width="50%" style="text-align: left;padding: 5px 10px !important">保险责任</u-th>
								<u-th>保额</u-th>
								<u-th>保费(元)</u-th>
							</u-tr>
							<view class="dis">
								<view class="accident dis f-c">
									<view class="diss dis"
										v-for="(Sonitem,Sonindex) in drivingsitem.insDrivingIntentionInsuranceSon"
										:key="Sonindex">
										<view style="width: 67%;padding: 5px 10px " class="boss">
											<view class="dis a-c ">
												<view class="circle dis a-c j-c"></view>
												<view style="margin-left: 5px;width: 80%;" class="dis j-start">
													{{Sonitem.name}}
												</view>
											</view>
										</view>
										<view class="boss dis a-c j-c" style="width: 33%;">
											{{Sonitem.amount}}
										</view>
									</view>
								</view>
								<view class="right dis j-c a-c">
									{{drivingsitem.sumPremium}}
								</view>
							</view>
						</u-table>
						<u-table border-color="#E3E9F8" v-if="drivingsitem.alias">
							<u-tr class="sy">
								<u-th>座位数</u-th>
								<u-th>每份</u-th>
								<u-th>份数</u-th>
								<u-th>总计</u-th>
							</u-tr>
							<u-tr>
								<u-td>{{seatCount}}</u-td>
								<u-td>{{drivingsitem.sumPremium}}/每份</u-td>
								<u-td>{{drivingsitem.quantity}}份</u-td>
								<u-td>{{drivingsitem.sumPremium * drivingsitem.quantity}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
				<view class="Plancontent dis  f-c policyInfo " style="padding: 0;"
					v-if="item.editingDto && item.result.jyPremium && item.insurancePlanInfo.drivingList.length==0 ">
					<image src="../../static/image/car-insure/ywrisk.png" mode="" style="height: 22px;width: 88px;"
						class="mb-1"></image>
					<view class=" ">
						<text class="tagHeader dis a-c" v-if="item.result.jyName">
							<text>{{item.result.jyName}}
								<view class="tag"></view>
							</text>
						</text>
						<u-table border-color="#E3E9F8" v-if="item.result.jyName">
							<u-tr class="sy">
								<u-th>座位数</u-th>
								<u-th>每份</u-th>
								<u-th>份数</u-th>
								<u-th>总计</u-th>
							</u-tr>
							<u-tr>
								<u-td>{{seatCount}}</u-td>
								<u-td>{{item.result.jyPremium / item.result.jyQuantity}}/每份</u-td>
								<u-td>{{item.result.jyQuantity}}份</u-td>
								<u-td>{{item.result.jyPremium}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: "", //险种id
				productName: "", //险种名称
				jqstartDate: "",
				jqendDate: "",
				systartDate: "",
				syendDate: "",
				seatCount: "",
				taxRelifFlag: "",
				item: {},
			}
		},
		onShow() {

		},
		async onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
			await eventChannel.on('acceptData', (data) => {
				console.log(data);
				this.item = data.item;
				this.jqstartDate = data.jqstartDate;
				this.jqendDate = data.jqendDate;
				this.systartDate = data.systartDate;
				this.syendDate = data.syendDate;
				this.productName = data.productName;
				this.productId = data.productId;
				this.seatCount = data.seatNum;
				this.taxRelifFlag = data.taxRelifFlag;
			})

		},
		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) + '亿';
				}
			},
			jqterms() {
				let file = 'https://sxzgkj.baoxianzhanggui.com/web-api/upload/specification/commercialInsurance.pdf';
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '正在打开'
				});
				let dtask = plus.downloader.createDownload(file, {
					filename: "_downloads/" + '交强条款.pdf'
				}, function(d, status) {
					if (status == 200) {
						uni.hideLoading()
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						plus.runtime.openFile(d.filename); //选择软件打开文件
					} else {
						uni.hideLoading()
						//下载失败
						plus.downloader.clear(); //清除下载任务
					}
				})
				dtask.start();
				//#endif
				//#ifdef H5
				var win = window.open();
				win.document.write(
					'<body style="margin:0px;"><object data="' +
					file +
					'" type="application/pdf" width="100%" height="100%"><iframe src="' +
					file +
					'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
				);
				//#endif
			},
			syterms() {
				let file = 'https://sxzgkj.baoxianzhanggui.com/web-api/upload/specification/compulsoryInsurance.pdf';
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '正在打开'
				});
				let dtask = plus.downloader.createDownload(file, {
					filename: "_downloads/" + '商业条款.pdf'
				}, function(d, status) {
					if (status == 200) {
						uni.hideLoading()
						//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
						let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
						plus.runtime.openFile(d.filename); //选择软件打开文件
					} else {
						uni.hideLoading()
						//下载失败
						plus.downloader.clear(); //清除下载任务
					}
				})
				dtask.start();
				//#endif
				//#ifdef H5
				var win = window.open();
				win.document.write(
					'<body style="margin:0px;"><object data="' +
					file +
					'" type="application/pdf" width="100%" height="100%"><iframe src="' +
					file +
					'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
				);
				//#endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F8FAFE;
		height: 100vh;
		padding: 16px 16px 16px 16px;
	}

	.selectedCoverage {
		width: 100%;
		background: linear-gradient(90deg, #CCE5FE 0%, #D4EDFF 100%);
		border-radius: 6px 6px 0px 0px;
		padding: 8px 6px;

		.productName {
			padding: 1px 6px;
			background: linear-gradient(90deg, #64A4F0 0%, #0052FF 100%);
			border-radius: 6px 6px 6px 0px;

			image {
				width: 16px;
				height: 16px;

			}

			text {
				color: #fff;
				font-size: 16px;
				margin-left: 10px;
			}
		}
	}

	.planDetails {
		background-color: #fff;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
		padding: 8px;

		.policyInfo {
			.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, #0874FF 0%, rgba(8, 116, 255, 0) 100%);
					border-radius: 6px;
				}
			}

			.accident {
				width: 75%;

				.diss {
					border-bottom: 1px solid #E3E9F8;

					.boss {
						border-right: 1px solid #E3E9F8;
						text-align: center;
						padding: 5px 3px;
					}
				}
			}

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

	.Plancontent {

		.Accident {
			width: 100%;
			border: 1px solid #0874FF;
			border-radius: 6px;
			overflow: hidden;

			.head {
				width: 20%;
				height: 40px;
				background-color: #0874FF;
				color: #FFFFFF;

				&:nth-child(1) {
					width: 60%;
				}
			}

			.tr {
				width: 20%;
				height: 60px;
				color: #232832;
				border: 1rpx solid #0874FF;
				font-size: 24rpx;
				color: #232832;

				&:nth-child(1) {
					width: 60%;
					background: rgba(8, 116, 255, 0.05);
				}

				&:nth-child(3) {
					background: rgba(8, 116, 255, 0.05);
				}
			}

		}

		.insuranceType {
			margin: 5px 10px;
			background: #F2F6FF;
			border-radius: 10px;
		}

		.terms {
			color: #FFFFFF;
			background: linear-gradient(90deg, #FF4D4D 0%, #FF784D 100%);
			border-radius: 4px 4px 4px 4px;
		}

	}

	::deep {
		.jq {
			.u-th {
				background: #EBF7FF;
				padding: 5px 10px !important;
			}

			.u-td {
				padding: 5px 10px !important;
			}
		}

		.sy {
			.u-th {
				background: #EBF7FF;
			}
		}
	}
</style>