zhywpt-sp/subpackage/personal-center/vehicle-change/vehicle-change-chepai-write.vue

<template>
	<view class="bg">
		<view class="title_wrap"><text class="title">变更基本信息</text></view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="旧车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlate" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="旧车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<view class="showworld">{{getCodeName('VEHICLE_COLOR_TYPE',state.form.vehiclePlateColor)}}</view>
			</u-form-item>
			<u-form-item label="新车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.vehiclePlateNew" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="新车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<view class="showworld">{{getCodeName('VEHICLE_COLOR_TYPE',state.form.vehiclePlateColorNew)}}</view>
			</u-form-item>
			<u-form-item label="OBU卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input  v-model="state.form.obuId" inputAlign="right" disabled/>
			</u-form-item>
			<u-form-item label="ETC卡号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				<u-input v-model="state.form.cardId" inputAlign="right" disabled/>
			</u-form-item>
			<view class="picture-wrapper" @click="takePhotoMode('3')">
				<view class="bg1">
					<view class="">
						<view class="name"> 新车牌行驶证主页 </view>
						<view class="value"> 上传行驶证的主页 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="takePhotoMode('4')">
				<view class="bg1">
					<view class="">
						<view class="name"> 新车牌行驶证副页 </view>
						<view class="value"> 上传行驶证的副页 </view>
						<view class="tip">
							<view class="tip-value"> 拍摄规范 </view>
						</view>
					</view>
					<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
					</image>
					<image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			
		</u-form>
	</view>
	<view class="bg">
		<view class="title_wrap"><text class="title">车辆信息</text></view>
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
				<u-form-item label="车辆所有人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.ownerName" input-align='right'/>
				</u-form-item>
				<u-form-item label="车辆类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.vehicleType" input-align='right'/>
				</u-form-item>
				<u-form-item label="证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.ownerIdTypeStr" type="select" @click="show1 = true" input-align='right'/>
				</u-form-item>
				<u-form-item label="证件号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.ownerIdNum" input-align='right'/>
				</u-form-item>
				<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.ownerAddress" input-align='right'/>
				</u-form-item>
				<u-form-item label="发证日期" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.issueDate" input-align='right'/>
				</u-form-item>
				<u-form-item label="总质量(kg)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMass"
						 />
				</u-form-item>
				<u-form-item label="整备质量(kg)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.form.maintenanceMass" />
				</u-form-item>
				<u-form-item label="准牵引总质量(kg)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.permittedTowWeight">
					<u-input inputAlign="right" placeholder="请输入牵引质量" v-model="state.form.permittedTowWeight"/>
				</u-form-item>
				<u-form-item label="车轴数(轴)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车轴数" v-model="state.form.axleCount" @blur="changeAxleCount"/>
				</u-form-item>
				<u-form-item label="外廓尺寸(mm)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入外廓尺寸" v-model="state.form.vehicleDimensions" />
				</u-form-item>
				<u-form-item label="核定载人数(人)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.form.approvedCount" />
				</u-form-item>
				<u-form-item label="发动机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.form.engineNum" />
				</u-form-item>
				<u-form-item label="车辆识别号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
					<u-input inputAlign="right" placeholder="请输入车辆识别号" v-model="state.form.vin"/>
				</u-form-item>
				<u-form-item label="车辆用户类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
					borderBottom>
						<u-input v-model="state.form.vehicleCustomerTypeName" type="select" @click="show4 = true" input-align='right'/>
				</u-form-item>
				<view class="picture-wrapper" @click="cardFileImageUpdate(1)">
					<view class="bg1">
						<view class="">
							<view class="name"> 车身45°照 </view>
							<view class="value"> 上传汽车的45°照 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
				<view class="picture-wrapper" @click="cardFileImageUpdate(2)">
					<view class="bg1">
						<view class="">
							<view class="name"> 车头照 </view>
							<view class="value"> 上传车辆车头照 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.vehFrontUrl" class="icon" :src="`${$imgUrl}issuance/chetou45.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="strReplace(state.form.vehFrontUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
				<u-form-item label="是否本人办理" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.userType==1">
					<view class="right-show">
						<radio-group @change="radioChange">
							<label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
								v-for="(item, index) in state.items" :key="item.value">
								<radio :value="item.value" :checked="index+1 === state.form.isMyselfHandle" />{{item.name}}
							</label>
						</radio-group>
					</view>
				</u-form-item>
				<view v-if="state.form.userType==1">
					<view class="picture-wrapper" @click="takePhotoMode(1)" >
						<view class="bg1">
							<view class="">
								<view class="name"> 人像面 </view>
								<view class="value"> 开户人身份证的人像面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.customerPosImgurl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.customerPosImgurl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode(2)">
						<view class="bg1">
							<view class="">
								<view class="name"> 国徽面 </view>
								<view class="value"> 开户人身份证的国徽面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.customerNegImgurl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.customerNegImgurl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<u-form-item label="用户姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="state.form.customerName" placeholder='用户姓名'
							maxlength="20" inputAlign="right"/>
					</u-form-item>
					<u-form-item label="用户证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="state.form.customerIdTypeStr" type="select" @click="show2 = true" input-align='right'/>
					</u-form-item>
					<u-form-item label="用户证件号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input placeholder='请输入用户证件号码' type="idcard" v-model="state.form.customerIdNum"
							 maxlength="18" inputAlign="right"/>
					</u-form-item>
					<view class="picture-wrapper" @click="cardFileImageUpdate(3)" v-if="state.form.isMyselfHandle==2">
						<view class="bg1">
							<view class="">
								<view class="name"> 开户人授权书 </view>
								<view class="value"> 上传授权书 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.ownerLetterOfAuthorizationImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.ownerLetterOfAuthorizationImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
						</view>
					</view>
				</view>
				<view v-if="state.form.userType==2">
					<view class="picture-wrapper" @click="takePhotoMode(1)" >
						<view class="bg1">
							<view class="">
								<view class="name"> 人像面 </view>
								<view class="value"> 经办人身份证的人像面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.agentPosImgurl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.agentPosImgurl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode(2)">
						<view class="bg1">
							<view class="">
								<view class="name"> 国徽面 </view>
								<view class="value"> 经办人身份证的国徽面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.agentNegImgurl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.agentNegImgurl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="state.form.agentName" placeholder='经办人姓名'
							maxlength="20" inputAlign="right"/>
					</u-form-item>
					<u-form-item label="经办人证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input v-model="state.form.agentIdTypeStr" type="select" @click="show3 = true" input-align='right'/>
					</u-form-item>
					<u-form-item label="经办人证号号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input placeholder='请输入证件号码' type="idcard" v-model="state.form.agentIdNum"
							 maxlength="18" inputAlign="right"/>
					</u-form-item>
					<u-form-item label="部门" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' borderBottom>
						<u-input placeholder='请输入部门'  v-model="state.form.department" inputAlign="right"/>
					</u-form-item>
					<view class="picture-wrapper" @click="cardFileImageUpdate(4)">
						<view class="bg1">
							<view class="">
								<view class="name"> 单位授权书 </view>
								<view class="value"> 上传授权书 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.unitAuthorizationLetterImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.unitAuthorizationLetterImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
						</view>
					</view>
				</view>
				
				<u-form-item label="是否牵引车" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.vanType==2 || state.form.vanType==3">
					<radio-group @change="radioChangeqyc">
						<view class="right-show">
							<label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
								v-for="(item, index) in state.itemsqyc" :key="item.value">
								<radio :value="item.value" :checked="index === state.form.isTractor" />{{item.name}}
							</label>
						</view>
					</radio-group>
				</u-form-item>
				<view class="picture-wrapper" @click="cardFileImageUpdate(5)" v-if="state.form.isTractor==1">
					<view class="bg1">
						<view class="">
							<view class="name"> 道路运输许可证 </view>
							<view class="value"> 上传道路运输许可证 </view>
							<view class="tip">
								<view class="tip-value"> 拍摄规范 </view>
							</view>
						</view>
						<image v-if="!state.form.roadTransportPermitPicUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
						</image>
						<image v-else class="icon" :src="strReplace(state.form.roadTransportPermitPicUrl)"
							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
					</view>
				</view>
			</u-form>
			
	</view>
	<view class="bg">
		<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
			<u-form-item label="手机号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
					<u-input v-model="state.form.ownerTel" input-align='right' disabled/>
			</u-form-item>
			<u-form-item label="验证码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
				borderBottom>
				    <view style="display: flex;align-items: center;flex-shrink: 0;">
						<u-input v-model="state.code" input-align='right' maxlength="6"/>
						<text @click="getCode" v-if="waitTime==0" class="search">获取验证码</text>
						<text class="search" v-else>{{waitTime}}后重试</text>
					</view>
			</u-form-item>
		</u-form>
	</view>
	<view class="action">
		<button type="default" class="ui-btn" @click="savaHandle()">
			提交
		</button>
	</view>
<!-- 选择证件类型 -->
	<u-select v-model="show1" :list="state.ownerIdTypeRange" @confirm="changeOwnerIdType"></u-select>
	<!-- 用户证件类型 -->
	<u-select v-model="show2" :list="state.ownerIdTypeRange" @confirm="changeCustomerIdType"></u-select>
	<!-- 经办人证件类型 -->
	<u-select v-model="show3" :list="state.ownerIdTypeRange" @confirm="changeAgentIdType"></u-select>
	<u-select v-model="show4" :list="state.vehicleCustomerTypeRange" @confirm="vehicleCustomerTypeType"></u-select>
	<view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
		<view class="choice-takePhoto">
			<view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
			<view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
			<view @click.stop="cancle">取消</view>
		</view>
	</view>
	<viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images" :showStartPhoto="state.showImg"
		@confirmReturn="confirmReturn" @camera="camera"></viewfinder>
</template>

<script setup lang="ts">
	import { navTo,uploadFile,strReplace,msg,chooseImageCompress,checkStr} from "@/utils/utils";
	import { reactive,ref } from "vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { getItem } from "@/utils/storage.ts"
	import {vehicleLicenseOcr,licenseInforChangeApply,idCardOcr,sendMessage,messageValid,vehicleInfoChangeApply,vehicleInformationChange} from "@/utils/network/api.js";
	import {requestNew} from "@/utils/network/request.js";
	import viewfinder from "../../../components/viewfinder.vue"
	import {
		calculateVehicleType
	} from "@/datas/publicRequest";
import {
		getCodeName
	} from "@/datas/queryKey.js";
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const show1 = ref(false)
	const show2 = ref(false)
	const show3 = ref(false)
	const show4 = ref(false)
	const state = reactive({
		form: {
			name:"",
			
			vehiclePlate: "",//车牌号
			vehiclePlateColor: "",//车牌颜色
			vehicleId:"",
			vehiclePlateNew:"",//变更后车牌号
			vehiclePlateColorNew:"",//变更后车牌颜色
			cardId:"",
			obuId:"",
			isVehiclePlateChange:1,//是否车牌变更 否_0,是_1	
			vanType:"",//客货类型，1-客车 2-货车 3-作业车		
			isMyselfHandle:1,//本人办理_1,代理人办理_2
			userType:1,//1个人  2单位
			customerPosImgurl:"",//开户人身份证正面URL
			customerNegImgurl:"",//开户人身份证反面URL
			ownerLetterOfAuthorizationImgUrl:"",//开户人授权书URL
			unitAuthorizationLetterImgUrl:"",//单位授权书URL
			isTractor:0,//是否牵引车 否_0,是_1
			roadTransportPermitPicUrl:"",//道路运输许可证图片地址(牵引车才提供)
			ownerName:"",
			ownerIdTypeStr:"",
			ownerIdType:"",
			ownerIdNum:"",
			ownerAddress:"",
			totalMass:"",
			maintenanceMass:"",
			axleCount:"",
			vehicleDimensions:"",
			approvedCount:"",
			vin:"",
			engineNum:"",
			vehBodyUrl:"",
			vehFrontUrl:"",
			vehPosImgUrl:"",
			vehNegImgUrl:"",
			vehPosImgOcrId:"",//行驶证正面orcId
			vehNegImgOcrId:"",//行驶证反面orcId
			ownerTel:"",
			customerName:"",
			customerIdNum:"",
			permittedTowWeight:"",//准牵引总质量
			customerIdTypeStr:"",
			customerIdType:"",
			vehicleTypeNew:"",//收费车型
			agentPosImgurl:"",//经办人身份证正面照
			agentNegImgurl:"",//经办人身份证反面照
			agentName:"",//经办人姓名
			agentIdNum:"",
			agentIdType:"",//经办人证件类型
			agentIdTypeStr:"",//经办人证件类型
			department:"",//部门
			vehicleType:"",//行驶证车辆类型
			vehicleCustomerType:"",
			vehicleCustomerTypeName:"",
			issueDate:""
			
		},
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		images: '',
		showImg: true,
		items: [{
					value: 1,
					name: '是',
					checked: 'true'
				},
				{
					value: 2,
					name: '否',
				}],
		itemsqyc: [{
			value: 0,
			name: '否',
			checked: 'true'
		},
		{
			value: 1,
			name: '是',
		}],
		ownerIdTypeRange: [],
		code:"",
		vehicleCustomerTypeRange:[]
	})
	onLoad((option : any) => {
		let type = getItem('key')['CERTIFICATE_TYPE'];
		for (var k = 0; k < type.length; k++) {
			let obj = {};
			obj['value'] = type[k]['code']
			obj['label'] = type[k]['name']
			state.ownerIdTypeRange.push(obj)
		}
		console.log("state.colorRange",state.ownerIdTypeRange,JSON.parse(decodeURIComponent(option.params)))
		let params=JSON.parse(decodeURIComponent(option.params))
		state.form.vehicleId=params.vehicleId
		state.form.vehiclePlate=params.vehicleId.split("_")[0]
		state.form.vehiclePlateColor=params.vehicleId.split("_")[1]
		state.form.vehiclePlateNew=params.vehiclePlateNew
		state.form.vehiclePlateColorNew=params.vehiclePlateColorNew
		state.form.cardId=params.cardId
		state.form.obuId=params.obuId
		// state.form.isVehiclePlateChange=params.isVehiclePlateChange
		state.form.vanType=params.vanType
		getCarDetails()
	});
	const getCarDetails = () => {
		const options = {
			type: 2,
			data: {
				vehicleId:state.form.vehicleId
			},
			method: "POST",
			showLoading: true,
		};
		//调用方式
		requestNew(vehicleInformationChange, options)
			.then((res) => {
				console.log('车辆信息', res)
				state.form.ownerTel=res.info.customerInfo.customerTel
				state.form.userType=res.userType
				if(state.form.userType==2){
					state.form.isMyselfHandle=2
				}
				// 判断车辆用户类型
				judgeUseUserType()
				
			})
			.catch((err) => {
				console.log(err);
			});
	}
	// 判断车辆用户类型
	const judgeUseUserType=()=>{
		if(state.form.vanType=='1'){
			state.vehicleCustomerTypeRange=[
				{
				'value':0,
				'label':"普通车"
			   }
		   ]
		}else{
			state.vehicleCustomerTypeRange=[
				{
				'value':0,
				'label':"普通车"
			   },
			   {
			   	'value': "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
			   	'label': 24,
			   },
			   {
			   	'value': "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
			   	'label': 27,
			   },
			   {
			   	'value': '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
			   	'label': 28,
			   }
			   
			]
		}
	}
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};
	const savaHandle = () => {
		if(!state.form.vehPosImgUrl){
			msg("请上传新车牌行驶证主页");
			return;
		}
		if(!state.form.vehNegImgUrl){
			msg("请上传新车牌行驶证副页");
			return;
		}
		if(!state.form.ownerIdType){
			msg("请选择证件类型");
			return;
		}
		if(!checkStr(state.form.ownerIdNum, "card")){
			msg("请输入正确变更证件号码");
			return;
		}
		if(!state.form.ownerAddress){
			msg("请输入变更地址");
			return;
		}
		if(!state.form.totalMass){
			msg("请输入总质量");
			return;
		}
		if(!state.form.maintenanceMass){
			msg("请输入整备质量");
			return;
		}
		if(!state.form.axleCount){
			msg("请输入车轴数");
			return;
		}
		if(!state.form.vehicleDimensions){
			msg("请输入外廓尺寸");
			return;
		}
		if(!state.form.approvedCount){
			msg("请输入核定载人数");
			return;
		}
		if(!state.form.engineNum){
			msg("请输入发动机号码");
			return;
		}
		if(!state.form.vin){
			msg("请输入车辆识别号");
			return;
		}
		if(!state.form.vehicleCustomerType){
			msg("请选择车辆用户类型");
			return;
		}
		// 测完放开
		// checkCodeRequest().then((val : any) => {
			const options = {
				type: 2,
				data: {
					...state.form
				},
				method: "POST",
				showLoading: true,
			};
			//调用方式
			requestNew(licenseInforChangeApply, options)
				.then((res) => {
					console.log("res",res)
					msg(res.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 2000)
				})
				.catch((err) => {
					console.log(err);
				});
			
		// })
	}
	const checkCodeRequest = () => {
		if(!state.code){
			msg("请输入验证码");
			return;
		}
		const options = {
			type: 2,
			data: {
				mobile: state.form.ownerTel,
				code: state.code
			},
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await requestNew(messageValid, options);
			const data = res;
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	
	}
	const takePhotoMode = (index) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	//  val 1 车身45°照  2车头照  3开户人授权书URL  4单位授权书URL 5道路运输证
	const cardFileImageUpdate = (val) => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					if (val == 1) {
						state.form.vehBodyUrl = data;
					} else if(val == 2) {
						state.form.vehFrontUrl = data;
					}else if(val == 3) {
						state.form.ownerLetterOfAuthorizationImgUrl = data;
					}else if(val == 4) {
						state.form.unitAuthorizationLetterImgUrl = data;
					}else if(val == 5) {
						state.form.roadTransportPermitPicUrl = data;
					}
				})
			},
		});
	};
	let waitTime = ref(0)
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	const getCode = () => {
		console.log(123);
		if (checkStr(state.form.ownerTel, "mobile")) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
		}
	
	}
	// 发送验证码
	const sendCodeApi = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.ownerTel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
			
		//调用方式
		requestNew(sendMessage, options)
			.then((res) => {
				let data = res
				console.log(data, "#################");
				if (data.info == "成功") {
					msg("发送成功")
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const confirmReturn = (val) => {
		console.log("进来了")
		state.phoneType = 0
		state.isTakePhotoModeShow = false
		if(state.choiceIndex==1 || state.choiceIndex==2){
			var imageType=state.choiceIndex
			uploadFile(val.tempImagePath, imageType, idCardOcr).then((data) => {
				console.log("身份证上传", data)
				if(state.form.userType==1){
					// 个人
					if (state.choiceIndex == 1) {
						state.form.customerName = data.name;
						state.form.customerIdNum = data.idno;
						state.form.customerPosImgurl = data.imageUrl;
						
					} else {
						state.form.customerNegImgurl = data.imageUrl;
					}
				}else{
					// 单位
					if (state.choiceIndex == 1) {
						state.form.agentName = data.name;
						state.form.agentIdNum = data.idno;
						state.form.agentPosImgurl = data.imageUrl;
						
					} else {
						state.form.agentNegImgurl = data.imageUrl;
					}
				}
				
				state.isTakePhotoModeShow = false
			})
		}else{
			if (state.choiceIndex == 3) {
				var imageType = 1;
			} else {
				var imageType = 2;
			}
			uploadFile(val.tempImagePath, imageType, vehicleLicenseOcr).then((data) => {
				console.log('输出内容=====================', state.choiceIndex)
				if (state.choiceIndex == 3) {
					state.form.ownerName = data.man;
					state.form.ownerAddress = data.address;
					state.form.vehicleType = data.vehicle;
					state.form.vin = data.vin;
					state.form.engineNum = data.engine;
					state.form.vehPosImgUrl = data.imageUrl;
					state.form.vehPosImgOcrId = data.ocrResultId;
					state.form.issueDate = data.issue;
				} else {
					state.form.approvedCount = data.apc.slice(0,-1);
					state.form.maintenanceMass = data.unladen.slice(0,-2);
					let overall=data.overall.replaceAll("x", "X")
					state.form.vehicleDimensions = overall.slice(0,-2);
					state.form.totalMass = data.gross ? data.gross.slice(0,-2) : 0;
					state.form.vehNegImgUrl = data.imageUrl;
					state.form.vehNegImgOcrId = data.ocrResultId;
					state.form.permittedTowWeight=data.towing.slice(0,-2)
					// 计算收费车型
					if(state.form.axleCount){
						calculateVehicleType(state.form.approvedCount,state.form.axleCount,state.form.vehicleDimensions,state.form.totalMass,state.form.vanType, function (res) {
						   state.form.vehicleTypeNew=res
						});
					}
					console.log('=====================', state.form.vehNegImgUrl, state)
				}
				
				state.isTakePhotoModeShow = false
			})
		}
		
		console.log("图片地址val", val.tempImagePath)
	}
	const camera = () => {
		state.phoneType = 0
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	const takePhoto = (val) => {
		console.log("拍照", val)
		state.phoneType = val;
		state.showImg = true;
	}
	const xiangce = (val) => {
		console.log("val", val)
		if (state.choiceIndex == 3) {
			var imageType = 1;
		} else {
			var imageType = 2;
		}
		chooseImageCompress((res) => {
			state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
			state.showImg = false
			state.phoneType = state.choiceIndex
			state.isTakePhotoModeShow = false
			console.log("res==",res,state.choiceIndex,state.images)
		})
	}
	const radioChange = (evt) => {
		console.log("evt.detail.value", evt.detail.value)
		for (let i = 0; i < state.items.length; i++) {
			if (state.items[i].value == evt.detail.value) {
				state.form.isMyselfHandle = i+1;
				break;
			}
		}
		console.log("state.form.isMyselfHandle", state.form.isMyselfHandle)
	}
	const radioChangeqyc = (evt) => {
		console.log("evt.detail.value", evt.detail.value)
		for (let i = 0; i < state.itemsqyc.length; i++) {
			if (state.itemsqyc[i].value == evt.detail.value) {
				console.log("1",state.itemsqyc[i].value,evt.detail.value,state.itemsqyc[i].value == evt.detail.value,i)
				state.form.isTractor = state.itemsqyc[i].value;
				break;
			}
		}
		console.log("state.form.isTractor", state.form.isTractor)
	}
	const changeOwnerIdType = (item) => {
			state.form.ownerIdType = item[0].value
			state.form.ownerIdTypeStr = item[0].label
			console.log(item)
		}
	const changeCustomerIdType = (item) => {
		state.form.customerIdType = item[0].value
		state.form.customerIdTypeStr = item[0].label
		console.log(item)
	}
	const changeAgentIdType = (item) => {
		state.form.agentIdType = item[0].value
		state.form.agentIdTypeStr = item[0].label
		console.log(item)
	}
	
	const changeAxleCount=(e)=>{
		console.log("e",e)
		calculateVehicleType(state.form.approvedCount,e,state.form.vehicleDimensions,state.form.totalMass,state.form.vanType, function (res) {
		   state.form.vehicleTypeNew=res
		});
	}
	const vehicleCustomerTypeType = (item) => {
			state.form.vehicleCustomerType = item[0].value
			state.form.vehicleCustomerTypeName = item[0].label
			console.log(item)
		}
</script>

<style lang="scss" scoped>
	.bg {
		background-color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 30rpx 20rpx;
		overflow: hidden;
		box-sizing: border-box;

		.title_wrap {
			display: flex;
			font-weight: 400;
            justify-content: space-between;
			.title {
				font-size: 30rpx;
				color: #01243A;
			}
		}

		.des {
			font-weight: 400;
			font-size: 28rpx;
			color: #01243A;
			line-height: 56rpx;
			margin-top: 10rpx;
			text-indent: 1rem;
		}
	}

	.action {
		position: absolute;
		left: 0;
		height: 160rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.card{
		display: flex;
		align-items: center;
		image{
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
		.details view:first-child{
			margin-bottom: 10rpx;
		}
	}
	.picture-wrapper {
		margin-top: 30rpx;
	
		.bg1 {
			background: #F5F9FB;
			border-radius: 10rpx;
			padding: 40rpx 30rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;
	
			.name {
				padding-top: 30rpx;
				font-size: 32rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #111;
				line-height: 34rpx;
			}
	
			.value {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
	
			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 100rpx;
				height: 30rpx;
				border-radius: 6rpx;
				border: 1rpx solid #CCB375;
	
				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #CCB375;
					line-height: 30rpx;
					opacity: 1;
				}
			}
		}
	
		.icon {
			width: 304rpx;
			height: 190rpx;
			background-image: var(--bgimg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
	.search{
		background: #F8F4E7;
		border-radius: 10rpx;
		border: 1px solid #CCB375;
		font-size: 24rpx;
		color: #CCB375;
		padding: 0rpx 14rpx;
		flex-shrink: 0;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 20rpx;
	}
	.showworld{
		display: flex;
		justify-content: flex-end;
	}
	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
		.choice-takePhoto {
			position: absolute;
			bottom: 0;
			background-color: white;
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}
		
		.choice-takePhoto>view:first-child {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
			background-color: white;
		}
		
		.choice-takePhoto>view:last-child {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			border-top: 6rpx solid rgba(127, 127, 127, 0.1);
			background-color: white;
		}
		
		.choice-takePhoto>view {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			background-color: white;
		}
	}
	.right-show{
		display: flex;
		justify-content: flex-end;
	}
</style>