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

<template>
	<view class="">
		<service-widget @btnClick="btn_click"></service-widget>
		<image src="/static/image/car-insure/Quotablebanner.png" mode=""
			style="width: 100%;height: 110px;position: absolute;"></image>
		<view class="page">
			<view class="car">
				<view class="header d-flex a-center j-sb" @tap="showCarInfo = !showCarInfo">
					<view class="title">车辆信息</view>
					<view class=" d-flex">
						<view class="icon iconfont"
							:class="{ 'icon-up-yixuanzhong': showCarInfo, 'icon-down-weixuanzhong': !showCarInfo }"
							style="font-weight: bold;color: #fff;">
						</view>
					</view>
				</view>
				<view class="body" v-if="showCarInfo">
					<view class="row d-flex a-center j-sb">
						<view>车牌号</view>
						<view>{{carInfo.licenseNo}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>品牌型号</view>
						<view>{{carInfo.modelcname}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>车辆识别代码</view>
						<view>{{carInfo.vinNo}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>发动机号</view>
						<view>{{carInfo.engineNo}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>年款</view>
						<view>{{carInfo.caryear}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>座位数</view>
						<view>{{carInfo.seatCount}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>整备质量</view>
						<view>{{carInfo.completeKerbMass}}</view>
					</view>
					<view class="row d-flex a-center j-sb" v-if="carInfo.limitLoad">
						<view>核定载质量</view>
						<view>{{carInfo.limitLoad}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>排量</view>
						<view>{{carInfo.enginedesc}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>功率</view>
						<view>{{carInfo.powerScale}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>新车购置价</view>
						<view>{{carInfo.purchasePrice}}</view>
					</view>
					<view class="row d-flex a-center j-sb font-weight"
						style="background-color: #E5ECFA;padding:5px 10px;">
						<view>车辆其他信息</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>使用性质</view>
						<view>{{carInfo1.carnature}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>车辆用途</view>
						<view>{{carInfo1.vehicleUse}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>车辆类型</view>
						<view>{{carInfo1.cartype}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>车辆种类</view>
						<view>{{carInfo1.cimodelclass}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>能源种类</view>
						<view>{{carInfo1.energyType}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>注册日期</view>
						<view>{{carInfo.registerDate }}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>发证日期</view>
						<view>{{carInfo.issueDate }}</view>
					</view>
					<view class="row d-flex a-center j-sb" v-if="carInfo.transferFlag">
						<view>转移登记日期</view>
						<view>{{carInfo.transferDate }}</view>
					</view>
					<view class="row dis j-c a-c">
						<u-button type="primary" shape="circle" size="medium"
							style="background: linear-gradient( 90deg, #0052FF 0%, #6595FA 100%);"
							@click="back('userModificationLabel' )">修改车辆信息</u-button>
					</view>
				</view>
			</view>
			<view class="car" style="padding: 0;">
				<view class="header d-flex a-center j-sb " @tap="showOwerInfo = !showOwerInfo" style="padding: 0 10px;">
					<view class="title">人员信息</view>
					<view class=" d-flex">
						<view class="icon iconfont "
							:class="{ 'icon-up-yixuanzhong': showOwerInfo, 'icon-down-weixuanzhong': !showOwerInfo }"
							style="font-weight: bold;color: #fff;">
						</view>
					</view>
				</view>
				<view class="body" v-if="showOwerInfo">
					<view class="row d-flex a-center j-sb font-weight "
						style="background-color: #E5ECFA;padding:5px 10px;">
						<view>车主姓名:</view>
						<view>{{ownerInfo.name}}</view>
					</view>
					<view class="" style="padding: 0 5px;">
						<view class="row d-flex a-center j-sb">
							<view>车主身份证号：</view>
							<view>
								{{ownerInfo.identifyNumber}}
							</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>手机号：</view>
							<view>{{ownerInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>地址：</view>
							<view>{{ownerInfo.addr}}</view>
						</view>
					</view>
					<view class="row d-flex a-center j-sb font-weight "
						style="background-color: #E5ECFA;padding:5px 10px;">
						<view>投保人姓名:</view>
						<view>{{policyHolderInfo.name}}</view>
					</view>
					<view class="" style="padding: 0 5px;">
						<view class="row d-flex a-center j-sb">
							<view>投保人身份证号：</view>
							<view>
								{{policyHolderInfo.identifyNumber}}
							</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>手机号：</view>
							<view>{{policyHolderInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>地址：</view>
							<view>{{policyHolderInfo.addr}}</view>
						</view>
					</view>
					<view class="row d-flex a-center j-sb font-weight "
						style="background-color: #E5ECFA;padding:5px 10px;">
						<view>被保人姓名:</view>
						<view>{{insuredPersonInfo.name}}</view>
					</view>
					<view class="" style="padding: 0 5px;">
						<view class="row d-flex a-center j-sb">
							<view>被保人身份证号：</view>
							<view>
								{{insuredPersonInfo.identifyNumber}}
							</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>手机号：</view>
							<view>{{insuredPersonInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center j-sb">
							<view>地址：</view>
							<view>{{insuredPersonInfo.addr}}</view>
						</view>
					</view>
					<view class="row dis j-c a-c">
						<u-button type="primary" shape="circle" size="medium"
							style="background: linear-gradient( 90deg, #0052FF 0%, #6595FA 100%);"
							@click="back('carModificationLabel')">修改人员信息</u-button>
					</view>
				</view>
			</view>
			<view class="insuranceType mt-2 dis f-c ">
				<view class="dis a-c">
					<text class="title">险种信息</text>
					<image @click="riskTypeInfo = true" class="ml-1" src="../../static/image/car-insure/description.png"
						mode="" style="width: 16px;height: 16px;"></image>
					<text style="color: #666666;font-size: 13px;">（选择下方险种信息后点击下一步可报价）</text>
				</view>
				<view class="dis  a-c f-wrap j-s" style="margin-top: 10px;">
					<view class="status-data" :class="item.dictValue==productId? 'active':''"
						v-for="(item,index) in productsTypeoptions" @tap.stop.prevent="statusclick(item)" :key="index">
						{{item.dictTag}}
					</view>
				</view>
			</view>
			<view class="insuranceType mt-2 dis f-c ">
				<text class="title">可报价保险公司</text>
				<view class="dis  f-wrap j-start mt-2">
					<view class="insurer dis j-s a-c" style="margin: 5px 10px;" @tap="CompIntro(item.remark)"
						v-for="(item,index) in quotableCompanyList" :key="index">
						<image :src="item.logo" mode=""></image>
						<text>{{item.namesimple}}</text>
					</view>

				</view>
			</view>
		</view>
		<view class="footer-btn dis j-s a-c">
			<u-button type="primary" style="background:#E6EEFF;color:#0052FF;" @tap="back(null)">上一步</u-button>
			<u-button type="primary" style="background:#0052FF;" :disabled="!productId" @tap="next">下一步</u-button>
		</view>
		<u-modal v-model="CompIntroShow" title="公司简介"
			:title-style="{fontWeight: 'bold',borderBottom:'1px solid #f2f2f2',padding:'10px'}"
			:show-cancel-button="false"
			:confirm-style="{background:'#E6EEFF',color:'#0052FF',height:'40px',lineHeight:'40px'}"
			@confirm="CompIntroShow=false">
			<view class="slot-content dis  a-c f-c  p-2">
				<text style="text-indent: 2em;">{{companyRemark}}</text>
			</view>
		</u-modal>
		<u-modal v-model="riskTypeInfo" title="险种说明"
			:title-style="{fontWeight: 'bold',borderBottom:'1px solid #f2f2f2',padding:'10px'}" width="80%"
			:confirm-style="{background:'#E6EEFF',color:'#0052FF',height:'40px',lineHeight:'40px'}"
			:show-cancel-button="false" @confirm="riskTypeInfo=false">
			<view class="slot-content">
				<scroll-view class="scrollBar" scroll-y="true"
					style="max-height: 520px; padding: 0 20px; box-sizing: border-box;">
					<view class="coverageHint dis f-c pb-2">
						<text v-for="(item,index) in coverageHint" :key="index" style="color: #232832;"
							class="mb-2">{{item}}</text>
					</view>
				</scroll-view>
			</view>
		</u-modal>
	</view>

</template>

<script>
	import {
		dictionaryMatch
	} from '@/plugins/utils';
	export default {
		data() {
			return {
				coverageHint: [
					"1.交强险：国家要求强制购买的一种车险。赔偿他人的人身伤害及财产损失。（有责赔偿：死伤18万；医疗费用：1.8万；财损损失：2000元。无责赔偿：死伤1.8万；医疗费用：1800元；财损损失：100元。）",
					"2.交+三（交强+三者险）：赔偿他人的人身伤害及财产损失，三者对交强险的上限额度形成补充，根据被保险人所处事故中的具体承担责任进行赔偿。建议：200万以上。",
					"3.交+商（交强+商业险）：赔偿他人的人身伤害及财产损失 ，赔偿自然灾害和意外事故而导致的自身车辆损失。（车辆损失险包含：盗抢险、玻璃险、涉水险、自燃险、无法找到第三方、指定修理厂和不计免赔险。）",
					"4.单三者： 赔偿他人的人身伤害及财产损失。",
					"5.单商业：赔偿他人的人身伤害及财产损失 ，   赔偿自然灾害和意外事故而导致的自身车辆损失。"
				],
				riskTypeInfo: false,
				quotableCompanyList: [],
				CompIntroShow: false,
				carInfo: {},
				carInfo1: {
					carnature: "",
					vehicleUse: "",
					cartype: "",
					cimodelclass: "",
					energyType: "",
				},
				ownerInfo: {},
				policyHolderInfo: {},
				insuredPersonInfo: {},
				carInfoPositiveList: [],
				ownerInfoPositiveList: [],
				policyHolderInfoPositiveList: [],
				insuredPersonInfoPositiveList: [],
				showCarInfo: true,
				showOwerInfo: true,
				productsTypeoptions: [],
				natureOfVehicleUseoptions: [],
				vehicleTypeoptions: [],
				trafficManagementVehicleTypeoptions: [],
				energyTypeoptions: [],
				businessVehicleUseoptions: [],
				outOfBusinessVehicleUseoptions: [],
				insuranceTypeName: "",
				companyRemark: "",
				productId: "",
				productName: "",
				quoteno: "",
			}
		},
		onShow() {

		},
		async onLoad() {
			await this.getDicType("productsType");
			await this.getDicType("businessVehicleUse"); //车辆用途（营业）
			await this.getDicType("outOfBusinessVehicleUse"); //车辆用途（非营业）
			await this.getDicType("natureOfVehicleUse"); //车辆性质
			await this.getDicType("vehicleType"); //车辆种类
			await this.getDicType("trafficManagementVehicleType"); //车辆类型
			await this.getDicType("energyType"); //能源种类
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptData', (data) => {

				if (!!data) {
					//读取上一个页面传过来数据（车辆信息，人员信息，险种信息）
					this.productId = data.productId;
					this.productName = data.productName;
					this.quoteno = data.quoteno;
					this.carInfo = data.carInfo; //车辆信息
					this.ownerInfo = data.ownerInfo; //车主信息
					this.policyHolderInfo = data.policyHolderInfo; //投保人信息
					this.insuredPersonInfo = data.insuredPersonInfo; //被保人信息
					this.carInfoPositiveList = data.carInfoPositiveList; //车辆影像
					this.ownerInfoPositiveList = data.ownerInfoPositiveList; //车主影像
					this.policyHolderInfoPositiveList = data.policyHolderInfoPositiveList; //投保影像
					this.insuredPersonInfoPositiveList = data.insuredPersonInfoPositiveList; //被保人影像
					this.carInfo1.carnature = dictionaryMatch(this.natureOfVehicleUseoptions, data.carInfo
						.carnature)
					if (data.carInfo.carnature == '01') {
						this.carInfo1.vehicleUse = dictionaryMatch(this.businessVehicleUseoptions, data.carInfo
							.vehicleUse)
					} else {
						this.carInfo1.vehicleUse = dictionaryMatch(this.outOfBusinessVehicleUseoptions, data
							.carInfo
							.vehicleUse)
					}
					this.carInfo1.cartype = dictionaryMatch(this.trafficManagementVehicleTypeoptions, data
						.carInfo
						.cartype)
					this.carInfo1.cimodelclass = dictionaryMatch(this.vehicleTypeoptions, data.carInfo
						.cimodelclass)
					this.carInfo1.energyType = dictionaryMatch(this.energyTypeoptions, data.carInfo
						.energyType)
				}
			})
			this.ruleFilterCompany();
		},
		methods: {

			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			async ruleFilterCompany() {
				let params = {
					carInfo: this.carInfo,
					ownerInfo: this.ownerInfo,
					applyInfo: this.policyHolderInfo,
					insureInfo: this.insuredPersonInfo,
					productId: this.productId
				}
				let res = await this.$http.post('/plt/scheme/ruleFilterCompany', this.productId !== "" ? params : {});
				this.quotableCompanyList = res.data;
			},
			CompIntro(remark) {
				this.companyRemark = remark;
				this.CompIntroShow = true;
			},
			async getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				this[type + "options"] = res.data.ddList;
			},
			async statusclick(e) {
				this.productId = e.dictValue;
				this.insuranceTypeName = e.dictTag;
				let res = await this.$http.post('/plt/scheme/ruleFilterCompany', {
					carInfo: this.carInfo,
					ownerInfo: this.ownerInfo,
					applyInfo: this.policyHolderInfo,
					insureInfo: this.insuredPersonInfo,
					productId: this.productId
				});
				this.quotableCompanyList = res.data;
			},
			back(params) {
				this.navigate({
					url: '/pages/carInsure/Information',
					success: (res) => {
						res.eventChannel.emit(
							"acceptData", {
								carInfo: this
									.carInfo,
								ownerInfo: this
									.ownerInfo,
								policyHolderInfo: this
									.policyHolderInfo,
								insuredPersonInfo: this
									.insuredPersonInfo,
								carInfoPositiveList: this
									.carInfoPositiveList, //车辆
								ownerInfoPositiveList: this
									.ownerInfoPositiveList, //车主
								policyHolderInfoPositiveList: this
									.policyHolderInfoPositiveList, //投保
								insuredPersonInfoPositiveList: this
									.insuredPersonInfoPositiveList, //被保人
								quoteno: this.quoteno,
								identifier: params ? params : "",
							})
					}
				}, "navigateTo", true);
			},
			next() {
				if (!this.quotableCompanyList.length) {
					return uni.showToast({
						title: "暂无可报价保险公司",
						icon: 'none',
					});
				}
				this.navigate({
					url: '/pages/carInsure/premiumCalc',
					success: (res) => {
						res.eventChannel.emit(
							"acceptData", {
								carInfo: this
									.carInfo,
								ownerInfo: this
									.ownerInfo,
								policyHolderInfo: this
									.policyHolderInfo,
								insuredPersonInfo: this
									.insuredPersonInfo,
								carInfoPositiveList: this
									.carInfoPositiveList, //车辆
								ownerInfoPositiveList: this
									.ownerInfoPositiveList, //车主
								policyHolderInfoPositiveList: this
									.policyHolderInfoPositiveList, //投保
								insuredPersonInfoPositiveList: this
									.insuredPersonInfoPositiveList, //被保人
								quotableCompanyList: this.quotableCompanyList, //可报价公司
								productId: this.productId, //险种id
								productName: this.insuranceTypeName ? this.insuranceTypeName : this
									.productName //险种名字

							})
					}
				}, "navigateTo", true);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coverageHint {}

	.page {
		background: #F8FAFE;
		padding: 10px 16px 100px 16px;

	}

	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 62px;
		background: #FFFFFF;
		box-shadow: 0px -4px 10px 0px #DAE3F4;
		border-radius: 0px 0px 0px 0px;
		padding: 12px 16px;
		z-index: 99;

		uni-button {
			width: 45%;
		}
	}

	.status-data {
		padding: 4px 10px;
		box-sizing: border-box;
		margin: 0 4px 4px 0;
		font-size: 12px;
		border: 1px solid #eee;
		cursor: pointer;
	}

	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}

	.active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background-image: url("/static/image/car-insure/before.png");
		background-size: cover;
	}

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

		.insurer {
			width: 100px;
			height: 40px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
			margin-bottom: 10px;
			padding: 8px;
			box-sizing: border-box;

			image {
				width: 20px;
				height: 20px;
			}

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

	.car {
		width: 100%;
		background-color: #fff;
		border-radius: 6px;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		margin-top: 10px;
		position: relative;

		.header {
			height: 80upx;
			position: relative;
			padding: 0 10px;
			background: linear-gradient(132deg, #467FF6 0%, #A5C2FF 59%, #467FF6 100%);
			border-image: linear-gradient(152deg, rgba(234, 241, 255, 1), rgba(231, 238, 255, 1)) 1 1;
			border-radius: 6px 6px 0px 0px;

			.title {
				font-size: 30upx;
				font-weight: bold;
				color: #fff;
			}
		}

		.body {
			.row {
				padding: 6px 10px;
				border-top: 1px solid #F3F3F3;
			}

			.row:last-child {
				border: none;
			}
		}
	}
</style>