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

<template>
	<view class="page">
		<view class="banner mb-3">
			<image src="/static/image/car-insure/carban.png" mode=""></image>
		</view>
		<view class="carinfo">
			<view class="title dis a-c j-s mb-3">
				<text>车辆信息</text>
				<view class="rounded  dis a-c j-c">
					<view class="left dis a-c j-c" :class="insuranceType==1? 'active':''" @click="insuranceType=1">
						<text>车牌号</text>
					</view>
					<view class="center"></view>
					<view class="right dis a-c j-c" :class="insuranceType==2? 'active':''" @click="insuranceType=2">
						<text>行驶证</text>
					</view>
				</view>
			</view>
			<view class="carinput" v-show="insuranceType==1">
				<view class="top dis a-c j-s mb-3">
					<text>车牌号码</text>
					<u-switch v-model="checked" active-color="#0052FF" inactive-color="#eee" size='30'
						@change="switchChange"></u-switch>
				</view>
				<view class="btn dis a-c j-s">
					<view class="so-plate-word dis a-c j-c" data-index="0" :class="currentInputIndex==0?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[0]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="1" :class="currentInputIndex==1?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[1]}}</text>
					</view>
					<view class="so-plate-dot"></view>
					<view class="so-plate-word dis a-c j-c" data-index="2" :class="currentInputIndex==2?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[2]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="3" :class="currentInputIndex==3?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[3]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="4" :class="currentInputIndex==4?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[4]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="5" :class="currentInputIndex==5?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[5]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="6" :class="currentInputIndex==6?'actives':''"
						@tap="inputSwitch">
						<text>{{LicenseInputValue[6]}}</text>
					</view>
					<view class="so-plate-word dis a-c j-c" data-index="7" :class="currentInputIndex==7?'newactives':''"
						@tap="inputSwitch">
						<text v-if="LicenseInputValue[7]">{{LicenseInputValue[7]}}</text>
						<view v-else class="newEnergy dis f-c a-c j-c">
							<image src="/static/image/car-insure/leaf.png" mode="">
							</image>
							<text>新能源</text>
						</view>
					</view>
				</view>

			</view>
			<view v-show="insuranceType==2" class="OCRcar">
				<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>
					<text @click="carSwitching=!carSwitching">{{carSwitching?'手动输入':'拍照识别'}}</text>
				</view>
				<view v-show="carSwitching" class="ocr mt-2">
					<image v-if="!carfrontImg" @tap="ocrIdentify" src="/static/image/car-insure/carbg.png" mode=""
						style="width: 100%;height: 198px;">
					</image>
					<template v-else>
						<view v-if=" carfrontImg" class="movable-view dis f-c a-c">
							<movable-area>
								<movable-view direction="all" :out-of-bounds="true" :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>
						<view class="">
							<uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind"
								err-show-type="toast" label-width="100" style="padding: 0 15px;">
								<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: 20px;height: 20px;" @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: 20px;height: 20px;"
											@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 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="使用性质: " required name="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>
								</uni-forms-item>
								<uni-forms-item label="能源种类: " required name="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>
								</uni-forms-item>
								<uni-forms-item label="车辆用途: " required name="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>
								</uni-forms-item>
								<uni-forms-item label="车辆类型: " required name="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>
								</uni-forms-item>
								<uni-forms-item label="车辆种类: " required name="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>
								</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" maxlength="1" 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="#0052FF " size="30"
											@change="transferFlagchange"></u-switch>
									</view>
								</uni-forms-item>
								<uni-forms-item v-if="carInfo.transferFlag" required label="转移登记日期" name="transferDate">
									<u-input type="select" :select-open="transferDateShow"
										:custom-style="{textAlign:'right'}" 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>
						</view>
					</template>
				</view>
				<view v-show="!carSwitching" class="content mt-2">
					<uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind"
						style="padding: 0 15px;" 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: 20px;height: 20px;" @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: 20px;height: 20px;" @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 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="使用性质: " required name="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>
						</uni-forms-item>
						<uni-forms-item label="能源种类: " required name="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>
						</uni-forms-item>
						<uni-forms-item label="车辆用途: " required name="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>
						</uni-forms-item>
						<uni-forms-item label="车辆类型: " required name="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>
						</uni-forms-item>
						<uni-forms-item label="车辆种类: " required name="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>
						</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" maxlength="1" 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="#0052FF " size="30"
									@change="transferFlagchange"></u-switch>
							</view>
						</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"
								:custom-style="{textAlign:'right'}" 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>
				</view>
			</view>
		</view>
		<view class="fixed dis a-c j-c">
			<u-button type="warning" class="fiexdbtn" shape="circle" @click="toNext">立即投保</u-button>
		</view>
		<OCRComponent :showModal='OCRShow' @closePopup="closePopup" :tabslist="tabslist" @tabschange="OCRtabschange"
			:tabsCurrent="tabsCurrent" :checkType='checkType' @carCallback="carCallback">
		</OCRComponent>
		<u-keyboard ref="uKeyboard" mode="car" :keyboardType="keyboardType" v-model="keyboardShow"
			@change="keyboardchange" @backspace="backspacesss" @confirm="backsconfirm"></u-keyboard>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import OCRComponent from '@/components/modules/carInsure/OCRComponent/OCRComponent.vue'; //引用图片信息检查插件
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		components: {
			OCRComponent,
		},
		data() {
			return {
				isActive: true,
				vehicleType: false, //车型查询调用标识
				keyboardType: false, //键盘中/英切换标识
				endYear: Year,
				endMonth: Month,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				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: '发证日期日期格式错误',
						}]
					}
				},
				//影像信息
				carSwitching: true, //true识别 false录入
				keyboardShow: false,
				insuranceType: 2,
				checked: true,
				LicenseInputValue: ['晋', 'A', '', '', '', '', '', ''],
				currentInputIndex: 0,
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人
				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: "", //年龄
				},
				//车辆信息
				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", //车辆种类客车A0 货车H0
					cartype: "K33", //车辆类型
					powertype: "汽油", //燃料类型
					energyType: "0", //能源种类
					enginedesc: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					carnature: "02", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					property: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					usedCar: false, //二手车
					vehicleUse: "05" //车辆用途
				},
				carInfo1: {
					carnature: "非营业",
					energyType: "燃油",
					vehicleUse: "家庭自用",
					cartype: "轿车",
					cimodelclass: "客车",
				},
				registerDateShow: false, //注册日期
				issueDateShow: false, //发证日期
				transferDateShow: false, //转移登记日期
				carnatureShow: false, //使用性质
				energyTypeShow: false, //能源种类
				vehicleUseShow: false, //车辆用途
				cartypeShow: false, //车辆类型
				cimodelclassShow: false, //车辆种类
				/* 数据字典 */
				natureOfVehicleUseoptions: [],
				vehicleTypeoptions: [],
				trafficManagementVehicleTypeoptions: [],
				energyTypeoptions: [],
				businessVehicleUseoptions: [],
				outOfBusinessVehicleUseoptions: [],
				/* 数据字典 */
				tabslist: [{
					name: '行驶证识别'
				}, ],
				OCRShow: false,
				tabsCurrent: 0,
				checkType: "carInfo", //组件类型
				carfrontImg: null, //展示图片
				carbackImg: null, //展示图片
				cardeg: 0, //旋转角度
				word: "word",
			}
		},

		async onLoad() {

			this.$http.get('/sysMenuRecord/add?type=1&menuType=1')
			this.getDicType("businessVehicleUse"); //车辆用途（营业）
			this.getDicType("outOfBusinessVehicleUse"); //车辆用途（非营业）
			this.getDicType("natureOfVehicleUse"); //车辆性质
			this.getDicType("vehicleType"); //车辆种类
			this.getDicType("trafficManagementVehicleType"); //车辆类型
			this.getDicType("energyType"); //能源种类
			if (this.checked) {
				this.LicenseInputValue.forEach((val, index) => {
					if (index < 7) {
						this.$set(this.LicenseInputValue, index, "*");
					}
				})
				let valueList = this.LicenseInputValue;
				const str = valueList.join("")
				this.carInfo.licenseNo = str;
			} else {
				this.LicenseInputValue.forEach((val, index) => {
					this.$set(this.LicenseInputValue, index, "");
				})
				this.carInfo.licenseNo = "";
			}


		},
		onShow() {
			let historyInfo = uni.getStorageSync('historyInfo');
			if (historyInfo) {
				this.carInfo = historyInfo.carInfo;
				this.ownerInfo = historyInfo.ownerInfo;
				this.policyHolderInfo = historyInfo.policyHolderInfo;
				this.insuredPersonInfo = historyInfo.insuredPersonInfo;
				this.carInfoPositiveList = historyInfo.carInfoPositiveList;
				this.ownerInfoPositiveList = historyInfo.ownerInfoPositiveList;
				this.policyHolderInfoPositiveList = historyInfo.policyHolderInfoPositiveList;
				this.insuredPersonInfoPositiveList = historyInfo.insuredPersonInfoPositiveList;
			}
		},
		watch: {
			currentInputIndex(newVal) {
				switch (newVal) {
					case 0:
						this.keyboardType = false;
						break;
					default:
						this.keyboardType = true;
				}
			},
			"carInfo.energyType": {
				handler(val) {
					if (val) {
						this.carInfo1.energyType = this.dictionaryMatching(this.energyTypeoptions,
							this
							.carInfo
							.energyType);
					}
				},
				deep: true
			},
			"carInfo.cartype": {
				handler(val) {
					if (val) {
						this.carInfo1.cartype = this.dictionaryMatching(this.trafficManagementVehicleTypeoptions,
							this
							.carInfo
							.cartype);
					}
				},
				deep: true
			},
		},
		methods: {
			toggleSwitch() {
				this.isActive = !this.isActive;
			},
			rotatefront(int) {
				this[int] = this[int] == 270 ? 0 : this[int] + 90;
			},
			rotateback(int) {
				this[int] = this[int] == 0 ? 270 : this[int] - 90;
			},
			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 getDicType(type) {
				let res = await this.$http.get('/sysDict/dictDetails/' + type);
				if (res.code == 200) {
					this[type + 'options'] = res.data.ddList;
					// if (type == "trafficManagementVehicleType") {
					// 	this.carInfo1.cartype = this.dictionaryMatching(this.trafficManagementVehicleTypeoptions, this
					// 		.carInfo
					// 		.cartype)
					// 	this.carInfo1.cimodelclass = this.dictionaryMatching(this.vehicleTypeoptions,
					// 		this
					// 		.carInfo
					// 		.cimodelclass)
					// }
				}
			},
			//字典name匹配
			dictionaryMatching(list, value) {
				let obj = list.find(val => val.dictValue == value);
				return obj.dictTag;
			},
			//OC识别返回信息
			carCallback(obj) {
				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;
			},
			upperCaseType(type) {
				this.carInfo[type] = this.carInfo[type].toUpperCase();
				if (type == 'frameNo') {
					this.carInfo.vinNo = this.carInfo.frameNo.trim();
				}
			},
			//
			transferFlagchange(status) {
				if (status) {
					this.carInfo.transferDate = this.carInfo.issueDate;
				} else {
					this.carInfo.transferDate = ""
				}
			},
			Dateconfirm(e, obj, param) {
				this[obj][param] = e.year + '-' + e.month + '-' + e.day;
			},

			//下一步
			toNext() {
				switch (this.insuranceType) {
					case 1:
						if (!this.carInfo.licenseNo && !this.islicense(this.carInfo.licenseNo)) {
							return uni.showToast({
								icon: "none",
								title: '请填写正确的车牌号码',
								duration: 1500
							});
						}
						let params = {
							carInfo: this
								.carInfo,
							ownerInfo: this
								.ownerInfo,
							policyHolderInfo: this
								.policyHolderInfo,
							insuredPersonInfo: this
								.insuredPersonInfo,
							carInfoPositiveList: this
								.carInfoPositiveList, //车辆
							ownerInfoPositiveList: this
								.ownerInfoPositiveList, //车主
							policyHolderInfoPositiveList: this
								.policyHolderInfoPositiveList, //投保人
							insuredPersonInfoPositiveList: this
								.insuredPersonInfoPositiveList, //被保人
						}
						this.navigate({
							url: "/pages/carInsure/Information?licenseNo=" + encodeURIComponent(this.carInfo
								.licenseNo) + '&historyInfo=' + `${JSON.stringify(params)}`
						}, "navigateTo", true)
						break;
					case 2:
						if (!this.carInfo.licenseNo && !this.carfrontImg) {
							return uni.showToast({
								icon: "none",
								title: '请上传资料或录入信息后再投保',
								duration: 1500
							});
						}
						this.$refs.carForm.submit().then(res => {
							if (this.vehicleType) {
								this.navigate({
									url: '/pages/carInsure/Information',
									success: (res) => {
										res.eventChannel.emit(
											"acceptData", {
												carInfo: this
													.carInfo,
												ownerInfo: this
													.ownerInfo,
												policyHolderInfo: this
													.policyHolderInfo,
												insuredPersonInfo: this
													.insuredPersonInfo,
												carInfoPositiveList: this
													.carInfoPositiveList, //车辆
												ownerInfoPositiveList: this
													.ownerInfoPositiveList, //车主
												policyHolderInfoPositiveList: this
													.policyHolderInfoPositiveList, //投保人
												insuredPersonInfoPositiveList: this
													.insuredPersonInfoPositiveList, //被保人
											})
									}
								}, "navigateTo", true);
							} else {
								this.$refs.uToast.show({
									title: '检测到未精准校验车型，即将跳转到车型界面选择，请等待。。。',
									type: 'warning',
									icon: false,
								})
								setTimeout(() => {
									this.navigate({
										url: '/pages/carInsure/carType?frameNo=' +
											encodeURIComponent(this.carInfo.frameNo) +
											'&vehicleType=true'
									}, "navigateTo", true);
								}, 2000)

							}
						})
						break;
					default:
						break;
				}
			},
			switchChange(value) {
				if (value) {
					this.LicenseInputValue.forEach((val, index) => {
						if (index < 7) {
							this.$set(this.LicenseInputValue, index, "*");
						}
					})
					let valueList = this.LicenseInputValue;
					const str = valueList.join("")
					this.carInfo.licenseNo = str;
				} else {
					this.LicenseInputValue.forEach((val, index) => {
						this.$set(this.LicenseInputValue, index, "");
					})
					this.carInfo.licenseNo = "";
				}
			},
			// 通过车架号获取车型
			async toChooseVin(cctype) {
				this.vehicleType = true;
				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/carInsure/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/carInsure/carType?modelName=' + encodeURIComponent(cctypeName)
					}, "navigateTo", true);
				}
			},
			//验证车牌号
			islicense(val) {
				let mPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/;
				return mPattern.test(val);
			},
			//验证车架号
			isFrameno(str) {
				let mPattern = /^([0-9A-Z]){17}$/;
				return mPattern.test(str);
			},

			//OCR识别
			ocrIdentify() {
				this.OCRShow = !this.OCRShow;
			},
			closePopup() {
				this.OCRShow = false;
			},

			OCRtabschange(e) {
				this.tabsCurrent = e;
			},

			keyboardchange(val) {

				this.$set(this.LicenseInputValue, this.currentInputIndex, val);
				if (this.currentInputIndex < 7) {
					this.currentInputIndex++;
				}

			},
			backsconfirm() {
				let valueList = this.LicenseInputValue;
				const str = valueList.join("")
				this.carInfo.licenseNo = str;
			},
			//键盘退格键
			backspacesss() {
				this.$set(this.LicenseInputValue, this.currentInputIndex, '')
				if (this.currentInputIndex != 0) this.currentInputIndex--
			},
			inputSwitch(e) {
				const {
					index
				} = e.currentTarget.dataset;
				this.currentInputIndex = parseInt(index);
				this.keyboardShow = true;
				console.log(this.currentInputIndex);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-forms-item .uni-input-input {
		text-align: end;
	}

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

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

	page {
		height: 100vh;
		background: #F8FAFE;
	}

	.page {
		padding: 16px 16px 50px 16px;
	}

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

		image {
			width: 100%;
			height: 100%;
		}

	}

	.carinfo {
		width: 100%;
		height: auto;

		>.title {
			padding: 10px;
			border-bottom: 1px solid #f2f2f2;

			>text {
				font-weight: bold;
				font-size: 15px;
			}

			.rounded {
				width: 120px;
				height: 28px;
				background: #0052FF;
				border-radius: 15px;
				padding: 1px;
				box-sizing: border-box;
				position: relative;

				.left {
					width: 50%;
					height: 100%;
					background-color: white;
					border-top-left-radius: 15px;
					border-bottom-left-radius: 15px;
					font-size: 24rpx;
					color: #0052FF;
				}

				.right {
					width: 50%;
					height: 100%;
					background-color: #fff;
					border-top-right-radius: 15px;
					border-bottom-right-radius: 15px;
					font-size: 24rpx;
					color: #0052FF;
				}

				.center {
					width: 8px;
					height: 100%;
					background-color: white;
					position: absolute;
					border-left: 1px solid #0052FF;
					border-right: 1px solid #0052FF;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) skewX(-10deg);
				}

				.active {
					background-color: #0052FF;
					color: #fff;
				}
			}
		}

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

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

			.so-plate-word {
				width: 40px;
				height: 40px;
				background-color: #f8f8fa;
				border-radius: 5px;
				margin: 0 4px;
				box-sizing: border-box;

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

				.newEnergy {
					image {
						width: 12px;
						height: 12px;
					}

					text {
						font-size: 16rpx;
						color: #0eb78e;
					}
				}
			}

			.so-plate-dot {
				width: 15upx;
				height: 15upx;
				background: #ccc;
				border-radius: 50%;
				margin: 0 5upx
			}

			.actives {
				border: 1px solid #0052FF;
				background-color: rgba(0, 82, 255, 0.1);
			}

			.newactives {
				border: 1px solid #0eb78e;
				background-color: rgba(14, 183, 142, 0.1);
			}
		}

		.OCRcar {
			width: 100%;
			height: auto;

			.title {
				color: #FF5600;

				text:nth-child(1) {
					font-size: 15px;
					font-weight: bold;
					color: #232832;
				}
			}


			.ocr {
				width: 100%;
				height: auto;
				background-color: white;
				box-shadow: 0px 4px 10px 0px #DAE3F4;
				border-radius: 12px;

				.content {
					padding: 0 15px;
				}

				.movable-view {
					.operate-img {
						width: 90%;
						height: 38px;
						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;
						}
					}
				}
			}

			.content {
				width: 100%;
				height: auto;
				background-color: white;
				box-shadow: 0px 4px 10px 0px #DAE3F4;
				border-radius: 12px;

				.input-align-right {
					padding: 20px;
				}


			}
		}
	}

	.fixed {
		width: 100%;
		height: 80px;
		padding: 10px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		z-index: 9;
		border-top: 1px solid #f2f2f2;

		.fiexdbtn {
			width: 50%;
			background: linear-gradient(to bottom, #FFF9F5, #FCD4C0, #F8A67D);
			color: #FF5600;
			font-weight: bold;
			font-size: 18px;
			border: 1px solid #F8A67D;
		}
	}

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

	.switch-container {
		width: 60px;
		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: 26px;
		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: 26px;
		height: 26px;
		position: absolute;
		top: 2px;
		left: 2px;
		font-size: 13px;
		color: rgba(0, 82, 255, 0.8);
	}

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

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

	.thumbactive1 {
		color: #fff;
	}
</style>