zhapp/pages/quote/selectInsuranceCompany.vue

<template>
	<view class="page">
		<view class="headerInfo dis f-c ">
			<view class="licenseNo dis a-c ">
				<image src="/static/image/licensePlateicon.png" mode=""></image>
				<text>{{carInfo.licenseNo}}</text>
			</view>
			<view class="text dis a-c">
				<text class="mr-2">被保人</text>
				<text>{{insuredPersonInfo.name}}</text>
			</view>
		</view>
		<view class="pad">
			<view class="content">
				<CarInfoForm :carInfo="carInfo" ref="carForm" :carInfos="carInfo1" :currentPagePath="currentPagePath"
					:natureOfVehicleUseoptions="car_nature_codeoptions" :energyTypeoptions="energy_type_codeoptions"
					:trafficManagementVehicleTypeoptions="car_type_codeoptions"
					:vehicleTypeoptions="car_kind_codeoptions" :businessVehicleUseoptions="vehicle_use_code01options"
					:outOfBusinessVehicleUseoptions="vehicle_use_code02options" @toChooseVin="toChooseVin"
					@toChooseVehicleType="toChooseVehicleType" />
				<view class="insuranceType dis f-c ">
					<view class="tip">
						<text>险种信息</text>
						<text>(选择下方险种信息后，点击下一步可报价)</text>
					</view>
					<view class="typeSelect dis a-c j-s f-wrap">
						<view class="item" v-for="(item,index) in insurance_typeoptions[0]" :key="index"
							@click="insuranceTypeclick(item)" :class="{itemactive:productId===item.value}">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="insuranceCompany">
					<text class="headertitle">可报价的保险公司</text>
					<view class="dis f-wrap j-s " style="margin-top: 24rpx;">
						<view class="item" v-for="(item,index) in quotableCompanyList" :key="index">
							<image :src="item.image" mode=""></image>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="footer dis ">
			<view class="btn dis a-c j-c " style="margin-right: 20px;" @click="back">
				<text>上一步</text>
			</view>
			<view class="btn dis a-c j-c" @click="next">
				<text>下一步</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dictionaryMatch
	} from '@/plugins/utils';
	import CarInfoForm from '@/components/commonFormItem/CarInfoForm.vue';
	export default {
		components: {
			CarInfoForm,
		},
		data() {
			return {
				currentPagePath: "",
				carInfo: {
					licenseNo: "", //车牌号
					brandName: "", //车辆品牌型号
					vinNo: "", //车架号
					engineNo: "", //发动机号
					modelCode: "", //车型编码
					seatCount: "", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseKindCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "", //年款
					carKindCode: "A0", //车辆种类
					powertype: "汽油", //燃料类型
					energyTypeCode: "0", //能源种类
					displacement: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					carTypeCode: "K33", //客车A0 货车H0          
					carNatureCode: "02", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					propertyCode: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					usedCar: false, //二手车
					vehicleUseCode: "05" //车辆用途
				},
				carInfo1: {
					carNatureCode: "非营业",
					energyTypeCode: "燃油",
					vehicleUseCode: "家庭自用",
					carTypeCode: "轿车",
					carKindCode: "客车",
				},
				//人员信息
				ownerInfo: {},
				policyHolderInfo: {},
				insuredPersonInfo: {},
				//影像id
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人

				quotableCompanyList: [], //可报价保险公司
				productId: "0330",
				productName: "单交",
				quoteno: "",
				//字典
				insurance_typeoptions: [], //险种
				car_nature_codeoptions: [], //使用性质
				vehicle_use_code01options: [], //营业
				vehicle_use_code02options: [], //非营业
				car_kind_codeoptions: [], //车辆种类
				energy_type_codeoptions: [], //能源类型
				car_type_codeoptions: [], //车辆类型
				companylogoList: [{
						name: "中煤财险",
						icon: "/static/image/insuranceCompany/zhongmei.png"
					}, //华农
					{
						name: "恒邦财险",
						icon: "/static/image/insuranceCompany/hengbang.png"
					},
					{
						name: "安盛天平",
						icon: "/static/image/insuranceCompany/ansheng.png"
					},
					{
						name: "中国人寿",
						icon: "/static/image/insuranceCompany/renshou.png"
					},
					{
						name: "众安财险",
						icon: "/static/image/insuranceCompany/zhongan.png"
					},
					{
						name: "永诚财险",
						icon: "/static/image/insuranceCompany/yongcheng.png"
					},
					{
						name: "永安财险",
						icon: "/static/image/insuranceCompany/yongan.png"
					},
					{
						name: "紫金财险",
						icon: "/static/image/insuranceCompany/zijin.png"
					},
					{
						name: "国任财险",
						icon: "/static/image/insuranceCompany/guoren.png"
					},
					{
						name: "华泰财险",
						icon: "/static/image/insuranceCompany/huatai.png"
					},
					{
						name: "大家财险",
						icon: "/static/image/insuranceCompany/dajia.png"
					},
					{
						name: "太平财险",
						icon: "/static/image/insuranceCompany/taiping.png"
					},
					{
						name: "华农财险",
						icon: "/static/image/insuranceCompany/huanong.png"
					},
					{
						name: "渤海财险",
						icon: "/static/image/insuranceCompany/bohai.png"
					},
					{
						name: "泰康财险",
						icon: "/static/image/insuranceCompany/taikang.png"
					},
					{
						name: "诚泰财险",
						icon: "/static/image/insuranceCompany/chengtai.png"
					},
					{
						name: "阳光财险",
						icon: "/static/image/insuranceCompany/yangguang.png"
					},
				]
			}
		},
		onShow() {

		},
		async onLoad() {
			await this.getDicType("insurance_type");
			await this.getDicType("car_nature_code"); //使用性质
			await this.getDicType("vehicle_use_code", "01"); //营业
			await this.getDicType("vehicle_use_code", "02"); //非营业
			await this.getDicType("car_kind_code"); //车辆种类
			await this.getDicType("energy_type_code"); //能源类型
			await this.getDicType("car_type_code"); //车辆类型
			const pages = getCurrentPages(); // 获取当前页面栈的数组，数组的第一项是首页，最后一项是当前页面
			const currentPage = pages[pages.length - 1]; // 当前页面实例
			const currentPagePath = currentPage.$page.fullPath; // 当前页面的完整路径
			this.currentPagePath = currentPagePath;
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptData', (data) => {
				console.log(data);
				if (data) {
					if (data.productId) {
						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.carNatureCode = dictionaryMatch(this.car_nature_codeoptions[0], data.carInfo
						.carNatureCode)
					if (data.carInfo.carNatureCode == '01') {
						this.carInfo1.vehicleUseCode = dictionaryMatch(this.vehicle_use_code01options[0], data
							.carInfo
							.vehicleUseCode)
					} else {
						this.carInfo1.vehicleUseCode = dictionaryMatch(this.vehicle_use_code02options[0], data
							.carInfo
							.vehicleUseCode)
					}
					this.carInfo1.carTypeCode = dictionaryMatch(this.car_type_codeoptions[0], data
						.carInfo
						.carTypeCode)
					this.carInfo1.carKindCode = dictionaryMatch(this.car_kind_codeoptions[0], data.carInfo
						.carKindCode)
					this.carInfo1.energyTypeCode = dictionaryMatch(this.energy_type_codeoptions[0], data
						.carInfo
						.energyTypeCode)
				}
			})
			this.ruleFilterCompany();
		},
		methods: {
			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('/scheme/ruleFilterCompany', params);
				if (res.code == '200') {
					this.quotableCompanyList = res.data;
					// 遍历 logo数组，检查是否存在匹配
					this.companylogoList.forEach(itemA => {
						const match = this.quotableCompanyList.find(itemB => itemB.nameSimple === itemA.name);
						if (match) {
							match.image = itemA.icon;
						}
					});
				} else {
					this.quotableCompanyList = [];
					uni.showToast({
						icon: 'none',
						title: res.msg,
					});
				}

			},
			async toChooseVin(cctype) {
				if (cctype == '' || cctype == null) {
					return uni.showToast({
						icon: 'none',
						title: '请输入车架号',
						duration: 1500
					});
				} else {
					if (!this.isFrameno(cctype.trim())) {
						return uni.showToast({
							title: '请输入正确的车辆识别码',
							icon: "none"
						});
					}
					uni.navigateTo({
						url: '/pages/quote/queryVehicleModel?frameNo=' + cctype,
					})
				}

			},

			//跳转选择车辆类型页面
			toChooseVehicleType(cctype) {
				if (cctype == '' || cctype == null) {
					uni.showToast({
						icon: 'none',
						title: '请输入车型名称',
						duration: 1500
					});
				} else {
					uni.navigateTo({
						url: '/pages/quote/queryVehicleModel?modelName=' + cctype,
					})
				}
			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},
			//数据字典
			async getDicType(type, vehicle) {
				if (vehicle) {
					let res = await this.$http.get(`/dict/get?dictCode=${type}&parentValue=${vehicle}`);
					this[type + vehicle + "options"] = [res.data];

				} else {
					let res = await this.$http.get('/dict/get?dictCode=' + type);
					this[type + "options"] = [res.data];
				}
			},
			insuranceTypeclick(item) {
				this.productId = item.value;
				this.productName = item.label;
				this.ruleFilterCompany();
			},
			back() {
				uni.navigateBack(1)
			},
			next() {
				this.$refs.carForm.validate(res => {
					if (!res.length) {
						if (!this.quotableCompanyList.length) {
							return uni.showToast({
								title: "暂无可报价保险公司",
								icon: 'none',
							});
						}
						uni.navigateTo({
							url: '/pages/quote/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
											.productName //险种名字

									})
							}
						}, "navigateTo", true);
					} else {
						uni.$u.toast('车辆信息校验失败')
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.page {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.headerInfo {
		width: 100%;
		padding: 28rpx 30rpx;
		box-sizing: border-box;
		background: linear-gradient(0, rgba(255, 254, 245, 0.8) 0%, #FFFFFF 100%), #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(40rpx);

		.licenseNo {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 4rpx;

			image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 8rpx;
			}
		}

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

	.content {
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin-bottom: 158rpx;

		.insuranceType {
			padding: 24rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #EEEEEE;

			.tip {
				text:first-child {
					font-size: 30rpx;
					color: #333;
					margin-right: 8rpx;
				}

				text:last-child {
					font-size: 26rpx;
					color: #999;
				}
			}

			.typeSelect {
				margin-top: 24rpx;

				.item {
					padding: 4rpx 24rpx;
					box-sizing: border-box;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid #EEEEEE;
					color: #333;
					font-size: 30rpx;
				}

				.itemactive {
					position: relative;
					border: 1px solid #FDE935;
					border-radius: 4rpx 4rpx 4rpx 4rpx;

					&::after {
						content: '';
						position: absolute;
						right: 0;
						bottom: 0;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 0 0 24rpx 24rpx;
						/* 调整三角形大小 */
						border-color: transparent transparent #FDE935 transparent;
						/* 黄色三角形 */
					}

					&::before {
						content: '✓';
						position: absolute;
						right: 3rpx;
						/* 微调位置 */
						bottom: 0;
						font-size: 14rpx;
						/* 调整对勾大小 */
						color: #333;
						/* 对勾颜色 */
						z-index: 1;
						/* 确保对勾在三角形上方 */
					}

				}
			}

		}

		.insuranceCompany {
			padding-top: 24rpx;
			box-sizing: border-box;

			.headertitle {
				font-size: 30rpx;
				color: #333;
			}

			.item {
				image {
					width: 194rpx;
					height: 60rpx;
					margin-bottom: 24rpx;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 138rpx;
		background: linear-gradient(0, #FFFFFF 0%, rgba(255, 254, 245, 0.8) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		backdrop-filter: blur(40rpx);


		.btn {
			width: 50%;
			color: #1f1f1f;
			font-size: 36rpx;
			font-weight: bold;
			background: #FDE935;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			padding: 18rpx;
			box-sizing: border-box;
			border: 1rpx solid #FDE935;

		}

		.btn:first-child {
			background: transparent;
		}
	}

	.pad {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	::v-deep {
		.uni-input-input {
			text-align: right !important;
			font-weight: bold;
		}
	}

	.search {
		width: 112rpx;
		height: 60rpx;
		background: #FDE935;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
	}
</style>