partnerApp/pages/carInsure2/Information.vue

<template>
	<view class="page">
		<public-module></public-module>
		<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="banner"></view>
		<view v-show="carInfoShow" class="Information" style="margin-top: -84px;">
			<text class="title">车辆信息</text>
			<view class="collapse">
				<view class="top-ocr dis j-c a-c" v-show="!carimg">
					<image src="../../static/image/car-insure/Frame.png" mode="">
					</image>
					<text @tap="ocrIdentify('carInfo')" style="margin-left: 5px;">点击上传/拍摄行驶证 自动填写信息</text>
				</view>
				<view v-show="!carExpand && !carimg" class="btn-collapse dis a-c j-c" @click="expand('carExpand')">
					<text>展开手动输入车辆信息</text>
					<u-icon name="arrow-down" size="30" color="rgb(60 60 60 / 60%)" style="margin-left: 5px;"></u-icon>
				</view>
				<view v-show="carExpand" class="">
					<view v-if=" carimg" class="movable-view dis f-c a-c">
						<movable-area>
							<movable-view direction="all" out-of-bounds :scale="true">
								<image :src="carimg" mode=""
									: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>
					<uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind"
						err-show-type="toast" label-width="100">
						<uni-forms-item label="车牌号: ">
							<input class="uni-input-input textColor" placeholder="输入车牌号" v-model="carInfo.licenseNo"
								placeholder-style="font-size:28upx" @input="upperCaseType('licenseNo')" />
						</uni-forms-item>
						<uni-forms-item name="frameNo" required label="车辆识别码:">
							<view class="d-flex a-center" style="height: 100%;">
								<input class="uni-input-input flex-1 textColor" placeholder="请输入车辆识别码"
									v-model="carInfo.frameNo" maxlength="17" placeholder-style="font-size:28upx"
									@input="upperCaseType('frameNo')" />
								<image src="/static/image/car-insure/search.png" mode=""
									style="width: 22px;height: 22px;" @tap="toChooseVin(carInfo.frameNo)">
								</image>
							</view>
						</uni-forms-item>
						<uni-forms-item name="modelcname" required label="品牌型号: ">
							<view class="d-flex a-center textColor" style="height: 100%;">
								<input class="uni-input-input flex-1 textColor" placeholder="请输入品牌型号"
									v-model="carInfo.modelcname"
									@blur="binddata('modelcname', $event.detail.value,'carForm')"
									placeholder-style="font-size:28upx" @input="upperCaseType('modelcname')" />
								<image src="/static/image/car-insure/search.png" mode=""
									style="width: 22px;height: 22px;" @tap="toChooseVehicleType(carInfo.modelcname)">
								</image>
							</view>
						</uni-forms-item>
						<uni-forms-item name="engineNo" required label="发动机号: ">
							<input class="uni-input-input textColor" placeholder="请输入发动机号" v-model="carInfo.engineNo"
								@blur="binddata('engineNo', $event.detail.value,'carForm')"
								placeholder-style="font-size:28upx" @input="upperCaseType('engineNo')" />
						</uni-forms-item>
						<uni-forms-item required label="注册日期" name="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>
						</uni-forms-item>
						<uni-forms-item required label="发证日期" name="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>
						</uni-forms-item>
						<uni-forms-item v-if="carInfo.transferFlag" required label="转移登记日期" name="transferDate">
							<u-input type="select" :select-open="transferDateShow" v-model="carInfo.transferDate"
								placeholder="请选择过户日期" @click="transferDateShow = true"
								placeholder-style="color:#808080"></u-input>
							<u-picker v-model="transferDateShow" mode="time" :params="params" :end-year="endYear"
								:end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','transferDate')"></u-picker>
						</uni-forms-item>
						<uni-forms-item label="整备质量: " required name="completeKerbMass">
							<input class="uni-input-input textColor" placeholder="请输入整备质量"
								v-model="carInfo.completeKerbMass" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="核定载质量: ">
							<input class="uni-input-input textColor" placeholder="请输入核定载质量" v-model="carInfo.limitLoad"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="年款: ">
							<input class="uni-input-input textColor" placeholder="请输入年款" v-model="carInfo.caryear"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="座位数: ">
							<input class="uni-input-input textColor" placeholder="请输入座位数" v-model="carInfo.seatCount"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="排量: ">
							<input class="uni-input-input textColor" placeholder="请输入排量" v-model="carInfo.enginedesc"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="功率: ">
							<input class="uni-input-input textColor" placeholder="请输入功率" v-model="carInfo.powerScale"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item label="新车购置价: " required name="purchasePrice">
							<input class="uni-input-input textColor" placeholder="请输入新车购置价"
								v-model="carInfo.purchasePrice" placeholder-style="font-size:28upx"
								@blur="binddata('purchasePrice', $event.detail.value,'carForm')"
								@input="upperCaseType('purchasePrice')" />
						</uni-forms-item>
						<uni-forms-item label="是否过户: ">
							<view class="d-flex j-end a-c" style="height:100%">
								<u-switch v-model="carInfo.transferFlag" active-color="#ea552d " size="30"
									@change="transferFlagchange"></u-switch>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="Information">
			<text class="title">车主信息</text>
			<view class="collapse">
				<view class="top-ocr dis j-c a-c" v-show="!ownerimg">
					<image src="../../static/image/car-insure/Frame1.png" mode="">
					</image>
					<text @tap="ocrIdentify('ownerInfo')" style="margin-left: 5px;">点击上传/拍摄行驶证 自动填写信息</text>
				</view>
				<view v-show="!ownersExpand  && !ownerimg" class="btn-collapse dis a-c j-c"
					@click="expand('ownersExpand')">
					<text>展开手动输入车主信息</text>
					<u-icon name="arrow-down" size="30" color="rgb(60 60 60 / 60%)" style="margin-left: 5px;"></u-icon>
				</view>
				<view v-show="ownersExpand">
					<view v-if=" ownerimg" class="movable-view dis f-c a-c">
						<movable-area>
							<movable-view direction="all" out-of-bounds :scale="true">
								<image :src="ownerimg" mode=""
									: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>
					<uni-forms :rules="ownerRules" :value="ownerInfo" ref="ownerForm" validate-trigger="bind"
						err-show-type="toast" label-width="80">
						<uni-forms-item name="name" required label="姓名: ">
							<input class="uni-input-input textColor" placeholder="请输入姓名" v-model="ownerInfo.name"
								maxlength="5" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="identifyType" required label="证件类型:">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</uni-forms-item>
						<uni-forms-item required name="identifyNumber" label="证件号: ">
							<input class="uni-input-input textColor" placeholder="请输入证件号"
								v-model="ownerInfo.identifyNumber" maxlength="18"
								@blur="binddata('identifyNumber', $event.detail.value,'ownerInfo')"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="age" label="年龄: ">
							<input class="uni-input-input textColor" disabled placeholder="请输入年龄"
								v-model="ownerInfo.age" maxlength="18" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="gender" required label="性别:">
							<u-input v-model="ownerInfo.gender" type="select" :select-open="ownergenderShow"
								@click="ownergenderShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择性别" />
							<u-select mode="single-column" :list="genderList" v-model="ownergenderShow"
								@confirm="e=>genderConfirm(e,'ownerInfo')"></u-select>
						</uni-forms-item>
						<uni-forms-item required name="mobile" label="手机号: ">
							<input class="uni-input-input textColor" placeholder="请输入手机号" v-model="ownerInfo.mobile"
								maxlength="11" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="addr" label="地址: ">
							<u-input type="textarea" v-model="ownerInfo.addr" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" :auto-height="true" placeholder="请输入地址" />
						</uni-forms-item>
						<uni-forms-item name="email" label="邮箱: ">
							<input class="uni-input-input textColor" placeholder="请输入邮箱" v-model="ownerInfo.email"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required label="有效期起期" name="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>
						</uni-forms-item>
						<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
							<u-input v-model="ownerInfo.identifyValidEndDate" :custom-style="{textAlign:'right'}"
								type="select" placeholder="请输入有效期止期" :select-open="ownerEndDateShow"
								placeholder-style="color:#808080" @click="ownerEndDateShow=true"></u-input>
							<u-select mode="single-column" :list="endDateList" v-model="ownerEndDateShow"
								@confirm="e=>endDateConfirm(e,'ownerInfo','identifyValidDate','identifyValidEndDate')"></u-select>
						</uni-forms-item>
					</uni-forms>
				</view>
			</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==applicantholder? 'active':''"
						v-for="(item,index) in holderstatusList" @tap="applicantholderClick(item.value)" :key="index">
						{{item.label}}
					</view>
				</view>
			</view>
			<view v-show="applicantholder=='99'" class="collapse">
				<view class="top-ocr dis j-c a-c" v-show="!applicantimg">
					<image src="../../static/image/car-insure/Frame1.png" mode="">
					</image>
					<text @tap="ocrIdentify('policyHolderInfo')" style="margin-left: 5px;">点击上传/拍摄行驶证 自动填写信息</text>
				</view>
				<view v-show="!applicantExpand && !applicantimg" class="btn-collapse dis a-c j-c"
					@click="expand('applicantExpand')">
					<text>展开手动输入投保人信息</text>
					<u-icon name="arrow-down" size="30" color="rgb(60 60 60 / 60%)" style="margin-left: 5px;"></u-icon>
				</view>
				<view v-show="applicantExpand">
					<view v-if=" applicantimg" class="movable-view dis f-c a-c">
						<movable-area>
							<movable-view direction="all" out-of-bounds :scale="true">
								<image :src="applicantimg" mode=""
									: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>
					<uni-forms :rules="applicantRules" :value="policyHolderInfo" ref="applicantForm"
						validate-trigger="bind" err-show-type="toast" label-width="80">
						<uni-forms-item name="name" required label="姓名: ">
							<input class="uni-input-input textColor" placeholder="请输入姓名" v-model="policyHolderInfo.name"
								maxlength="5" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="identifyType" required label="证件类型:">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</uni-forms-item>
						<uni-forms-item required name="identifyNumber" label="证件号: ">
							<input class="uni-input-input textColor" placeholder="请输入证件号"
								v-model="policyHolderInfo.identifyNumber" maxlength="18"
								@blur="binddata('identifyNumber', $event.detail.value,'policyHolderInfo')"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="age" label="年龄: ">
							<input class="uni-input-input textColor" disabled placeholder="请输入年龄"
								v-model="policyHolderInfo.age" maxlength="18" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="gender" required label="性别:">
							<u-input v-model="policyHolderInfo.gender" type="select" :select-open="ownergenderShow"
								@click="ownergenderShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择性别" />
							<u-select mode="single-column" :list="genderList" v-model="ownergenderShow"
								@confirm="e=>genderConfirm(e,'policyHolderInfo')"></u-select>
						</uni-forms-item>
						<uni-forms-item required name="mobile" label="手机号: ">
							<input class="uni-input-input textColor" placeholder="请输入手机号"
								v-model="policyHolderInfo.mobile" maxlength="11" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="addr" label="地址: ">
							<u-input type="textarea" v-model="policyHolderInfo.addr" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请输入地址" />
						</uni-forms-item>
						<uni-forms-item name="email" label="邮箱: ">
							<input class="uni-input-input textColor" placeholder="请输入邮箱"
								v-model="policyHolderInfo.email" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required label="有效期起期" name="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>
						</uni-forms-item>
						<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
							<u-input v-model="policyHolderInfo.identifyValidEndDate" :custom-style="{textAlign:'right'}"
								type="select" placeholder="请输入有效期止期" :select-open="applicantEndDateShow"
								placeholder-style="color:#808080" @click="applicantEndDateShow=true"></u-input>
							<u-select mode="single-column" :list="endDateList" v-model="applicantEndDateShow"
								@confirm="e=>endDateConfirm(e,'policyHolderInfo','identifyValidDate','identifyValidEndDate')"></u-select>
						</uni-forms-item>
					</uni-forms>
				</view>
			</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 v-show="Insuredholder=='99'" class="collapse">
				<view class="top-ocr dis j-c a-c" v-show="!Insuredimg">
					<image src="../../static/image/car-insure/Frame1.png" mode="">
					</image>
					<text @tap="ocrIdentify('insuredPersonInfo')" style="margin-left: 5px;">点击上传/拍摄行驶证 自动填写信息</text>
				</view>
				<view v-show="!InsuredExpand && !Insuredimg" class="btn-collapse dis a-c j-c"
					@click="expand('InsuredExpand')">
					<text>展开手动输入被保人信息</text>
					<u-icon name="arrow-down" size="30" color="rgb(60 60 60 / 60%)" style="margin-left: 5px;"></u-icon>
				</view>
				<view v-show='InsuredExpand'>
					<view v-if=" Insuredimg" class="movable-view dis f-c a-c">
						<movable-area>
							<movable-view direction="all" out-of-bounds :scale="true">
								<image :src="Insuredimg" 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>
					<uni-forms :rules="InsuredRules" :value="insuredPersonInfo" ref="InsuredForm"
						validate-trigger="bind" err-show-type="toast" label-width="80">
						<uni-forms-item name="name" required label="姓名: ">
							<input class="uni-input-input textColor" placeholder="请输入姓名"
								v-model="insuredPersonInfo.name" maxlength="5" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="identifyType" required label="证件类型:">
							<view class="dis a-c j-end" style="width:100%;height: 100%;">
								身份证
							</view>
						</uni-forms-item>
						<uni-forms-item required name="identifyNumber" label="证件号: ">
							<input class="uni-input-input textColor" placeholder="请输入证件号"
								v-model="insuredPersonInfo.identifyNumber" maxlength="18"
								@blur="binddata('identifyNumber', $event.detail.value,'insuredPersonInfo')"
								placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="age" label="年龄: ">
							<input class="uni-input-input textColor" disabled placeholder="请输入年龄"
								v-model="insuredPersonInfo.age" maxlength="18" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item name="gender" required label="性别:">
							<u-input v-model="insuredPersonInfo.gender" type="select" :select-open="ownergenderShow"
								@click="ownergenderShow = true" :custom-style="{textAlign:'right'}"
								placeholder-style="color:#808080" placeholder="请选择性别" />
							<u-select mode="single-column" :list="genderList" v-model="ownergenderShow"
								@confirm="e=>genderConfirm(e,'insuredPersonInfo')"></u-select>
						</uni-forms-item>
						<uni-forms-item required name="mobile" label="手机号: ">
							<input class="uni-input-input textColor" placeholder="请输入手机号"
								v-model="insuredPersonInfo.mobile" maxlength="11" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required name="addr" label="地址: ">
							<u-input type="textarea" v-model="insuredPersonInfo.addr"
								:custom-style="{textAlign:'right'}" :auto-height="true"
								placeholder-style="color:#808080" placeholder="请输入地址" />
						</uni-forms-item>
						<uni-forms-item name="email" label="邮箱: ">
							<input class="uni-input-input textColor" placeholder="请输入邮箱"
								v-model="insuredPersonInfo.email" placeholder-style="font-size:28upx" />
						</uni-forms-item>
						<uni-forms-item required label="有效期起期" name="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>
						</uni-forms-item>
						<uni-forms-item required label="有效期止期" name="identifyValidEndDate">
							<u-input v-model="insuredPersonInfo.identifyValidEndDate"
								:custom-style="{textAlign:'right'}" type="select" placeholder="请输入有效期止期"
								:select-open="InsuredEndDateShow" placeholder-style="color:#808080"
								@click="InsuredEndDateShow=true"></u-input>
							<u-select mode="single-column" :list="endDateList" v-model="InsuredEndDateShow"
								@confirm="e=>endDateConfirm(e,'insuredPersonInfo','identifyValidDate','identifyValidEndDate')"></u-select>
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<u-button type="primary" style="background:#0052FF;" @tap="next">下一步</u-button>
		</view>
		<OCRComponent :showModal='OCRShow' @closePopup="closePopup" :tabslist="tabslist" @tabschange="OCRtabschange"
			:tabsCurrent="tabsCurrent" :checkType='checkType' @carCallback="carCallback"
			@ownerInfoCallback="ownerInfoCallback" @applicantInfoCallback="applicantInfoCallback"
			@InsuredInfoCallback="InsuredInfoCallback">
		</OCRComponent>
	</view>
</template>

<script>
	import OCRComponent from '@/components/modules/carInsure/OCRComponent/OCRComponent.vue'; //引用图片信息检查插件
	import {
		getAgeByIdCard
	} from '@/plugins/utils';
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		components: {
			OCRComponent
		},
		data() {
			return {
				carInfo: {
					licenseNo: "", //车牌号
					brandName: "", //车辆品牌型号
					vinNo: "", //车架号
					engineNo: "", //发动机号
					modelCode: "", //车型编码
					seatCount: "0", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseTypeCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "0", //年款
					cimodelclass: "A0", //车辆种类
					powertype: "汽油", //燃料类型
					energyType: "0", //能源种类
					enginedesc: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					cartype: "K33", //客车A0 货车H0          
					carnature: "", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					property: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					secondhandcarflag: false, //二手车
					vehicleUse: "" //车辆用途
				},
				ownerInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "", //邮箱
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				policyHolderInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				insuredPersonInfo: {
					name: "",
					identifyType: "01",
					identifyNumber: "",
					addr: "",
					gender: "", //性别
					email: "",
					mobile: "",
					identifyValidDate: "", //有效期起期
					identifyValidEndDate: "", //有效期止期
					age: "", //年龄
				},
				//影像信息
				riskList: [], //交强险和商业险的选择
				kindList: [], //商业险险种的选择
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人
				//影像信息
				carimg: "", //显示图片
				ownerimg: "", //显示图片
				applicantimg: "", //显示图片
				Insuredimg: "", //显示图片
				OCRShow: false,
				tabsCurrent: 0,
				checkType: "carInfo", //组件类型
				tabslist: [{
					name: '行驶证识别'
				}],
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				errorType: ['message', 'toast'],
				carRules: {
					frameNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车辆识别码',
						}, {
							pattern: /^([0-9A-Z]){17}$/,
							errorMessage: '请输入正确的车辆识别码',
						}]
					},
					modelcname: {
						rules: [{
							required: true,
							errorMessage: '请输入品牌型号',
						}, ]
					},
					engineNo: {
						rules: [{
							required: true,
							errorMessage: '请输入发动机号',
						}, ]
					},
					purchasePrice: {
						rules: [{
							required: true,
							errorMessage: '请输入新车购置价',
						}, {
							validateField: function(rule, value, data, callback) {
								if (value == 0) {
									callback('新车购置价不能为零')
								}
								return true
							}
						}]
					},
					completeKerbMass: {
						rules: [{
							required: true,
							errorMessage: '请输入整备质量',
						}, ]
					},
					carnature: {
						rules: [{
							required: true,
							errorMessage: '使用性质必选',
						}, ]
					},
					vehicleUse: {
						rules: [{
							required: true,
							errorMessage: '车辆用途必选',
						}, ]
					},

					registerDate: {
						rules: [{
							required: true,
							errorMessage: '请选择注册日期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '注册日期格式错误',
						}]
					},
					issueDate: {
						rules: [{
							required: true,
							errorMessage: '请选择发证日期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '发证日期日期格式错误',
						}]
					}
				},
				ownerRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入车主姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的车主姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入车主证件号',
							},
							{
								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]$/,
								errorMessage: '请输入正确的车主证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入车主手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入车主地址',
							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				applicantRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '投保人姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的投保人姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人证件号',
							},
							{
								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]$/,
								errorMessage: '请输入正确的投保人证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},


					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入投保人地址',
							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '投保人地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				InsuredRules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人姓名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '被保人姓名长度在 {minLength} 到 {maxLength} 个字符',
							},
							{
								pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
								errorMessage: '请输入正确的被保人姓名',
							}
						]
					},
					identifyNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人证件号',
							},
							{
								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]$/,
								errorMessage: '请输入正确的被保人证件号',
							}
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人手机号',
							},
							{
								pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
								errorMessage: '请输入正确的手机号',
							}
						]
					},
					addr: {
						rules: [{
								required: true,
								errorMessage: '请输入被保人地址',

							},
							{
								minLength: 8,
								maxLength: 40,
								errorMessage: '被保人地址长度在 {minLength} 到 {maxLength} 个字符',
							},
						]
					},
					identifyValidDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证起期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证起期格式错误',
						}]
					},
					identifyValidEndDate: {
						rules: [{
							required: true,
							errorMessage: '请选择身份证止期',
						}, {
							pattern: /^\d{4}-\d{2}-\d{2}$/,
							errorMessage: '身份证止期格式错误',
						}]
					},
				},
				endYear: Year,
				endMonth: Month,
				ownergenderShow: false, //性别选择
				applicantgenderShow: false, //性别选择
				InsuredgenderShow: false, //性别选择
				registerDateShow: false, //注册日期
				issueDateShow: false, //发证日期
				transferDateShow: false, //转移登记日期
				ownerDateShow: false, //
				ownerEndDateShow: false, //止期选择
				applicantDateShow: false, //
				applicantEndDateShow: false, //止期选择
				InsuredDateShow: false, //
				InsuredEndDateShow: false, //止期选择
				identifyType: "身份证",
				carExpand: false,
				ownersExpand: false,
				applicantExpand: false,
				InsuredExpand: false,
				carInfoShow: true, //车辆信息显示
				headerText: '信息录入',
				headerStyle: {
					backgroundColor: 'transparent',
				},
				prevScrollTop: 0,
				applicantholder: "1",
				Insuredholder: "2",
				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: "长期"
					},
				],
				genderList: [{
						label: '男',
						value: "男"
					},
					{
						label: '女',
						value: "女"
					},

				],

				cardeg: 0, //旋转角度
				user1deg: 0, //旋转角度
				user2deg: 0, //旋转角度
				user3deg: 0, //旋转角度
				routepage: "",
			}
		},
		watch: {
			checkType: {
				handler(val) {
					switch (val) {
						case 'carInfo':
							this.tabslist = [{
								name: '行驶证识别'
							}]

							break;
						default:
							this.tabslist = [{
								name: '证件识别'
							}]
							break;
					}
				},
				deep: true
			}
		},
		onShow() {

		},
		onLoad(params) {
			let pages = getCurrentPages(); // 当前页面路由
			if (pages.length > 1) {
				let beforePage = pages[pages.length - 2].route; // 上一个页面路由
				this.routepage = beforePage;
			}
			if (!!params.licenseNo) {
				this.carExpand = true;
				this.carInfo.licenseNo = decodeURIComponent(params.licenseNo);
			} else {
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.on('acceptData', (data) => {
					console.log(data);
					if (!!data) {
						let info = JSON.parse(JSON.stringify(data));
						let page = this.routepage;
						console.log(page);
						switch (page) {
							case 'pages/carInsure2/entry':
								this.carInfoShow = false;
								this.carInfo = info.carInfo; //车辆信息
								this.carInfoPositiveList = info.carInfoPositiveList; //车辆
								break;
							case 'pages/carInsure2/quote':
							case 'pages/carInsure2/quoteDetail':
								this.carInfo = info.carInfo; //车辆信息
								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; //被保人
								this.carExpand = true;
								this.ownersExpand = true;
								break;
							default:
								break;
						}


					}

				})
			}
		},
		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 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.navigate({
						url: '/pages/carInsure2/carType?frameNo=' + encodeURIComponent(cctype)
					}, "navigateTo", true);
				}
			},
			//跳转选择车辆类型页面
			toChooseVehicleType(cctype) {
				if (cctype == '' || cctype == null) {
					uni.showToast({
						icon: 'none',
						title: '请输入车型名称',
						duration: 1500
					});
				} else {
					let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, '')
					this.navigate({
						url: '/pages/carInsure2/carType?modelName=' + encodeURIComponent(cctypeName)
					}, "navigateTo", true);
				}
			},
			//验证车架号
			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;
			},
			//OC识别返回信息
			carCallback(obj) {
				this.carimg = obj.img;
				this.carInfoPositiveList = obj.ImgList;
				Object.assign(this.carInfo, obj.Info);
				this.OCRShow = false;
				this.carExpand = true;
			},
			ownerInfoCallback(obj) {
				this.ownerimg = obj.img;
				this.ownerInfoPositiveList = obj.ImgList;
				Object.assign(this.ownerInfo, obj.Info);
				this.OCRShow = false;
				this.ownersExpand = true;
			},
			applicantInfoCallback(obj) {
				this.applicantimg = obj.img;
				this.policyHolderInfoPositiveList = obj.ImgList;
				Object.assign(this.policyHolderInfo, obj.Info);
				this.OCRShow = false;
				this.applicantExpand = true;
			},
			InsuredInfoCallback(obj) {
				this.Insuredimg = obj.img;
				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') {
					this[type].age = getAgeByIdCard(value)
				}
			},

			//转变大写(车型/车架号/发动机号)
			upperCaseType(type) {
				this.carInfo[type] = this.carInfo[type].toUpperCase();
				if (type == 'vinNo') {
					this.carInfo.frameNo = this.carInfo.vinNo.trim();
				}
			},
			//身份证止期（10/20/长期）处理
			endDateConfirm(e, obj, param1, param2) {
				switch (e[0].label) {
					case '10年':
						this[obj][param2] = this.endDateInt(this[obj][param1], 10)
						break;
					case '20年':
						this[obj][param2] = this.endDateInt(this[obj][param1], 20)
						break;
					case '长期':
						this[obj][param2] = "9999-12-31"
						break;
					default:
				}
			},
			Dateconfirm(e, obj, param) {
				this[obj][param] = e.year + '-' + e.month + '-' + e.day;
			},
			//性别匹配
			genderConfirm(val, name) {
				this[name].gender = val[0].label;
			},
			//（同车主/同投保人）数据处理
			setPersonInfoAndImageType(sourceInfo, targetInfo, imageType) {
				let obj = Object.assign({}, 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)}`;
					}
				}
			},
			//校验事件
			next() {
				//投保人同车主
				if (this.applicantholder == '1') {
					this.setPersonInfoAndImageType('ownerInfo', 'policyHolderInfo', "C03");
				}
				if (this.Insuredholder == '1') {
					this.setPersonInfoAndImageType('ownerInfo', 'insuredPersonInfo', "C04");
				}
				if (this.Insuredholder == '2') {
					this.setPersonInfoAndImageType('policyHolderInfo', 'insuredPersonInfo', "C04");
				}
				this.$refs.carForm.submit().then(res => {
					this.$refs.ownerForm.submit().then(res1 => {
						this.$refs.applicantForm.submit().then(res2 => {
							this.$refs.InsuredForm.submit().then(res3 => {
								this.navigate({
									url: '/pages/carInsure2/insureItems',
									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, //被保人
											})

									}
								}, "navigateTo", true);
							})
						})
					})
				})
			},
			expand(int) {
				this[int] = true;
			},
			//投保人同车主
			applicantholderClick(value) {
				this.applicantholder = value;
				if (value == '99') {
					for (let key in this.policyHolderInfo) {
						if (key !== 'identifyType') {
							this.policyHolderInfo[key] = '';
						}
					}
				}
			},
			//被保人同车主/投保人
			InsuredholderClick(value) {
				this.Insuredholder = value;
				if (value == '99') {
					for (let key in this.insuredPersonInfo) {
						if (key !== 'identifyType') {
							this.insuredPersonInfo[key] = '';
						}
					}
				}
			},
			//头部颜色变化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>
	.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 {
		min-height: 100%;
		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: 168px;
		background-image: url("/static/image/car-insure/carban2.png");
		background-size: cover;
		background-position: center;


	}

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

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

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

			>view:nth-child(1) {
				width: 100%;
				height: 42px;

			}

			.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: 38px;
			background-color: #F9F9F9;
			border-radius: 8px;
			padding: 10px 25px;
			margin-top: 10px;

			image {
				width: 20px;
				height: 20px;
				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%;
	}
</style>