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

<template>
	<view class="page">
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="fixed dis a-c j-start" :style="headerStyle">
			<u-icon name="arrow-left" size="40" @tap="back"></u-icon>
			<text style="margin:  auto;">{{headerText}}</text>
		</view>
		<!-- <view class="inputPrompt">
			请尽量与上年度保单保持一致！
		</view> -->
		<view v-show="carInfoShow && carModificationLabel" class="Information" style="margin-top: 84px;">
			<text class="title">车辆信息</text>
			<view class="title dis j-s a-c">
				<view class="dis a-c">
					<text>行驶证识别</text>
					<view class="switch-container ml-2" @tap="toggleSwitch" v-if="carbackImg">
						<view class="switch-track">
							<view class="switch-thumb dis a-c j-c" :class="{ thumbactive: !isActive }"></view>
							<view class="switch-thumb1 dis a-c j-c" :class="{ thumbactive1: isActive }">主页</view>
							<view class="switch-thumb2 dis a-c j-c" :class="{ thumbactive1: !isActive }">副本</view>
						</view>
					</view>
				</view>
				<view class="manualSwitch dis a-c j-s" @click="carSwitching=!carSwitching">
					<image
						:src="carSwitching?'../../static/image/car-insure/manualInput.png':'../../static/image/car-insure/captureRecognition.png'"
						mode=""></image>
					<text>{{carSwitching?'手动输入':'拍照识别'}}</text>
				</view>
			</view>
			<view v-show="carSwitching" class="collapse">
				<image v-show="!carfrontImg" @tap="ocrIdentify('carInfo')" src="/static/image/car-insure/carbg.png"
					mode="" style="width: 100%;height: 198px;">
				</image>
				<view v-show="carfrontImg">
					<view class="movable-view dis f-c a-c">
						<movable-area>
							<movable-view direction="all" out-of-bounds :scale="true" :damping="30" :friction="10">
								<image v-if="isActive" :src="carfrontImg" mode="widthFix"
									:style="{width:'100%',height:'100%',transform:`rotate(-${cardeg}deg)`}">
								</image>
								<image v-else :src="carbackImg" mode="widthFix"
									:style="{width:'100%',height:'100%',transform:`rotate(-${cardeg}deg)`}">
								</image>
							</movable-view>
						</movable-area>
						<view class="operate-img dis j-s a-c">
							<view class="dis a-c" @tap="rotatefront('cardeg')">
								<image src="/static/image/car-insure/rotate1.png" mode=""></image>
								左转
							</view>
							<view class="dis a-c" @tap="ocrIdentify('carInfo')">
								<image src="/static/image/car-insure/upload.png" mode=""></image>
								上传
							</view>
							<view class="dis a-c" @tap="rotateback('cardeg')">
								<image src="/static/image/car-insure/rotate2.png" mode=""></image>
								右转
							</view>
						</view>
					</view>
					<u-form :model="carInfo" :rules="carRules" ref="carForm" :errorType="errorType" label-width="200"
						style="padding: 0 15px;">
						<u-form-item label-width="120" label="车牌号:">
							<u-input placeholder="输入车牌号" v-model="carInfo.licenseNo" type="text"
								:custom-style="{textAlign:'right'}" @input="upperCaseType('licenseNo')"></u-input>
						</u-form-item>
						<u-form-item label="品牌型号:" prop="modelcname">
							<u-input placeholder="请输入品牌型号" v-model="carInfo.modelcname" type="text"
								:custom-style="{textAlign:'right'}" @input="upperCaseType('modelcname')"></u-input>
							<view class="search ml-1" @tap="toChooseVehicleType(carInfo.modelcname)">查询</view>
						</u-form-item>
						<u-form-item label="车辆识别码:" prop="frameNo">
							<u-input type="text" placeholder="请输入车辆识别码" v-model="carInfo.frameNo"
								:custom-style="{textAlign:'right'}" @input="upperCaseType('frameNo')"></u-input>
							<view class="search ml-1" @tap="toChooseVin(carInfo.frameNo)">查询</view>
						</u-form-item>
						<u-form-item label="发动机号:" prop="engineNo">
							<u-input type="text" placeholder="请输入发动机号" v-model="carInfo.engineNo"
								:custom-style="{textAlign:'right'}" @input="upperCaseType('engineNo')"></u-input>
						</u-form-item>
						<u-form-item label="注册日期:" prop="registerDate">
							<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="registerDateShow"
								v-model="carInfo.registerDate" placeholder="请选择注册日期" @click="registerDateShow = true"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear"
								:end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','registerDate')"></u-picker>
						</u-form-item>
						<u-form-item label="发证日期:" prop="issueDate">
							<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="issueDateShow"
								v-model="carInfo.issueDate" placeholder="请选择发证日期" @click="issueDateShow = true"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="issueDateShow" mode="time" :params="params"
								@confirm="e=> Dateconfirm(e,'carInfo','issueDate')"></u-picker>
						</u-form-item>
						<u-form-item label="整备质量:" prop="completeKerbMass">
							<u-input type="text" placeholder="请输入整备质量" v-model="carInfo.completeKerbMass"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="核定载质量:" prop="frameNo">
							<u-input type="text" placeholder="请输入核定载质量" v-model="carInfo.limitLoad"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="使用性质:" prop="carnature">
							<u-input v-model="carInfo1.carnature" type="select" :select-open="carnatureShow"
								@click="carnatureShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择使用性质" />
							<u-select mode="single-column" :list="natureOfVehicleUseoptions" v-model="carnatureShow"
								label-name="dictTag" value-name="dictValue"
								@confirm="dictionaryConfirm($event,'carnature')"></u-select>
						</u-form-item>
						<u-form-item label="能源种类: " prop="energyType">
							<u-input v-model="carInfo1.energyType" type="select" :select-open="energyTypeShow"
								@click="energyTypeShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择能源种类" />
							<u-select mode="single-column" :list="energyTypeoptions" v-model="energyTypeShow"
								label-name="dictTag" value-name="dictValue"
								@confirm="dictionaryConfirm($event,'energyType')"></u-select>
						</u-form-item>
						<u-form-item label="车辆用途: " prop="vehicleUse">
							<u-input v-model="carInfo1.vehicleUse" type="select" :select-open="vehicleUseShow"
								@click="vehicleUseShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择车辆用途" />
							<u-select v-if="carInfo.carnature=='01'" mode="single-column"
								:list="businessVehicleUseoptions" v-model="vehicleUseShow" label-name="dictTag"
								value-name="dictValue" @confirm="dictionaryConfirm($event,'vehicleUse')"></u-select>
							<u-select v-else mode="single-column" :list="outOfBusinessVehicleUseoptions"
								v-model="vehicleUseShow" label-name="dictTag" value-name="dictValue"
								@confirm="dictionaryConfirm($event,'vehicleUse')"></u-select>
						</u-form-item>
						<u-form-item label="车辆类型: " prop="cartype">
							<u-input v-model="carInfo1.cartype" type="select" :select-open="cartypeShow"
								@click="cartypeShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择车辆类型" />
							<u-select mode="single-column" :searchShow="true"
								:list="trafficManagementVehicleTypeoptions" v-model="cartypeShow" label-name="dictTag"
								value-name="dictValue" @confirm="dictionaryConfirm($event,'cartype')"></u-select>
						</u-form-item>
						<u-form-item label="车辆种类: " prop="cimodelclass">
							<u-input v-model="carInfo1.cimodelclass" type="select" :select-open="cimodelclassShow"
								@click="cimodelclassShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择车辆种类" />
							<u-select mode="single-column" :list="vehicleTypeoptions" v-model="cimodelclassShow"
								label-name="dictTag" value-name="dictValue"
								@confirm="dictionaryConfirm($event,'cimodelclass')"></u-select>
						</u-form-item>
						<u-form-item label="年款:">
							<u-input type="text" placeholder="请输入年款" v-model="carInfo.caryear"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="座位数:">
							<u-input type="text" placeholder="请输入座位数" v-model="carInfo.seatCount"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="排量:">
							<u-input type="text" placeholder="请输入排量" v-model="carInfo.enginedesc"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="功率:">
							<u-input type="text" placeholder="请输入功率" v-model="carInfo.powerScale"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="新车购置价:" prop="purchasePrice">
							<u-input type="text" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
								:custom-style="{textAlign:'right'}" @input="upperCaseType('purchasePrice')"></u-input>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="collapse" v-show="!carSwitching">
				<u-form :model="carInfo" :rules="carRules" ref="carForm1" :errorType="errorType" label-width="200"
					style="padding: 0 15px;">
					<u-form-item label-width="120" label="车牌号:">
						<u-input placeholder="输入车牌号" v-model="carInfo.licenseNo" type="text"
							:custom-style="{textAlign:'right'}" @input="upperCaseType('licenseNo')"></u-input>
					</u-form-item>
					<u-form-item label="品牌型号:" prop="modelcname">
						<u-input placeholder="请输入品牌型号" v-model="carInfo.modelcname" type="text"
							:custom-style="{textAlign:'right'}" @input="upperCaseType('modelcname')"></u-input>
						<view class="search ml-1" @tap="toChooseVehicleType(carInfo.modelcname)">查询</view>
					</u-form-item>
					<u-form-item label="车辆识别码:" prop="frameNo">
						<u-input type="text" placeholder="请输入车辆识别码" v-model="carInfo.frameNo"
							:custom-style="{textAlign:'right'}" @input="upperCaseType('frameNo')"></u-input>
						<view class="search ml-1" @tap="toChooseVin(carInfo.frameNo)">查询</view>
					</u-form-item>
					<u-form-item label="发动机号:" prop="engineNo">
						<u-input type="text" placeholder="请输入发动机号" v-model="carInfo.engineNo"
							:custom-style="{textAlign:'right'}" @input="upperCaseType('engineNo')"></u-input>
					</u-form-item>
					<u-form-item label="注册日期:" prop="registerDate">
						<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="registerDateShow"
							v-model="carInfo.registerDate" placeholder="请选择注册日期" @click="registerDateShow = true"
							placeholder-style="color:#808080"></u-input>
						<u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear"
							:end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','registerDate')"></u-picker>
					</u-form-item>
					<u-form-item label="发证日期:" prop="issueDate">
						<u-input type="select" :custom-style="{textAlign:'right'}" :select-open="issueDateShow"
							v-model="carInfo.issueDate" placeholder="请选择发证日期" @click="issueDateShow = true"
							placeholder-style="color:#808080"></u-input>
						<u-picker v-model="issueDateShow" mode="time" :params="params"
							@confirm="e=> Dateconfirm(e,'carInfo','issueDate')"></u-picker>
					</u-form-item>
					<u-form-item label="整备质量:" prop="completeKerbMass">
						<u-input type="text" placeholder="请输入整备质量" v-model="carInfo.completeKerbMass"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="核定载质量:" prop="frameNo">
						<u-input type="text" placeholder="请输入核定载质量" v-model="carInfo.limitLoad"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="使用性质:" prop="carnature">
						<u-input v-model="carInfo1.carnature" type="select" :select-open="carnatureShow"
							@click="carnatureShow = true" :custom-style="{textAlign:'right'}"
							placeholder-style="color:#808080" placeholder="请选择使用性质" />
						<u-select mode="single-column" :list="natureOfVehicleUseoptions" v-model="carnatureShow"
							label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'carnature')"></u-select>
					</u-form-item>
					<u-form-item label="能源种类: " prop="energyType">
						<u-input v-model="carInfo1.energyType" type="select" :select-open="energyTypeShow"
							@click="energyTypeShow = true" :custom-style="{textAlign:'right'}"
							placeholder-style="color:#808080" placeholder="请选择能源种类" />
						<u-select mode="single-column" :list="energyTypeoptions" v-model="energyTypeShow"
							label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'energyType')"></u-select>
					</u-form-item>
					<u-form-item label="车辆用途: " prop="vehicleUse">
						<u-input v-model="carInfo1.vehicleUse" type="select" :select-open="vehicleUseShow"
							@click="vehicleUseShow = true" :custom-style="{textAlign:'right'}"
							placeholder-style="color:#808080" placeholder="请选择车辆用途" />
						<u-select v-if="carInfo.carnature=='01'" mode="single-column" :list="businessVehicleUseoptions"
							v-model="vehicleUseShow" label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'vehicleUse')"></u-select>
						<u-select v-else mode="single-column" :list="outOfBusinessVehicleUseoptions"
							v-model="vehicleUseShow" label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'vehicleUse')"></u-select>
					</u-form-item>
					<u-form-item label="车辆类型: " prop="cartype">
						<u-input v-model="carInfo1.cartype" type="select" :select-open="cartypeShow"
							@click="cartypeShow = true" :custom-style="{textAlign:'right'}"
							placeholder-style="color:#808080" placeholder="请选择车辆类型" />
						<u-select mode="single-column" :searchShow="true" :list="trafficManagementVehicleTypeoptions"
							v-model="cartypeShow" label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'cartype')"></u-select>
					</u-form-item>
					<u-form-item label="车辆种类: " prop="cimodelclass">
						<u-input v-model="carInfo1.cimodelclass" type="select" :select-open="cimodelclassShow"
							@click="cimodelclassShow = true" :custom-style="{textAlign:'right'}"
							placeholder-style="color:#808080" placeholder="请选择车辆种类" />
						<u-select mode="single-column" :list="vehicleTypeoptions" v-model="cimodelclassShow"
							label-name="dictTag" value-name="dictValue"
							@confirm="dictionaryConfirm($event,'cimodelclass')"></u-select>
					</u-form-item>
					<u-form-item label="年款:">
						<u-input type="text" placeholder="请输入年款" v-model="carInfo.caryear"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="座位数:">
						<u-input type="text" placeholder="请输入座位数" v-model="carInfo.seatCount"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="排量:">
						<u-input type="text" placeholder="请输入排量" v-model="carInfo.enginedesc"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="功率:">
						<u-input type="text" placeholder="请输入功率" v-model="carInfo.powerScale"
							:custom-style="{textAlign:'right'}"></u-input>
					</u-form-item>
					<u-form-item label="新车购置价:" prop="purchasePrice">
						<u-input type="text" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
							:custom-style="{textAlign:'right'}" @input="upperCaseType('purchasePrice')"></u-input>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view v-show="userModificationLabel">
			<view class="Information" style="margin-top: 84px;">
				<text class="title">车主信息</text>
				<view class="title dis j-s a-c">
					<view class="dis a-c">
						<text>身份证识别</text>
						<view class="switch-container ml-2" @tap="toggleSwitch" v-if="ownerbackImg">
							<view class="switch-track">
								<view class="switch-thumb dis a-c j-c" :class="{ thumbactive: !isActive }"></view>
								<view class="switch-thumb1 dis a-c j-c" :class="{ thumbactive1: isActive }">正面</view>
								<view class="switch-thumb2 dis a-c j-c" :class="{ thumbactive1: !isActive }">反面</view>
							</view>
						</view>
					</view>
					<view class="manualSwitch dis a-c j-s" @click="ownerSwitching=!ownerSwitching">
						<image
							:src="ownerSwitching?'../../static/image/car-insure/manualInput.png':'../../static/image/car-insure/captureRecognition.png'"
							mode=""></image>
						<text>{{ownerSwitching?'手动输入':'拍照识别'}}</text>
					</view>
				</view>
				<view v-show="ownerSwitching" class="collapse">
					<!-- 未识别时图片显示 -->
					<image v-show="!ownerfrontImg" @tap="ocrIdentify('ownerInfo')"
						src="/static/image/car-insure/userbg.png" mode="" style="width: 100%;height: 198px;">
					</image>
					<view v-show="ownerfrontImg">
						<!-- 识别后可拖动窗口 -->
						<view class="movable-view dis f-c a-c">
							<movable-area>
								<movable-view direction="all" out-of-bounds :scale="true" :damping="30" :friction="10">
									<image v-if="isActive" :src="ownerfrontImg" mode="widthFix"
										:style="{width:'100%',height:'100%',transform:`rotate(-${user1deg}deg)`}">
									</image>
									<image v-else :src="ownerbackImg" mode="widthFix"
										:style="{width:'100%',height:'100%',transform:`rotate(-${user1deg}deg)`}">
									</image>
								</movable-view>
							</movable-area>
							<view class="operate-img dis j-s a-c">
								<view class="dis a-c" @tap="rotatefront('user1deg')">
									<image src="/static/image/car-insure/rotate1.png" mode=""></image>
									左转
								</view>
								<view class="dis a-c" @tap="ocrIdentify('ownerInfo')">
									<image src="/static/image/car-insure/upload.png" mode=""></image>
									上传
								</view>
								<view class="dis a-c" @tap="rotateback('user1deg')">
									<image src="/static/image/car-insure/rotate2.png" mode=""></image>
									右转
								</view>
							</view>
						</view>
						<!-- 识别后表单 -->
						<u-form :model="ownerInfo" :rules="ownerRules" ref="ownerForm" :errorType="errorType"
							label-width="200" style="padding: 0 15px;">
							<u-form-item label="姓名:" prop="name">
								<u-input placeholder="请输入姓名" v-model="ownerInfo.name" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
								<view class="dis a-c j-end" style="width:100%;height: 100%;">
									身份证
								</view>
							</u-form-item>
							<u-form-item label="证件号:" prop="identifyNumber">
								<u-input placeholder="请输入证件号" v-model="ownerInfo.identifyNumber" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="年龄:" prop="age">
								<u-input placeholder="请输入年龄" v-model="ownerInfo.age" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="性别:" prop="gender">
								<u-input placeholder="请输入性别" v-model="ownerInfo.gender" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="手机号:" prop="mobile">
								<u-input placeholder="请输入手机号" v-model="ownerInfo.mobile" type="text" maxlength="11"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="地址:" prop="addr">
								<u-input type="textarea" v-model="ownerInfo.addr" :custom-style="{textAlign:'right'}"
									placeholder-style="color:#808080" :auto-height="true" placeholder="请输入地址" />
							</u-form-item>
							<u-form-item label="邮箱:">
								<u-input placeholder="请输入邮箱" v-model="ownerInfo.email" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="有效期起期:" prop="identifyValidDate">
								<u-input type="select" :select-open="ownerDateShow"
									v-model="ownerInfo.identifyValidDate" placeholder="请选择有效期起期"
									@click="ownerDateShow = true" :custom-style="{textAlign:'right'}"
									placeholder-style="color:#808080"></u-input>
								<u-picker v-model="ownerDateShow" mode="time" :params="params"
									@confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
							</u-form-item>
							<u-form-item label="有效期止期:" prop="identifyValidEndDate">
								<u-input placeholder="有效期止期" v-model="ownerInfo.identifyValidEndDate" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="止期年限:" style="padding: 10rpx 0;">
								<view class="dis a-c j-c">
									<view class="status-data" :class="item.value==ownerValidEndDateholder? 'active':''"
										v-for="(item,index) in endDateList"
										@tap="ValidEndDateClick(item.value,'ownerValidEndDateholder','ownerInfo')"
										:key="index">
										{{item.label}}
									</view>
								</view>
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view v-show="!ownerSwitching" class="collapse">
					<u-form :model="ownerInfo" :rules="ownerRules" ref="ownerForm1" :errorType="errorType"
						label-width="200" style="padding: 0 15px;">
						<u-form-item label="姓名:" prop="name">
							<u-input placeholder="请输入姓名" v-model="ownerInfo.name" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</u-form-item>
						<u-form-item label="证件号:" prop="identifyNumber">
							<u-input placeholder="请输入证件号" v-model="ownerInfo.identifyNumber" type="text"
								:custom-style="{textAlign:'right'}"
								@blur="binddata('identifyNumber', $event,'ownerInfo')"></u-input>
						</u-form-item>
						<u-form-item label="年龄:" prop="age">
							<u-input placeholder="请输入年龄" v-model="ownerInfo.age" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="性别:" prop="gender">
							<u-input placeholder="请输入性别" v-model="ownerInfo.gender" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="手机号:" prop="mobile">
							<u-input placeholder="请输入手机号" v-model="ownerInfo.mobile" type="text" maxlength="11"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="地址:" prop="addr">
							<u-input type="textarea" v-model="ownerInfo.addr" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" :auto-height="true" placeholder="请输入地址" />
						</u-form-item>
						<u-form-item label="邮箱:">
							<u-input placeholder="请输入邮箱" v-model="ownerInfo.email" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="有效期起期:" prop="identifyValidDate">
							<u-input type="select" :select-open="ownerDateShow" v-model="ownerInfo.identifyValidDate"
								placeholder="请选择有效期起期" @click="ownerDateShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="ownerDateShow" mode="time" :params="params"
								@confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
						</u-form-item>
						<u-form-item label="有效期止期:" prop="identifyValidEndDate">
							<u-input placeholder="有效期止期" v-model="ownerInfo.identifyValidEndDate" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="止期年限:" style="padding: 10rpx 0;">
							<view class="dis a-c j-start f-wrap">
								<view class="status-data" :class="item.value==ownerValidEndDateholder? 'active':''"
									v-for="(item,index) in endDateList"
									@tap="ValidEndDateClick(item.value,'ownerValidEndDateholder','ownerInfo')"
									:key="index">
									{{item.label}}
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="Information" style="padding-bottom: 10px;border-bottom: 1px solid #f2f2f2;">
				<view class=" dis j-s a-c">
					<text class="title">投保人信息</text>
					<view class="dis a-c j-c">
						<view class="status-data" :class="item.value==policyHolderholder? 'active':''"
							v-for="(item,index) in holderstatusList" @tap="applicantholderClick(item.value)"
							:key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="title dis j-s a-c mt-2" v-show="policyHolderholder=='99'">
					<view class="dis a-c">
						<text>身份证识别</text>
						<view class="switch-container ml-2" @tap="toggleSwitch" v-if="policyHolderbackImg">
							<view class="switch-track">
								<view class="switch-thumb dis a-c j-c" :class="{ thumbactive: !isActive }"></view>
								<view class="switch-thumb1 dis a-c j-c" :class="{ thumbactive1: isActive }">正面</view>
								<view class="switch-thumb2 dis a-c j-c" :class="{ thumbactive1: !isActive }">反面</view>
							</view>
						</view>
					</view>
					<view class="manualSwitch dis a-c j-s" @click="policySwitching=!policySwitching">
						<image
							:src="policySwitching?'../../static/image/car-insure/manualInput.png':'../../static/image/car-insure/captureRecognition.png'"
							mode=""></image>
						<text>{{policySwitching?'手动输入':'拍照识别'}}</text>
					</view>
				</view>
				<view v-show="policyHolderholder=='99'  && policySwitching" class="collapse">
					<!-- 未识别时图片显示 -->
					<image v-show="!policyHolderfrontImg" @tap="ocrIdentify('policyHolderInfo')"
						src="/static/image/car-insure/userbg.png" mode="" style="width: 100%;height: 198px;">
					</image>
					<view v-show=" policyHolderfrontImg">
						<view class="movable-view dis f-c a-c">
							<movable-area>
								<movable-view direction="all" out-of-bounds :scale="true" :damping="30" :friction="10">
									<image v-if="isActive" :src="policyHolderfrontImg" mode="widthFix"
										:style="{width:'100%',height:'100%',transform:`rotate(-${user2deg}deg)`}">
									</image>
									<image v-else :src="policyHolderbackImg" mode="widthFix"
										:style="{width:'100%',height:'100%',transform:`rotate(-${user2deg}deg)`}">
									</image>
								</movable-view>
							</movable-area>
							<view class="operate-img dis j-s a-c">
								<view class="dis a-c" @tap="rotatefront('user2deg')">
									<image src="/static/image/car-insure/rotate1.png" mode=""></image>
									左转
								</view>
								<view class="dis a-c" @tap="ocrIdentify('policyHolderInfo')">
									<image src="/static/image/car-insure/upload.png" mode=""></image>
									上传
								</view>
								<view class="dis a-c" @tap="rotateback('user2deg')">
									<image src="/static/image/car-insure/rotate2.png" mode=""></image>
									右转
								</view>
							</view>
						</view>
						<u-form :model="policyHolderInfo" :rules="policyRules" ref="policyForm" :errorType="errorType"
							label-width="200" style="padding: 0 15px;">
							<u-form-item label="姓名:" prop="name">
								<u-input placeholder="请输入姓名" v-model="policyHolderInfo.name" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
								<view class="dis a-c j-end" style="width:100%;height: 100%;">
									身份证
								</view>
							</u-form-item>
							<u-form-item label="证件号:" prop="identifyNumber">
								<u-input placeholder="请输入证件号" v-model="policyHolderInfo.identifyNumber" type="text"
									:custom-style="{textAlign:'right'}"
									@blur="binddata('identifyNumber', $event,'policyHolderInfo')"></u-input>
							</u-form-item>
							<u-form-item label="年龄:" prop="age">
								<u-input placeholder="请输入年龄" v-model="policyHolderInfo.age" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="性别:" prop="gender">
								<u-input placeholder="请输入性别" v-model="policyHolderInfo.gender" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="手机号:" prop="mobile">
								<u-input placeholder="请输入手机号" v-model="policyHolderInfo.mobile" type="text"
									maxlength="11" :custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="地址:" prop="addr">
								<u-input type="textarea" v-model="policyHolderInfo.addr"
									:custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
									:auto-height="true" placeholder="请输入地址" />
							</u-form-item>
							<u-form-item label="邮箱:">
								<u-input placeholder="请输入邮箱" v-model="policyHolderInfo.email" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="有效期起期:" prop="identifyValidDate">
								<u-input type="select" :select-open="applicantDateShow"
									v-model="policyHolderInfo.identifyValidDate" placeholder="请选择有效期起期"
									@click="applicantDateShow = true" :custom-style="{textAlign:'right'}"
									placeholder-style="color:#808080"></u-input>
								<u-picker v-model="applicantDateShow" mode="time" :params="params"
									@confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidDate')"></u-picker>
							</u-form-item>
							<u-form-item label="有效期止期:" prop="identifyValidEndDate">
								<u-input placeholder="有效期止期" v-model="policyHolderInfo.identifyValidEndDate" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="止期年限:" style="padding: 10rpx 0;">
								<view class="dis a-c j-c">
									<view class="status-data" :class="item.value==policyValidEndDateholder? 'active':''"
										v-for="(item,index) in endDateList"
										@tap="ValidEndDateClick(item.value,'policyValidEndDateholder','policyHolderInfo')"
										:key="index">
										{{item.label}}
									</view>
								</view>
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view v-show="policyHolderholder=='99'  && !policySwitching" class="collapse">
					<u-form :model="policyHolderInfo" :rules="policyRules" ref="policyForm1" :errorType="errorType"
						label-width="200" style="padding: 0 15px;">
						<u-form-item label="姓名:" prop="name">
							<u-input placeholder="请输入姓名" v-model="policyHolderInfo.name" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</u-form-item>
						<u-form-item label="证件号:" prop="identifyNumber">
							<u-input placeholder="请输入证件号" v-model="policyHolderInfo.identifyNumber" type="text"
								:custom-style="{textAlign:'right'}"
								@blur="binddata('identifyNumber', $event,'policyHolderInfo')"></u-input>
						</u-form-item>
						<u-form-item label="年龄:" prop="age">
							<u-input placeholder="请输入年龄" v-model="policyHolderInfo.age" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="性别:" prop="gender">
							<u-input placeholder="请输入性别" v-model="policyHolderInfo.gender" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="手机号:" prop="mobile">
							<u-input placeholder="请输入手机号" v-model="policyHolderInfo.mobile" type="text" maxlength="11"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="地址:" prop="addr">
							<u-input type="textarea" v-model="policyHolderInfo.addr" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" :auto-height="true" placeholder="请输入地址" />
						</u-form-item>
						<u-form-item label="邮箱:">
							<u-input placeholder="请输入邮箱" v-model="policyHolderInfo.email" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="有效期起期:" prop="identifyValidDate">
							<u-input type="select" :select-open="applicantDateShow"
								v-model="policyHolderInfo.identifyValidDate" placeholder="请选择有效期起期"
								@click="applicantDateShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="applicantDateShow" mode="time" :params="params"
								@confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidDate')"></u-picker>
						</u-form-item>
						<u-form-item label="有效期止期:" prop="identifyValidEndDate">
							<u-input placeholder="有效期止期" v-model="policyHolderInfo.identifyValidEndDate" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="止期年限:" style="padding: 10rpx 0;">
							<view class="dis a-c j-c">
								<view class="status-data" :class="item.value==policyValidEndDateholder? 'active':''"
									v-for="(item,index) in endDateList"
									@tap="ValidEndDateClick(item.value,'policyValidEndDateholder','policyHolderInfo')"
									:key="index">
									{{item.label}}
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
			<view class="Information " style="padding-bottom: 10px;border-bottom: 1px solid #f2f2f2;">
				<view class="dis j-s a-c">
					<text class="title">被保人信息</text>
					<view class="dis a-c j-c">
						<view class="status-data" :class="item.value==Insuredholder? 'active':''"
							v-for="(item,index) in insuredstatusList" @tap="InsuredholderClick(item.value)"
							:key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="title dis j-s a-c mt-2" v-show="Insuredholder=='99'">
					<view class="dis a-c">
						<text>身份证识别</text>
						<view class="switch-container ml-2" @tap="toggleSwitch" v-if="InsuredbackImg">
							<view class="switch-track">
								<view class="switch-thumb dis a-c j-c" :class="{ thumbactive: !isActive }"></view>
								<view class="switch-thumb1 dis a-c j-c" :class="{ thumbactive1: isActive }">正面</view>
								<view class="switch-thumb2 dis a-c j-c" :class="{ thumbactive1: !isActive }">反面</view>
							</view>
						</view>
					</view>
					<view class="manualSwitch dis a-c j-s" @click="insuredSwitching=!insuredSwitching">
						<image
							:src="insuredSwitching?'../../static/image/car-insure/manualInput.png':'../../static/image/car-insure/captureRecognition.png'"
							mode=""></image>
						<text>{{insuredSwitching?'手动输入':'拍照识别'}}</text>
					</view>
				</view>
				<view v-show="Insuredholder=='99' && insuredSwitching" class="collapse">
					<!-- 未识别时图片显示 -->
					<image v-show="!InsuredfrontImg" @tap="ocrIdentify('insuredPersonInfo')"
						src="/static/image/car-insure/userbg.png" mode="" style="width: 100%;height: 198px;">
					</image>
					<view v-show='InsuredfrontImg'>
						<view class="movable-view dis f-c a-c">
							<movable-area>
								<movable-view direction="all" out-of-bounds :scale="true">
									<image v-if="isActive" :src="InsuredfrontImg" mode=""
										:style="{width:'100%',height:'100%',transform:`rotate(-${user3deg}deg)`}">
									</image>
									<image v-else :src="InsuredbackImg" mode=""
										:style="{width:'100%',height:'100%',transform:`rotate(-${user3deg}deg)`}">
									</image>
								</movable-view>
							</movable-area>
							<view class="operate-img dis j-s a-c">
								<view class="dis a-c" @tap="rotatefront('user3deg')">
									<image src="/static/image/car-insure/rotate1.png" mode=""></image>
									左转
								</view>
								<view class="dis a-c" @tap="ocrIdentify('insuredPersonInfo')">
									<image src="/static/image/car-insure/upload.png" mode=""></image>
									上传
								</view>
								<view class="dis a-c" @tap="rotateback('user3deg')">
									<image src="/static/image/car-insure/rotate2.png" mode=""></image>
									右转
								</view>
							</view>
						</view>
						<u-form :model="insuredPersonInfo" :rules="insuredRules" ref="insuredForm"
							:errorType="errorType" label-width="200" style="padding: 0 15px;">
							<u-form-item label="姓名:" prop="name">
								<u-input placeholder="请输入姓名" v-model="insuredPersonInfo.name" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
								<view class="dis a-c j-end" style="width:100%;height: 100%;">
									身份证
								</view>
							</u-form-item>
							<u-form-item label="证件号:" prop="identifyNumber">
								<u-input placeholder="请输入证件号" v-model="insuredPersonInfo.identifyNumber" type="text"
									:custom-style="{textAlign:'right'}"
									@blur="binddata('identifyNumber', $event,'insuredPersonInfo')"></u-input>
							</u-form-item>
							<u-form-item label="年龄:" prop="age">
								<u-input placeholder="请输入年龄" v-model="insuredPersonInfo.age" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="性别:" prop="gender">
								<u-input placeholder="请输入性别" v-model="insuredPersonInfo.gender" disabled type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="手机号:" prop="mobile">
								<u-input placeholder="请输入手机号" v-model="insuredPersonInfo.mobile" type="text"
									maxlength="11" :custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="地址:" prop="addr">
								<u-input type="textarea" v-model="insuredPersonInfo.addr"
									:custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
									:auto-height="true" placeholder="请输入地址" />
							</u-form-item>
							<u-form-item label="邮箱:">
								<u-input placeholder="请输入邮箱" v-model="insuredPersonInfo.email" type="text"
									:custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="有效期起期:" prop="identifyValidDate">
								<u-input type="select" :select-open="InsuredDateShow"
									v-model="insuredPersonInfo.identifyValidDate" placeholder="请选择有效期起期"
									@click="InsuredDateShow = true" :custom-style="{textAlign:'right'}"
									placeholder-style="color:#808080"></u-input>
								<u-picker v-model="InsuredDateShow" mode="time" :params="params"
									@confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidDate')"></u-picker>
							</u-form-item>
							<u-form-item label="有效期止期:" prop="identifyValidEndDate">
								<u-input placeholder="有效期止期" v-model="insuredPersonInfo.identifyValidEndDate"
									type="text" :custom-style="{textAlign:'right'}"></u-input>
							</u-form-item>
							<u-form-item label="止期年限:" style="padding: 10rpx 0;">
								<view class="dis a-c j-c">
									<view class="status-data"
										:class="item.value==insuredValidEndDateholder? 'active':''"
										v-for="(item,index) in endDateList"
										@tap="ValidEndDateClick(item.value,'insuredValidEndDateholder','insuredPersonInfo')"
										:key="index">
										{{item.label}}
									</view>
								</view>
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view v-show="Insuredholder=='99' && !insuredSwitching" class="collapse">
					<u-form :model="insuredPersonInfo" :rules="insuredRules" ref="insuredForm1" :errorType="errorType"
						label-width="200" style="padding: 0 15px;">
						<u-form-item label="姓名:" prop="name">
							<u-input placeholder="请输入姓名" v-model="insuredPersonInfo.name" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</u-form-item>
						<u-form-item label="证件号:" prop="identifyNumber">
							<u-input placeholder="请输入证件号" v-model="insuredPersonInfo.identifyNumber" type="text"
								:custom-style="{textAlign:'right'}"
								@blur="binddata('identifyNumber', $event,'insuredPersonInfo')"></u-input>
						</u-form-item>
						<u-form-item label="年龄:" prop="age">
							<u-input placeholder="请输入年龄" v-model="insuredPersonInfo.age" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="性别:" prop="gender">
							<u-input placeholder="请输入性别" v-model="insuredPersonInfo.gender" disabled type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="手机号:" prop="mobile">
							<u-input placeholder="请输入手机号" v-model="insuredPersonInfo.mobile" type="text" maxlength="11"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="地址:" prop="addr">
							<u-input type="textarea" v-model="insuredPersonInfo.addr"
								:custom-style="{textAlign:'right'}" placeholder-style="color:#808080"
								:auto-height="true" placeholder="请输入地址" />
						</u-form-item>
						<u-form-item label="邮箱:">
							<u-input placeholder="请输入邮箱" v-model="insuredPersonInfo.email" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="有效期起期:" prop="identifyValidDate">
							<u-input type="select" :select-open="InsuredDateShow"
								v-model="insuredPersonInfo.identifyValidDate" placeholder="请选择有效期起期"
								@click="InsuredDateShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="InsuredDateShow" mode="time" :params="params"
								@confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidDate')"></u-picker>
						</u-form-item>
						<u-form-item label="有效期止期:" prop="identifyValidEndDate">
							<u-input placeholder="有效期止期" v-model="insuredPersonInfo.identifyValidEndDate" type="text"
								:custom-style="{textAlign:'right'}"></u-input>
						</u-form-item>
						<u-form-item label="止期年限:" style="padding: 10rpx 0;">
							<view class="dis a-c j-c">
								<view class="status-data" :class="item.value==insuredValidEndDateholder? 'active':''"
									v-for="(item,index) in endDateList"
									@tap="ValidEndDateClick(item.value,'insuredValidEndDateholder','insuredPersonInfo')"
									:key="index">
									{{item.label}}
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<button type="primary"
				style="background:#0052FF;color:#fff; width: 100%;height: 40px;font-size: 15px;line-height: 40px;"
				@tap="next">下一步</button>
			<!-- <u-button type="primary" style="background:#0052FF;" hover-class="none" @tap="next">下一步</u-button> -->
		</view>


		<u-popup v-model="carModelLookupModal" mode="bottom" border-radius="10" height="1300">
			<view class="ZJcheckboxGroup dis f-c">
				<view class="title dis a-c j-c">
					<text>车辆型号</text>
				</view>
				<scroll-view scroll-y="true" class="scolcentent">
					<view class="noDataIndicator dis f-c  a-c mt-4" v-if="carTypeVINList.length<0">
						<image src="../../static/image/car-insure/noDataIndicator.png" mode=""></image>
						<text>搜索不出内容，请点击下一步选择品牌型号，再进行报价！</text>
					</view>
					<view class="row mt-2" v-for="(item,index) in carTypeVINList" :key="index"
						:class="isFocusedIndex==index?'carTypeColor':''" @tap="carTypeClick(index,item)">
						<view class="row_header dis a-c j-s">
							<view class="left">{{item.modelName }}</view>
							<view class="right">￥{{item.replacementValue}}</view>
						</view>
						<view class="row_body dis f-c">
							<view class="dis j-s">
								<view style="margin-right: 5px;">车系:{{item.series}}</view>
								<view>{{item.remark}}</view>
								<view style="margin-left: auto;">（{{item.ratedPassengerCapacity}}座）</view>
							</view>
							<view class="dis j-s">
								<view>年款:<text style="color: #2432ff;">{{item.marketYear}}</text></view>
								<view>排量:<text style="color: #2432ff;">{{item.displacement}}</text></view>
								<view>功率:<text style="color: #2432ff;">{{item.powerScale}}</text></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="operateBtn dis j-s a-c mb-1">
					<view class="confirm dis a-c j-c" @click="carModelLookupSubmit()">
						确定
					</view>
					<view class="confirm dis a-c j-c" v-if="carTypeVINList.length<0" @click="carModelLookupNext()">
						下一步
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="brandModelLookupModal" mode="bottom" border-radius="10" height="1300">
			<view class="ZJcheckboxGroup dis f-c">
				<view class="title dis a-c j-c">
					<text>品牌型号</text>
				</view>
				<view class="">
					<u-input v-model="marketYear" type="select" :border="true" :select-open="marketYearShow"
						@click="marketYearShow = true" :custom-style="{textAlign:'center'}"
						placeholder-style="color:#808080" placeholder="选择年款"
						style="float: right;width: 100px;margin: 10px;" />
				</view>
				<scroll-view scroll-y="true" class="scolcentent">
					<view class="noDataIndicator dis f-c  a-c" v-if="brandModelList && brandModelList.length==0">
						<image src="../../static/image/car-insure/noDataIndicator.png" mode=""></image>
						<text>搜索不出内容，请点击选择品牌型号，再进行报价！</text>
					</view>
					<view class="row mt-2" v-for="(item,index) in brandModelList" :key="index"
						:class="brandModelIndex==index?'carTypeColor':''" @tap="brandModelClick(index,item)">
						<view class="row_header dis a-c j-s">
							<view class="left">{{item.modelName }}</view>
							<view class="right">￥{{item.replacementValue}}</view>
						</view>
						<view class="row_body dis f-c">
							<view class="dis j-s">
								<view style="margin-right: 5px;">车系:{{item.series}}</view>
								<view>{{item.remark}}</view>
								<view style="margin-left: auto;">（{{item.ratedPassengerCapacity}}座）</view>
							</view>
							<view class="dis j-s">
								<view>年款:<text style="color: #2432ff;">{{item.marketYear}}</text></view>
								<view>排量:<text style="color: #2432ff;">{{item.displacement}}</text></view>
								<view>功率:<text style="color: #2432ff;">{{item.powerScale}}</text></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="operateBtn dis j-s a-c mb-1">
					<view class="confirm dis a-c j-c" @click="brandModelLookupSubmit()">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<OCRComponent :showModal='OCRShow' @closePopup="closePopup" :tabslist="tabslist" @tabschange="OCRtabschange"
			:tabsCurrent="tabsCurrent" :checkType='checkType' @carCallback="carCallback"
			@ownerInfoCallback="ownerInfoCallback" @applicantInfoCallback="applicantInfoCallback"
			@InsuredInfoCallback="InsuredInfoCallback">
		</OCRComponent>
		<u-picker v-model="marketYearShow" mode="time" :params="params1" @confirm="marketYearDateconfirm"></u-picker>
	</view>
</template>

<script>
	import OCRComponent from '@/components/modules/carInsure/OCRComponent/OCRComponent.vue'; //引用图片信息检查插件
	import {
		getAgeByIdCard,
		getGenderFromIdCard
	} from '@/plugins/utils';
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		components: {
			OCRComponent
		},
		data() {
			return {
				//品牌弹窗
				params1: {
					year: true, //年
					month: false, //月
					day: false, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				marketYearShow: false,
				marketYear: "", //年款查询条件
				brandModelIndex: "99",
				brandModelList: null,
				brandModelListIndex: {},
				brandModelLookupModal: false,
				//车型弹窗
				isFocusedIndex: "99",
				carTypeVINList: [],
				carTypeVINListIndex: {},
				carModelLookupModal: false,
				// ----------------------------------
				carSwitching: true, //true识别 false录入
				ownerSwitching: true, //true识别 false录入
				policySwitching: true, //true识别 false录入
				insuredSwitching: true, //true识别 false录入
				carInfo: {
					licenseNo: "", //车牌号
					brandName: "", //车辆品牌型号
					vinNo: "", //车架号
					engineNo: "", //发动机号
					modelCode: "", //车型编码
					seatCount: "", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseTypeCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "", //年款
					cimodelclass: "A0", //车辆种类
					powertype: "汽油", //燃料类型
					energyType: "0", //能源种类
					enginedesc: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					cartype: "K33", //客车A0 货车H0          
					carnature: "02", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					property: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					usedCar: false, //二手车
					vehicleUse: "05" //车辆用途
				},
				ownerInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "", //邮箱
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄

				},
				policyHolderInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
					owner: false,
				},
				insuredPersonInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
					insuranceHolder: false,
					owner: false,
				},
				//影像信息
				riskList: [], //交强险和商业险的选择
				kindList: [], //商业险险种的选择
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人
				//影像信息
				carfrontImg: "", //显示图片
				carbackImg: "", //显示图片
				ownerfrontImg: "", //显示图片
				ownerbackImg: "", //显示图片
				policyHolderfrontImg: "", //显示图片
				policyHolderbackImg: "", //显示图片
				InsuredfrontImg: "", //显示图片
				InsuredbackImg: "", //显示图片
				OCRShow: false,
				tabsCurrent: 0,
				checkType: "carInfo", //组件类型
				tabslist: [{
					name: '行驶证识别'
				}],
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				errorType: ['border-bottom', 'toast'],
				carRules: {
					frameNo: [{
							required: true,
							message: '请输入车辆识别码',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^([0-9A-Z]){17}$/,
							message: '请输入正确的车辆识别码',
						}
					],
					modelcname: [{
						required: true,
						message: '请输入品牌型号',
						trigger: ['blur', 'change'],
					}],
					engineNo: [{
						required: true,
						message: '请输入发动机号',
						trigger: ['blur', 'change'],
					}],
					purchasePrice: [{
							required: true,
							message: '请输入新车购置价',
							trigger: ['blur', 'change'],
						},

					],
					completeKerbMass: [{
						required: true,
						message: '请输入整备质量',
						trigger: ['blur', 'change'],
					}],
					carnature: [{
						required: true,
						message: '使用性质必选',
						trigger: 'change',
					}],
					energyType: [{
						required: true,
						message: '能源种类必选',
						trigger: 'change',
					}],
					vehicleUse: [{
						required: true,
						message: '车辆用途必选',
						trigger: 'change',
					}],
					cartype: [{
						required: true,
						message: '车辆类型必选',
						trigger: 'change',
					}],
					cimodelclass: [{
						required: true,
						message: '车辆种类必选',
						trigger: 'change',
					}],
					registerDate: [{
							required: true,
							message: '请选择注册日期',
							trigger: 'change',
						},
						{
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							message: '注册日期格式错误',
						}
					],
					issueDate: [{
							required: true,
							message: '请选择发证日期',
							trigger: 'change',
						},
						{
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							message: '发证日期日期格式错误',
						}
					],
				},
				ownerRules: {
					name: [{
							required: true,
							message: '请输入车主姓名',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 2,
							maxLength: 5,
							message: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
							message: '请输入正确的车主姓名',
						}
					],
					identifyNumber: [{
							required: true,
							message: '请输入车主证件号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请输入正确的车主证件号',
						}
					],
					mobile: [{
							required: true,
							message: '请输入车主手机号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号',
						}
					],
					addr: [{
							required: true,
							message: '请输入车主地址',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 8,
							maxLength: 40,
							message: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
						},
					],
					identifyValidDate: [{
						required: true,
						message: '请选择身份证起期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证起期格式错误',
					}],
					identifyValidEndDate: [{
						required: true,
						message: '请选择身份证止期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证止期格式错误',
					}]
				},
				policyRules: {
					name: [{
							required: true,
							message: '请输入投保人姓名',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 2,
							maxLength: 5,
							message: '投保人姓名长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
							message: '请输入正确的投保人姓名',
						}
					],
					identifyNumber: [{
							required: true,
							message: '请输入投保人证件号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请输入正确的投保人证件号',
						}
					],
					mobile: [{
							required: true,
							message: '请输入投保人手机号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号',
						}
					],
					addr: [{
							required: true,
							message: '请输入投保人地址',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 8,
							maxLength: 40,
							message: '投保人地址长度在 {minLength} 到 {maxLength} 个字符',
						},
					],
					identifyValidDate: [{
						required: true,
						message: '请选择身份证起期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证起期格式错误',
					}],
					identifyValidEndDate: [{
						required: true,
						message: '请选择身份证止期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证止期格式错误',
					}]
				},
				insuredRules: {
					name: [{
							required: true,
							message: '请输入被保人姓名',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 2,
							maxLength: 5,
							message: '被保人姓名长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
							message: '请输入正确的被保人姓名',
						}
					],
					identifyNumber: [{
							required: true,
							message: '请输入被保人证件号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请输入正确的被保人证件号',
						}
					],
					mobile: [{
							required: true,
							message: '请输入被保人手机号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号',
						}
					],
					addr: [{
							required: true,
							message: '请输入被保人地址',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 8,
							maxLength: 40,
							message: '被保人地址长度在 {minLength} 到 {maxLength} 个字符',
						},
					],
					identifyValidDate: [{
						required: true,
						message: '请选择身份证起期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证起期格式错误',
					}],
					identifyValidEndDate: [{
						required: true,
						message: '请选择身份证止期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证止期格式错误',
					}]
				},

				endYear: Year,
				endMonth: Month,

				registerDateShow: false, //注册日期
				issueDateShow: false, //发证日期
				transferDateShow: false, //转移登记日期
				ownerDateShow: false, //
				applicantDateShow: false, //
				InsuredDateShow: false, //
				identifyType: "身份证",
				carExpand: false,
				ownersExpand: false,
				policyHolderExpand: false,
				InsuredExpand: false,
				carInfoShow: true, //车辆信息显示
				headerText: '信息录入',
				headerStyle: {
					backgroundColor: 'transparent',
				},
				prevScrollTop: 0,
				policyHolderholder: null,
				Insuredholder: null,
				ownerValidEndDateholder: null,
				policyValidEndDateholder: null,
				insuredValidEndDateholder: null,
				holderstatusList: [{
						label: '同车主',
						value: "1",
					},
					{
						label: '其他人',
						value: "99",
					},

				],
				insuredstatusList: [{
						label: '同车主',
						value: '1',
					},
					{
						label: '同投保人',
						value: '2',
					},
					{
						label: '其他人',
						value: '99',
					},

				],
				endDateList: [{
						label: '10年',
						value: "10年"
					},
					{
						label: '20年',
						value: "20年"
					},
					{
						label: '长期',
						value: "长期"
					},
				],


				cardeg: 0, //旋转角度
				user1deg: 0, //旋转角度
				user2deg: 0, //旋转角度
				user3deg: 0, //旋转角度
				routepage: "",
				carInfo1: {
					carnature: "非营业",
					energyType: "燃油",
					vehicleUse: "家庭自用",
					cartype: "轿车",
					cimodelclass: "客车",
				},
				carnatureShow: false, //使用性质
				energyTypeShow: false, //能源种类
				vehicleUseShow: false, //车辆用途
				cartypeShow: false, //车辆类型
				cimodelclassShow: false, //车辆种类
				natureOfVehicleUseoptions: [],
				vehicleTypeoptions: [],
				trafficManagementVehicleTypeoptions: [],
				energyTypeoptions: [],
				businessVehicleUseoptions: [],
				outOfBusinessVehicleUseoptions: [],
				productId: "",
				productName: "",
				isActive: true,
				quoteno: "",
				carModificationLabel: true, //车辆修改标识
				userModificationLabel: true, //人员修改标识
			}
		},
		watch: {
			carSwitching(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						this.$refs.carForm.setRules(this.carRules);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.carForm1.setRules(this.carRules);
					})
				}
			},
			ownerSwitching(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						this.$refs.ownerForm.setRules(this.ownerRules);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.ownerForm1.setRules(this.ownerRules);
					})
				}
			},
			policySwitching(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						this.$refs.policyForm.setRules(this.policyRules);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.policyForm1.setRules(this.policyRules);
					})
				}
			},
			insuredSwitching(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						this.$refs.insuredForm.setRules(this.insuredRules);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.insuredForm1.setRules(this.insuredRules);
					})
				}
			},
			checkType: {
				handler(val) {
					switch (val) {
						case 'carInfo':
							this.tabslist = [{
								name: '行驶证识别'
							}]

							break;
						default:
							this.tabslist = [{
								name: '证件识别'
							}]
							break;
					}
				},
				deep: true
			},
		},
		onReady() {
			this.$refs.carForm.setRules(this.carRules);
			this.$refs.ownerForm.setRules(this.ownerRules);
			this.$refs.policyForm.setRules(this.policyRules);
			this.$refs.insuredForm.setRules(this.insuredRules);
		},
		onShow() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		onLoad(params) {

			let pages = getCurrentPages(); // 当前页面路由
			if (pages.length > 1) {
				let beforePage = pages[pages.length - 2].route; // 上一个页面路由
				this.routepage = beforePage;
			}
			if (!!params.licenseNo) {
				let historys = JSON.parse(params.historyInfo);
				this.carExpand = true;
				this.carInfo.licenseNo = decodeURIComponent(params.licenseNo);
				this.carInfo = historys.carInfo;
				this.ownerInfo = historys.ownerInfo;
				this.policyHolderInfo = historys.policyHolderInfo;
				this.insuredPersonInfo = historys.insuredPersonInfo;
				this.carInfoPositiveList = historys.carInfoPositiveList;
				this.ownerInfoPositiveList = historys.ownerInfoPositiveList;
				this.policyHolderInfoPositiveList = historys.policyHolderInfoPositiveList;
				this.insuredPersonInfoPositiveList = historys.insuredPersonInfoPositiveList;
				if (this.ownerInfo.identifyNumber) {
					this.ownersExpand = true;
				}
			} else {
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.on('acceptData', (data) => {
					if (!!data) {
						let info = JSON.parse(JSON.stringify(data));
						console.log(info);
						let page = this.routepage;
						switch (page) {
							case 'pages/carInsure/entry':
								this.carInfoShow = false;
								this.carInfo = info.carInfo; //车辆信息
								this.ownerInfo = info.ownerInfo; //车辆信息
								this.policyHolderInfo = info.policyHolderInfo; //车辆信息
								this.insuredPersonInfo = info.insuredPersonInfo; //车辆信息
								if (this.carInfo.cimodelclass == 'A0') {
									this.carInfo1.cimodelclass = "客车"
								} else {
									this.carInfo1.cimodelclass = "货车"
								}
								this.ownerInfo.name = info.carInfo.carOwner; //车主
								this.carInfoPositiveList = info.carInfoPositiveList; //车辆
								break;
							case 'pages/carInsure/quote':
							case 'pages/carInsure/premiumCalc':
							case 'pages/carInsure/quoteDetail':
							case 'pages/carInsure/companyQuotable':
								this.productId = data.productId;
								this.productName = data.productName;
								this.carInfoShow = true;
								this.carInfo = info.carInfo; //车辆信息
								if (this.carInfo.cimodelclass == 'A0') {
									this.carInfo1.cimodelclass = "客车"
								} else {
									this.carInfo1.cimodelclass = "货车"
								}
								this.ownerInfo = info.ownerInfo; //车主信息
								this.policyHolderInfo = info.policyHolderInfo; //投保人信息
								this.insuredPersonInfo = info.insuredPersonInfo; //被保人信息
								this.riskList = info.riskList; //险种大类
								this.kindList = info.kindList; //商业险险别
								this.carInfoPositiveList = info.carInfoPositiveList; //车辆
								this.ownerInfoPositiveList = info.ownerInfoPositiveList; //车主
								this.policyHolderInfoPositiveList = info.policyHolderInfoPositiveList; //投保
								this.insuredPersonInfoPositiveList = info.insuredPersonInfoPositiveList; //被保人
								if (this.policyHolderInfo.owner) {
									this.policyHolderholder = '1';
								} else {
									this.policyHolderholder = '99';
								}
								if (this.insuredPersonInfo.owner) {
									this.Insuredholder = '1';
								} else if (this.insuredPersonInfo.insuranceHolder) {
									this.Insuredholder = '2';
								} else {
									this.Insuredholder = '99';
								}
								if (info.identifier) {
									this[info.identifier] = false;
								}
								this.quoteno = info.quoteno;
								this.imageEcho(info.quoteno)
								// this.carfrontImg = this.$base.baseUrl +
								// 	'/upload/image/2024/10/21/8962531b02138cd842833fdc3b84b3df.jpg'
								break;
							default:
								break;
						}


					}

				})
			}
			this.getDicType("businessVehicleUse"); //车辆用途（营业）
			this.getDicType("outOfBusinessVehicleUse"); //车辆用途（非营业）
			this.getDicType("natureOfVehicleUse"); //车辆性质
			this.getDicType("vehicleType"); //车辆种类
			this.getDicType("trafficManagementVehicleType"); //车辆类型
			this.getDicType("energyType"); //能源种类

		},
		onUnload() {
			//投保人同车主
			if (this.policyHolderholder == '1') {
				this.setPersonInfoAndImageType('ownerInfo', 'policyHolderInfo', "C03");
			}
			if (this.Insuredholder == '1') {
				this.setPersonInfoAndImageType('ownerInfo', 'insuredPersonInfo', "C04");
			}
			if (this.Insuredholder == '2') {
				this.setPersonInfoAndImageType('policyHolderInfo', 'insuredPersonInfo', "C04");
			}
			uni.setStorageSync('historyInfo', {
				carInfo: this.carInfo,
				ownerInfo: this.ownerInfo,
				policyHolderInfo: this.policyHolderInfo,
				insuredPersonInfo: this.insuredPersonInfo,
				carInfoPositiveList: this.carInfoPositiveList,
				ownerInfoPositiveList: this.ownerInfoPositiveList,
				policyHolderInfoPositiveList: this.policyHolderInfoPositiveList,
				insuredPersonInfoPositiveList: this.insuredPersonInfoPositiveList,
			});

		},
		onPageScroll(e) {
			this.handleScroll(e);
		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			uni.$on('scroll', this.handleScroll);
		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		methods: {
			async imageEcho(quotenos) {

				let imgres = await this.$http.get('/ins/taskImage/findByQuoteNo?quoteNo=' + quotenos);
				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':
									this.carfrontImg = imgres.data[keys].url;
									break;
								case 'D01':
									this.carbackImg = imgres.data[keys].url;
									break;
								case 'C02':
									this.ownerfrontImg = imgres.data[keys].url;
									break;
								case 'D02':
									this.ownerbackImg = imgres.data[keys].url;
									break;
								case 'C03':
									this.policyHolderfrontImg = imgres.data[keys].url;
									break;
								case 'D03':
									this.policyHolderbackImg = imgres.data[keys].url;
									break;
								case 'C04':
									this.InsuredfrontImg = imgres.data[keys].url;
									break;
								case 'D04':
									this.InsuredbackImg = imgres.data[keys].url;
									break;
								default:
									break;
							}
						} else {
							switch (keys) {
								case 'C01':
									this.carSwitching = false;
									break;
								case 'C02':
									this.ownerSwitching = false;
									break;
								case 'C03':
									this.policySwitching = false;
									break;
								case 'C04':
									this.insuredSwitching = false;
									break;
								default:
									break;
							}
						}
					});
				} else {
					this.carSwitching = false;
					this.ownerSwitching = false;
					this.policySwitching = false;
					this.insuredSwitching = false;
				}
			},
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			toggleSwitch() {
				this.isActive = !this.isActive;
			},
			async getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == 200) {
					this[type + 'options'] = res.data.ddList;
					if (type == "energyType") {
						this.carInfo1.energyType = this.dictionaryMatching(this.energyTypeoptions, this
							.carInfo
							.energyType)
					}
					if (type == "vehicleType") {
						this.carInfo1.cimodelclass = this.dictionaryMatching(this.vehicleTypeoptions,
							this
							.carInfo
							.cimodelclass)
					}
					if (type == "trafficManagementVehicleType") {
						this.carInfo1.cartype = this.dictionaryMatching(this.trafficManagementVehicleTypeoptions,
							this
							.carInfo
							.cartype);
					}
					if (type == "natureOfVehicleUse") {
						this.carInfo1.carnature = this.carInfo.carnature ? this.dictionaryMatching(this
							.natureOfVehicleUseoptions,
							this
							.carInfo
							.carnature) : "";
					}
					if ((type == "BusinessVehicleUse" || type == 'outOfBusinessVehicleUse') && this.carInfo
						.carnature) {
						this.carInfo1.vehicleUse = this.carInfo.carnature == '01' ? this.dictionaryMatching(this
							.businessVehicleUseoptions,
							this
							.carInfo
							.vehicleUse) : this.dictionaryMatching(this
							.outOfBusinessVehicleUseoptions,
							this
							.carInfo
							.vehicleUse);
					}
				}
			},
			dictionaryConfirm(e, name) {
				if (name == 'carnature') {
					this.carInfo1['vehicleUse'] = "";
					this.carInfo['vehicleUse'] = "";
				}
				this.carInfo[name] = e[0].value;
				this.carInfo1[name] = e[0].label;
			},
			async toChooseVin(cctype) {
				if (cctype == '' || cctype == null) {
					return uni.showToast({
						icon: 'none',
						title: '请输入车架号',
						duration: 1500
					});
				} else {
					if (!this.isFrameno(cctype.trim())) {
						return uni.showToast({
							title: '请输入正确的车辆识别码',
							icon: "none"
						});
					}
					this.getCarModel(cctype);
				}
			},
			//车型查询
			async getCarModel(cctype) {
				this.carModelLookupModal = true;
				let res = await this.$http.get('/order/carModel/vinSearch?frameNo=' + cctype);
				this.carTypeVINList = res.data;
			},
			//品牌型号查询
			async getBrandModel(cctype, marketYear) {
				this.brandModelLookupModal = true;
				let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, ''); //去掉中文
				let res = await this.$http.post('/order/zhongMeiApi/modelsQuery', {
					modelName: cctypeName,
					marketYear: marketYear
				});
				this.brandModelList = res.data;
			},

			carTypeClick(index, item) {
				this.isFocusedIndex = index;
				this.carTypeVINListIndex = item;
			},
			//车型赋值
			carModelLookupSubmit() {
				if (this.isFocusedIndex !== "99") {
					this.carInfo.brandName = this.carTypeVINListIndex.brandCN; //车型
					this.carInfo.modelcname = this.carTypeVINListIndex.modelName; //车型
					this.carInfo.caryear = this.carTypeVINListIndex.marketYear; //年款
					this.carInfo.seatCount = this.carTypeVINListIndex.ratedPassengerCapacity; //座位数
					this.carInfo.purchasePrice = this.carTypeVINListIndex.replacementValue; //价格
					this.carInfo.modelCode = this.carTypeVINListIndex.modelCode; //车辆型号编码
					this.carInfo.familyName = this.carTypeVINListIndex.series; //系列
					this.carInfo.enginedesc = this.carTypeVINListIndex.displacement; //排量
					this.carInfo.energyType = this.carTypeVINListIndex.fuelTypeCode; //燃油种类
					this.carInfo.powerScale = this.carTypeVINListIndex.powerScale; //功率
					this.carModelLookupModal = false;
					this.vehicleType = true;
				} else {
					return uni.showToast({
						title: '未选择车型',
						icon: "none"
					});
				}
			},
			carModelLookupNext() {
				this.carModelLookupModal = false;
				this.getBrandModel(this.carInfo.modelcname);
			},
			//品牌
			brandModelClick(index, item) {
				this.brandModelIndex = index;
				this.brandModelListIndex = item;
			},
			//品牌型号赋值
			brandModelLookupSubmit() {
				if (this.brandModelIndex !== "99") {
					this.carInfo.brandName = this.brandModelListIndex.brandCN; //车型
					this.carInfo.modelcname = this.brandModelListIndex.modelName; //车型
					this.carInfo.caryear = this.brandModelListIndex.marketYear; //年款
					this.carInfo.seatCount = this.brandModelListIndex.ratedPassengerCapacity; //座位数
					this.carInfo.purchasePrice = this.brandModelListIndex.replacementValue; //价格
					this.carInfo.modelCode = this.brandModelListIndex.modelCode; //车辆型号编码
					this.carInfo.familyName = this.brandModelListIndex.series; //系列
					this.carInfo.enginedesc = this.brandModelListIndex.displacement; //排量
					this.carInfo.energyType = this.brandModelListIndex.fuelTypeCode; //燃油种类
					this.carInfo.powerScale = this.brandModelListIndex.powerScale; //功率
					this.brandModelLookupModal = false;
					this.vehicleType = true;
				} else {
					return uni.showToast({
						title: '未选择车型',
						icon: "none"
					});
				}
			},
			marketYearDateconfirm(e) {
				this.marketYear = e.year;
				this.getBrandModel(this.carInfo.modelcname, this.marketYear);
			},
			//跳转选择车辆类型页面
			toChooseVehicleType(cctype) {
				if (cctype == '' || cctype == null) {
					uni.showToast({
						icon: 'none',
						title: '请输入车型名称',
						duration: 1500
					});
				} else {
					this.getBrandModel(cctype);
				}
			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},
			rotatefront(int) {
				this[int] = this[int] == 270 ? 0 : this[int] + 90;
			},
			rotateback(int) {
				this[int] = this[int] == 0 ? 270 : this[int] - 90;
			},
			onMove(e) {
				this.x = e.detail.x;
				this.y = e.detail.y;
			},
			//字典name匹配
			dictionaryMatching(list, value) {
				let obj = list.find(val => val.dictValue == value);
				if (obj) {
					return obj.dictTag;
				}
			},
			//OC识别返回信息
			async carCallback(obj) {
				console.log(obj.frontImg);
				this.carfrontImg = obj.frontImg;
				this.carbackImg = obj.backImg;
				this.carInfoPositiveList = obj.ImgList;
				Object.assign(this.carInfo, obj.Info);
				this.carInfo1.cimodelclass = this.dictionaryMatching(this.vehicleTypeoptions,
					this
					.carInfo
					.cimodelclass)
				this.carInfo1.cartype = this.dictionaryMatching(this.trafficManagementVehicleTypeoptions,
					this
					.carInfo
					.cartype);

				this.carInfo1.carnature = this.carInfo.carnature ? this.dictionaryMatching(this
					.natureOfVehicleUseoptions,
					this
					.carInfo
					.carnature) : "";
				if (this.carInfo.carnature && this.carInfo.vehicleUse) {
					this.carInfo1.vehicleUse = this.carInfo.carnature == '02' ? this.dictionaryMatching(this
						.outOfBusinessVehicleUseoptions,
						this
						.carInfo
						.vehicleUse) : this.dictionaryMatching(this
						.BusinessVehicleUseoptions,
						this
						.carInfo
						.vehicleUse);
				} else {
					this.carInfo1.vehicleUse = "";
				}

				this.OCRShow = false;
				this.carModelLookupModal = true;
				let res = await this.$http.get('/order/carModel/vinSearch?frameNo=' + this.carInfo.frameNo);
				this.carTypeVINList = res.data;
			},
			ownerInfoCallback(obj) {
				this.ownerfrontImg = obj.frontImg;
				this.ownerbackImg = obj.backImg;
				this.ownerInfoPositiveList = obj.ImgList;
				Object.assign(this.ownerInfo, obj.Info);
				this.OCRShow = false;
				this.ownersExpand = true;
			},
			applicantInfoCallback(obj) {
				this.policyHolderfrontImg = obj.frontImg;
				this.policyHolderbackImg = obj.backImg;
				this.policyHolderInfoPositiveList = obj.ImgList;
				Object.assign(this.policyHolderInfo, obj.Info);
				this.OCRShow = false;
				this.policyHolderExpand = true;
			},
			InsuredInfoCallback(obj) {
				this.InsuredfrontImg = obj.frontImg;
				this.InsuredbackImg = obj.backImg;
				this.insuredPersonInfoPositiveList = obj.ImgList;
				Object.assign(this.insuredPersonInfo, obj.Info);
				this.OCRShow = false;
				this.InsuredExpand = true;
			},
			OCRtabschange(e) {
				this.tabsCurrent = e;
			},
			closePopup() {
				this.OCRShow = false;
			},
			ocrIdentify(name) {
				this.checkType = name;
				this.OCRShow = !this.OCRShow;
			},
			transferFlagchange(status) {
				if (status) {
					this.carInfo.transferDate = this.carInfo.issueDate;
				} else {
					this.carInfo.transferDate = ""
				}
			},
			binddata(name, value, type) {
				if (name == 'identifyNumber' && value) {
					this[type].age = getAgeByIdCard(value)
					this[type].gender = getGenderFromIdCard(value)
				}
			},
			//转变大写(车型/车架号/发动机号)
			upperCaseType(type) {
				this.carInfo[type] = this.carInfo[type].toUpperCase();
				if (type == 'frameNo') {
					this.carInfo.vinNo = this.carInfo.frameNo.trim();
				}
			},
			Dateconfirm(e, obj, param) {
				this[obj][param] = e.year + '-' + e.month + '-' + e.day;
			},

			//（同车主/同投保人）数据处理
			setPersonInfoAndImageType(sourceInfo, targetInfo, imageType) {
				let obj = JSON.parse(JSON.stringify(this[sourceInfo]));
				this[targetInfo] = {
					...obj
				};
				if (this[sourceInfo + 'PositiveList'].length > 0) {
					this[targetInfo + 'PositiveList'] = JSON.parse(JSON.stringify(this[sourceInfo + 'PositiveList']));
					if (this[targetInfo + 'PositiveList'].length == 1) {
						this[targetInfo + 'PositiveList'][0].imageType = imageType;
					} else {
						this[targetInfo + 'PositiveList'][0].imageType = imageType;
						this[targetInfo + 'PositiveList'][1].imageType = `D${imageType.substr(1)}`;
					}
				}
			},
			isEveryPropertyFilled(obj, excludedKey) {
				// 通过 Object.keys() 遍历对象的所有键，并使用 every() 方法检查每个键对应的值
				return Object.keys(obj).every(key => {
					// 如果当前键是要排除的键，则认为这个键“有效”
					if (key === excludedKey) {
						return true;
					}
					// 对于其他键，检查值是否不是 undefined、null 或空字符串
					const value = obj[key];
					return value !== undefined && value !== null && value !== '';
				});
			},
			//校验事件
			async next() {

				let _this = this;
				if (this.policyHolderholder == '1') {
					await this.setPersonInfoAndImageType('ownerInfo',
						'policyHolderInfo',
						"C03");
					this.policyHolderInfo.owner = true;
					this.policyHolderInfo = {
						...this.policyHolderInfo
					};
				}
				if (this.Insuredholder == '1') {
					await this.setPersonInfoAndImageType('ownerInfo',
						'insuredPersonInfo',
						"C04");
					this.insuredPersonInfo.owner = true;
					this.insuredPersonInfo = {
						...this.insuredPersonInfo
					};
				}
				if (this.Insuredholder == '2') {
					await this.setPersonInfoAndImageType('policyHolderInfo',
						'insuredPersonInfo', "C04");
					this.insuredPersonInfo.insuranceHolder = true;
					this.insuredPersonInfo = {
						...this.insuredPersonInfo
					};
				}
				_this.$refs[this.carSwitching ? 'carForm' : 'carForm1'].validate(carvalid => {
					if (carvalid) {
						_this.$refs[this.ownerSwitching ? 'ownerForm' : 'ownerForm1'].validate(
							ownervalid => {
								if (ownervalid) {
									_this.$refs[this.policySwitching ? 'policyForm' : 'policyForm1']
										.validate(
											policyvalid => {
												if (policyvalid) {
													_this.$refs[this.insuredSwitching ? 'insuredForm' :
															'insuredForm1']
														.validate(insuredvalid => {
															if (insuredvalid) {
																_this.navigate({
																	url: '/pages/carInsure/companyQuotable',
																	success: (res) => {
																		res.eventChannel
																			.emit(
																				"acceptData", {
																					carInfo: _this
																						.carInfo,
																					ownerInfo: _this
																						.ownerInfo,
																					policyHolderInfo: _this
																						.policyHolderInfo,
																					insuredPersonInfo: _this
																						.insuredPersonInfo,
																					riskList: _this
																						.riskList,
																					kindList: _this
																						.kindList,
																					carInfoPositiveList: _this
																						.carInfoPositiveList, //车辆
																					ownerInfoPositiveList: _this
																						.ownerInfoPositiveList, //车主
																					policyHolderInfoPositiveList: _this
																						.policyHolderInfoPositiveList, //投保人
																					insuredPersonInfoPositiveList: _this
																						.insuredPersonInfoPositiveList, //被保人
																					productId: _this
																						.productId,
																					productName: _this
																						.productName,
																					quoteno: this
																						.quoteno
																				})

																	}
																}, "navigateTo", true);
															}
														});
												}

											});
								}

							});
					}

				});

			},
			expand(int) {
				this[int] = true;
			},
			//人员止期
			ValidEndDateClick(value, identify, info) {
				this[identify] = value;
				switch (value) {
					case '10年':
						this[info].identifyValidEndDate = this.endDateInt(this[info].identifyValidDate, 10)
						break;
					case '20年':
						this[info].identifyValidEndDate = this.endDateInt(this[info].identifyValidDate, 20)
						break;
					case '长期':
						this[info].identifyValidEndDate = '9999-12-31'
						break;
					default:
				}


			},
			//投保人同车主
			async applicantholderClick(value) {
				this.policyHolderholder = value;
				if (value == '99') {
					for (let key in this.policyHolderInfo) {
						if (key !== 'identifyType') {
							this.policyHolderInfo[key] = '';
						}
					}
					this.policyHolderfrontImg = "";
					this.policyHolderbackImg = "";
				} else {
					await this.setPersonInfoAndImageType('ownerInfo',
						'policyHolderInfo',
						"C03");
					this.policyHolderInfo.owner = true;
					this.policyHolderInfo = {
						...this.policyHolderInfo
					};
				}
			},
			//被保人同车主/投保人
			async InsuredholderClick(value) {
				this.Insuredholder = value;
				if (value == '99') {
					for (let key in this.insuredPersonInfo) {
						if (key !== 'identifyType') {
							this.insuredPersonInfo[key] = '';
						}
					}
					this.InsuredfrontImg = "";
					this.InsuredbackImg = "";
				} else if (value == '1') {
					await this.setPersonInfoAndImageType('ownerInfo',
						'insuredPersonInfo',
						"C04");
					this.insuredPersonInfo.owner = true;
					this.insuredPersonInfo = {
						...this.insuredPersonInfo
					};
				} else {
					await this.setPersonInfoAndImageType('policyHolderInfo',
						'insuredPersonInfo', "C04");
					this.insuredPersonInfo.insuranceHolder = true;
					this.insuredPersonInfo = {
						...this.insuredPersonInfo
					};
				}
			},
			//头部颜色变化js
			handleScroll(e) {
				const scrollTop = e.scrollTop;
				let opacity = 1;
				let shadowOpacity = 0;
				if (scrollTop > this.prevScrollTop) {
					// 向下滚动
					opacity = Math.min((scrollTop - 50) / 100, 1); // 根据滚动距离计算透明度，最大为1
					shadowOpacity = Math.min((scrollTop - 50) / 500, 0.3); // 根据滚动距离计算阴影透明度，最大为0.3
				} else if (scrollTop < 50) {
					// 在顶部附近，设置透明度和阴影透明度均为0
					opacity = 0;
					shadowOpacity = 0;
				} else {
					// 向上滚动
					opacity = Math.max(0, 1 - (scrollTop / 100)); // 根据滚动距离计算透明度，最小为0
					shadowOpacity = Math.max(0, 0.3 - (scrollTop / 500)); // 根据滚动距离计算阴影透明度，最小为0
				}
				const rgbaOpacity = opacity * 100; // 将透明度转换为百分比形式
				const backgroundColor = `rgb(255 255 255 / ${rgbaOpacity}%)`; // 根据透明度设置背景颜色
				// 计算阴影的颜色和大小
				const shadowBlur = shadowOpacity * 10; // 阴影模糊程度为阴影透明度的10像素
				const shadowColor = `rgba(218, 227, 244, ${shadowOpacity})`; // 阴影颜色为黑色，透明度根据阴影透明度计算
				const boxShadow = `0 0 ${shadowBlur}px ${shadowColor}`; // 生成box-shadow属性值
				this.headerStyle.backgroundColor = backgroundColor;
				this.headerStyle.boxShadow = boxShadow;
				this.prevScrollTop = scrollTop;
			},
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			endDateInt(time, sum) {
				let currentDate = new Date(time);
				currentDate.setFullYear(currentDate.getFullYear() + sum);
				let year = currentDate.getFullYear();
				let month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
				let day = ('0' + currentDate.getDate()).slice(-2);
				let formattedDate = year + '-' + month + '-' + day;
				return formattedDate;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.search {
		background: linear-gradient(270deg, #FF9A47 0%, #FF5600 100%);
		border-radius: 2px;
		color: #fff;
		font-size: 22rpx;
		padding: 1px 6px;
	}

	/deep/ {
		.u-form-item {
			padding: 2px 0;
		}

		.u-form-item .uni-input-placeholder {
			color: grey !important;
		}

		.u-form-item__border-bottom--error[data-v-5e7216f1]:after {
			border-color: #D42426;
		}

		.u-border-bottom:after {
			border-bottom-width: 2px;
		}

		.u-input__textarea[data-v-fdbb9fe6] {
			min-height: auto !important;
		}

	}

	.uni-forms-item ::v-deep .uni-input-input {
		text-align: end;
	}

	.uni-forms-item ::v-deep .u-input__textarea {
		min-height: auto !important;
	}

	::v-deep .uni-forms-item {
		border-bottom: 1px solid #f2f2f2;
	}

	::v-deep .uni-forms-item:last-child {
		border: none;
	}

	.page {
		height: auto;
		background: #F8FAFE;
		padding: 12px 16px 50px 16px;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		background-color: transparent;
		padding: 50px 16px 16px 16px;
		z-index: 99;
		transition: background-color 0.2s;

		text {
			font-size: 18px;
			font-weight: bold;
		}
	}

	.banner {
		width: 100%;
		height: 120px;


	}

	.Information {
		width: 100%;
		height: auto;
		margin-bottom: 24px;

		.title {
			font-size: 15px;
			font-weight: bold;
		}

		//手动自动切换阳寿
		.manualSwitch {
			border-radius: 4px;
			border: 1px solid #FF5600;
			padding: 2px 5px;

			image {
				width: 18px;
				height: 18px;
				margin-right: 5px;
			}

			text {
				color: #FF5600;
			}
		}

		.collapse {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			margin-top: 10px;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 12px 12px 12px 12px;

			.top-ocr {
				background-color: #F9F9F9;
				border-top-left-radius: 12px;
				border-top-right-radius: 12px;
				color: #0052FF;
				font-size: 14px;

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

			.btn-collapse {
				height: 42px;
				font-size: 12px;
				background-color: white;
				border-bottom-left-radius: 12px;
				border-bottom-right-radius: 12px;
				color: rgba(60, 60, 60, 0.6);
			}
		}
	}

	.movable-view {
		.operate-img {
			width: 90%;
			height: auto;
			background-color: #F9F9F9;
			border-radius: 8px;
			padding: 10px 25px;
			margin-top: 10px;

			>view:nth-child(2) {
				background-color: rgba(0, 82, 255, 0.06);
				border-radius: 4px 4px 4px 4px;
				border: 1px solid #0052FF;
				color: #0052FF;
				padding: 3px 5px;
			}

			>view {
				font-size: 14px;
			}

			image {
				width: 22px;
				height: 22px;
				margin-right: 5px;
			}
		}
	}

	.status-data {
		width: 66px;
		height: 30px;
		margin: 0 7px;
		font-size: 14px;
		border: 1px solid #CDCDCD;
		cursor: pointer;
		text-align: center;
		line-height: 30px;
	}

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

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

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

	movable-area {
		height: 220px;
		width: 100%;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-color: #D8D8D8;
		overflow: hidden;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.inputPrompt {
		height: 30px;
		background: linear-gradient(90deg, #FFE3DF 0%, #FBE9E7 100%);
		border-radius: 2px;
		color: #FF1717;
		font-size: 15px;
		text-align: center;
		line-height: 30px;
	}

	//主副本切换样式
	.switch-container {
		width: 80px;
		height: 30px;
		background-color: #E6EEFF;
		border-radius: 15px;
		position: relative;
		cursor: pointer;
	}

	.switch-track {
		width: 100%;
		height: 100%;
		background-color: #E6EEFF;
		border-radius: 4px;
		position: relative;
		transition: background-color 0.3s ease;
	}

	.switch-thumb {
		width: 40px;
		height: 26px;
		background-color: #0052FF;
		border-radius: 4px;
		position: absolute;
		top: 2px;
		left: 2px;
		transition: transform 0.3s ease;
		font-size: 13px;
		color: #fff;

	}

	.switch-thumb1 {
		width: 40px;
		height: 26px;
		position: absolute;
		top: 2px;
		left: 2px;
		font-size: 12px;
		color: rgba(0, 82, 255, 0.8);
	}

	.switch-thumb2 {
		width: 40px;
		height: 26px;
		position: absolute;
		top: 2px;
		right: 2px;
		font-size: 12px;
		color: rgba(0, 82, 255, 0.8);
	}

	.thumbactive {
		background-color: #0052FF;
		transform: translateX(35px);
	}

	.thumbactive1 {
		color: #fff;
	}

	.ZJcheckboxGroup {
		padding: 0 10px;

		.title {
			font-size: 14px;
			color: #232832;
			font-weight: bold;
			padding: 10px;
			border-bottom: 1px solid #f2f2f2;
		}

		.scolcentent {
			max-height: 480px;
			padding-bottom: 40px;

			.row {
				width: 100%;
				height: auto;
				background: #F9FBFE;
				box-shadow: 0px 2px 5px 0px #DAE3F4;
				border-radius: 6px;
				padding: 0 10px;
				margin-bottom: 10px;

				.row_header {
					width: 100%;
					font-size: 28upx;
					border-bottom: 1upx solid #EEEEEE;
					padding: 5px 0;
					font-weight: bold;
				}

				.row_body {
					width: 100%;
					padding: 10px 0;

					view {
						font-weight: bold;
						font-size: 12px;
					}
				}
			}

			.carTypeColor {
				border: 1px solid #0052FF;
			}


			.row .row_header .left {
				flex: 5;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #333;
			}

			.row .row_header .right {
				flex: 2;
				color: #FF5600;
				text-align: right;
			}

			.row .row .row_body view>view {
				margin: 0 5px;
			}
		}

		.noDataIndicator {
			width: 70%;
			margin: auto;
			text-align: center;

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

			text {
				color: #0052FF;
				font-size: 14px;
			}
		}

		.operateBtn {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			font-weight: bold;
			font-size: 16px;

			.confirm {
				width: 45%;
				height: 46px;
				color: #fff;
				margin: auto;
				background: #0052FF;
				border-radius: 25px;
			}
		}
	}
</style>