zhywpt-sp/subpackage/personal-center/car-message-change.vue

<template>
	<view v-if="state.isMyPeopple" class="content">
		<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.userPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/renxiang.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"></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.userNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/guohui.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<u-form label-width="230" :model="state.form" ref="uForm">
				<u-form-item label="姓名">
					<u-input v-model="state.form.userName" placeholder='请输入姓名' :disabled="state.isEnableOCRData"
						maxlength="20" @input="replaceInput" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum"
						:disabled="state.isEnableOCRData" maxlength="18" />
				</u-form-item>
				<u-form-item label="地址">
					<u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.address"
						:disabled="state.isEnableOCRData" maxlength="100" />
				</u-form-item>
				<u-form-item label="联系方式">
					<u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" maxlength="11" />
				</u-form-item>
			</u-form>
		</view>

		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</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}applyCard/car-zhu.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"></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}applyCard/car-fu.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"></image>
			</view>
		</view>
		<view class="picture-wrapper" @click="cardFileImageUpdate()">
			<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.vehBodyUrl" class="icon" :src="`${$imgUrl}applyCard/chetou.png`">
				</image>
				<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"></image>
			</view>
		</view>
		<view class="shibie-wrapper">
			<view class="title"> 识别内容如下 </view>
			<view class="">
				<u-form label-width="200" :model="state.form" ref="uForm">
					<u-form-item label="车牌号">
						<!-- <u-input inputAlign="right" placeholder='请输入车牌号' v-model="state.form.vehicleIdNum" /> -->
						<car-number-input @numberInputResult="carNumber"
							:defaultStr="state.form.vehicleIdNum"></car-number-input>
					</u-form-item>

					<u-form-item label="所有人">
						<u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.man"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="车辆类型">
						<u-input inputAlign="right" placeholder="请输入车辆类型" v-model="state.form.vehicleType"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="使用性质">
						<u-input inputAlign="right" placeholder="请输入使用性质" v-model="state.form.character"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="车辆识别代号">
						<u-input inputAlign="right" placeholder="请输入车辆识别代号" v-model="state.form.vin"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="发动机号码">
						<u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.form.engineNum"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>

					<u-form-item label="注册日期">
						<picker mode="date" :value="state.form.register" @change="bindDateChange1"
							:disabled="state.isEnableChangeOCRCarInfo">
							<view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
								{{state.form.register}}
							</view>
						</picker>
					</u-form-item>
					<u-form-item label="发证日期">
						<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="核定载人数">
						<u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.form.approvedCountShow"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="整备质量">
						<u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.form.maintenaceMassShow"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<view class="form-item">
						<label>外廊尺寸</label>
						<view class="input-box">
							<text class="sub-label">长</text>
							<input v-model="state.outlineL" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" />
							<text class="sub-text">X</text>
							<text class="sub-label">宽</text>
							<input v-model="state.outlineW" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" />
							<text class="sub-text">X</text>
							<text class="sub-label">高</text>
							<input v-model="state.outlineH" @input="outlineInput"
								:disabled="state.isEnableChangeOCRCarInfo" />
							<text class="sub-text">mm</text>
						</view>
					</view>
					<u-form-item label="总质量">
						<u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMassShow"
							:disabled="state.isEnableChangeOCRCarInfo" />
					</u-form-item>
					<u-form-item label="车轴数">
						<u-input inputAlign="right" placeholder="请输入车轴数" v-model="state.form.axleCount" type="number"
							maxlength="2" />
					</u-form-item>
					<view class="form-item">
						<label>车辆用户类型</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>

		<view class="action">
			<button type="default" class="button" @click="savaHandleCar()">
				下一步
			</button>
		</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>
	</view>
	<u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
	</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 viewfinder from "../../components/viewfinder.vue"
	import {
		reactive,
		ref,
	} from "vue";
	import {
		msg,
		checkStr,
		strReplace,
		uploadFile, hasLogin
	} from "@/utils/utils";
	import {
		onLoad,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import {
		etcOcrCard,
		etcUserCardInfoSubmit,
		fileUpload,
		register,
		envs,
		getUserMsg,
		ocrAllQuery,
		etcCarCardInfoSubmit,
		etcCarOcrCard,
		queryGuoHuJianCe,
		queryGuoHuCaoZuo,
		searchVehicleInfo
	} from "@/utils/network/api.js";

	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		setItem,
		getItem,
		StorageKeys
	} from "@/utils/storage";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import carNumberInput from "@/components/car-number-input/car-number-input.vue";
	import { getObuStatus } from "@/datas/obuStatus.js";

	import { getEtcCardStatus } from "@/datas/etcCardStatus.js";
	const scrollTop = ref(0)
	const state = reactive({
		showImg: true,
		isMy: "",//自己办理  他人办理
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		genderList: [{
			value: '男',
			label: '男'
		},
		{
			value: '女',
			label: '女'
		}
		],
		form: {
			orderId: "", //订单ID
			userName: "", //开户人姓名
			userIdType: "101", //用户证件类型 101//身份证
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			address: "", //开户人地址
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			gender: "",
			customerIdVld: "",
			agentName: "",
			agentGender: "",
			agentTel: '',
			agentPhone: "",
			agentIdType: "101",
			agentIdNum: "",
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			agentAddress: "",
			agentIdVld: '',
			opId: '',
			orderSource: 'WECHAT',


			man: "", //所有人
			character: "", //使用性质
			register: "请输入注册日期", //注册日期

			customerId: "", //用户编号
			vehicleId: "",
			vehicleIdNum: "", //车牌编号
			issueDate: "请输入发证日期", //发证日期
			vehPosImgUrl: "", //行驶证正面
			vehNegImgUrl: "", //行驶证证反面
			type: "0", //0，客车 1.货车
			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: "", //车轴数
			ownerName: "", //车主姓名
			ownerIdType: "", //车主证件类型
			ownerIdNum: "", //车主证件号码
			ownPosImgUrl: "", //车主证件正面图片
			ownNegImgUrl: "", //车主证件反面图片
			agreementId: "", //签约编号
			// channelId: "5201018892300000001", //编号渠道
			scenePayType: "", //
			transportIdNum: "", //道路运输证编号
			licenseIdNum: "", //经营许可证编号
			vehBodyUrl: "", //车身照片
			// proxyUrl: "", //委托书地址
		},

		genderShow: false,
		orderId: "",
		vehiclePlateColor: undefined,
		isMyPeopple: true,
		isSign: '',
		type: 1,
		isEnableOther: true,  //小程序是否支持他人办理
		isEnableBook: true,  //他人办理时是否上传委托书
		isEnableInfo: true,  //小程序信息带出
		isEnableOCRData: true,  //允许修改OCR识别出来的数据



		changeColor: false,
		data: {
			transferLogs: [],
		},
		actionSheetShow: false,
		actionSheetList: [{
			text: "普通车",
			value: 0,
		},
		{
			text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
			value: 24,
		},
		{
			text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
			value: 27,
		},
		{
			text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
			value: 28,
		}],
		orderId: "",
		// type: undefined, //标记来源是否登录 1为未登录数据 - 需要新增地址
		show: false,
		isMyPeopple: true,
		outlineL: "",
		outlineW: "",
		outlineH: "",
		isEnableChangeOCRCarInfo: true,  //申办时是否允许修改OCR识别出来的车辆信息数据
		// allData: {}
	});
	const searchVehicleInfoQuery = () => {
		const options = {
			type: 2,
			data: {
				vehicleId: state.form.vehicleId
			},
			method: "POST",
			showLoading: true,
		};
		request(searchVehicleInfo, options).then((res) => {
			let result = stringToJson(res.bizContent);
			// state.allData = result.vehicles[0]
			writeMsg(result.vehicles[0])
		});
	}
	const writeMsg = (allData) => {
		console.log("车辆信息", allData);
		state.form.userPosImgUrl = allData['ownerPosImgUrl']
		state.form.userNegImgUrl = allData['ownerNegImgUrl']
		state.form.userName = allData['ownerName']
		state.form.userIdNum = 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.vehicleIdNum = allData['vehiclePlate']
		// state.form.man = allData['vehNegImgUrl']
		// state.form.vehBodyUrl = allData['vehBodyUrl']
	}
	const userGenderAction = () => {
		state.genderShow = true;
	};

	const genderSelectConfirm = (e) => {
		state.form.gender = ''
		e.map((val, index) => {
			state.form.gender = val.label;
		})
	};

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

	const savaHandle = () => {
		if (!checkStr(state.form.userIdNum, 'card')) {
			msg('请输入正确身份证');
			return;
		}
		if (!checkStr(state.form.tel, 'mobile')) {
			msg('请输入正确手机号');
			return;
		}
		// 已经登录		
		let data = state.form;
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(etcUserCardInfoSubmit, options).then((res) => {
			// let result = stringToJson(res.bizContent);
			console.log(res);

		});
	};

	onLoad((option : any) => {
		state.form.vehicleId = option.vehicleId;
		state.form.opId = getItem('openId') ? getItem('openId') : '';
		getGlobalParam(); //全局配置数据
		console.log("option", option)
		searchVehicleInfoQuery();  //车辆信息查询
	});

	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const replaceInput = (event) => {
		console.log("event", event)
		const screeningStr = /[^\u4E00-\u9FA5]/g;      //想禁止什么类型，在这里替换正则就可以了
		if (screeningStr.test(event)) {
			setTimeout(() => {
				state.form.userName = event.replace(screeningStr, '');
			}, 100)
		} else {
			setTimeout(() => {
				state.form.userName = event;
			}, 100)
		}
		console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
	}

	const getGlobalParam = () => {
		const data = getItem('globalParam')
		console.log("全局配置数据", getCodeName('IS_ENABLE', data.miniSupportOther), getCodeName('IS_ENABLE', data.otherUploadProxy), getCodeName('IS_ENABLE', data.miniInfoShow), getCodeName('IS_ENABLE', data.changeOCRData))
		// 小程序是否支持他人办理
		if (getCodeName('IS_ENABLE', data.miniSupportOther) == '启用') {
			state.isEnableOther = true;
		} else {
			state.isEnableOther = false;
		}
		// 他人办理时是否上传委托书
		if (getCodeName('IS_ENABLE', data.otherUploadProxy) == '启用') {
			state.isEnableBook = true;
		} else {
			state.isEnableBook = false;
		}
		// 小程序信息带出
		if (getCodeName('IS_ENABLE', data.miniInfoShow) == '启用') {
			state.isEnableInfo = true;
			uni.showModal({
				// title: '提示',
				content: '是否允许带出用户信息',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						queryUserMsg()  //通过opneId查询用户信息
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else {
			state.isEnableInfo = false;
		}
		// 允许修改OCR识别出来的数据
		if (getCodeName('IS_ENABLE', data.changeOCRData) == '启用') {
			state.isEnableOCRData = false;
		} else {
			state.isEnableOCRData = true;
		}
		// 申办时是否允许修改OCR识别出来的车辆信息数据
		if (getCodeName('IS_ENABLE', data.applyChangeOCRCarInfo) == '启用') {
			state.isEnableChangeOCRCarInfo = true;
		} else {
			state.isEnableChangeOCRCarInfo = false;
		}
	}
	// 通过opneId查询用户信息
	const queryUserMsg = () => {
		const options = {
			type: 2,
			data: {
				"openId": getItem('openId')
			},
			method: "POST",
			showLoading: true,
		};
		request(getUserMsg, options).then((res) => {
			console.log("通过opneId查询用户信息", stringToJson(res.bizContent))
			const data = stringToJson(res.bizContent);
			state.form.userPosImgUrl = data.customerPosImgUrl;
			state.form.userNegImgUrl = data.customerNegImgUrl;
			state.form.userName = data.customerName;
			state.form.userIdNum = data.customerIdNum;
			state.form.address = data.customerAddress;
			state.form.tel = data.customerTel;
		})
	}
	const takePhotoMode = (index, isMy) => {
		console.log("index", index, isMy)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
		state.isMy = isMy
	}
	const xiangce = (val) => {
		console.log("val", val)
		var imageType = val;
		if (state.choiceIndex == 3) {
			var imageType = 1;
		} else {
			var imageType = 2;
		}
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				state.showImg = false
				state.images = res.tempFilePaths[0]
				state.phoneType = state.choiceIndex
				state.isTakePhotoModeShow = false
				if (state.choiceIndex == 3 || state.choiceIndex == 4) {
					state.showImg = false
					state.images = res.tempFilePaths[0]
					state.phoneType = state.choiceIndex
					state.isTakePhotoModeShow = false
					return
				}
				console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))

			},
		})
	}
	const takePhoto = (val) => {
		state.showImg = true
		console.log("拍照", val)
		state.phoneType = val;
	}
	const confirmReturn = (val) => {
		console.log("图片地址val", val)
		state.phoneType = 0

		state.isTakePhotoModeShow = false
		// var imageType = state.choiceIndex;
		if (state.choiceIndex == 1) {
			var imageType = 1;
			var queryCode = etcOcrCard
		} else if (state.choiceIndex == 2) {
			var imageType = 2;
			var queryCode = etcOcrCard
		}
		if (state.choiceIndex == 3) {
			var imageType = 1;
			var queryCode = etcCarOcrCard
		} else if (state.choiceIndex == 4) {
			var imageType = 2;
			var queryCode = etcCarOcrCard
		}
		// uploadFile(val.tempImagePath, imageType, ocrAllQuery).then((data) => {
		uploadFile(val.tempImagePath, imageType, queryCode).then((data) => {
			console.log("身份证上传", data)
			if (state.isMy == "my") {
				if (state.choiceIndex == "1") {
					state.form.userName = data.name;
					state.form.gender = data.gender;
					state.form.userIdNum = data.idno;
					state.form.userPosImgUrl = data.imageUrl;
					state.form.address = data.address;
				} else {
					state.form.customerIdVld = data.enddate;
					state.form.userNegImgUrl = data.imageUrl;
				}
				state.isTakePhotoModeShow = false
			} else {
				if (state.choiceIndex == "1") {
					state.form.agentName = data.name;
					state.form.agentGender = data.gender;
					state.form.agentIdNum = data.idno;
					state.form.agentPosImgUrl = data.imageUrl;
					state.form.agentAddress = data.address;
				} else if (state.choiceIndex == "2") {
					console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == "1", data)
					state.form.agentIdVld = data.enddate;
					state.form.agentNegImgUrl = data.imageUrl;
				} else if (state.choiceIndex == "3") {
					if (data.plate_a.length > 8) {
						state.form.vehicleIdNum = data.plate_a.substring(0, 8);
					} else {
						state.form.vehicleIdNum = data.plate_a;
					}
					state.form.man = data.man;
					state.form.vehicleType = data.vehicle;
					state.form.character = data.character;
					state.form.vin = data.vin;
					state.form.engineNum = data.engine;
					state.form.register = data.register;
					state.form.issueDate = data.issue;
					state.form.vehPosImgUrl = data.imageUrl;
					state.form.vehicleModel = data.model;

				} else {
					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 = data.overall.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;
					state.form.totalMassShow = data.gross;
					state.form.vehNegImgUrl = data.imageUrl;
					state.form.permittedWeight = data.alc ? data.alc : 0;
					state.form.permittedTowWeight = data.towing ? data.towing : 0;
					console.log('=====================', state.form.vehNegImgUrl, state)
				}
				state.isTakePhotoModeShow = false
			}
		})
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	// 车辆信息
	//车牌号输入
	const carNumber = (val : any) => {
		state.form.vehicleIdNum = val.trim();
	};
	//提交车辆信息
	const savaHandleCar = () => {
		if (!state.form.vehBodyUrl) {
			msg("请上传车头照");
			return;
		}
		if (state.form.type == 1) {
			state.form.axleCount = 2;
		} else {
			if (!state.form.axleCount) {
				msg("请输入车轴数");
				return;
			}
		}
		state.form.vehicleId =
			state.form.vehicleIdNum + "_" + 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) => {
				const data = stringToJson(res.bizContent);

			})
			.catch((res) => {
				console.log(res);
			});
	};

	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;
	}
	// 车头照图片上传
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.vehBodyUrl = data;
				})
			},
		});
	};
	//外廓尺寸输入框
	const outlineInput = (e) => {
		state.form.vehicleDimensions =
			state.outlineL + "X" + state.outlineW + "X" + state.outlineH + "mm";
	};

	const bindDateChange1 = (e) => {
		state.form.register = e.detail.value
		state.changeColor = true;
	}
	const bindDateChange2 = (e) => {
		state.form.issueDate = e.detail.value
		state.changeColor = true;
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin-bottom: 10rpx;
	}

	.content-wrap {
		position: relative;
		// margin-top: -50rpx;
		padding: 0rpx 30rpx;
		display: flex;

		.big {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 24rpx;
		}

		.nomal {
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 24rpx;
		}

		.tip {
			margin-top: -5px;
			width: 117rpx;
			height: 16rpx;
			background: #00b38b;
			opacity: 0.3;
		}
	}

	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;

		.action {
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 80rpx;
			}
		}

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

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

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

			.bg {
				background: #ffffff;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

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

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

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0a8f8a;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

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

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				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;
		}
	}

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

	.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: relative;
		// margin-top: -50rpx;
		// padding: 0rpx 30rpx;
		// position: relative;

		.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 {
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 80rpx;
			}
		}

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

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

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

			.bg {
				background: #ffffff;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

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

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

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0a8f8a;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

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

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				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;
	}

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