zhapp/pages/quote/modules/insuranceInfo.vue

<template>
	<view class="dis f-c Info">
		<view class="score">
			<view class="item">
				<text class="mr-2">评分</text>
				<text>{{scoreVo.score}}</text>
			</view>
			<view class="item" v-for="(item,index) in scoreVo.scoreJson" :key="index">
				<text class="mr-2">{{item.scoreName}}</text>
				<text>{{item.score}}</text>
			</view>
			<view class="item">
				<text class="mr-2">交强险系数</text>
				<text>0.751</text>
			</view>
			<view class="item dis a-c j-s">
				<text class="mr-2">商业险系数</text>
				<view class="" @click="viewDiscount">
					<u--input border="surround"
						:customStyle="{background:'rgba(253,233,53,0.05)',borderColor:'#FDE935 !important',padding:'4rpx 18rpx',pointerEvents: 'none'}"
						v-model="value" disabled disabledColor='rgba(253,233,53,0.05)'></u--input>
				</view>
				<view class="colorBlock dis a-c j-c " @tap="updateDiscount">
					<image :src="editimg" mode=""></image>
				</view>
			</view>
		</view>
		<u-divider lineColor="#eee" style="margin: 0;"></u-divider>
		<view class="quote-time mt-3">
			<view class="item dis a-start j-s" v-if="ciRiskInfoVo">
				<text>交强险</text>
				<view class="Right dis f-c ">
					<text>起 {{ciRiskInfoVo.startDate}}</text>
					<text>止 {{ciRiskInfoVo.endDate}}</text>
				</view>
			</view>
			<view class="item dis a-start j-s" v-if="biRiskInfoVo">
				<text>商业险</text>
				<view class="Right dis f-c ">
					<text>起 {{biRiskInfoVo.startDate}}</text>
					<text>止 {{biRiskInfoVo.endDate}}</text>
				</view>
			</view>
			<view class="item dis a-start j-s" v-if="policy.ciApplyNumber">
				<text>交强投保单号</text>
				<view class="Right dis f-c ">
					<text>{{policy.ciApplyNumber}}</text>
				</view>
			</view>
			<view class="item dis a-start j-s" v-if="policy.biApplyNumber">
				<text>商业投保单号</text>
				<view class="Right dis f-c ">
					<text>{{policy.biApplyNumber}}</text>
				</view>
			</view>
			<view class="item dis a-start j-s" v-if="policy.ciPolicyNumber">
				<text>交强保单号</text>
				<view class="Right dis f-c ">
					<text>{{policy.ciPolicyNumber}}</text>
				</view>
			</view>
			<view class="item dis a-start j-s" v-if="policy.biPolicyNumber">
				<text>商业保单号</text>
				<view class="Right dis f-c ">
					<text>{{policy.biPolicyNumber}}</text>
				</view>
			</view>
		</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="item dis a-c j-s">
					<text>保费合计</text>
					<text class="price">￥{{costs.sumPremium}}</text>
				</view>
				<view class="item dis a-c j-s" v-if="costs.ciPremium">
					<text>交强险</text>
					<text>￥{{costs.ciPremium}}</text>
				</view>
				<view class="item dis a-c j-s" v-if="costs.vvTax">
					<view class=" dis a-c ">车船税
						<view class="vvTax-Tag ml-1" @click="vvTaxDetails">
							{{taxRelifFlagName}}
						</view>
					</view>
					<text>￥{{costs.vvTax}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="costs.biPremium">
					<text>商业险</text>
					<text>￥{{costs.biPremium}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="costs.niPremium">
					<text>驾意险</text>
					<text>￥{{costs.niPremium}}</text>
				</view>
				<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">投保</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.serviceTimes}}次</text>
						<text v-else class="td">{{item.kindCode=='J1'?'--':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="customerRights dis a-c mt-2" @click="customerRightsDetail">
					<text class="title">客户权益</text>
					<text class="customerRights-price">￥{{insFeeOrders.availableAmount}}</text>
					<u-icon name="arrow-right" color="#2B313D" size="14"></u-icon>
				</view>
				<view class="specialAgreement dis a-c j-s mt-2">
					<image :src="specialAgreementimg" mode="" style="width: 115rpx;height: 26rpx;">
					</image>
					<view class="btn dis a-c j-s">
						<text>查看详情</text>
						<u-icon name="arrow-right" color="#666666" size="20rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="tab dis f-c">
			<view class="header-title dis a-c j-s"
				style="background: linear-gradient( 180deg, #F3F9FF 0%, #FFFFFF 100%)">
				<text>费用信息</text>
				<view class="">
					<text class="mr-1" style="font-weight: 500;font-size: 28rpx;">费用总计</text>
					<text class="price">￥4862.33</text>
				</view>
			</view>
			<view class="items dis f-c ">
				<view class="item dis a-c j-s">
					<text>交强险手续费</text>
					<text>850.00 * 0.00% = 0.00</text>
				</view>
				<view class="item dis a-start j-s">
					<text>交强险跟单</text>
					<text>850.00 * 0.20% = 170.00</text>
				</view>
				<view class="item dis a-start j-s ">
					<text>交强险保费</text>
					<view class=" dis a-c j-end">
						<text style="margin-right: auto;">￥170.00</text>
						<text class="mr-2" style="font-weight: 500;color: #666;">费用</text>
						<text>￥170.00</text>
					</view>
				</view>
				<u-divider lineColor="#eee" style="margin: 0;"></u-divider>
				<view class="item dis a-start j-s mt-3">
					<text>商业险手续费</text>
					<text>{{scoreVo.jqScore}}ddd</text>
				</view>
				<view class="item dis a-start j-s ">
					<text>商业险跟单</text>
					<text>{{scoreVo.jqScore}}ddd</text>
				</view>
				<view class="item dis a-start j-s ">
					<text>商业险保费</text>
					<view class=" dis a-c j-end">
						<text style="margin-right: auto;">￥170.00</text>
						<text class="mr-2" style="font-weight: 500;color: #666;">费用</text>
						<text>￥170.00</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tab dis f-c">
			<view class="header-title" style="background: linear-gradient( 180deg, #F3F9FF 0%, #FFFFFF 100%)">保费因素
			</view>
			<view class="items dis f-c ">
				<view class="item dis a-c j-s" v-if="scoreVo.jqScore">
					<text>交强评分</text>
					<text>{{scoreVo.jqScore}}</text>
				</view>
				<view class="item dis a-c j-s" v-if="scoreVo.syScore">
					<text>商业评分</text>
					<text>{{scoreVo.syScore}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="scoreVo.ciClaims">
					<text>交强出险次数</text>
					<text>{{scoreVo.ciClaims}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="scoreVo.biClaims">
					<text>商业出险次数</text>
					<text>{{scoreVo.biClaims}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="scoreVo.lossRation">
					<text>总赔付率</text>
					<text>{{scoreVo.lossRation}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="scoreVo.jqLossRation">
					<text>交强赔付率</text>
					<text>{{scoreVo.jqLossRation}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="scoreVo.syLossRation">
					<text>商业赔付率</text>
					<text>{{scoreVo.syLossRation}}</text>
				</view>
				<view class="item dis a-start j-s">
					<text>总折扣率</text>
					<text></text>
				</view>
				<view class="item dis a-start j-s" v-if="costs.ciRatio">
					<text>交强折扣</text>
					<text>{{costs.ciRatio}}</text>
				</view>
				<view class="item dis a-start j-s" v-if="costs.biRatio">
					<text>商业折扣</text>
					<text>{{costs.biRatio}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		turnBase64Image
	} from '@/plugins/utils.js';
	export default {
		name: 'name', //插件名称
		props: {
			ciRiskInfoVo: {
				type: Object,
				default: null,
			},
			//费用信息
			insFeeOrders: {
				type: Object,
				default: null,
			},
			//车船税信息
			vehicleAndVesselTaxVo: {
				type: Object,
				default: null,
			},
			car_tax_codeoptions: Array,
			biRiskInfoVo: {
				type: Object,
				default: null,
			},
			costs: { //报价金额数据
				type: Object,
				default: null,
			},
			policy: { //保单号数据
				type: Object,
				default: null,
			},
			scoreVo: { //保费因素
				type: Object,
				default: null,
			},
			kindInfoVo: { //险别
				type: Array,
				default: () => {
					return [];
				}
			},
			accidentalDrivings: { //驾意险信息
				trpe: Array,
				default: () => {
					return [];
				}
			}
		},
		computed: {
			taxRelifFlagName() {
				let info = this.car_tax_codeoptions.find(ele => ele.value === this.vehicleAndVesselTaxVo.taxRelifFlag)
				return info.description;
			}
		},
		data() {
			return {
				value: "",
				editimg: '', //修改图标
				specialAgreementimg: '', //特约图片
			};
		},
		async mounted() {
			console.log(1);
			this.editimg = await turnBase64Image('/static/icon/edit.png')
			this.specialAgreementimg = await turnBase64Image('/static/image/specialAgreement.png')
		},
		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) + '亿';
				}
			},
			viewDiscount() {
				this.$emit('viewDiscount')
			},
			updateDiscount() {
				this.$emit('updateDiscount')
			},
			vvTaxDetails() {
				this.$emit('vvTaxDetails')
			},
			customerRightsDetail() {
				this.$emit('customerRightsDetail')
			}
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	$price-color: #FF540A;

	.price {
		color: $price-color !important;
	}

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

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

			.item {
				margin-bottom: 30rpx;

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

				text:last-child {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}

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

			.item {
				margin-bottom: 30rpx;

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

				.Right {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					width: 70%;
					text-align: right;
					word-wrap: break-word;
					/* 允许换行 */

				}
			}
		}
	}

	.colorBlock {
		width: 54rpx;
		height: 54rpx;
		background: #FDE935;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-left: 12rpx;

		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.tab {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		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;

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

					.vvTax-Tag {
						padding: 4rpx 20rpx;
						box-sizing: border-box;
						background: #FF5B45;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 26rpx;
						color: #fff;
						line-height: 1.2;
					}
				}

				>:nth-child(2) {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					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;
				}
			}
		}

	}

	.specialAgreement {
		image {
			width: 115rpx;
			height: 26rpx;
		}

		.btn {
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 1rpx solid #DDDDDD;
			padding: 6rpx 20rpx;
			box-sizing: border-box;

			text {
				font-size: 28rpx;
				color: #666;
				margin-right: 10rpx;
			}
		}
	}

	.customerRights {
		.title {
			font-size: 30rpx;
			color: #666;
		}

		.customerRights-price {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
			margin-left: auto;
		}

		.u-icon {
			margin-top: 2rpx;
		}
	}
</style>