partnerApp/pages/carInsure1/quoteDetail1.vue

<template>
	<view :style="getHeight" style="background-color: #F5F5F5;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部 -->
		<view class="carInfo  w-100 p-3 box-sizing">
			<view class="d-flex mb-1">
				<view class="topLeft d-flex flex-1 flex-column">
					<view class="license">{{this.licenseNo}} | {{carInfo.modelcname}}</view>
					<view class="totalMoney">￥{{sumPermium}}</view>
				</view>
				<view class="topRight d-flex a-center j-center">
					<image :src="icon" mode="aspectFit" lazy-load></image>
				</view>
			</view>
			<view class="other d-flex j-sb px-3">
				<view class="d-flex flex-1 a-center">
					<view class="privilege d-flex a-center j-center flex-shrink px-2">特权</view>
					<view class="content">每月自动查违章，无违章领奖励</view>
				</view>
				<view class="flex-shrink icon iconfont icon-youjiantou d-flex a-center font-sm"></view>
			</view>
		</view>
		<view>
			<view class="welfare">
				<view class="header d-flex a-center j-sb">
					<view class="title">投保享福利</view>
					<view class="icon iconfont icon-youjiantou d-flex a-center" style="font-size: 24upx;"></view>
				</view>
				<view class="body d-flex">
					<view class="welfareItem">
						<view class="name">2次体检服务</view>
						<view class="content">八项检查：血常规，尿常规，心电图等</view>
					</view>
					<view class="welfareItem">
						<view class="name">2次体检服务</view>
						<view class="content">八项检查：血常规，尿常规，心电图等</view>
					</view>
				</view>
			</view>

			<view class="quotePlan">
				<view class="header d-flex a-center j-sb">
					<view class="title">报价方案</view>
					<template v-if="((orderstatus == 0) ||(orderstatus == 3)) && (!!token)">
						<view class="adjustPlan" @tap="toInsureItems">调整方案</view>
					</template>
				</view>

				<view class="body">
					<view class="insurance">
						<block v-for="(item,index) in riskList" :key="index">
							<template v-if="item.riskCode=='0507'">
								<view class="row d-flex a-center j-sb">
									<view class="d-flex a-center">交强险 <view class="date">起保日期：{{orderInfo.jqstartdate}}
										</view>
									</view>
									<view>￥{{jqpremium}}</view>
								</view>
								<view class="row d-flex a-center j-sb">
									<view class="d-flex a-center">车船税</view>
									<view>￥{{taxAmount}}</view>
								</view>
								<view class="row d-flex a-center j-sb" v-if="jypremium">
									<view class="d-flex a-center">驾意险</view>
									<view>￥{{jypremium}}</view>
								</view>
							</template>
						</block>
						<block v-for="(item,index) in riskList" :key="index">
							<template v-if="item.riskCode == '0510'">
								<view class="row d-flex a-center j-sb">
									<view class="d-flex a-center">商业险 <view class="date">起保日期：{{orderInfo.systartdate}}
										</view>
									</view>
									<view>￥{{sypremium}}</view>
								</view>
							</template>
						</block>
						<view class="kindList" v-if="kindList.length>0">
							<view class="kindItem d-flex a-center j-sb">
								<view class="d-flex flex-1">商业险险别</view>
								<view class="flex-1 d-flex a-center j-center">保额(元)</view>
								<view class="d-flex flex-1 j-end">保费(元)</view>
							</view>
							<block v-for="(item,index) in kindList" :key="index">
								<template v-if="item.coveragePremium">
									<view class="kindItem d-flex a-center j-sb">
										<view class="d-flex flex-1" style="width: 300px;">{{item.kindName}}</view>
										<text v-if="['A'].includes(item.kindCode)">投保</text>
										<text
											v-else-if="['D4', 'SY_FJ_YBW2'].includes(item.kindCode)">{{toChinesNum(item.unitAmount)}}/{{orderInfo.carinfo.seatCount-1}}座
										</text>
										<text
											v-else-if="['MJ1', 'MJ2', 'MJ3', 'MJ4'].includes(item.kindCode)">{{item.deductibleRate}}%</text>
										<text v-else>{{toChinesNum(item.amount)}}</text>
										<view class="d-flex flex-1 j-end">￥{{item.coveragePremium}}</view>
									</view>
								</template>
							</block>
						</view>
					</view>
					<view class="addedServices" v-if="kindList.length>0">
						<view class="row d-flex a-center j-sb">
							<view class="d-flex">增值服务<view class="d-flex a-center"
									style="color:#999;margin-left: 10upx;font-size: 24upx;">不收费，使用不影响明年保费</view>
							</view>
							<view>赠送</view>
						</view>
						<view class="kindList">
							<view class="kindItem d-flex a-center j-sb">
								<view>道路救援</view>
								<view class="d-flex j-end">7次</view>
							</view>
							<view class="kindItem d-flex a-center j-sb">
								<view>代为送检</view>
								<view class="d-flex j-end">1次</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="quotePlan">
				<view class="header d-flex a-center j-sb">
					<view class="title">{{name}}官方无忧理赔</view>
				</view>
				<view class="body d-flex" style="flex-wrap: wrap;">
					<view
						style="width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; padding-right: 20upx;box-sizing: border-box;">
						智慧理赔服务</view>
					<view
						style="width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 20upx;box-sizing: border-box;">
						异地出险全国通赔</view>
					<view
						style="width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 20upx;box-sizing: border-box;">
						掌柜车险管控质量</view>
				</view>
			</view>
			<template v-if="!!token">
				<view class="quotePlan">
					<view class="header d-flex a-center j-sb">
						<view class="title">优惠政策</view>
					</view>
					<view class="body">
						<view class="insurance">
							<view class="row d-flex a-center j-sb">
								<view class="d-flex a-center flex-1">险种</view>
								<view class="d-flex a-center j-center flex-1">优惠比例</view>
								<view class="d-flex j-end flex-1">优惠金额</view>
							</view>

							<block v-for="(item,index) in riskList" :key="index">
								<template v-if="item.riskCode == '0507'">
									<view class="row d-flex a-center j-sb">
										<view class="d-flex a-center flex-1">交强险</view>
										<view class="d-flex a-center j-center flex-1">{{jqdiscountrate}}%</view>
										<view class="d-flex j-end flex-1">
											{{(item.premium*jqdiscountrate/100).toFixed(2)}}
										</view>
									</view>
								</template>
							</block>
							<block v-for="(item,index) in riskList" :key="index">
								<template v-if="item.riskCode == '0510'">
									<view class="row d-flex a-center j-sb">
										<view class="d-flex a-center flex-1">商业险</view>
										<view class="d-flex a-center j-center flex-1">{{sydiscountrate}}%</view>
										<view class="d-flex j-end flex-1">
											{{(item.premium*sydiscountrate/100).toFixed(2)}}
										</view>
									</view>
								</template>
							</block>
						</view>
					</view>
				</view>
			</template>
			<view class="car">
				<view class="header d-flex a-center j-sb">
					<view class="title">保费因素</view>
					<view class="adjustPlan d-flex" @tap="showextendInfo = !showextendInfo">
						<view class="icon iconfont icon-xiala" style="margin-left: 15upx;"></view>
					</view>
				</view>
				<view class="body" v-if="showextendInfo">
					<view class="row d-flex a-center j-sb">
						<view>评分</view>
						<view>{{extendInfo.score}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>出险信息</view>
						<view style="width: 200px;">{{extendInfo.accidentInfoStr}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>商业险折扣比例</view>
						<view>{{extendInfo.nirrratio}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>交强险折扣比例</view>
						<view>{{extendInfo.nirrratioCI }}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>自主定价系数</view>
						<view>{{extendInfo.pricingAdjustValue}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>业务员交强险销售费用浮动率</view>
						<view>{{extendInfo.jqFeeSaleChangeRateA4}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>交强深度定价分档</view>
						<view>{{extendInfo.deepPriceGradeCI}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>业务员商业险销售费用浮动率</view>
						<view>{{extendInfo.syFeeSaleChangeRateA4}}</view>
					</view>
					<view class="row d-flex a-center j-sb">
						<view>商业深度定价分档</view>
						<view>{{extendInfo.deepPriceGradeBI}}</view>
					</view>
				</view>
			</view>
			<view class="car">
				<view class="header d-flex a-center j-sb">
					<view class="title">车辆信息</view>
					<view class="adjustPlan d-flex" @tap="showCarInfo = !showCarInfo">{{carInfo.licenseNo}}
						<view class="icon iconfont icon-xiala" style="margin-left: 15upx;"></view>
					</view>
				</view>
				<view class="body" v-if="showCarInfo">
					<view class="row d-flex a-center j-sb">
						<view>品牌型号</view>
						<view>{{carInfo.brandName}}</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.registerDate }}</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>{{ownerInfo.name}}</view>
					</view>
				</view>
			</view>
			<template>
				<view class="personInfo">
					<view class="title d-flex a-center j-sb">
						<text style="font-weight: bold;">车主</text>
						<view class="showStatus" @tap="controlShow('showOwerInfo')">{{showOwerInfo?'收起':'展开'}}</view>
					</view>
					<view class="content" v-if="showOwerInfo">
						<view class="row d-flex a-center">
							<view class="left">姓名：</view>
							<view class="right d-flex flex-1">{{ownerInfo.name}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件类型：</view>
							<view class="right flex-1">{{(policyHolderInfo.identifyType=='01')?'身份证':'其他'}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">手机号：</view>
							<view class="right flex-1">{{ownerInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件号：</view>
							<view class="right flex-1">{{ownerInfo.identifyNumber}}</view>
						</view>
						<view class="row d-flex a-center"
							style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
							<view class="left">地址：</view>
							<view class="right flex-1">{{ownerInfo.addr}}</view>
						</view>
					</view>
				</view>

				<!-- 投保人信息 -->
				<view class="personInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">投保人</text>
						<view class="showStatus" @tap="controlShow('showPolicyHolderInfo')">
							{{showPolicyHolderInfo?'收起':'展开'}}
						</view>
					</view>
					<view class="content" v-if="showPolicyHolderInfo">
						<view class="row d-flex a-center">
							<view class="left">姓名：</view>
							<view class="right d-flex flex-1">{{policyHolderInfo.name}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件类型：</view>
							<view class="right d-flex flex-1">{{(policyHolderInfo.identifyType=='01')?'身份证':'其他'}}
							</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">手机号：</view>
							<view class="right d-flex flex-1">{{policyHolderInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件号：</view>
							<view class="right d-flex flex-1">{{policyHolderInfo.identifyNumber}}</view>
						</view>
						<view class="row d-flex a-center"
							style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
							<view class="left">地址：</view>
							<view class="right d-flex flex-1">{{policyHolderInfo.addr}}</view>
						</view>
					</view>
				</view>

				<!-- 被保人信息 -->
				<view class="personInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">被保人</text>
						<view class="showStatus" @tap="controlShow('showInsuredPersonInfo')">
							{{showInsuredPersonInfo?'收起':'展开'}}
						</view>
					</view>
					<view class="content" v-if="showInsuredPersonInfo">
						<view class="row d-flex a-center">
							<view class="left">姓名：</view>
							<view class="right d-flex flex-1">{{insuredPersonInfo.name}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件类型：</view>
							<view class="right d-flex flex-1">{{(policyHolderInfo.identifyType=='01')?'身份证':'其他'}}
							</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">手机号：</view>
							<view class="right d-flex flex-1">{{insuredPersonInfo.mobile}}</view>
						</view>
						<view class="row d-flex a-center">
							<view class="left">证件号：</view>
							<view class="right d-flex flex-1">{{insuredPersonInfo.identifyNumber}}</view>
						</view>
						<view class="row d-flex a-center"
							style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
							<view class="left">地址：</view>
							<view class="right d-flex flex-1">{{insuredPersonInfo.addr}}</view>
						</view>
					</view>
				</view>

				<!-- 车辆影像信息Start -->
				<view class="imageInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">车辆影像信息</text>
						<view class="showStatus" @tap="controlShow('showCarImageInfo')">{{showCarImageInfo?'收起':'展开'}}
						</view>
					</view>

					<view class="uni-uploader" v-if="showCarImageInfo">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in carImageList" :key="index">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image.url" :data-src="image.url"
											@tap="previewImage($event,'car')"></image>
									</view>
								</block>
							</view>
						</view>
					</view>

				</view>
				<!-- 车辆影像信息End -->

				<!-- 车主影像信息Start -->
				<view class="imageInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">车主影像信息</text>
						<view class="showStatus" @tap="controlShow('showOwnerImageInfo')">
							{{showOwnerImageInfo?'收起':'展开'}}
						</view>
					</view>

					<view class="uni-uploader" v-if="showOwnerImageInfo">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in ownerImageList" :key="index">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image.url" :data-src="image.url"
											@tap="previewImage($event,'owner')"></image>
									</view>
								</block>
							</view>
						</view>
					</view>

				</view>
				<!-- 车主影像信息End -->
				<!-- 投保人影像信息Start -->
				<view class="imageInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">投保人影像信息</text>
						<view class="showStatus" @tap="controlShow('showPolicyImageInfo')">
							{{showPolicyImageInfo?'收起':'展开'}}
						</view>
					</view>

					<view class="uni-uploader" v-if="showPolicyImageInfo">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in policyImageList" :key="index">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image.url" :data-src="image.url"
											@tap="previewImage($event,'policy')"></image>
									</view>
								</block>
							</view>
						</view>
					</view>

				</view>
				<!-- 投保人影像信息End -->
				<!-- 被保人影像信息Start -->
				<view class="imageInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">被保人影像信息</text>
						<view class="showStatus" @tap="controlShow('showInsuredImageInfo')">
							{{showInsuredImageInfo?'收起':'展开'}}
						</view>
					</view>

					<view class="uni-uploader" v-if="showInsuredImageInfo">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in insuredImageList" :key="index">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image.url" :data-src="image.url"
											@tap="previewImage($event,'insured')"></image>
									</view>
								</block>
							</view>
						</view>
					</view>

				</view>
				<!-- 被保人影像信息End -->
				<!-- 验车照Start -->
				<!-- <view class="imageInfo">
					<view class="title  d-flex a-center j-sb">
						<text style="font-weight: bold;">验车照</text>
						<view class="showStatus" @tap="controlShow('showCarCheckImageInfo')">
							{{showCarCheckImageInfo?'收起':'展开'}}
						</view>
					</view>

					<view class="uni-uploader" v-if="showCarCheckImageInfo">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in carCheckImageList" :key="index">
									<view class="uni-uploader__file">
										<image class="uni-uploader__img" :src="image.url" :data-src="image.url"
											@tap="previewImage($event,'carCheck')"></image>
									</view>
								</block>
							</view>
						</view>
					</view>

				</view> -->
				<!-- 验车照End -->
				<!-- 特约 -->
				<template v-if="!!syappoint">
					<view class="appoint">
						<view class="title d-flex a-center j-sb">
							<text style="font-weight: bold;">特约</text>
							<view class="showStatus" @tap="controlShow('showAppoint')">{{showAppoint?'收起':'展开'}}</view>
						</view>
						<view class="content" v-if="showAppoint">
							<view class="row d-flex a-center j-sb">
								<view>商业特约险：</view>
								<textarea disabled maxlength="300" v-model="syappoint"
									placeholder="请输入商业险特别约定,最多可输入300个字符" /></textarea>
							</view>
						</view>
					</view>
				</template>
			</template>

			<view class="personInfo" v-if="!!orderInfo.jqapplyno">
				<view class="title d-flex a-center j-sb">
					<text style="font-weight: bold;">投保单号</text>
					<view class="showStatus" @tap="controlShow('showApplyno')">{{showApplyno?'收起':'展开'}}</view>
				</view>
				<view class="content" v-if="showApplyno">
					<view class="row d-flex a-center" v-if="!!orderInfo.jqapplyno">
						<view class="left">交强险：</view>
						<view class="right d-flex flex-1">{{orderInfo.jqapplyno}}</view>
					</view>
					<view class="row d-flex a-center" v-if="!!orderInfo.syapplyno">
						<view class="left">商业险：</view>
						<view class="right d-flex flex-1">{{orderInfo.syapplyno}}</view>
					</view>
				</view>
			</view>

			<view class="personInfo" v-if="!!orderInfo.jqpolicyno">
				<view class="title d-flex a-center j-sb">
					<text style="font-weight: bold;">保单号</text>
					<view class="showStatus" @tap="controlShow('showPolicyno')">{{showPolicyno?'收起':'展开'}}</view>
				</view>
				<view class="content" v-if="showPolicyno">
					<view class="row d-flex a-center" v-if="!!orderInfo.jqpolicyno">
						<view class="left">交强险：</view>
						<view class="right d-flex flex-1">{{orderInfo.jqpolicyno}}</view>
					</view>
					<view class="row d-flex a-center" v-if="!!orderInfo.sypolicyno">
						<view class="left">商业险：</view>
						<view class="right d-flex flex-1">{{orderInfo.sypolicyno}}</view>
					</view>
				</view>
			</view>
			<view class="personInfo" v-if="policyList.length>0">
				<view class="title d-flex a-center j-sb">
					<text style="font-weight: bold;">电子保单(点击即可预览下载)</text>
					<view class="showStatus" @tap="controlShow('showPolicyFile')">{{showPolicyFile?'收起':'展开'}}</view>
				</view>
				<view class="content" v-if="showPolicyFile" v-for="(policyListitem,policyListindex) in policyList"
					:key="policyListindex">
					<view class="row d-flex a-center">
						<view class="left" style="width: 110px;flex-shrink: 0;">{{policyListitem.fileTitle}}：
						</view>
						<view class="right d-flex flex-1"
							style="flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{policyListitem.filename}}
						</view>
						<view class="right d-flex a-center j-center" style="width: 160upx;flex-shrink: 0;">
							<text class="checkButton d-flex a-center j-center"
								@tap="downloadPolicy(policyListitem.fileurl)">下载</text>
						</view>
					</view>
				</view>
			</view>
			<view class="personInfo" v-if="policyList1.length>0">
				<view class="title d-flex a-center j-sb">
					<text style="font-weight: bold;">电子标志(点击即可预览下载)</text>
					<view class="showStatus" @tap="controlShow('showPolicybzFile')">{{showPolicybzFile?'收起':'展开'}}
					</view>
				</view>
				<view class="content" v-if="showPolicybzFile" v-for="(policyListitem,policyListindex) in policyList1"
					:key="policyListindex">
					<view class="row d-flex a-center">
						<view class="left" style="width: 110px;flex-shrink: 0;">{{policyListitem.fileTitle}}：
						</view>
						<view class="right d-flex flex-1"
							style="flex-shrink: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{policyListitem.filename}}
						</view>
						<view class="right d-flex a-center j-center" style="width: 160upx;flex-shrink: 0;">
							<text class="checkButton d-flex a-center j-center"
								@tap="downloadPolicy(policyListitem.fileurl)">下载</text>
						</view>
					</view>
				</view>
			</view>
			<view class="advancePaymentTotal">
				<view class="header d-flex a-center j-sb">
					<view class="title">保费</view>
				</view>
				<view class="body">
					<block v-for="(item,index) in riskList" :key="index">
						<template v-if="item.riskCode == '0507'">
							<view class="row d-flex a-center j-sb">
								<view class="d-flex a-center">交强险</view>
								<view>￥{{jqpremium}}</view>
							</view>
							<view class="row j-sb d-flex a-center">
								<view>车船税</view>
								<view>￥{{taxAmount}}</view>
							</view>
						</template>
					</block>
					<block v-for="(item,index) in riskList" :key="index">
						<template v-if="item.riskCode == '0510'">
							<view class="row d-flex a-center j-sb">
								<view class="d-flex a-center">商业险</view>
								<view>￥{{sypremium}}</view>
							</view>
						</template>
					</block>
				</view>
			</view>
		</view>
		<view style="height: 90upx;"></view>
		<template>
			<view class="bottomBtn d-flex j-sb">
				<view class="d-flex a-center">
					<view class="d-flex flex-column a-center j-center listener">
						<view style="line-height: 1;" class="icon iconfont icon-xiaomishu"></view>
						<view class="font-sm">客服</view>
					</view>
					<view style="font-weight: bold;font-size: 34upx;color: #333; ">￥{{sumPermium}}</view>
				</view>
				<template v-if="orderstatus">
					<view class="btn d-flex a-center j-center" @tap="toUnderwriting">确认核保</view>
				</template>
				<!-- 	<template v-if="orderstatus ==5">
					<view class="btn d-flex a-center j-center" @tap="cancelUnderwriting">撤销核保</view>
				</template> -->
				<!-- <template v-if="orderstatus ==2">
					<view class="btn d-flex a-center j-center" @tap="openPayWay">申请支付</view>
				</template>
				<template v-if="orderstatus ==3">
					<view class="btn d-flex a-center j-center" @tap="toUnderwriting">下一步</view>
				</template> -->
			</view>
		</template>
		<!-- 底部分享弹窗 -->

		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/pdf.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import previewImage from '@/components/common/previewImage/previewImage.vue'; //引用插件
	export default {
		components: {
			uniPopup,
			previewImage
		},
		computed: {
			...mapState(['userInfo', 'token']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight;
				return `minHeight: ${height}px;`;
			}
		},
		data() {
			return {
				companyId: "", //订单号
				orderInfo: {},
				licenseNo: "", //车牌号
				icon: "", //保险公司logo
				name: "", //保险公司名称
				carInfo: {}, //车辆信息
				ownerInfo: {}, //车主信息
				policyHolderInfo: {}, //投保人信息
				insuredPersonInfo: {}, //被保人信息
				riskList: [], //险种大类信息
				kindList: [], //商业险险别
				sumPermium: "", //报价金额
				taxAmount: "", //车船税金额
				jqpremium: "", //交强险金额
				sypremium: "", //商业险金额
				feerate: "",
				disrate: "",
				syappoint: "",
				orderstatus: "0", //订单状态
				CIStartDate: "", //交强险日期
				BIStartDate: "", //商业险日期
				showCarInfo: false,
				showextendInfo: false,
				insureList: [{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "投保",
							"value": "1"
						}],
						kindCode: "A",
						isMainRisk: true,
						kindName: "机动车损失险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}, {
							"label": "30万",
							"value": "300000"
						}, {
							"label": "50万",
							"value": "500000"
						}, {
							"label": "100万",
							"value": "1000000"
						}, {
							"label": "150万",
							"value": "1500000"
						}, {
							"label": "200万",
							"value": "2000000"
						}, {
							"label": "250万",
							"value": "2500000"
						}, {
							"label": "300万",
							"value": "3000000"
						}, {
							"label": "500万",
							"value": "5000000"
						}, {
							"label": "1000万",
							"value": "10000000"
						}],
						kindCode: "B",
						isMainRisk: true,
						kindName: "第三者责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "1万",
							"value": "10000"
						}, {
							"label": "2万",
							"value": "20000"
						}, {
							"label": "5万",
							"value": "50000"
						}, {
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}],
						kindCode: "D3",
						isMainRisk: true,
						kindName: "司机责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "1万",
							"value": "10000"
						}, {
							"label": "2万",
							"value": "20000"
						}, {
							"label": "5万",
							"value": "50000"
						}, {
							"label": "10万",
							"value": "100000"
						}, {
							"label": "15万",
							"value": "150000"
						}, {
							"label": "20万",
							"value": "200000"
						}],
						kindCode: "D4",
						isMainRisk: true,
						kindName: "乘客责任险"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "2000",
							"value": "2000"
						}, {
							"label": "5000",
							"value": "5000"
						}, {
							"label": "1万",
							"value": "10000"
						}],
						isMainRisk: false,
						kindCode: "L",
						kindName: "车身划痕险",
						mainRiskCodeList: "A"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ1",
						kindName: "绝对免赔率特约险（车损）",
						mainRiskCodeList: "A"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ2",
						kindName: "绝对免赔率特约险（三者）",
						mainRiskCodeList: "B"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ3",
						kindName: "绝对免赔率特约险（司机）",
						mainRiskCodeList: "D3"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "5%",
							"value": "5"
						}, {
							"label": "10%",
							"value": "10"
						}, {
							"label": "15%",
							"value": "15"
						}, {
							"label": "20%",
							"value": "20"
						}],
						isMainRisk: false,
						kindCode: "MJ4",
						kindName: "绝对免赔率特约险（乘客）",
						mainRiskCodeList: "D4"
					},
					{
						amount: "0",
						coveragePremium: "",
						amtList: [{
							"label": "投保",
							"value": "1"
						}],
						isMainRisk: false,
						kindCode: "BD",
						kindName: "法定节假日限额翻倍险",
						mainRiskCodeList: "B"
					},
					{
						amount: "0",
						amountDesc: "不投保",
						coveragePremium: "",
						amtList: [{
								label: "不投保",
								value: "0"
							},
							{
								label: "1万",
								value: "10000"
							},
							{
								label: "2万",
								value: "20000"
							},
							{
								label: "5万",
								value: "50000"
							},
							{
								label: "10万",
								value: "100000"
							}
						],
						kindCode: "SY_FJ_YBW1",
						isMainRisk: false,
						kindName: "附加医保-三者",
						desc: "附加医保外医疗费用责任险（机动车第三者责任保险）"
					},
					{
						amount: "0",
						amountDesc: "不投保",
						coveragePremium: 0,
						amtList: [{
								label: "不投保",
								value: "0"
							},
							{
								label: "1万",
								value: "10000"
							},
							{
								label: "2万",
								value: "20000"
							},
							{
								label: "5万",
								value: "50000"
							},
							{
								label: "10万",
								value: "100000"
							}
						],
						kindCode: "SY_FJ_YBW2",
						isMainRisk: false,
						kindName: "附加医保-座位险(乘客)",
						desc: "附加医保外医疗费用责任险（机动车第三者责任保险）"
					},
					{
						amount: "0",
						amountDesc: "不投保",
						coveragePremium: 0,
						amtList: [{
								label: "不投保",
								value: "0"
							},
							{
								label: "1万",
								value: "10000"
							},
							{
								label: "2万",
								value: "20000"
							},
							{
								label: "5万",
								value: "50000"
							},
							{
								label: "10万",
								value: "100000"
							}
						],
						kindCode: "SY_FJ_YBW3",
						isMainRisk: false,
						kindName: "附加医保-座位险(司机)",
						desc: "附加医保外医疗费用责任险（机动车第三者责任保险）"
					},
				],

				bottomData: [
					// #ifdef APP-PLUS
					{
						text: '微信好友',
						icon: '/static/image/share/weixinhaoyou.png',
						name: 'wx'
					},
					{
						text: '短信发送',
						icon: '/static/image/share/shortMessage.png',
						name: 'dx'
					},
					// #endif
					{
						text: '报价单',
						icon: '/static/image/share/shortMessage.png',
						name: 'bjd'
					}
				],
				vehicleModel: {}, //车型信息
				showOwerInfo: false, //展示车主信息
				showPolicyHolderInfo: false, //展示投保人信息
				showInsuredPersonInfo: false, //展示被保人信息
				showProposalWay: false, //获取保单方式
				showAdvancePayment: false, //展示保费
				showAppoint: false, //展示特约
				showDistribution: false, //展示快递
				showApplyno: false, //展示投保单号
				showPolicyno: false, //展示保单号
				showPolicyFile: false, //展示电子保单
				showPolicybzFile: false, //展示电子保单
				policyList: [], //电子保单文件
				policyList1: [], //电子标志文件
				showCarImageInfo: false, //显示车辆影像
				carImageList: [],
				showOwnerImageInfo: false, //显示车主影像
				ownerImageList: [],
				showPolicyImageInfo: false, //显示投保人影像
				policyImageList: [],
				showInsuredImageInfo: false, //显示被保人影像
				insuredImageList: [],
				showCarCheckImageInfo: false, //显示验车照影像
				carCheckImageList: [],
				previewImgs: [],
				dianzibaodan: "",
				jypremium: "",
				quoteno: "",
				extendInfo: {},
			}
		},
		// 监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.$refs.showshare.open()
			}
		},
		async onLoad(params) {
			if (!this.token) {
				document.getElementsByTagName('uni-page-head')[0].style.display = 'none'
			}
			if (!!params.companyId) {
				this.companyId = params.companyId;
				let param = {
					companyId: params.companyId
				};
				let res = await this.$http.post('/insurance/order/getByCompanyId', param);
				if (res.code == 200) {
					//获取前一个页面传过来的信息（车辆信息，人员信息，险种信息）
					this.icon = "";
					this.quoteno = res.data.quoteno;
					this.name = res.data.inscompany;
					this.carInfo = res.data.carinfo;
					this.extendInfo = res.data.extendInfo;
					this.licenseNo = res.data.licenseno;
					if (!!this.carInfo.transferFlag) {
						this.carInfo.transferFlag = 1;
					} else {
						this.carInfo.transferFlag = 0;
					}
					if (!!this.carInfo.loanStatus) {
						this.carInfo.loanStatus = 1;
					} else {
						this.carInfo.loanStatus = 0;
					}
					if (!!this.carInfo.registerDate) {
						let year1 = new Date(this.carInfo.registerDate).getFullYear()
						let month1 = new Date(this.carInfo.registerDate).getMonth() + 1
						if (month1 < 10) {
							month1 = '0' + month1;
						}
						let day1 = new Date(this.carInfo.registerDate).getDate()
						if (day1 < 10) {
							day1 = '0' + day1;
						}
						this.carInfo.registerDate = year1 + '-' + month1 + '-' + day1
					}
					if (!!this.carInfo.issueDate) {
						let year2 = new Date(this.carInfo.issueDate).getFullYear()
						let month2 = new Date(this.carInfo.issueDate).getMonth() + 1
						if (month2 < 10) {
							month2 = '0' + month2;
						}
						let day2 = new Date(this.carInfo.issueDate).getDate()
						if (day2 < 10) {
							day2 = '0' + day2;
						}
						this.carInfo.issueDate = year2 + '-' + month2 + '-' + day2
					}
					if (!!this.carInfo.transferDate) {
						let year3 = new Date(this.carInfo.transferDate).getFullYear()
						let month3 = new Date(this.carInfo.transferDate).getMonth() + 1
						if (month3 < 10) {
							month3 = '0' + month3;
						}
						let day3 = new Date(this.carInfo.transferDate).getDate()
						if (day3 < 10) {
							day3 = '0' + day3;
						}
						this.carInfo.transferDate = year3 + '-' + month3 + '-' + day3
					}
					this.ownerInfo = res.data.ownerinfo;
					this.policyHolderInfo = res.data.applyinfo;
					this.insuredPersonInfo = res.data.insureinfo;
					this.riskList = res.data.riskinfo;
					this.kindList = res.data.kindinfo;
					this.sumPermium = res.data.sumpremium;
					this.taxAmount = res.data.taxamount;
					this.sypremium = res.data.sypremium;
					this.jqpremium = res.data.jqpremium;
					this.jypremium = res.data.jypremium;
					this.orderstatus = res.data.orderstatus;
					this.feerate = res.data.feerate;
					this.disrate = res.data.disrate;
					this.jqdiscountrate = res.data.jqdiscountrate;
					this.sydiscountrate = res.data.sydiscountrate;
					this.syappoint = res.data.syappoint;
					this.orderInfo = {};
					Object.assign(this.orderInfo, res.data)
					this.imageEcho(this.quoteno) // 影像获取完毕
					switch (this.name) {
						case "永安财险":
							this.yonganprint(); //电子保单
							break;
						case "中煤财险":
							this.zmgetPolicyPrint(); //电子保单
							break;
						case "恒邦财险":
						case "安盛天平":
						case "众安财险":
						case "中国人寿":
							this.pythonprint(); //电子保单
							break;
						case "永诚财险":
							this.ycgetPolicyPrint(); //电子保单
							break;
					}
				}
			} else {
				uni.showModal({
					showCancel: false,
					title: "未查询到该订单"
				})
			}
		},
		methods: {
			...mapMutations(['setOrderStage', 'setOrderType']),
			//影像查询
			async imageEcho(quotenos) {
				let imgres = await this.$http.get('/ins/taskImage/findByQuoteNo?quoteNo=' + quotenos);
				console.log(imgres)
				if (imgres.code == "200") {
					Object.keys(imgres.data).forEach((keys) => {
						if (imgres.data[keys].url) {
							imgres.data[keys].url = this.$base.baseUrl + imgres.data[keys].url;
							switch (keys) {
								case 'C01':
								case 'D01':
									this.carImageList.push(imgres.data[keys]);
									break;
								case 'C02':
								case 'D02':
									this.ownerImageList.push(imgres.data[keys]);

									break;
								case 'C03':
								case 'D03':
									this.policyImageList.push(imgres.data[keys]);

									break;
								case 'C04':
								case 'D04':
									this.insuredImageList.push(imgres.data[keys]);
									break;
								default:
									break;
							}
						}
					});
				}
			},
			//去选择险种页面
			toInsureItems() {
				this.navigate({
					url: '/pages/carInsure1/insureItems1',
					success: (res) => {
						res.eventChannel.emit("acceptData", {
							carInfo: this.carInfo,
							ownerInfo: this.ownerInfo,
							policyHolderInfo: this.policyHolderInfo,
							insuredPersonInfo: this.insuredPersonInfo,
							riskList: this.riskList,
							kindList: this.kindList
						})
					}
				}, "navigateTo", true);
			},
			//去确认核保页面
			toUnderwriting() {
				this.navigate({
						url: "/pages/carInsure1/underwriting1?companyId=" + this.companyId
					},
					"navigateTo", true);
			},

			//影像预览
			previewImage(e, type) {
				this.previewImgs = this[type + 'ImageList'];
				var current = e.currentTarget.dataset.src;
				this.$refs.previewImage.open(current); // 传入当前选中的图片地址或序号
			},
			//查询电子保单
			async yonganprint() {
				this.policyList = [];
				this.policyList1 = [];
				let res = await this.$http.post('/order/yongAn/getPolicyPrint', {
					companyId: this.companyId,
					policytype: "jq"
				}); //永安
				if (res.data) {
					let result = res.data.replace(/[\r\n]/g, "");
					let pdfBase64 = `data:application/pdf;base64,${result}`;
					base64ToPath(pdfBase64)
						.then(path => {
							this.policyList.push({
								fileTitle: "交强电子保单",
								filename: this.orderInfo.jqpolicyno,
								fileurl: path,
							})
						})
				}
				let res1 = await this.$http.post('/order/yongAn/getPolicyPrint2', {
					companyId: this.companyId,
					policytype: "jq"
				}); //永安
				if (res1.data) {
					let result = res1.data.replace(/[\r\n]/g, "");
					let pdfBase64 = `data:application/pdf;base64,${result}`;
					base64ToPath(pdfBase64)
						.then(path => {
							this.policyList1.push({
								fileTitle: "交强电子标志",
								filename: this.orderInfo.jqpolicyno,
								fileurl: path,
							})
						})
				}
				if (this.orderInfo.sypolicyno) {
					let res2 = await this.$http.post('/order/yongAn/getPolicyPrint2', {
						companyId: this.companyId,
						policytype: "sy"
					}); //永安
					if (res2.data) {
						let result = res1.data.replace(/[\r\n]/g, "");
						let pdfBase64 = `data:application/pdf;base64,${result}`;
						base64ToPath(pdfBase64)
							.then(path => {
								this.policyList.push({
									fileTitle: "商业电子保单",
									filename: this.orderInfo.sypolicyno,
									fileurl: path,
								})
							})
					}
				}
			},
			async zmgetPolicyPrint() {
				this.policyList = [];
				this.policyList1 = [];
				if (this.orderInfo.jqpolicyno) {
					let res = await this.$http.post('/order/zhongMeiApi/getPolicyPrint', {
						companyId: this.companyId,
						riskCode: "0507",
						type: '2', //2:保单
					});
					if (res.code == '200') {
						this.policyList.push({
							fileTitle: "交强电子保单",
							filename: this.orderInfo.jqpolicyno,
							fileurl: res.data[0],
						})
					}
					let res1 = await this.$http.post('/order/zhongMeiApi/getPolicyPrint', {
						companyId: this.companyId,
						riskCode: "0507",
						type: '1', //1:标志
					});
					if (res1.code == '200') {
						this.policyList1.push({
							fileTitle: "交强电子标志",
							filename: this.orderInfo.jqpolicyno,
							fileurl: res.data[0],
						})
					}
				}
				if (this.orderInfo.sypolicyno) {
					let res = await this.$http.post('/order/zhongMeiApi/getPolicyPrint', {
						companyId: this.companyId,
						riskCode: "0510",
						type: '2', //2:标志
					});
					if (res.code == '200') {
						this.policyList.push({
							fileTitle: "商业电子保单",
							filename: this.orderInfo.sypolicyno,
							fileurl: res.data[0],
						})
					}
				}

			},
			async ycgetPolicyPrint() {
				this.policyList = [];
				this.policyList1 = [];
				let res = await this.$http.post('/api/yongCheng/getPolicyPrint', {
					companyId: this.companyId,
					riskCode: "0507",
					type: '2', //2:保单
				}); //永诚财险
				if (res.code == '200') {
					this.policyList.push({
						fileTitle: "交强电子保单",
						filename: this.orderInfo.jqpolicyno,
						fileurl: res.data.jqUrl,
					})
					if (res.data.jqFlagUrl) {
						this.policyList1.push({
							fileTitle: "交强电子标志",
							filename: this.orderInfo.jqpolicyno,
							fileurl: res.data.jqFlagUrl,
						})
					}
				}
				if (this.orderInfo.sypolicyno) {
					let res = await this.$http.post('/api/yongCheng/getPolicyPrint', {
						companyId: this.companyId,
						riskCode: "0510",
						type: '2', //2:保单
					}); //永诚财险
					if (res.code == '200') {
						this.policyList.push({
							fileTitle: "商业电子保单",
							filename: this.orderInfo.sypolicyno,
							fileurl: res.data.syUrl,
						});
					}
				}
			},
			//爬虫电子保单统一调用
			async pythonprint() {
				let params = {
					subOrderNo: this.companyId,
				};
				let res1 = await this.$http.post('/insurance/crawler/getPolicyPrint', params);
				if (res1.code == '200') {
					this.policyList = [];
					this.policyList1 = [];
					this.policyList.push({
						fileTitle: "交强电子保单",
						filename: this.orderInfo.jqpolicyno,
						fileurl: res1.data.jqxPolicyUrl,
					})
					this.policyList1.push({
						fileTitle: "交强电子标志",
						filename: this.orderInfo.jqpolicyno,
						fileurl: res1.data.jqxFlagUrl,
					})
					if (res.data.syxPolicyUrl) {
						this.policyList.push({
							fileTitle: "商业电子保单",
							filename: this.orderInfo.sypolicyno,
							fileurl: res1.data.syxPolicyUrl,
						});
					}
					if (res.data.jyxPolicyUrl) {
						this.policyList.push({
							fileTitle: "驾意险保单",
							filename: 'xxxxxxxxxxxxxxxxxxxxxx',
							fileurl: res1.data.jyxPolicyUrl,
						});
					}
				}

			},
			downloadPolicy(file) {
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '文件下载中'
				});
				uni.downloadFile({
					url: file,
					success(val) {
						uni.saveFile({
							tempFilePath: val.tempFilePath, //临时路径
							success: function(res) {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '文件已保存到：' + res.savedFilePath + ',正在打开文件', //保存路径
									duration: 3000,
								});
								setTimeout(() => {
									//打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
										success: function(res) {}
									});
								}, 3000)
							}
						});
					}
				});
				//#endif
				//#ifdef H5
				var win = window.open();
				win.document.write(
					'<body style="margin:0px;"><object data="' +
					file +
					'" type="application/pdf" width="100%" height="100%"><iframe src="' +
					file +
					'" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
				);
				//#endif
			},
			//选择缴费方式
			openPayWay() {
				this.navigate({
					url: "/pages/carInsure/payWay?orderno=" + this.orderno
				}, 'navigateTo', true)
			},
			cancelShare() {
				this.$refs.showshare.close()
			},
			//控制详情的展开和收起
			controlShow(type) {
				this[type] = !this[type];
			},
			//撤销核保
			cancelUnderwriting() {
				uni.showModal({
					content: '是否确认撤销核保？',
					success: async (res) => {
						if (res.confirm) {
							let param = {
								"auditid": this.userInfo.sysUser.id, //核保人会员号
								"auditopinion": '', //核保意见
								"jqapplyno": "", //交强险投保单号
								"jqappoint": "", //交强特别约定
								"jqpolicyno": "", //交强保单号
								"orderno": this.orderno, //订单号
								"orderstatus": "0", //订单类型
								"syapplyno": "", //商业险投保单号
								"syappoint": "", //商业险特别约定
								"sypolicyno": "" //商业保单号
							}
							let res = await this.$http.post('/insOrder/saveAudit', param);
							uni.showToast({
								title: '撤销成功',
								icon: "none",
								duration: 2000
							});
							setTimeout(() => {
								this.setOrderStage(0);
								this.setOrderType(0);
								this.navigate({
									url: "/pages/orders/orders"
								}, "switchTab", true);
							}, 2000);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			toChinesNum(num) {
				let changeNum = [
					"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
				];
				let unit = ["", "0", "00", "000", "0000"];
				num = parseInt(num);
				let getWan = temp => {
					let strArr = temp
						.toString()
						.split("")
						.reverse();
					let newNum = "";
					let newArr = [];
					strArr.forEach((item, index) => {
						newArr.unshift(
							item === "0" ? changeNum[item] : changeNum[item] + unit[index]
						);
					});
					let numArr = [];
					newArr.forEach((m, n) => {
						if (m !== "0") numArr.push(n);
					});
					if (newArr.length > 1) {
						newArr.forEach((m, n) => {
							if (newArr[newArr.length - 1] === "0") {
								if (n <= numArr[numArr.length - 1]) {
									newNum += m;
								}
							} else {
								newNum += m;
							}
						});
					} else {
						newNum = newArr[0];
					}
					return newNum;
				};
				let overWan = Math.floor(num / 10000);
				let noWan = num % 10000;
				if (noWan.toString().length < 4) {
					noWan = "0" + noWan;
				}
				return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	/* 头部车辆信息和特权Start */
	.carInfo {
		height: 280upx;
		background: -webkit-linear-gradient(0deg, rgba($themeColor, 0.6), rgba($themeColor, 0.8));
		background-size: 100% 100%;
	}

	.carInfo .topLeft {
		font-size: 90upx;
		color: #FFFFFF;
	}

	.carInfo .topLeft .license {
		width: 420upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.carInfo .topLeft .totalMoney {
		font-size: 40upx;
		font-weight: bold;
	}

	.carInfo .topRight {
		flex-shrink: 0;
		width: 140upx;
		color: #FFFFFF;
	}

	.carInfo .topRight image {
		width: 100upx;
		height: 100upx;
	}

	.carInfo .other {
		background-color: #FFFFFF;
		height: 80upx;
		border-radius: 15upx;
		box-sizing: border-box;
	}

	.carInfo .other .privilege {
		background-color: rgba($themeColor, 0.6);
		font-size: 24upx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.carInfo .other .content {
		width: 460upx;
		margin-left: 15upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.carInfo .other .icon {
		width: 30upx;
	}

	/* 头部车辆信息和特权End */


	.header {
		height: 80upx;
		padding: 0 30upx;
		position: relative;
	}

	.header .title {
		font-size: 30upx;
		font-weight: bold;
		padding-left: 10upx;
	}


	.welfare {
		margin-bottom: 20upx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20upx;
	}

	.welfare .body {
		padding: 0 30upx 30upx;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.welfare .body>.welfareItem {
		width: 320upx;
		height: 120upx;
		padding: 10upx 20upx;
		margin: 20upx 10upx 0upx;
		border: 1px solid rgba($themeColor, 0.6);
		box-sizing: border-box;
		background: rgba($themeColor, 0.4);
		border-radius: 10upx;
	}

	.welfare .body>.welfareItem .name {
		color: $themeColor;
		font-size: 30upx;
		width: 210upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.welfare .body>.welfareItem .content {
		font-size: 24upx;
		width: 260upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	/* 报价方案Start */
	.quotePlan {
		margin-bottom: 20upx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20upx;
	}

	.quotePlan .header .adjustPlan {
		color: $themeColor;
	}

	.quotePlan .body {
		padding: 0 40upx 10upx;
	}

	.quotePlan .body .insurance {
		padding-bottom: 20upx;
		border-bottom: 1px dashed #E6E8EA;
	}

	.quotePlan .body .row {
		height: 70upx;
	}

	.quotePlan .body .row .date {
		color: #A4A4A4;
		font-size: 22upx;
		margin-left: 40upx;
	}

	.quotePlan .body .insurance .kindList {
		background: #F3F3F3;
		padding: 0 10upx;
	}

	.addedServices .kindList {
		background: #F3F3F3;
		padding: 0 10upx;
	}

	.quotePlan .body .insurance .kindList .kindItem {
		padding: 2px 0;
	}

	.quotePlan .body .insurance .kindList .kindItem>view {
		font-size: 24upx;
	}

	.quotePlan .body .insurance .kindList .kindItem>view:nth-of-type(1) {
		width: 310upx;
	}

	.quotePlan .body .insurance .kindList .kindItem>view:nth-of-type(2) {
		width: 170upx;
	}

	.quotePlan .body .insurance .kindList .kindItem>view:nth-of-type(3) {
		width: 170upx;
	}

	.addedServices .kindList .kindItem {
		height: 65upx;
	}

	.addedServices .kindList .kindItem>view {
		font-size: 24upx;
		padding: 0upx 15upx;
	}

	/* 报价方案End */

	.car {
		margin-bottom: 20upx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.car .body {
		padding: 0upx 30upx 10upx;
	}

	.car .body .row {
		padding: 5px 0;
		border-bottom: 1px solid #F3F3F3;
	}

	/* 预缴费Start */
	.advancePaymentTotal {
		margin-bottom: 20upx;
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20upx;
	}

	.advancePaymentTotal .body {
		padding: 0upx 40upx 10upx;
	}

	.advancePaymentTotal .body .row {
		height: 80upx;
		border-bottom: 1px solid #F3F3F3;
	}

	/* 预缴费End */

	/* 底部按钮Start */
	.bottomBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #F1F1F1;
		background-color: #FFFFFF;
		height: 90upx;
	}

	.bottomBtn .listener {
		width: 120upx;
		font-size: 20upx;
		line-height: 1.2;
		color: #999;
	}

	.bottomBtn .listener .icon {
		font-size: 40upx;
		padding: 0;
	}

	.bottomBtn .btn {
		font-size: 34upx;
		background-color: $themeColor;
		color: #fff;
		width: 280upx;
		flex-shrink: 0;
	}

	/* 底部按钮End */

	/* 人员信息Start */
	.personInfo,
	.advancePayment,
	.imageInfo,
	.appoint {
		margin-bottom: 20upx;
		background: #FFFFFF;
		padding: 0upx 40upx;
	}

	.personInfo .title,
	.advancePayment .title,
	.imageInfo .title,
	.appoint .title {
		height: 80upx;
		font-size: 32upx;
		box-shadow: inset 0 -3upx 0px #fafafa;
	}

	.showStatus {
		font-size: 26upx;
		color: #007AFF;
	}

	.personInfo .content .row,
	.advancePayment .content .row {
		height: 80upx;
		border-bottom: 1px solid #F9F9F9;
		flex-wrap: nowrap;
	}

	.personInfo .content .row .left,
	.advancePayment .content .row .left {
		width: 170upx;
		flex-shrink: 0;
		font-size: 28upx;
	}

	.appoint .content .row {
		height: auto;
		margin-top: 10upx;
	}

	.appoint .content .row>view {
		width: 240upx;
		flex-shrink: 1;
		font-size: 28upx;
	}

	.appoint .content .row>textarea {
		/* background: #007AFF; */
		padding: 15upx;
		box-sizing: border-box;
		font-size: 26upx;
		min-height: 160upx;
		height: 100upx;
		border: 1px solid #fafafa;
		/* over */
	}

	.personInfo .content .row .right,
	.advancePayment .content .row .right,
	.appoint .content .row .right {
		font-size: 28upx;
	}

	/* 人员信息End */

	.checkButton {
		margin: 0 20upx 0 20upx;
		font-size: 24upx;
		width: 80upx;
		height: 50upx;
		background: $themeColor;
		font-weight: bold;
		color: #FFFFFF;
		border-radius: 5upx;
	}



	.uni-popup__wrapper-box {
		display: block;
		position: relative;
	}

	.uni-share {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.uni-share-title {
		line-height: 30px;
		font-size: 12px;
		padding: 7px 0;
		text-align: center;
	}

	.uni-share-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
	}

	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100px;
	}

	.uni-share-content-image {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		overflow: hidden;
		border-radius: 5px;
	}

	.uni-share-content-text {
		font-size: 13px;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 45px;
		line-height: 45px;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}

	uni-image>img {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	uni-image>div,
	uni-image>img {
		width: 100%;
		height: 100%;
	}
</style>