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

<template>
	<view class="page">
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<!-- <view class="inputPrompt mb-2">
			请尽量与上年度保单保持一致！
		</view> -->
		<view class="banner mb-3" v-if="insuranceType==1">
			<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>
					<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 class="ocr mt-2">
					<view class="" v-show="carSwitching">
						<image v-show="!carfrontImg" @tap="ocrIdentify" src="/static/image/car-insure/carbg.png" mode=""
							style="width: 100%;height: 198px;">
						</image>
						<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>
					<view v-show="!carSwitching || carfrontImg">
						<CarInfoForm :carInfo="carInfo" ref="carForm" :upperCaseType="upperCaseType"
							:toChooseVehicleType="toChooseVehicleType" :toChooseVin="toChooseVin"
							:dictionaryConfirm="dictionaryConfirm" :Dateconfirm="Dateconfirm"
							:natureOfVehicleUseoptions="natureOfVehicleUseoptions"
							:energyTypeoptions="energyTypeoptions"
							:trafficManagementVehicleTypeoptions="trafficManagementVehicleTypeoptions"
							:vehicleTypeoptions="vehicleTypeoptions"
							:businessVehicleUseoptions="businessVehicleUseoptions"
							:outOfBusinessVehicleUseoptions="outOfBusinessVehicleUseoptions" :carInfos="carInfo1"
							:errorType="errorType" />
					</view>
				</view>
			</view>
		</view>
		<view class="fixed dis a-c j-c">
			<u-button type="warning" class="fiexdbtn" shape="circle" @click="toNext">立即投保</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">
		</OCRComponent>
		<u-keyboard ref="uKeyboard" mode="car" :keyboardType="keyboardType" v-model="keyboardShow"
			@change="keyboardchange" @backspace="backspacesss" @confirm="backsconfirm"></u-keyboard>
		<u-picker v-model="marketYearShow" mode="time" :params="params1" @confirm="marketYearDateconfirm"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		nextTick
	} from 'process';
	import OCRComponent from '@/components/modules/carInsure/OCRComponent/OCRComponent.vue'; //引用图片信息检查插件
	import CarInfoForm from '@/components/common/commonFormItem/CarInfoForm.vue';
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		components: {
			OCRComponent,
			CarInfoForm
		},
		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,
				model: {
					name: '',
					sex: '',
					likeFruit: '',
					intro: '',
					payType: '支付宝',
					agreement: false,
					region: '',
					goodsType: '2',
					phone: '',
					code: '',
					password: '',
					rePassword: '',
					remember: false,
					photo: ''
				},
				errorType: ['border-bottom', 'toast'],
				isActive: true,
				vehicleType: false, //车型查询调用标识
				keyboardType: false, //键盘中/英切换标识
				endYear: Year,
				endMonth: Month,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				//影像信息
				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: "", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseTypeCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "", //年款
					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: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},

			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识别返回信息
			async 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;
				this.carModelLookupModal = true;
				let res = await this.$http.get('/order/carModel/vinSearch?frameNo=' + this.carInfo.frameNo);
				this.carTypeVINList = res.data;
			},
			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
							});
						}
						if (this.carInfo.licenseNo.length == '8' && this.carInfo1.energyType == "燃油") {
							return uni.showToast({
								icon: "none",
								title: '能源类型错误，修改后再投保',
								duration: 1500
							});
						}
						this.$refs.carForm.validate(valid => {
							if (valid) {
								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:
				}
				// this.navigate({
				// 	url: '/pages/carInsure/Information',
				// })

			},
			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 = "";
				}
			},
			// 通过车架号获取车型
			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);
			},
			//跳转选择车辆类型页面
			async toChooseVehicleType(cctype) {
				if (cctype == '' || cctype == null) {
					uni.showToast({
						icon: 'none',
						title: '请输入车型名称',
						duration: 1500
					});
				} else {

					this.getBrandModel(cctype);

				}
			},
			//验证车牌号
			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>
	.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;
		}
	}

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

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

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

				text {
					font-weight: bold;
				}
			}

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

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

	}
</style>