zhapp/pages/quote/quoteRecordDetail.vue

<template>
	<view class="page">
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="报价详情" background="#fff" :isSlot="false" :rightSlot="true">
				<template #rightSlot>
					<!-- #ifndef APP-PLUS -->
					<view class="dis f-c a-c mr-3" @click="getWechatCustomer">
						<image src="/static/icon/customerService.png" mode="" style="width: 48rpx;height: 48rpx;">
						</image>
						<text style="font-size: 20rpx;color: #333;">客服</text>
					</view>
					<view class="dis f-c a-c " @click="share">
						<image src="/static/icon/share.png" mode="" style="width: 48rpx;height: 48rpx;"></image>
						<text style="font-size: 20rpx;color: #333;">分享</text>
					</view>
					<!-- #endif -->
				</template>
			</uni-NavBar>
		</u-sticky>
		<view class="content">
			<view class="transfer dis j-s f-wrap">
				<view class="item dis a-c j-s">
					<text>是否过户车</text>
					<text>{{carInfoVo.transfer?'是':'否'}}</text>
				</view>
				<view class="item dis a-c j-s">
					<text>商业险是否过户</text>
					<text>{{carInfoVo.biTransfer?'是':'否'}}</text>
				</view>
				<view class="item mt-3 dis a-c j-s">
					<text>报价车型</text>
					<text>{{carInfoVo.engineNo}}/{{carInfoVo.brandName}}/
						{{carInfoVo.displacement}}/{{carInfoVo.seatCount}}/{{carInfoVo.purchasePrice}}</text>
				</view>
				<!-- 额外信息 -->
				<view class="Attachment dis a-c j-s mt-3">
					<view class="mediaFiles dis f-c " @click="mediaFiles">
						<image src="/static/image/car-insure/mediaFiles.png" mode=""></image>
						<text class="title">影像资料</text>
						<text class="mt-1 smallText ">{{imageVoList.length}}张</text>
					</view>
					<view class="specialTerms dis f-c " @click="specialTerms">
						<image src="/static/image/car-insure/specialTerms.png" mode=""></image>
						<text class="title">特别约定</text>
						<text class="mt-1 smallText">{{specialTermsText()}}</text>
					</view>
				</view>
			</view>
			<!--客户权益 -->
			<view class="customerRights" v-if="insFeeOrders && insFeeOrders.availableAmount">
				<view class="header  dis a-c j-s mb-2">
					<text>客户权益</text>
					<view class="btn" @click="selectedBenefits">
						选择权益
					</view>
				</view>
				<text class=" customerRights-content">可用{{insFeeOrders.availableAmount}}元购买服务赠送客户</text>
			</view>
			<view class="view " :class="{ 'collapsed': !isExpanded1 }">
				<view class="header-title">基本信息</view>
				<view class="items dis f-c " id="basicInfo">
					<view class="item dis a-c j-s">
						<text>车牌号</text>
						<text>{{carInfoVo.licenseNo}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>车架号</text>
						<text>{{carInfoVo.vinNo}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>品牌型号</text>
						<text>{{carInfoVo.brandName}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>发动机号</text>
						<text>{{carInfoVo.engineNo}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>使用性质</text>
						<text>{{carInfoVo1.carNatureCode}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>车辆类型</text>
						<text>{{carInfoVo1.carTypeCode}} </text>
					</view>
					<view class="item dis a-c j-s">
						<text>车辆用途</text>
						<text>{{carInfoVo1.vehicleUseCode}} </text>
					</view>
					<view class="item dis a-c j-s">
						<text>车辆种类</text>
						<text> {{carInfoVo1.carKindCode}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>能源种类</text>
						<text>{{carInfoVo1.energyTypeCode}} </text>
					</view>
					<view class="item dis a-c j-s">
						<text>注册日期</text>
						<text>{{carInfoVo.registerDate}} </text>
					</view>
					<view class="item dis a-c j-s">
						<text>发证日期</text>
						<text> {{carInfoVo.issueDate}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>是否过户</text>
						<text>{{carInfoVo.transfer?'是':'否'}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>商业险是否过户</text>
						<text>{{carInfoVo.biTransfer?'是':'否'}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>年款</text>
						<text> {{carInfoVo.carYear}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>座位数</text>
						<text> {{carInfoVo.seatCount}}座</text>
					</view>
					<view class="item dis a-c j-s">
						<text>整备质量</text>
						<text> {{carInfoVo.completeKerbMass}}kg</text>
					</view>
					<view class="item dis a-c j-s">
						<text>排量</text>
						<text>{{carInfoVo.displacement}}L</text>
					</view>
					<view class="item dis a-c j-s">
						<text>功率</text>
						<text> {{carInfoVo.powerScale}}kw</text>
					</view>
					<view class="item dis a-c j-s">
						<text>新车购置价</text>
						<text>{{carInfoVo.purchasePrice}}元 </text>
					</view>
					<u-gap height="5" bgColor="#F8F8F8"></u-gap>
					<!-- 车主信息 -->
					<view class="userinfo">
						<view class="userinfo-header dis a-c ">
							<view class="tag"></view>
							<text>车主信息</text>
						</view>
						<view class="content dis f-c ">
							<view class="item dis a-c j-s">
								<text>姓名</text>
								<text>{{ownersInfo.name}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>手机号</text>
								<text>{{ownersInfo.mobile}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>证件号</text>
								<text>{{ownersInfo.identifyNumber}}</text>
							</view>
							<view class="item dis a-start j-s">
								<text>地址</text>
								<text>{{ownersInfo.addr}}</text>
							</view>
						</view>
					</view>
					<u-gap height="5" bgColor="#F8F8F8"></u-gap>
					<!-- 投保人信息 -->
					<view class="userinfo">
						<view class="userinfo-header dis a-c ">
							<view class="tag"></view>
							<text>投保人信息</text>
						</view>
						<view class="content dis f-c ">
							<view class="item dis a-c j-s">
								<text>姓名</text>
								<text>{{policyHolderInfo.name}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>手机号</text>
								<text>{{policyHolderInfo.mobile}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>证件号</text>
								<text>{{policyHolderInfo.identifyNumber}}</text>
							</view>
							<view class="item dis a-start j-s">
								<text>地址</text>
								<text>{{policyHolderInfo.addr}}</text>
							</view>
						</view>
					</view>
					<u-gap height="5" bgColor="#F8F8F8"></u-gap>
					<!-- 被保人信息 -->
					<view class="userinfo">
						<view class="userinfo-header dis a-c ">
							<view class="tag"></view>
							<text>被保人信息</text>
						</view>
						<view class="content dis f-c ">
							<view class="item dis a-c j-s">
								<text>姓名</text>
								<text>{{insuredPersonInfo.name}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>手机号</text>
								<text>{{insuredPersonInfo.mobile}}</text>
							</view>
							<view class="item dis a-c j-s">
								<text>证件号</text>
								<text>{{insuredPersonInfo.identifyNumber}}</text>
							</view>
							<view class="item dis a-start j-s">
								<text>地址</text>
								<text>{{insuredPersonInfo.addr}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 查看更多 -->
				<view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded1')"
					:style="{position:isExpanded1?'relative':'absolute'}">
					<text>查看更多</text>
					<image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded1?180:0}deg)`}"></image>
				</view>
			</view>
			<!-- 保费因素 -->
			<view class="view " :class="{ 'collapsed': !isExpanded2 }">
				<view class="header-title"
					style="background: linear-gradient( 180deg, #F9F6FF 0%, #FFFFFF 100%);border-color: #E3D5FF;">保费因素
				</view>
				<view class="items dis f-c " id="premiumFactor">
					<view class="item dis a-c j-s" v-if="scoreVo.score">
						<text>评分</text>
						<text>{{scoreVo.score}}</text>
					</view>
					<view class="item dis a-c j-s">
						<text>交强险系数</text>
						<text></text>
					</view>
					<view class="item dis a-c j-s">
						<text class="mr-2">商业险系数</text>
						<view class="dis a-c ">
							<u--input border="surround"
								:customStyle="{background:'rgba(253,233,53,0.05)',borderColor:'#FDE935 !important',padding:'4rpx 18rpx',pointerEvents: 'none',width:'250rpx'}"
								v-model="scoreVo.syScore" disabled disabledColor='rgba(253,233,53,0.05)'></u--input>
							<view class="colorBlock dis a-c j-c " @tap="updateDiscountShow=true">
								<image :src="editimg" mode=""></image>
							</view>
						</view>

					</view>
					<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 class="item dis a-start j-s" v-for="(item,index) in scoreVo.scoreJson" :key="index">
						<text>{{item.scoreName}}</text>
						<text>{{item.score}}</text>
					</view>
				</view>
				<!-- 查看更多 -->
				<view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded2')"
					:style="{position:isExpanded2?'relative':'absolute'}">
					<text>查看更多</text>
					<image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded2?180:0}deg)`}"></image>
				</view>
			</view>
			<!-- 报价方案 -->
			<view class="view " :class="{ 'collapsed': !isExpanded3 }">
				<view class="header-title"
					style="background: linear-gradient( 180deg, #FFF8F8 0%, #FFFFFF 100%);border-color: #FFD9D9;">报价方案
				</view>
				<view class="items dis f-c " id="quotationScheme">
					<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="vvTaxDetailsShow=true">
								{{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">{{item.amount}}</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.unitAmount}}次</text>
							<text v-else class="td">{{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>
				<!-- 查看更多 -->
				<view class="loadMore dis a-c j-c" @click="toggleExpand('isExpanded3')"
					:style="{position:isExpanded3?'relative':'absolute'}">
					<text>查看更多</text>
					<image :src="doubleArrowimg" mode="" :style="{transform:`rotate(${isExpanded3?180:0}deg)`}"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<!-- 待核保 -->
			<view class="orderAction dis a-c j-s ">
				<view class=" dis f-c a-c j-c">
					<view class=" totalPrice dis a-end ">
						<text>￥</text>
						<text>{{costs.sumPremium || 0 }}</text>
					</view>
					<text class="feeEntry" @click="getfeeEntry">费用信息</text>
				</view>
				<view class="dis a-c j-s" v-if="isFromShare!='share'">
					<view class="btn btns dis a-c j-c " @click="home">
						投保其他车辆
					</view>
					<view class="btn dis a-c j-c " @click=" applyUnderwriting">
						申请核保
					</view>
				</view>
			</view>
		</view>
		<!-- 系数修改弹窗 -->
		<uni-Popup :show="updateDiscountShow" @close="updateDiscountShow=false" :closeable="false"
			headerTitle="商业险折扣系数修改" overflow="auto" :headerStyle="{fontSize:'36rpx'}" maxHeight="980rpx" mode="center"
			width="90%">
			<template #content>
				<view class="updateDiscount">
					<text class="text ">商业险折扣系数和自主定价系数只能修改一个，修改后系统会重新报价，计算修改后的保费</text>
					<u-radio-group v-model="updateDiscountSValue" placement="column" class="mt-3 " activeColor="#FDE935"
						iconColor='#333'>
						<u-radio label="明月几时有" style="align-items: baseline;">
							<view class="dis f-c " style="width: 100%;">
								<view class="dis a-start input mb-1">
									<text>商业险折扣系数</text>
									<text>(0.8521252)</text>
								</view>
								<u--input placeholder="请输入内容" clearable></u--input>
							</view>

						</u-radio>
						<u-radio label="明月几时有" class="mt-3" style="align-items: baseline;">
							<view class="dis f-c " style="width: 100%;">
								<view class="dis a-c input mb-1">
									<text>自主定价系数</text>
									<text>(0.8)</text>
								</view>
								<u--input disabled placeholder="输入1—100的数字" clearable></u--input>
							</view>

						</u-radio>
					</u-radio-group>
					<view class="btn dis mt-3">
						<u-button class="mr-2" type="primary" shape="circle" :plain="true" text="关闭" color="#DDDDDD"
							@click="updateDiscountShow=false" :customStyle="{color:'#333'}"></u-button>
						<u-button type="primary" shape="circle" text="确定" color="#FDE935"
							:customStyle="{color:'#1f1f1f'}"></u-button>
					</view>
				</view>
			</template>
		</uni-Popup>

		<!-- 费用信息展示弹窗 -->
		<uni-Popup :show="feeEntryInfoShow" @close="feeEntryInfoShow=false" :closeable="false" headerTitle="费用信息"
			overflow="auto" :headerStyle="{fontSize:'36rpx'}" maxHeight="980rpx" mode="center" width="90%">
			<template #content>
				<view class="feeEntryClass" v-if="insFeeOrders">
					<view class="dis a-start j-s  data-view">
						<text class="title">交强险</text>
						<view class="dis f-c discount">
							<view class="dis a-c j-s">
								<text>保费:</text>
								<text class="dis j-end a-c">￥{{insFeeOrders.jqPremium}}</text>
							</view>
							<view class="dis a-c  j-s">
								<text>优惠:</text>
								<text class="font-weight dis j-end a-c">￥{{insFeeOrders.jqPayablePremium}}</text>
							</view>
						</view>
					</view>
					<view class="dis a-start j-s data-view">
						<text class="title">商业险</text>
						<view class="dis f-c discount">
							<view class="dis a-c j-s">
								<text>保费:</text>
								<text class="dis j-end a-c">￥{{insFeeOrders.syPremium}}</text>
							</view>
							<view class="dis a-c j-s">
								<text>优惠:</text>
								<text class="font-weight dis j-end a-c">￥{{insFeeOrders.syPayablePremium}}</text>
							</view>
						</view>
					</view>
					<view class="dis a-start j-s data-view">
						<text class="title">驾意险</text>
						<view class="dis f-c discount">
							<view class="dis a-c j-s">
								<text>保费:</text>
								<text class="dis j-end a-c">￥{{insFeeOrders.jyPremium}}</text>
							</view>
							<view class="dis a-c j-s">
								<text>优惠:</text>
								<text class="font-weight dis j-end a-c">￥{{insFeeOrders.jyPayablePremium}}</text>
							</view>
						</view>
					</view>
					<view class="discountTotal dis a-c j-s ">
						<text class="name">优惠总计</text>
						<text class="sum">￥{{insFeeOrders.totalPayablePremium}}</text>
					</view>
					<view class="footer-btn dis a-c j-c" @click="feeEntryInfoShow=false">
						关闭
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 车船税信息弹窗 -->
		<uni-Popup :show="vvTaxDetailsShow" @close='vvTaxDetailsShow=false' headerTitle="车船税" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="vvTaxDetails-cell dis f-c ">
					<view class="cell-item dis a-c j-s">
						<text>车船税</text>
						<text>{{taxRelifFlagName}}</text>
					</view>
					<template>
						<view class="cell-item dis a-c j-s"
							v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3">
							<text>减免税凭证号</text>
							<text>{{vehicleAndVesselTaxVo.extendChar2}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag == 4">
							<text>完税凭证号</text>
							<text>{{vehicleAndVesselTaxVo.paidFreeCertificate}}</text>
						</view>
						<view class="cell-item dis a-c j-s"
							v-if="vehicleAndVesselTaxVo.taxRelifFlag == 2 || vehicleAndVesselTaxVo.taxRelifFlag == 3">
							<text>减免税原因</text>
							<text>{{vehicleAndVesselTaxVo.relifReason}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag == 3">
							<text>减税比例</text>
							<text>{{vehicleAndVesselTaxVo.taxRelief}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag !=1">
							<text>税务机关代码</text>
							<text>{{vehicleAndVesselTaxVo.taxComCode}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag !=1">
							<text>税务机关名称</text>
							<text>{{vehicleAndVesselTaxVo.taxComName}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag ==4">
							<text>完税凭证填发日期</text>
							<text>{{vehicleAndVesselTaxVo.taxDocumentDate}}</text>
						</view>
						<view class="cell-item dis a-c j-s" v-if="vehicleAndVesselTaxVo.taxRelifFlag ==4">
							<text>完税凭证地区</text>
							<text>{{vehicleAndVesselTaxVo.taxPaidAreaCode}}</text>
						</view>
					</template>
				</view>
			</template>
		</uni-Popup>
		<!-- 优惠方式弹窗 -->
		<uni-Popup :show="discountMethodShow" @close='discountMethodShow=false' headerTitle="选择优惠方式" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="discountMethod-cell dis f-c " v-if="insFeeOrders && insFeeOrders.availableAmount">
					<view class="item dis f-c a-start" @click="selectedBenefits">
						<text class="title mb-1">客户权益</text>
						<text>当前客户出单后，可赠送客户价值 <text class="price"
								v-if="insFeeOrders.availableAmount">{{insFeeOrders.availableAmount}}</text> 的权益礼包</text>
					</view>
					<view class="item dis f-c a-start" @click="discountMethodShow=false,underwritingShow=true">
						<text class="title mb-1">现金优惠</text>
						<text>选择为当前客户最多优惠<text class="price"
								v-if="insFeeOrders.totalExportPremium">{{insFeeOrders.totalExportPremium}}</text>元</text>
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 确认核保提示 -->
		<uni-PopupMessage :show="underwritingShow" @close='underwritingShow=false' @cancelEvent='underwritingShow=false'
			@confirmEvent="underwritingEvent">
			<template #content>
				<view class="dis a-c j-c ">
					是否确认提交核保
				</view>
			</template>
		</uni-PopupMessage>
		<!-- 右上角分享功能 -->
		<uni-share :show="shareShow" @close="shareShow=false" @weixin="weixin" @userSmsShare="userSmsShare"
			@copyLink="copyLink" @saveToAlbum="saveToAlbum" @closeModal="shareShow = false">
		</uni-share>
		<!-- 自定义加载动画 -->
		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
	</view>
</template>
<script>
	import {
		turnBase64Image,
		dictionaryMatch
	} from '@/plugins/utils.js';
	import Mixin from './Mixin.js';
	export default {
		mixins: [Mixin], // 注入 Mixin
		data() {
			return {
				discountMethodShow: false, //选择优惠方式弹窗
				feeEntryInfoShow: false, //费用信息弹窗
				updateDiscountSValue: "",
				insCompanyVo: {}, //保险公司信息
				updateDiscountShow: false, //折扣系数修改弹窗
				underwritingShow: false, //核保弹窗
				loadingShow: false, //加载
				loadingText: '加载中', //加载提示文字
				shareShow: false, //分享弹窗
				doubleArrowimg: "", //箭头图片
				editimg: "", //编辑
				premiumFactorHeight: 0,
				basicInfoHeight: 0,
				quotationSchemeHeight: 0,
				collapsedHeight: 258,
				isExpanded1: false, //展开收起
				isExpanded2: false, //展开收起
				isExpanded3: false, //展开收起
				carInfoVo: {}, //车辆信息
				carInfoVo1: {}, //车辆信息
				ownersInfo: {}, //车主信息
				policyHolderInfo: {}, //投保人信息
				insuredPersonInfo: {}, //被保人信息
				scoreVo: {}, //保费因素
				costs: {}, //报价金额信息
				salesmanInfo: {}, //业务员信息
				kindInfoVo: [], //商业险险别
				accidentalDrivings: [], //驾意险列表
				imageVoList: [],
				vvTaxDetailsShow: false, //车船税展示弹窗
				//车船税form

				//字典
				car_nature_codeoptions: [], //使用性质
				vehicle_use_code01options: [], //营业
				vehicle_use_code02options: [], //非营业
				car_kind_codeoptions: [], //车辆种类
				energy_type_codeoptions: [], //能源类型
				car_type_codeoptions: [], //车辆类型
				car_tax_codeoptions: [], //车船税类型
				taxpayerIdentifieroptions: [], //车船税类型
				car_tax_reason_codeoptions: [], //减免税原因
				// 影像信息
				modificationFlag: false, //影像修改标识
				specialInfoVo: [], //已选特约
				insFeeOrders: {}, //费用信息
				insOrderRightsInfoVo: {}, //权益信息
				insOrderRightsInfoDto: null, //权益参数
				isFromShare: "",
				feeNoDescription: "",
			}
		},
		onShow() {
			console.log(this.insOrderRightsInfoDto);
		},
		async onLoad(options) {
			this.loadingShow = true;
			try {
				this.isFromShare = options.from;
				await this.getDicType("car_tax_code"); //车船税类型
				await this.getDicType("taxpayerIdentifier"); //纳税人证件类型
				await this.getDicType("car_tax_reason_code"); //减免税原因代码
				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"); //车辆类型
				await this.details(options.ordersNo); //详情接口
				this.loadingShow = false;
				const query = uni.createSelectorQuery();
				query.select('#basicInfo').boundingClientRect((rect) => {
					this.basicInfoHeight = rect.height; // 获取元素高度
				}).exec();
				query.select('#premiumFactor').boundingClientRect((rect) => {
					this.premiumFactorHeight = rect.height; // 获取元素高度
				}).exec()
				query.select('#quotationScheme').boundingClientRect((rect) => {
					this.quotationSchemeHeight = rect.height; // 获取元素高度
				}).exec()
			} catch (error) {
				this.loadingShow = false;
			}

		},
		async mounted() {
			this.doubleArrowimg = await turnBase64Image('/static/image/doubleArrow.png');
			this.editimg = await turnBase64Image('/static/icon/edit.png')
		},
		computed: {
			//获取车船税类型
			taxRelifFlagName() {
				let info = this.car_tax_codeoptions.find(ele => ele.value === this.vehicleAndVesselTaxVo.taxRelifFlag)
				return info?.description;
			},
			//报价年份
			quoteYear() {
				const year = this.order.createTime.slice(0, 4);
				return year;
			},

		},
		methods: {
			// 查看费用信息
			getfeeEntry() {
				if (!this.insFeeOrders) {
					uni.showToast({
						duration: 10000,
						icon: 'none',
						title: this.feeNoDescription || '未匹配到费用'

					})
				} else {
					this.feeEntryInfoShow = true;
				}
			},
			// 选择权益
			selectedBenefits() {
				this.discountMethodShow = false;
				let params = {
					ownersInfo: this.ownersInfo, //车主
					policyHolderInfo: this.policyHolderInfo, //投保人
					insuredPersonInfo: this.insuredPersonInfo, //被保人
					insFeeOrders: this.insFeeOrders, //费用信息
					ordersNo: this.ordersNo,
					insOrderRightsInfoVo: this.insOrderRightsInfoDto, //权益信息
				}
				uni.navigateTo({
					url: '/pages/reward/customerBenefit?info=' + JSON.stringify(params)
				})
			},
			specialTermsText() {
				if (['资金财险', '华泰财险', '国任财险'].includes(this.companyName)) {
					return '点击选择'
				} else {
					return "暂不支持"
				}
			},
			// 补传影像
			async uploadRetry() {
				const mergedArray = [...this.carImageListId, ...this.ownerImageListId, ...this
					.policyHolderImageListId, ...this.insuredPersonImageListId
				];
				if (mergedArray.length > 0) {
					await this.$http.post('/unify/order/imageSave', {
						imageList: mergedArray,
						quoteNo: this.quoteNo,
					})
				}
			},
			applyUnderwriting() {
				if (this.insFeeOrders?.availableAmount && !this.insOrderRightsInfoDto) {
					this.discountMethodShow = true;
				} else {
					this.underwritingShow = true
				}
			},
			//调用核保接口
			async underwritingEvent() {
				if (this.loadingShow) {
					return; //防重入：loading期间忽略重复触发
				}
				this.underwritingShow = false; //关闭弹窗
				this.loadingText = "核保中";
				this.loadingShow = true; //加载loading
				if (this.modificationFlag) {
					// 修改影像后，补传影像
					await this.uploadRetry();
				}
				let images = await this.$http.post('/unify/order/imagesUpload', {
					order: {
						ordersNo: this.order.ordersNo,
						quoteNo: this.order.quoteNo
					},
					imageVoList: [...this.carImageListId, ...this.ownerImageListId, ...this
						.policyHolderImageListId, ...this.insuredPersonImageListId
					]

				}); //影像提交保险公司
				if (images.code == '200') { //核保
					// specialAppointmentsVos=[]   特约
					let underwriting = await this.$http.post('/unify/order/underwriting', {
						order: {
							ordersNo: this.ordersNo,
						},
						insOrderRightsInfoDto: this.insOrderRightsInfoDto,
					});
					if (underwriting.code == '200') {
						let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + this.ordersNo);
						if (res.code == '200') {
							this.orderStatus = res.data.order.orderStatus; //订单状态
							// 状态为人工处理跳转页面
							if (this.orderStatus == 3) {
								uni.navigateTo({
									url: '/pages/quote/manualUnderwritingPage?Info=' + JSON.stringify(res
										.data),
								})
							}
						}
						this.loadingShow = false;
						uni.showToast({
							icon: 'none',
							title: '核保成功'
						})
						// 核保成功后查询支付码并跳转支付码页面
						if (this.orderStatus != 3) { //人工处理已跳转，不再查询支付码
							await this.queryPaymentCode();
						}
					} else {
						this.loadingShow = false;
						uni.showToast({
							icon: 'none',
							duration: 10000,
							title: underwriting.msg
						})
					}
				} else {
					this.loadingShow = false;
					uni.showToast({
						icon: 'none',
						title: images.msg
					})
				}
			},
			//查询支付码并跳转（含延时过渡与异常兜底）
			async queryPaymentCode() {
				this.loadingText = "查询支付码中";
				this.loadingShow = true;
				try {
					const preDelay = 1000; //查询前loading「查询支付码中」展示时长(毫秒)
					const navDelay = 1000; //成功后「正在前往支付页面」展示时长(毫秒)
					// 查询前：loading「查询支付码中」转1秒再请求接口
					await new Promise(resolve => setTimeout(resolve, preDelay));
					let qrCode = await this.$http.get('/order/qrCode/getQrCode?orderNo=' + encodeURIComponent(this
						.ordersNo));
					if (qrCode.code == '200') {
						// 成功后：loading文字改为"正在前往支付页面"，再转1秒后跳转
						this.loadingText = "正在前往支付页面";
						await new Promise(resolve => setTimeout(resolve, navDelay));
						this.loadingShow = false;
						uni.navigateTo({
							url: '/pages/quote/paymentCode?ordersNo=' + encodeURIComponent(this.ordersNo),
						})
					} else {
						this.loadingShow = false;
						uni.showToast({
							icon: 'none',
							title: qrCode.msg
						})
					}
				} catch (error) {
					this.loadingShow = false;
					uni.showToast({
						icon: 'none',
						title: '支付码查询失败'
					})
				}
			},
			//影像资料
			mediaFiles() {
				uni.navigateTo({
					url: "/pages/quote/imageGalleryPage?quoteNo=" + this.quoteNo,
				})
			},
			//特别约定
			specialTerms() {
				uni.navigateTo({
					url: "/pages/quote/specialAgreementPage?companyId=" + this.insCompanyVo.id + '&productId=' +
						this.order.productId +
						'&specialInfoVo=' + JSON.stringify(this.specialInfoVo),
				})
			},
			//分享微信
			weixin() {
				// #ifdef APP-PLUS

				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: this.$base.h5BaseUrl +
						`/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`,
					title: `${this.companyName}${this.quoteYear}年的车险报价`,
					summary: `${this.companyName}报价完成，保费：${this.costs.sumPremium}元，点击查看详情`,
					imageUrl: "/static/image/zgcx.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: "请到App中操作"
				})
				// #endif
			},
			//短信分享
			userSmsShare() {
				// #ifdef APP-PLUS
				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
				msg.to = [this.policyHolderInfo.name]; //投保人手机号
				msg.body =
					`【${this.salesmanInfo.systemShortName}】尊敬的【${this.carInfoVo.licenseNo}】车主，${this.companyName}${this.quoteYear}年车险报价：${this.costs.sumPremium}元；联系人：${this.salesmanInfo.name} ${this.salesmanInfo.mobile}，点击链接查看详情或电话咨询联系人${this.$base.h5BaseUrl + `/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`}`;
				plus.messaging.sendMessage(msg);
				// #endif
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: "请到App中操作"
				})
				// #endif
			},
			//复制链接
			copyLink() {
				uni.setClipboardData({
					data: this.$base.h5BaseUrl +
						`/#/pages/quote/quoteRecordDetail?ordersNo=${this.ordersNo}&from=share`, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '链接已复制'
						})
					}
				});
			},
			//数据字典
			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;
				}
			},
			//数字格式化
			convertedValue(num) {
				if (!num) {
					return "-";
				}
				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) + '亿';
				}
			},
			async details(orderno) {
				let res = await this.$http.get('/supplementOrder/getOrderDetail?ordersNo=' + orderno);
				if (res.code == 200) {
					this.orderStatus = res.data.order.orderStatus; //订单状态
					this.companyName = res.data.order.companyName; //保险公司简称
					this.insCompanyVo = res.data.insCompanyVo[0]; //保险公司信息
					this.ordersNo = res.data.order.ordersNo; //订单号
					this.quoteNo = res.data.order.quoteNo; //报价号
					this.ciRiskInfoVo = res.data.ciRiskInfoVo; //交强大类
					this.biRiskInfoVo = res.data.biRiskInfoVo; //商业大类
					this.costs = res.data.costs; //报价金额信息
					this.policy = res.data.policy; //保单号信息
					this.kindInfoVo = res.data.kindInfoVo; //商业险险别
					this.accidentalDrivings = res.data.accidentalDrivings; //驾意险
					this.carInfoVo = res.data.carInfoVo; //车辆信息
					this.ownersInfo = res.data.ownersInfo; //车主信息
					this.policyHolderInfo = res.data.policyHolderInfo; //投保人信息
					this.insuredPersonInfo = res.data.insuredPersonInfo; //被保人信息
					this.scoreVo = res.data.scoreVo; //保费因素
					this.vehicleAndVesselTaxVo = res.data.vehicleAndVesselTaxVo; //车船税信息
					this.salesmanInfo = res.data.salesmanInfo; //业务员信息
					this.insFeeOrders = res.data.insFeeOrders; //费用信息
					this.feeNoDescription = res.data.feeNoDescription; //未匹配费用提示信息
					this.insOrderRightsInfoVo = res.data.insOrderRightsInfoVo; //权益详情
					this.imageVoList = res.data.imageVoList;
					this.order = res.data.order;
					this.imageEcho(res.data.imageVoList) // 影像获取完毕
					// 去掉this.kindInfoVo中的交强险
					this.kindInfoVo = this.kindInfoVo.filter(item => item.kindCode != 'J1')
					this.carInfoVo1.carNatureCode = dictionaryMatch(this.car_nature_codeoptions, res
						.data.carInfoVo
						.carNatureCode)
					if (res.data.carInfoVo.carNatureCode == '01') {
						this.carInfoVo1.vehicleUseCode = dictionaryMatch(this
							.vehicle_use_code01options,
							res.data
							.carInfoVo
							.vehicleUseCode)
					} else {
						this.carInfoVo1.vehicleUseCode = dictionaryMatch(this
							.vehicle_use_code02options,
							res.data
							.carInfoVo
							.vehicleUseCode)
					}
					this.carInfoVo1.carTypeCode = dictionaryMatch(this.car_type_codeoptions, res.data
						.carInfoVo
						.carTypeCode)
					this.carInfoVo1.carKindCode = dictionaryMatch(this.car_kind_codeoptions, res.data
						.carInfoVo
						.carKindCode)
					this.carInfoVo1.energyTypeCode = dictionaryMatch(this.energy_type_codeoptions, res
						.data
						.carInfoVo
						.energyTypeCode)

				}
			},
			//右上角分享
			share() {
				this.shareShow = true;
			},
			toggleExpand(name) {
				this[name] = !this[name];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		background-color: #F8F8F8;
		box-sizing: border-box;
	}



	.content {
		padding: 20rpx 30rpx 186rpx;
		box-sizing: border-box;

		//过户信息
		.transfer {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;

			.item {
				width: 50%;

				text:first-child {
					width: 80%;
					font-size: 28rpx;
					color: #666;
				}

				text:last-child {
					width: 20%;
					font-size: 28rpx;
					color: #333;
				}
			}

			.item:nth-child(3) {
				width: 100%;

				text:first-child {
					width: 25%;
					font-size: 28rpx;
					color: #666;
				}

				text:last-child {
					width: 75%;
					font-size: 28rpx;
					color: #333;
				}
			}

			.Attachment {
				width: 100%;

				>view {
					position: relative;
					width: 50%;
					padding: 16rpx 30rpx;
					box-sizing: border-box;
					background-color: #1F1F1F;

					image {
						width: 108rpx;
						height: 108rpx;
						position: absolute;
						top: 0;
						right: 0;
					}

					.title {
						font-size: 30rpx;
						font-weight: 400;
						color: #333;
					}

					.smallText {
						font-size: 24rpx;
						color: #999;
					}
				}

				>view:first-child {
					background: linear-gradient(180deg, #FFF6EB 0%, #FFFCF3 100%);
					border-radius: 15rpx;
					margin-right: 18rpx;
				}

				>view:last-child {
					background: linear-gradient(180deg, #E7FDF8 0%, #F6FFFD 100%);
					border-radius: 15rpx;
				}
			}
		}

		//内容区域
		.view {
			position: relative;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 20rpx;

			//头部背景
			.header-title {
				padding: 20rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, #FFFCEA 0%, #FFFFFF 100%);
				border-radius: 20rpx 20rpx 0 0;
				border-top: 1rpx solid #FFE1A4;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

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

				.item {
					margin-bottom: 30rpx;

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

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

				.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;
					}
				}
			}

		}


	}

	.userinfo {
		margin-top: 24rpx;

		.userinfo-header {
			font-weight: bold;
			font-size: 30rpx;
			color: #333;

			.tag {
				width: 6rpx;
				height: 30rpx;
				background: #FDE935;
				border-radius: 0rpx 6rpx 6rpx 0rpx;
				margin-right: 6rpx;
			}
		}

		.content {
			padding: 20rpx 0;
			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;
					width: 75%;
					text-align: right;
				}
			}
		}
	}

	//查看更多
	.loadMore {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(0, #fff 0%, rgba(255, 255, 255, 0.9) 100%);

		text {
			font-size: 28rpx;
			color: #999;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
			transition: transform 0.5s;
			/* 添加过渡效果 */
		}
	}

	//车船税
	.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;
	}

	//默认高度
	.collapsed {
		max-height: 516rpx;
		/* 露出部分的高度 */
	}

	// 车船税弹窗
	.vvTaxDetails-cell {
		padding: 40rpx;
		box-sizing: border-box;

		.cell-item {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 30rpx;

			text:last-child {
				font-weight: bold;
			}
		}

		.cell-item:last-child {
			margin-bottom: 0;
		}
	}

	//底部样式
	.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);

		.totalPrice {
			text {
				font-size: 28rpx;
				color: #FF540A;
				font-weight: bold;
			}

			text:last-child {
				font-size: 42rpx;
				font-weight: bold;
			}
		}

		.feeEntry {
			font-size: 24rpx;
			color: #FFAC1D;
			cursor: pointer;
		}

		.btn {
			background: #FDE935;
			padding: 25rpx 30rpx;
			box-sizing: border-box;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 30rpx;
			color: #1F1F1F;
			font-weight: bold;
			margin: 0 10rpx;
		}

		//操作按钮特殊样式
		.btns {
			background: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			padding: 22rpx 30rpx;
		}
	}

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

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

	// 商业险折扣系数样式
	.updateDiscount {
		padding: 40rpx;
		box-sizing: border-box;

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

		.input {
			font-size: 32rpx;
			color: #333;

			text:last-child {
				color: #999;
				margin-left: 10rpx;

			}
		}

		.btn {}
	}

	.feeEntryClass {
		padding: 0 40rpx 40rpx;
		box-sizing: border-box;

		.data-view {
			padding: 20rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

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

			.discount {
				width: 45%;

				>view {
					text:first-child {
						font-size: 28rpx;
						color: #999;
					}

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


			}
		}

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

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

			.sum {
				font-size: 32rpx;
				color: #FF540A;
				font-weight: bold;
			}
		}

		.footer-btn {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background: rgba(253, 233, 53, 0.1);
			border-radius: 45rpx 45rpx 45rpx 45rpx;
			border: 1rpx solid #FDE935;
			margin-top: 20rpx;
		}

	}

	.customerRights {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 0;

		.header {
			text {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
			}

			.btn {
				padding: 8rpx 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #1F1F1F;
				background: #FDE935;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}

		.customerRights-content {
			font-size: 28rpx;
			color: #666;
		}
	}

	.discountMethod-cell {
		padding: 14rpx 30rpx 44rpx;
		box-sizing: border-box;

		.item {
			padding: 16rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

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

				.price {
					font-size: 30rpx;
					color: #FF540A;
				}
			}


		}
	}
</style>