zhapp/pages/quote/chooseOption.vue

<template>
	<view class="page">
		<!-- 头部吸顶区域 -->
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="报价方案" background="#fff" :isSlot="false" :rightIcon="false">
			</uni-NavBar>
			<!-- 方案视图 -->
			<view class="planListView">
				<!-- 头部保险公司信息 -->
				<view class="header dis a-c ">
					<image :src="logo" class="companyLogo" mode=""></image>
					<text class="companyName ml-1 mr-2">{{planDataExpansion.nameSimple}}</text>
					<view class="status-tag dis a-c j-c">
						{{productName}}
					</view>
				</view>
				<!-- 方案列表 -->
				<view class="content-body dis a-c   f-wrap  mt-3">
					<view class="selectItem" @click="selectedPlan(item.id)"
						:class="item.id==SelectedPlanId?'itemactive':''"
						v-for="item in planDataExpansion.genericPlanList" :key="item.id">
						{{item.schemeName}}
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 自选方案内容 -->
		<customPlan v-if="planDataExpansion.genericPlanInfo.schemeType=='2'" :productName="productName"
			:vehicleAndVesselTaxVo="vehicleAndVesselTaxVo" :vehicleAndVesselTaxModel="vehicleAndVesselTaxModel"
			:car_tax_codeoptions="car_tax_codeoptions" :car_tax_reason_codeoptions="car_tax_reason_codeoptions"
			:ya_damage_verificationoptions="ya_damage_verificationoptions" @carCheckerUpdate="carCheckerUpdate"
			:planDataExpansion="planDataExpansion" :drivingInsuranceData="drivingInsuranceData"
			:accidentalDrivingVo="accidentalDrivingVo">
		</customPlan>
		<!-- 普通方案内容 -->
		<standardPlan v-if="planDataExpansion.genericPlanInfo.schemeType=='1'" :productName="productName"
			:vehicleAndVesselTaxVo="vehicleAndVesselTaxVo" :vehicleAndVesselTaxModel="vehicleAndVesselTaxModel"
			:car_tax_codeoptions="car_tax_codeoptions" :car_tax_reason_codeoptions="car_tax_reason_codeoptions"
			:planDataExpansion="planDataExpansion">
		</standardPlan>
		<view class="footer dis a-c j-s">
			<view class="btn btns dis a-c j-c mr-3" @click="back">
				取消
			</view>
			<!-- 	<view class="btn dis a-c j-c mr-3" @click="save">
				保存
			</view> -->
			<view class="btn dis a-c j-c " @click="confirmPlan">
				使用该方案报价
			</view>
		</view>
	</view>
</template>
<script>
	import Mixin from './Mixin.js';
	import customPlan from './modules/customPlan.vue'; //自选方案
	import standardPlan from './modules/standardPlan.vue'; //普通方案
	export default {
		mixins: [Mixin], // 注入 Mixin
		components: {
			customPlan,
			standardPlan,
		},
		data() {
			return {
				logo: "", //保险公司logo
				productName: "", //险种名称
				productId: "", //险种code
				SelectedPlanId: "", //已选方案id
				planDataExpansion: { //方案综合数据
					id: "",
					nameSimple: "",
					cnName: "",
					genericPlanList: [], //方案通用列表
					genericPlanInfo: {}, //方案展示信息
				},
				car_tax_codeoptions: [], //车船税类型
				car_tax_reason_codeoptions: [], //减免税原因
				ya_damage_verificationoptions: [], //车损验车事项
				carChecker: "",
				drivingInsuranceData: [], //保险公司驾意险列表
				accidentalDrivingVo: [], //选中驾意险列表
			}
		},
		onShow() {

		},
		async onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptData事件，获取上一页面通过eventChannel传送到当前页面的数据
			await eventChannel.on('acceptData', (data) => {
				this.productName = data.productName;
				this.productId = data.params.productId;
				this.logo = data.logo;
				this.planDataExpansion.id = data.params.companyId;
				this.planDataExpansion.nameSimple = data.nameSimple;
				this.planDataExpansion.cnName = data.cnName;
				this.quotableCompanyList = data.quotableCompanyList;
				this.vehicleAndVesselTaxVo.identifyNumber = data.identifyNumber;
				this.vehicleAndVesselTaxVo.taxpayerName = data.taxpayerName;
				this.queryPlan(data.params); //方案查询
			})
			await this.getDicType("car_tax_code"); //车船税类型
			await this.getDicType("car_tax_reason_code"); //减免税原因代码
			await this.getDicType("ya_damage_verification"); //车损验车事项
		},
		methods: {
			confirmPlan(name) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				let prevPage1 = pages[pages.length - 3]; //上一页页面实例
				this.quotableCompanyList.map(val => {
					if (val.id == this.planDataExpansion.id) {
						val.insurancePlanInfo = this.planDataExpansion.genericPlanInfo;
						// 重选标记：已有报价结果说明是“重选”方案（区别于首次选择方案），
						// 供计算保费页区分重选前/重选后——重选后保留旧价格并显示“重新报价”按钮
						if (val.result) {
							val.isReSelect = true;
						}
						if (val.insurancePlanInfo.kinds.length > 0) {
							let objkindList = [];
							val.insurancePlanInfo.kinds.map((ele, index) => {
								if (ele.amount != "0" && ["A", "SY_WBDWGZ"].includes(ele.kindCode)) {
									objkindList.push({
										amount: val.insurancePlanInfo.kinds[index]
											.amount,
										kindCode: val.insurancePlanInfo.kinds[
											index].kindCode,
										kindName: val.insurancePlanInfo.kinds[
											index].kindName
									});
								} else if (ele.amount != "0" && ["SY_FJ_YBW2", "D4"]
									.includes(ele
										.kindCode)) {
									objkindList.push({
										amount: val.insurancePlanInfo.kinds[
											index].amount,
										kindCode: val.insurancePlanInfo.kinds[
											index].kindCode,
										kindName: val.insurancePlanInfo.kinds[
											index].kindName
									});
								} else if (ele.amount != "0" && ["MJ1", "MJ2", "MJ3",
										"MJ4"
									].includes(ele
										.kindCode)) {
									objkindList.push({
										deductibleRate: val.insurancePlanInfo
											.kinds[index].amount,
										kindCode: val.insurancePlanInfo.kinds[
											index].kindCode,
										kindName: val.insurancePlanInfo.kinds[
											index].kindName
									});
								} else if (ele.amount != "0" && ["TY1", "TY2", "TY3",
										"TY4"
									].includes(ele
										.kindCode)) {
									objkindList.push({
										serviceTimes: String(val.insurancePlanInfo
											.kinds[index]
											.amount),
										kindCode: val.insurancePlanInfo.kinds[
											index].kindCode,
										kindName: val.insurancePlanInfo.kinds[
											index].kindName
									});
								} else if (ele.amount != "0") {
									objkindList.push({
										amount: val.insurancePlanInfo.kinds[index]
											.amount,
										kindCode: val.insurancePlanInfo.kinds[
											index].kindCode,
										kindName: val.insurancePlanInfo.kinds[
											index].kindName
									});
								}
								return ele;
							})

							val.insurancePlanInfo.kinds = objkindList;
						}
						if (this.planDataExpansion.genericPlanInfo.schemeType == '2') {
							val.insurancePlanInfo.drivings = this.accidentalDrivingVo;
						}
						if (!val.insurancePlanInfo.schemeName) {
							return uni.showToast({
								icon: "none",
								title: '未选中方案',
							})
						}

					}
					return val;
				})
				if (prevPage.route == 'pages/quote/premiumCalc') {
					prevPage.$vm.quotableCompanyList = [...this.quotableCompanyList];
					prevPage.$vm.vehicleAndVesselTaxVo = {
						...this.vehicleAndVesselTaxVo
					};
					prevPage.$vm.vehicleAndVesselTaxModel = {
						...this.vehicleAndVesselTaxModel
					};
					uni.navigateBack({
						delta: 1
					});
				}


			},
			//获取方案
			async queryPlan(params) {
				let res = await this.$http.post('/scheme/getSchemeResult', params);
				if (res.code == '200') {
					if (res.data.schemes) {
						this.planDataExpansion.genericPlanList = [...res.data.schemes];
					}
					if (res.data.optionalScheme) {
						this.planDataExpansion.genericPlanList = [...res.data.schemes, res.data.optionalScheme];
					}
					this.planDataExpansion.genericPlanInfo = res.data.schemes[0];
					this.SelectedPlanId = res.data.schemes[0].id;
				} else {
					this.planDataExpansion.genericPlanList = [];
					this.planDataExpansion.genericPlanInfo = {};
					this.SelectedPlanId = "";
				}
			},
			//数据字典
			async getDicType(type) {
				let res = await this.$http.get('/dict/get?dictCode=' + type);
				this[type + "options"] = res.data;
			},
			// 选择方案
			selectedPlan(index) {
				this.SelectedPlanId = index;
				let planObj = this.planDataExpansion.genericPlanList.find(item => item.id == index);
				if (planObj.schemeType == '2') {
					if (planObj.kinds && planObj.kinds.length > 0) {
						planObj.kinds.map(item => {
							const itemamtList = item.options.map(val => {
								return val.label
							})
							if (!itemamtList.includes('不投保')) {
								item.amount = item.options[0].value;
								item.amountDesc = item.options[0].label;
							}
							return item;
						})
					}
					this.drivingInsuranceData = planObj.drivings; //保险公司驾意险列表
					planObj.drivings.map(val => val.quantity = Number(val.quantity))

					const list = planObj.drivings.filter(val => val.selectedStatus != '3')
					this.accidentalDrivingVo = list;
				}
				this.planDataExpansion.genericPlanInfo = planObj;
			},
			// 永安车损验车事项回调
			carCheckerUpdate(index) {
				this.carChecker = index;
			},
		}
	}
</script>

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

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

	.planListView {
		border-top: 1rpx solid #eee;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
		background-image: url('../../static/image/car-insure/planback.png');
		background-size: 100% 100%;

		.companyLogo {
			width: 40rpx;
			height: 40rpx;
		}

		.companyName {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}

		.status-tag {
			width: 80rpx;
			height: 40rpx;
			background: #FFEAEE;
			border-radius: 20rpx 20rpx 20rpx 0rpx;
			font-size: 24rpx;
			color: #FF5174;
			font-weight: bold;
		}

		.content-body {
			gap: 20rpx;

			.selectItem {
				padding: 9rpx 24rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #eee;
				font-size: 30rpx;
				color: #333;
			}

			.itemactive {
				position: relative;
				border: 1px solid #FDE935;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				background-color: rgba(253, 233, 53, 0.15);

				&::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;
					/* 确保对勾在三角形上方 */
				}

			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 55rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		.btn {
			min-width: 0;
			flex: auto;
			background: #FDE935;
			border: 1rpx solid #FDE935;
			padding: 18rpx 0;
			box-sizing: border-box;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
		}

		//操作按钮特殊样式
		.btns {
			background: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			padding: 18rpx 0;
			box-sizing: border-box;
		}
	}
</style>