zhywpt-sp/subpackage/orders/car-release.vue

<template>
	<navBar title="行驶证信息上传" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
	<navBgCar :activeNum='4'></navBgCar>

	<view class="content">
		<view class="t-card">
			<view class="item-tips">
				<view class="title"> 上传后请核对识别信息 </view>
				<view class="tip"> 如有错误请及时手动修改 </view>
			</view>
			<view class="picture-wrapper" @click="takePhotoMode('3')">
				<view class="bg">
					<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="imgPathMontage(state.form.vehPosImgUrlName)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="takePhotoMode('4')">
				<view class="bg">
					<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="imgPathMontage(state.form.vehNegImgUrlName)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="picture-wrapper" @click="cardFileImageUpdate(1)">
				<view class="bg">
					<view class="">
						<view class="name"> 车头照 </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="imgPathMontage(state.form.vehBodyUrlName)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
			<view class="uni-list tractor">
				<radio-group @change="radioChange" v-if="state.form.vanType==2">
					<text class="title">是否是牵引车</text>
					<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 === state.current" />{{item.name}}
					</label>
				</radio-group>
			</view>
			<!-- 货车 牵引车 需要传道路运输许可证-->
			<view class="picture-wrapper" v-if="state.form.vanType==2 && state.form.tractorSign==1"
				@click="cardFileImageUpdate(2)">
				<view class="bg">
					<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="imgPathMontage(state.form.roadTransportPermitPicUrl)"
						:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
				</view>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<view class="">
				<u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
					<u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`'
						:left-icon-style='leftIcon'>
						<car-number-input @numberInputResult="carNumber"
							:defaultStr="state.form.vehiclePlate"></car-number-input>
					</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.ownerName"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
					</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.vehicleType"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
					</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.vehicleModel"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="30" />
					</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.character"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
					
						<picker :value="state.form.registerDate" @change="bindDateChange1"
							:disabled="state.isEnableChangeOCRCarInfo">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.registerDate}}
							</view>
						</picker> -->
					
						<picker @change="feeVehicleTypeChange" placeholder="请选择收费车型"
							:disabled="state.isEnableChangeOCRCarInfo" range-key="name" :value="state.form.feeVehicleTypeIndex"
							:range="getDicWithType('VEHICLE_TYPE')">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.feeVehicleTypeName}}
							</view>
						</picker>
					
					</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.character"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />

						<picker :value="state.form.registerDate" @change="bindDateChange1"
							:disabled="state.isEnableChangeOCRCarInfo">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.registerDate}}
							</view>
						</picker> -->

						<picker @change="characterChange" placeholder="请选择使用性质"
							:disabled="state.isEnableChangeOCRCarInfo" range-key="name" :value="state.form.characterIndex"
							:range="getDicWithType('VERHICLE_USE')">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.characterName}}
							</view>
						</picker>

					</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"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="50" />
					</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"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
					</u-form-item>

					<u-form-item label="注册日期" :left-icon='`${$imgUrl}issuance/point-form.png`'
						:left-icon-style='leftIcon'>
						<picker mode="date" :value="state.form.registerDate" @change="bindDateChange1"
							:disabled="state.isEnableChangeOCRCarInfo">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.registerDate}}
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="发证日期" :left-icon='`${$imgUrl}issuance/point-form.png`'
						:left-icon-style='leftIcon'>
						<picker mode="date" :value="state.form.issueDate" @change="bindDateChange2"
							:disabled="state.isEnableChangeOCRCarInfo">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.issueDate}}
							</view>
						</picker>
					</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.approvedCountShow"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="3" />
					</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.maintenaceMassShow"
							:disabled="state.isEnableChangeOCRCarInfo" maxlength="7" />
					</u-form-item>
					<view class="form-item">
						<label class='l-label'>
							<image class="icon-img" :src="`${$imgUrl}issuance/point-form.png`" /><text>外廊尺寸</text>
						</label>
						<view class="input-box">
							<text class="sub-label">长</text>
							<input v-model="state.outlineL" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
							<text class="sub-label">宽</text>
							<input v-model="state.outlineW" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
							<text class="sub-label">高</text>
							<input v-model="state.outlineH" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
							<text class="sub-text">mm</text>
						</view>
					</view>
					<u-form-item label="总质量" :left-icon='`${$imgUrl}issuance/point-form.png`'
						:left-icon-style='leftIcon'>
						<u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMassShow"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="核定载质量" v-if="state.form.permittedWeight"
						:left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
						<u-input inputAlign="right" placeholder="核定载质量" v-model="state.form.permittedWeight"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</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" type="number"
							maxlength="2" />
					</u-form-item>
					<view class="form-item">
						<label class='l-label'>
							<image class="icon-img" :src="`${$imgUrl}issuance/point-form.png`" /><text>车辆用户类型</text>
						</label>
						<view class="select" @click="state.actionSheetShow = true">{{state.form.useUserTypeName}}</view>
						<image :src="`${$imgUrl}common/arror-down.png`" class="icon"
							@click="state.actionSheetShow = true">
						</image>
					</view>
				</u-form>
			</view>
			<!-- 车主信息 -->
			<view class="" v-if="state.showOwner">
				<view class="uni-list" style="margin: 20rpx 0;">
					<radio-group @change="ownerRadioChange" class="ownerRadio">
						<label v-for="(item, index) in carOwnerList" :key="item.value" class="left-owner-radio">
							<radio :value="item.value" :checked="index === ownerCurrent">{{item.name}}</radio>
						</label>
					</radio-group>
				</view>
				<view class="" v-if="state.form.ownerIdType == '101'">
					<view class="t-con">
						<view class="item-tips">
							<view class="title"> 上传后请核对识别信息 </view>
							<view class="tip"> 如有错误请及时手动修改 </view>
						</view>
						<view class="picture-wrapper" @click="takePhotoMode('1','my')">
							<view class="bg">
								<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.ownerPosImgUrl" class="icon"
									:src="`${$imgUrl}issuance/sfz.png`"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
								</image>
								<image v-else class="icon" :src="imgPathMontage(state.form.ownerPosImgUrlName)"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
							</view>
						</view>
						<view class="picture-wrapper" @click="takePhotoMode('2','my')">
							<view class="bg">
								<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.ownerNegImgUrl" class="icon"
									:src="`${$imgUrl}issuance/sff.png`"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
								</image>
								<image v-else class="icon" :src="imgPathMontage(state.form.ownerNegImgUrlName)"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
							</view>
						</view>
						<view class="picture-wrapper" @click="cardFileImageUpdate(99)">
							<view class="bg">
								<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.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
								</image>
								<image v-else class="icon" :src="imgPathMontage(state.form.proxyUrlName)"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
							</view>
						</view>
					</view>
					<view class="shibie-wrapper">
						<view class="title"> 识别内容如下 </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'>
								<u-input v-model="state.form.idName" placeholder='请输入车主姓名' maxlength="20"
									@input="replaceInput" inputAlign="right" />
							</u-form-item>
							<u-form-item label="车主身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入车主身份证' type="idcard" v-model="state.form.ownerIdNum"
									maxlength="18" inputAlign="right" />
							</u-form-item>
							<u-form-item label="车主地址" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入车主地址' :autoHeight='true' v-model="state.form.ownerIdAddress"
									maxlength="50" inputAlign="right" />
							</u-form-item>
							<u-form-item label="车主联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入车主联系方式' type="number" v-model="state.form.ownerTel"
									maxlength="11" inputAlign="right" />
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view class="" v-if="state.form.ownerIdType == '203'">
					<view class="t-con">
						<view class="item-tips">
							<view class="title"> 上传后请核对识别信息 </view>
							<view class="tip"> 如有错误请及时手动修改 </view>
						</view>
						<view class="picture-wrapper" @click="cardImageOcrYY()">
							<view class="bg">
								<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.ownerPosImgUrl" class="icon"
									:src="`${$imgUrl}applyCard/zhizhao.png`"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
								</image>
								<image v-else class="icon" :src="strReplace(state.form.ownerPosImgUrlName)"
									:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
							</view>
						</view>
					</view>
					<view class="shibie-wrapper">
						<view class="title"> 识别内容如下 </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'>
								<u-input v-model="state.form.idName" placeholder='请输入公司名称' maxlength="20"
									@input="replaceInput" inputAlign="right" />
							</u-form-item>
							<u-form-item label="社会信用代码" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入社会信用代码' type="idcard" v-model="state.form.ownerIdNum"
									maxlength="18" inputAlign="right" />
							</u-form-item>
							<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.ownerIdAddress"
									maxlength="50" inputAlign="right" />
							</u-form-item>
							<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`'
								:left-icon-style='leftIcon'>
								<u-input placeholder='请输入联系方式' type="number" v-model="state.form.ownerTel"
									maxlength="11" inputAlign="right" />
							</u-form-item>
						</u-form>
					</view>
				</view>
			</view>
		</view>
		<view class="action">
			<view class="btn-tip">
				如识别信息有误，请手动修改，确认无误后，点击下一步！
			</view>
			<button type="default" class="ui-btn" @click="savaHandle()">
				下一步
			</button>
		</view>
	</view>
	<!-- 车辆类型弹窗 -->
	<u-popup mode="bottom" v-model="state.actionSheetShow">
		<view class="window">
			<view class="window-item" v-for="item in state.actionSheetList" :key="item.value" @click="userType(item)">
				{{item.text}}
			</view>
		</view>
	</u-popup>

	<u-popup mode="bottom" v-model="state.show">
		<view v-if="state.data.transferLogs && state.data.transferLogs.length" class="">
			<view class="bettwen-center">
				<view style="padding: 20rpx" class="title"> 选择卡签 </view>
				<view class="goto" @click="pass"> 直接跳过，不使用此套卡签 </view>
			</view>
			<view @click="guohuAction(item)" class="card" v-for="(item, index) in state.data.transferLogs" :key="index"
				style="margin-top: 30rpx; margin-bottom: 30rpx">
				<view v-if="item.status === 'WAITING'" class="card-left">
					<image :src="`${$imgUrl}card2.png`" mode=""></image>
					<view class="card-center">
						<view class="flex">
							<view class=""> 卡号： </view>
							<view class="card-center-head">
								{{ item.cardId }}
							</view>
						</view>
						<view style="margin-top: 10rpx" class="flex">
							<view class=""> OBU编号： </view>
							<view class="card-center-head">
								{{ item.obuId }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close"
		@ocrResult="ocrResult">
	</uploadImg>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import uploadImg from '@/components/uploadOcr';
	import navBgCar from "./components/nav-bg-car1";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import {
		etcCarCardInfoSubmit,
		queryGuoHuJianCe,
		queryGuoHuCaoZuo,
		carMessageApi,
		vehicleUpload,
		vehicleLicenseOcr,
		vehicUsePropert,
		vehicCharge,
		ocrAllQuery,
	} from "@/utils/network/api.js";
	import { request, requestNew } from "@/utils/network/request.js";

	import { stringToJson } from "@/utils/network/encryption";
	import { onLoad, onPageScroll } from "@dcloudio/uni-app";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { msg, strReplace, imgPathMontage, hasLogin, uploadFile, compressImage, chooseImageCompress } from "@/utils/utils";
	import { navTo } from "@/utils/utils";
	import {
		getCodeName, getDicWithType
	} from "@/datas/queryKey.js";
	const scrollTop = ref(0);
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '3rpx',
	}

	const array = [
		{
			name: "家庭自用",
			value: "1"
		}, {
			name: "非营业客车",
			value: "2"
		}, {
			name: "营业客车",
			value: "3"
		}, {
			name: "非营业货车",
			value: "4"
		}, {
			name: "营业货车",
			value: "5"
		}, {
			name: "特种车",
			value: "6"
		}, {
			name: "挂车",
			value: "7"
		}, {
			name: "应急救援车",
			value: "8"
		}
	]
	
	let index = 0;

	function characterChange(e) {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		index = e.detail.value;
		state.form.character = getDicWithType('VERHICLE_USE')[index].code
		state.form.characterName = getDicWithType('VERHICLE_USE')[index].name;
		state.form.characterIndex = index;
	}
	
	const feeVehicleTypeChange = (e) => {
		index = e.detail.value;
		state.form.feeVehicleType = getDicWithType('VEHICLE_TYPE')[index].code;
		state.form.feeVehicleTypeName = getDicWithType('VEHICLE_TYPE')[index].name;
		state.form.feeVehicleTypeIndex = index;
	}
	
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const close = (e) => {
		console.log("e", e)
		state.isTakePhotoModeShow = e
	}
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehiclePlate = val.trim();
	};

	const camera = () => {
		state.phoneType = 0
	}

	const carOwnerList = ref([
		{ name: "个人", value: "101" },
		{ name: "企业", value: "203" },
	])
	const ownerCurrent = ref(0);
	const ownerRadioChange = (evt) => {
		console.log(evt)
		state.form.ownerIdType = evt.detail.value;
		// if (state.form.ownerIdType != evt.detail.value) {
		state.form.idName = "";
		state.form.ownerIdNum = "";
		state.form.ownerIdAddress = "";
		state.form.ownerPosImgUrl = "";
		state.form.proxyUrl = "";
		state.form.ownerNegImgUrl = "";
		state.form.ownerTel = "";
		// }

		for (let i = 0; i < this.items.length; i++) {
			if (this.items[i].value === evt.detail.value) {
				ownerCurrent.value = i;
				break;
			}
		}
	}

	// 获取车辆使用性质
	const getCharacter = (options) => {
		let approvedCount;
		if (state.form.approvedCountShow.toString().indexOf('人') > 0) {
			approvedCount = state.form.approvedCountShow.replace("人", "");
		} else {
			approvedCount = state.form.approvedCountShow;
		}
		let totalMass;
		if (state.form.totalMassShow.toString().indexOf('kg') > 0) {
			totalMass = state.form.totalMassShow.replace("kg", "");
		} else {
			totalMass = state.form.totalMassShow;
		}
		let data = {
			"approvedCount": approvedCount,
			"axleCount": state.form.axleCount,
			"totalMass": totalMass,
			"vanType": state.form.vanType,
			"vehicleDimensions": state.form.vehicleDimensions,
			"plateNum": state.form.vehiclePlate,
			"vehicleTypeName": state.form.vehicleType,
			"vehicleUsePropertName": state.form.character
		}
		let params = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		requestNew(vehicCharge, params)
			.then((res) => {
				state.form.characterName = getDicWithType('VERHICLE_USE').find(val => val.code == res.vehicUse).name || '';
				state.form.characterIndex = getDicWithType('VERHICLE_USE').findIndex(val => val.code == res.vehicUse) || 0;
				state.form.character = res.vehicUse
				state.form.feeVehicleTypeName = getDicWithType('VEHICLE_TYPE').find(val => val.code == res.feeVehicleType).name || ''
				state.form.feeVehicleTypeIndex = getDicWithType('VEHICLE_TYPE').findIndex(val => val.code == res.feeVehicleType) || 0;
				state.form.feeVehicleType = res.feeVehicleType;
			})
			.catch((err) => {
				console.log(err);
			});
	}
	// 判断是否与用户信息一致
	const vehicleUploadReq = (options) => {
		let data = {
			...options,
			character: state.form.character,
			feeVehicleType: state.form.feeVehicleType,
		}
		let params = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		requestNew(vehicleUpload, params)
			.then((resIn) => {
				if (resIn.flag == 1) {
					// 车辆信息与用户信息不符，上传车主信息
					state.showOwner = true;
					state.form.ownerIdType = "101";
				} else if (resIn.flag == 2) {
					if (resIn.approvalStatus == 2) {
						// 会详细列出具体字段的错误信息。
						// uni.showModal({
						// 	title: '提示',
						// 	content: "等待人工审核",
						// 	success: function (res) {
						// 		if (res.confirm) {
		
						// 		} else if (res.cancel) {
						// 			console.log('用户点击取消2');
						// 		}
						// 	}
						// });
		
						navTo(
							`/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
						);
		
					}
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//提交车辆信息
	const savaHandle = () => {
		if (!state.form.vehPosImgUrl) {
			msg("请上传行驶证的主页");
			return;
		}
		if (!state.form.vehNegImgUrl) {
			msg("请上传行驶证的副页");
			return;
		}
		if (!state.form.vehBodyUrl) {
			msg("请上传车头照");
			return;
		}
		if (!state.form.ownerName) {
			msg("请输入所有人");
			return;
		}
		if (!state.form.vehicleType) {
			msg("请输入车辆类型");
			return;
		}
		if (!state.form.character) {
			msg("请输入使用性质");
			return;
		}
		if (!state.form.vin) {
			msg("请输入车辆识别代号");
			return;
		}
		if (!state.form.engineNum) {
			msg("请输入发动机号码");
			return;
		}
		if (!state.form.approvedCountShow) {
			msg("请输入核定载人数");
			return;
		}
		if (!state.outlineL || state.outlineL == '0') {
			msg("请输入外廊尺寸长");
			return;
		}
		if (!state.outlineW || state.outlineW == '0') {
			msg("请输入外廊尺寸宽");
			return;
		}
		if (!state.outlineH || state.outlineH == '0') {
			msg("请输入外廊尺寸高");
			return;
		}
		console.log("state.form.tractorSign", state.form.tractorSign, state.form.roadTransportPermitPicUrl)
		if (state.form.tractorSign == 1 && !state.form.roadTransportPermitPicUrl) {
			msg("请上传道路运输许可证");
			return;
		}
		if (state.form.vanType == 1) {
			state.form.axleCount = 2;
		} else {
			if (!state.form.axleCount) {
				msg("请输入车轴数");
				return;
			}
		}
		state.form.vehicleId =
			state.form.vehiclePlate + "_" + state.vehiclePlateColor;
		state.form.opId = getItem(StorageKeys.OpenId);
		state.form.approvedCount = parseFloat(state.form.approvedCount);
		state.form.maintenaceMass = parseFloat(state.form.maintenaceMass);
		// state.form.totalMass = parseFloat(state.form.totalMass);
		state.form.permittedWeight = parseFloat(state.form.permittedWeight);
		state.form.permittedTowWeight = parseFloat(state.form.permittedTowWeight);
		console.log("state.form.approvedCountShow", state.form.approvedCountShow, state.form.approvedCountShow.toString().indexOf('人'))
		// return;
		if (state.form.approvedCountShow.toString().indexOf('人') > 0) {
			state.form.approvedCount = state.form.approvedCountShow.replace("人", "");
		} else {
			state.form.approvedCount = state.form.approvedCountShow;
		}
		if (state.form.maintenaceMassShow.toString().indexOf('kg') > 0) {
			state.form.maintenaceMass = state.form.maintenaceMassShow.replace("kg", "");
		} else {
			state.form.maintenaceMass = state.form.maintenaceMassShow;
		}
		console.log("state.form.totalMassShow", state.form.totalMassShow)
		if (state.form.totalMassShow.toString().indexOf('kg') > 0) {
			state.form.totalMass = state.form.totalMassShow.replace("kg", "");
		} else {
			state.form.totalMass = state.form.totalMassShow;
		}
		const options = {
			type: 2,
			data: state.form,
			method: "POST",
			showLoading: true,
		};
		vehicleUploadReq(state.form);
	};
	const pass = () => {
		state.show = false
		state.form.vehicleId =
			state.form.vehiclePlate + "_" + state.vehiclePlateColor;
		state.form.opId = getItem(StorageKeys.OpenId);
		state.form.approvedCount = parseFloat(state.form.approvedCount);
		state.form.maintenaceMass = parseFloat(state.form.maintenaceMass);
		state.form.totalMass = parseFloat(state.form.totalMass);
		state.form.permittedWeight = parseFloat(state.form.permittedWeight);
		state.form.permittedTowWeight = parseFloat(state.form.permittedTowWeight);

		const options = {
			type: 2,
			data: state.form,
			method: "POST",
			showLoading: true,
		};
		request(etcCarCardInfoSubmit, options).then((res) => {
			uni.redirectTo({
				url: `/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
			});
		})
	}
	const selectConfirm = (index : any) => {
		console.log(index);
		state.form.useUserType = state.actionSheetList[index].value;
		state.form.useUserTypeName = state.actionSheetList[index].text;
	};

	//选择车辆用户类型
	const userType = (item : any) => {
		state.form.useUserType = item.value;
		state.form.useUserTypeName = item.text;
		state.actionSheetShow = false;
	}
	//车头照图片上传  val 1 车头照 2 道路运输证 5 委托书
	const cardFileImageUpdate = (val) => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], val).then((data : any) => {
					if (val == 1) {
						state.form.vehBodyUrl = data.imageUrl;
						state.form.vehBodyUrlName = data.imageName;
					} else if (val == 99) {
						state.form.proxyUrl = data.imageUrl;
						state.form.proxyUrlName = data.imageName;
					} else {
						state.form.roadTransportPermitPicUrl = data.imageUrl;
						state.form.roadTransportPermitPicUrlName = data.imageName;
					}
				})
			},
		});
	};

	const state = reactive({
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		changeColor: false,
		showImg: true,
		images: '',
		showOwner: false,
		data: {
			transferLogs: [],
		},
		orcChoices: {
			front: false,
			back: false,
		},
		actionSheetShow: false,
		actionSheetList: [],
		form: {
			orderNo: "", //订单ID
			character: "", //使用性质
			characterName: '',
			characterIndex: undefined,
			registerDate: "请输入注册日期", //注册日期
			vehiclePlateColor: "",
			customerId: "", //用户编号
			vehicleId: "",
			vehiclePlate: "", //车牌编号
			issueDate: "请输入发证日期", //发证日期
			vehPosImgUrl: "", //行驶证正面
			vehNegImgUrl: "", //行驶证证反面
			vanType: 1, //1，客车 2.货车
			useUserType: 0, //车辆用户类型
			useUserTypeName: "普通车",
			vehicleSign: 2, //前/后装标识
			vin: "", //车辆识别代号
			engineNum: "", //发动机号码
			vehicleType: "", //车辆类型
			vehicleModel: "", //行驶证品牌型号
			approvedCount: undefined, //核定人数
			approvedCountShow: undefined,//展示的
			totalMass: undefined, //总质量
			totalMassShow: undefined, //总质量
			maintenaceMass: undefined, //整备质量
			maintenaceMassShow: undefined, //整备质量展示的
			permittedWeight: "", //核定载质量
			vehicleDimensions: "", //车辆尺寸
			permittedTowWeight: "", //准牵引总质量
			axleCount: 2, //车轴数
			ownerName: "", //车主姓名
			ownerIdType: "", //车主证件类型
			ownerIdNum: "", //车主证件号码
			ownerPosImgUrl: "", //车主证件正面图片
			ownerNegImgUrl: "", //车主证件反面图片
			agreementId: "", //签约编号
			channelId: "5201018892300000001", //编号渠道
			scenePayType: "", //
			transportIdNum: "", //道路运输证编号
			licenseIdNum: "", //经营许可证编号
			vehBodyUrl: "", //车身照片
			proxyUrl: "", //委托书地址
			roadTransportPermitPicUrl: "", //道路运输许可证
			opId: "",
			tractorSign: 0, //是否是牵引车  1 是 0 不是
			vehicUse: '', //使用性质
			feeVehicleType: '',
			feeVehicleTypeName:'',
			feeVehicleTypeIndex: undefined,
			"emergencyFlag": 0,
			"idName": "",
			"ownerIdAddress": "",
			"ownerTel": "",
		},
		vehiclePlateColor: undefined,
		orderNo: "",
		// type: undefined, //标记来源是否登录 1为未登录数据 - 需要新增地址
		show: false,
		isMyPeopple: true,
		outlineL: "",
		outlineW: "",
		outlineH: "",
		isEnableChangeOCRCarInfo: false,  //申办时是否允许修改OCR识别出来的车辆信息数据
		items: [{
			value: '1',
			name: '是',
		},
		{
			value: '0',
			name: '否',
			checked: 'true'
		}],
		current: "1",
	});
	onLoad((option : any) => {
		state.form.orderNo = option.orderId;
		state.form.vanType = Number(option.vanType);
		state.vehiclePlateColor = option.vehiclePlateColor;
		state.form.vehiclePlateColor = option.vehiclePlateColor;
		if (option.vehicleId) {
			state.form.vehicleId = option.vehicleId;
		}
		console.log("option", option)
		// getGlobalParam();
		if (option.vanType == 1) {
			state.actionSheetList = [{
				text: "普通车",
				value: 0,
			}]
		} else {
			state.actionSheetList = [{
				text: "普通车",
				value: 0,
			},
			{
				text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
				value: 24,
			},
			{
				text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
				value: 27,
			},
			{
				text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
				value: 28,
			}]
		}
	});

	//外廓尺寸输入框
	const outlineInput = (e) => {
		state.form.vehicleDimensions =
			state.outlineL + "X" + state.outlineW + "X" + state.outlineH + "mm";
	};

	//过户检测
	const queryGuoHuJianCeAction = () => {
		var data = {
			orderId: state.form.orderNo,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryGuoHuJianCe, options);
			const data = stringToJson(res.bizContent);
			console.log("过户检测111", data)
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	};

	//过户操作
	const guohuAction = (val) => {
		var data = {
			orderId: state.form.orderNo,
			serviceType: "USE",
			obuId: val.obuId,
			cardId: val.cardId,
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryGuoHuCaoZuo, options);
			const data = stringToJson(res.bizContent);
			state.show = false;
			uni.redirectTo({
				url: `/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
			});
		}).catch((error) => {
			reject(error);
		});
	};


	const getGlobalParam = () => {
		const data = getItem('globalParam')
		getCarMessage();

		// console.log("全局配置数据", getCodeName('IS_ENABLE', data.applyChangeOCRCarInfo))
		// // 申办时是否允许修改OCR识别出来的车辆信息数据
		// if (getCodeName('IS_ENABLE', data.applyChangeOCRCarInfo) == '启用') {
		// 	state.isEnableChangeOCRCarInfo = false;
		// } else {
		// 	state.isEnableChangeOCRCarInfo = true;
		// }
		// // 中办时是否允许带出车辆信息
		// console.log("11", getCodeName('IS_ENABLE', data.applyCarInfo))
		// if (getCodeName('IS_ENABLE', data.applyCarInfo) == '启用') {
		// 	// 获取车辆信息
		// 	getCarMessage()
		// 	console.log("11")
		// }
	}
	const getCarMessage = () => {
		const options = {
			type: 2,
			data: {
				vehicleId: state.form.vehicleId,
			},
			method: "POST",
			showLoading: true,
		};

		request(carMessageApi, options).then((res) => {
			const data = stringToJson(res.bizContent);
			console.log("通过vehicleId查询车辆信息", data)
			if (data.statusCode == 0) {
				writeMsg(data.data)
			}
		})
	}
	const writeMsg = (allData) => {
		console.log("车辆信息", allData);
		state.form.ownerPosImgUrl = allData['ownerPosImgUrl']
		state.form.ownerNegImgUrl = allData['ownerNegImgUrl']
		state.form.userName = allData['contacts']
		state.form.userIdNum = allData['ownerIdNum']
		state.form.ownerIdNum = allData['ownerIdNum']
		state.form.address = allData['ownerAddress']
		state.form.tel = allData['ownerTel']
		state.form.vehPosImgUrl = allData['vehPosImgUrl']
		state.form.vehNegImgUrl = allData['vehNegImgUrl']
		state.form.vehBodyUrl = allData['vehBodyUrl']
		state.form.vehiclePlate = allData['vehiclePlate']
		state.form.ownerName = allData['ownerName']
		state.form.vehicleType = allData['vehicleType']
		if (allData['useCharacter'] == 1) {
			state.form.character = "营运"  //使用性质
		} else if (allData['useCharacter'] == 2) {
			state.form.character = "非营运"  //使用性质
		} else {
			state.form.character = "未知"  //使用性质
		}
		state.form.vin = allData['vin']
		state.form.engineNum = allData['engineNum']
		state.form.registerDate = allData['registerDate']
		state.form.issueDate = allData['issueDate']
		state.form.approvedCountShow = allData['approvedCount']
		state.form.maintenaceMassShow = allData['maintenaceMass']
		state.form.approvedCount = allData['approvedCount']
		state.form.maintenaceMass = allData['maintenaceMass']
		allData['vehicleDimensions']
		state.form.vehicleDimensions = allData['vehicleDimensions']
		let arr = allData['vehicleDimensions'].split("X");
		state.outlineL = parseInt(arr[0]); //外廓 长
		state.outlineW = parseInt(arr[1]); //外廓 宽
		state.outlineH = parseInt(arr[2].substring(0, arr[2].length - 2)); //外廓 高
		state.form.totalMassShow = allData['totalMass']
		state.form.totalMass = allData['totalMass']
		state.form.axleCount = allData['axleCount'] ? allData['axleCount'] : 2
		if (allData['useUserType'] == 0) {
			state.form.useUserTypeName = "普通车"
		} else if (allData['useUserType'] == 24) {
			state.form.useUserTypeName = "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱"
		} else if (allData['useUserType'] == 27) {
			state.form.useUserTypeName = "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车"
		} else if (allData['useUserType'] == 28) {
			state.form.useUserTypeName = "道路运输证经营范围除'货物专用运输 (集装 箱)'外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱"
		}

		state.vehiclePlateColor = allData['vehiclePlateColor']
		state.form.customerId = allData['customerId']
		state.form.vehicleModel = allData['vehicleModel']
		state.form.permittedWeight = allData['permittedWeight'] ? allData['permittedWeight'] : 0;
		state.form.permittedTowWeight = allData['permittedTowWeight']
		state.changeColor = true
		if (allData['tractorSign'] == "1") {
			qian()
			state.form.roadTransportPermitPicUrl = allData['roadTransportPermitPicUrl']
		} else {
			notQian()
		}

	}
	const bindDateChange1 = (e) => {
		state.form.registerDate = e.detail.value
		state.changeColor = true;
	}
	const bindDateChange2 = (e) => {
		state.form.issueDate = e.detail.value
		state.changeColor = true;
	}
	const takePhoto = (val) => {
		console.log("拍照", val)
		state.phoneType = val;
		state.showImg = true;
	}
	const ocrResult = (data) => {
		state.changeColor = true;
		console.log('输出内容=====================', state.choiceIndex)
		console.log("上传数据：", data)
		if (state.choiceIndex === "3") {
			// 行驶证正面
			if (data.plate_a.length > 8) {
				state.form.vehiclePlate = data.plate_a.substring(0, 8);
			} else {
				state.form.vehiclePlate = data.plate_a;
			}
			state.form.ownerName = data.man;
			state.form.vehicleType = data.vehicle;
			state.form.character = data.character;
			state.form.vin = data.vin;
			state.form.engineNum = data.engine;
			state.form.registerDate = data.register;
			state.form.issueDate = data.issue;
			state.form.vehPosImgUrl = data.imageUrl;
			state.form.vehPosImgUrlName = data.imageName;
			state.form.vehicleModel = data.model;
			console.log("走不是牵引车的", data.vehicle.indexOf('牵引车'), data.vehicle)
			if (data.vehicle.indexOf('牵引车') > 0) {
				console.log("是牵引车的")
				qian()
			} else {
				console.log("走不是牵引车的")
				notQian()
			}
			state.orcChoices.front = true;
			if(state.orcChoices.front && state.orcChoices.back) {
				getCharacter(state.form)
			} 

		} else if (state.choiceIndex === "4") {
			// 行驶证反面
			state.form.approvedCount = data.apc;
			state.form.approvedCountShow = data.apc;
			state.form.maintenaceMass = data.unladen;
			state.form.maintenaceMassShow = data.unladen;
			// 91接口差
			// // #ifdef MP-WEIXIN
			// state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
			// // #endif
			// // #ifdef MP-ALIPAY
			// state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
			// // #endif

			// let arr = data.overall.split("×");
			// #ifdef MP-WEIXIN
			state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
			// #endif
			// #ifdef MP-ALIPAY
			state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
			// #endif

			let arr = state.form.vehicleDimensions.split("X");
			state.outlineL = arr[0]; //外廓 长
			state.outlineW = arr[1]; //外廓 宽
			state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
			state.form.totalMass = data.gross ? data.gross : 0;
			state.form.totalMassShow = data.gross ? data.gross : 0;
			console.log("state.form.totalMassShow", state.form.totalMassShow)
			state.form.vehNegImgUrl = data.imageUrl;
			state.form.vehNegImgUrlName = data.imageName;
			state.form.permittedWeight = data.alc ? data.alc : 0;
			state.form.permittedTowWeight = data.towing ? data.towing : 0;

			console.log('=====================', state.form.vehNegImgUrl, state)
			state.orcChoices.back = true;
			if(state.orcChoices.front && state.orcChoices.back) {
				getCharacter(state.form)
			} 
		} else if (state.choiceIndex === "1") {
			// 车主身份证正面
			state.form.idName = data.name;
			state.form.ownerIdNum = data.idno;
			state.form.ownerIdAddress = data.address;
			state.form.ownerPosImgUrl = data.imageUrl;
			state.form.ownerPosImgUrlName = data.imageName;
		} else if (state.choiceIndex === "2") {
			// 车主身份证反面
			state.form.ownerNegImgUrl = data.imageUrl;
			state.form.ownerNegImgUrlName = data.imageName;
		} else if (state.choiceIndex === "5") {
			// 委托书
			state.form.proxyUrl = data.imageUrl;
			state.form.proxyUrlName = data.imageName;
		}

	}
	//营业执照Orc接口调用
	const cardImageOcrYY = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "5").then((data : any) => {
					console.log("data", data)
					state.form.idName = data.unitName;
					state.form.ownerIdNum = data.screditCode;
					state.form.ownerIdAddress = data.adress;
					// state.form.ownerTel = data.address;
					state.form.ownerPosImgUrl = data.imageUrl;
					state.form.ownerPosImgUrlName = data.imageName;
				})
			},
		});
	};
	const takePhotoMode = (index) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	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.current = i;
				state.form.tractorSign = evt.detail.value;
				break;
			}
		}
	}
	// 牵引车
	const qian = () => {
		state.items = [{
			value: '1',
			name: '是',
			checked: 'true'
		},
		{
			value: '0',
			name: '否',
		}]
		for (let i = 0; i < state.items.length; i++) {
			console.log("")
			if (state.items[i].value === '1') {
				state.current = i;
				state.form.tractorSign = 1;
				break;
			}
		}
	}
	// 不是牵引车
	const notQian = () => {
		state.items = [{
			value: '1',
			name: '是',
		},
		{
			value: '0',
			name: '否',
			checked: 'true'
		}]
		for (let i = 0; i < state.items.length; i++) {
			console.log("不是牵引车", state.items[i].value, state.items[i].value === '0')
			if (state.items[i].value === '0') {
				state.current = i;
				state.form.tractorSign = 0;
				break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-warp {}

	.hui {
		color: #ccc;
	}

	.hei {
		color: black;
	}

	.goto {
		margin-right: 20rpx;
		padding: 10rpx;
		color: #00b38b;
		border: 1rpx solid #00b38b;
		border-radius: 20rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.bettwen-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card {
		margin: 20rpx;
		height: 150rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.card-left {
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 90rpx;
			}

			.card-center {
				margin-left: 30rpx;

				.card-center-head {
					font-size: 32rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}

				.tips {
					font-size: 26rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #666666;

					.tips-card {
						width: 70rpx;
						height: 40rpx;
						background: #d3f2ef;
						border-radius: 6rpx;
						font-size: 20rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #0a8f8a;
						padding: 5rpx 10rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.choose-item {
			margin-right: 20rpx;
			width: 50rpx;
			height: 50rpx;
			border: 1rpx solid #00b38b;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			.active {
				width: 38rpx;
				height: 38rpx;
				background: #00b38b;
				border-radius: 50%;
			}
		}
	}

	.content {
		position: absolute;
		top: 370rpx;
		width: 100%;
		min-height: calc(100% - 370rpx);
		box-sizing: border-box;
		padding: 0 30rpx 210rpx;

		.t-card {
			width: 100%;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 40rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.img-pos {
			position: absolute;
			left: 270rpx;
			top: -38rpx;
			right: 50rpx;

			.img-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.car-img {
					width: 86rpx;
					height: 42rpx;
				}

				.flag-img {
					width: 30rpx;
					height: 35rpx;
				}
			}
		}

		.action {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			height: 188rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.btn-tip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCB375;
				margin-bottom: 14rpx;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 500;
				color: #01243A;
				line-height: 30rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 30rpx;

			.bg {
				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;
					// background: rgba(204, 179, 117);
					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;
			}
		}

		.shibie-wrapper {
			margin-top: 30rpx;
			border-radius: 12rpx;
			background-color: #fff;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;


			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 500;
				color: #01243A;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #00b38b;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}

	.form-item {
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;

		.l-label {
			font-size: 28rpx;
			color: #004576;
			display: flex;
			align-items: center;

			.icon-img {
				align-items: center;
				margin-right: 8rpx;
				width: 8rpx;
				height: 8rpx;
				display: flex;
			}
		}
	}

	.form-item label {}

	.form-item .input-box {
		display: flex;
		align-items: center;
	}

	.form-item .select {
		flex: 1;
		background: #f1f1f1;
		padding: 6rpx 20rpx;
		margin: 0 10rpx;
		min-height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
	}

	.form-item .icon {
		width: 28rpx;
		height: 32rpx;
	}

	.form-item .input-box input {
		width: 90rpx;
		background: #f1f1f1;
		border-radius: 8rpx;
		padding: 0 5rpx;
	}

	.form-item .sub-text {
		color: #808080;
		padding-left: 10rpx;
	}

	.form-item .sub-label {
		padding: 0 10rpx;
	}

	.window {
		padding: 60rpx 30rpx;
	}

	.window .window-item {
		border: 1px solid #00b38b;
		background: rgba(0, 179, 139, .1);
		border-radius: 10rpx;
		padding: 16rpx 30rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	::v-deep .u-input__input {
		background: transparent;
	}

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

	.choice-takePhoto-wrap {
		width: 100%;
		height: 100vh;
		background-color: rgba(127, 127, 127, 0.2);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11111;
	}

	.tractor {
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.tractor .title {
		margin-right: 60rpx;
	}

	// .tractor .title .label {
	// 	margin-right: 40rpx !important;
	// }

	.ownerRadio {
		transform: scale(0.8);
		/* 调整缩放比例 */
		margin-right: 10rpx;
	}
	.left-owner-radio {
		margin-right: 50px;
	}
</style>