zhywpt-sp/subpackage/personal-center/setting/car-information/car-change.vue

<template>
	<view class="content">
		<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}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" v-model="state.form.vehicleId" disabled="true" />
					</u-form-item>

					<u-form-item label="车主姓名">
						<u-input inputAlign="right" v-model="state.form.ownerName" />
					</u-form-item>
					<u-form-item label="车辆类型">
						<u-input inputAlign="right" v-model="state.form.vehicleType" />
					</u-form-item>
					<!-- 		<u-form-item label="使用性质">
						<u-input inputAlign="right" v-model="state.form.useCharacter" />
					</u-form-item> -->
					<u-form-item label="车辆识别代号">
						<u-input inputAlign="right" v-model="state.form.vin" />
					</u-form-item>
					<u-form-item label="发动机号码">
						<u-input inputAlign="right" v-model="state.form.engineNum" />
					</u-form-item>

					<u-form-item label="注册日期">
						<u-input inputAlign="right" v-model="state.form.registerDate" />
					</u-form-item>
					<u-form-item label="发证日期">
						<u-input inputAlign="right" v-model="state.form.issueDate" />
					</u-form-item>
					<u-form-item label="核定载人数">
						<u-input inputAlign="right" v-model="state.form.approvedCount" />
					</u-form-item>
					<u-form-item label="整备质量">
						<u-input inputAlign="right" v-model="state.form.maintenaceMass" />
					</u-form-item>
					<u-form-item label="外廊尺寸">
						<u-input inputAlign="right" v-model="state.form.vehicleDimensions" />
					</u-form-item>
					<u-form-item label="总质量">
						<u-input inputAlign="right" v-model="state.form.totalMass" />
					</u-form-item>
					<!-- 			<u-form-item label="车牌颜色">
						<u-input inputAlign="right"
							v-model="state.showCaridCorlor" type="select" disabled="ture" />
					</u-form-item> -->
				</u-form>
			</view>
		</view>
		<view class="green-tip">
			如识别信息有误，请手动修改，确认无误后，点击下一步！
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				下一步
			</button>
		</view>
		<u-select v-model="state.actionSheetShow" :list="state.actionSheetList" @confirm="selectConfirm"></u-select>
	</view>
	<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 {
		reactive
	} from "vue";
	import navBgCar from "./components/nav-bg-car3";
	import navBar from "../../components/nav-bar/nav-bar2.vue";
	import {
		getItem
	} from "@/utils/storage.ts"
	import {
		etcCarCardInfoSubmit,
		etcCarOcrCard,
		fileUpload,
		changeCarInfo,
		envs
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		strReplace, uploadFile
	} from "@/utils/utils";
	import viewfinder from "@/components/viewfinder.vue"
	let cacachCarid = ''
	// 修改
	const savaHandle = () => {
		state.form.vehicleId = cacachCarid
		var data = state.form;
		console.log(data, "##########");
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		request(changeCarInfo, options).then((res) => {
			const data = stringToJson(res.bizContent);
			console.log(data)
			if (data.info == '成功.') {
				uni.reLaunch({
					url: "/subpackage/personal-center/setting/car-information/car-manage"
				})
			}

		});
	};

	const selectConfirm = (item : any) => {
		// item.map((val, index) => {
		// 	state.form.useUserType = val.value;
		// 	state.form.useUserTypeName = val.label;
		// });
		console.log(item);

		if (state.form.vehicleId) {
			state.showCaridCorlor = item[0].label
			state.carIdcorlorCode = item[0].value
			console.log(state.form);
		} else {
			uni.showToast({
				title: '请先填写车牌号',
				icon: 'none'
			})
		}
	};

	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 state = reactive({
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		changeColor: false,
		showImg: true,
		images: '',
		actionSheetShow: false,
		actionSheetList: [{
			label: "蓝色",
			value: 0,
		}, {
			label: "黄色",
			value: 1,
		},
		{
			label: "黑色",
			value: 2,
		},
		{
			label: "白色",
			value: 3,
		},
		{
			label: "渐变绿色",
			value: 4,
		},
		{
			label: "黄绿双拼色",
			value: 5,
		},
		{
			label: "蓝白渐变色",
			value: 6,
		},
		{
			label: "未确定",
			value: 9,
		},
		{
			label: "绿色",
			value: 11,
		},
		{
			label: "红色",
			value: 12,
		},
		],
		showCaridCorlor: '',
		carIdcorlorCode: '',
		form: {
			openId: getItem('openId'), //用户标识.
			// man: "", //所有人
			// character: "", //使用性质
			register: "", //注册日期
			customerId: "", //用户编号  .
			vehicleId: "", //车牌编号 .
			issueDate: "", //发证日期  .
			vehPosImgUrl: "", //行驶证正面 .
			vehNegImgUrl: "", //行驶证证反面 .
			type: "0", //0，客车 1.货车 .
			useUserType: 0, //车辆用户类型 .
			// useUserTypeName: "普通车",
			vehicleSign: 2, //前/后装标识 .
			vin: "", //车辆识别代号 .
			engineNum: "", //发动机号码 .
			vehicleType: "", //车辆类型 .
			vehicleModel: "", //行驶证品牌型号 .
			approvedCount: undefined, //核定人数 .
			totalMass: undefined, //总质量 .
			maintenaceMass: undefined, //整备质量.
			permittedWeight: "", //核定载质量 .
			vehicleDimensions: "", //车辆尺寸 .
			permittedTowWeight: "", //准牵引总质量 .
			axleCount: "", //车轴数  .
			ownerName: "", //车主姓名
			ownerIdType: "", //车主证件类型
			ownerIdNum: "", //车主证件号码
			ownPosImgUrl: "", //车主证件正面图片
			ownNegImgUrl: "", //车主证件反面图片
			agreementId: "", //签约编号
			channelId: "", //编号渠道
			scenePayType: "", //
			transportIdNum: "", //道路运输证编号
			licenseIdNum: "", //经营许可证编号
			vehBodyUrl: "", //车身照片
			proxyUrl: "", //委托书地址,
			emergencyFlag: '', //应急车辆标识 0-非应急车辆 1-应急车辆
			contacts: '', //指定联系人列表
			ownerAddress: '', //所有人联系地址
			axisType: '', //轴型
			ownerTel: '', //所有人联系方式
			axleDistance: '', //轴距
			testRecord: '', //检验记录
			fileNum: '', //档案编号
			useCharacter: '', //车辆使用性质
			registerDate: '',//注册日期
			status: ""//车辆信息状态
		},
		orderId: "",
		isMyPeopple: true,
	});
	onLoad((option : any) => {
		// state.form.orderId = option.orderId;
		console.log(JSON.parse(option.data), "RRRRRRRRRRRRRRRRRRR");
		let data = JSON.parse(option.data)
		cacachCarid = data.vehicleId
		state.form.vehPosImgUrl = data.vehPosImgUrl
		state.form.vehNegImgUrl = data.vehNegImgUrl
		state.form.vehBodyUrl = data.vehBodyUrl
		state.form.vehicleId = data.vehiclePlate
		state.form.vehicleType = data.vehicleType
		// state.form.useCharacter=data.useCharacter    
		state.form.vin = data.vin
		state.form.ownerName = data.ownerName
		state.form.engineNum = data.engineNum
		state.form.registerDate = data.registerDate
		state.form.issueDate = data.issueDate
		state.form.approvedCount = data.approvedCount
		state.form.maintenaceMass = data.maintenaceMass
		state.form.vehicleDimensions = data.vehicleDimensions
		state.form.totalMass = data.totalMass
		state.form.status = data.status
		if (data.status == '使用') {
			state.form.status = 1
		} else if (data.status == '未使用') {
			state.form.status = 2
		} else {
			state.form.status = 3
		}
	});
	const xiangce = (val) => {
		console.log("val", val)
		if (state.choiceIndex == 3) {
			var imageType = 1;
		} else {
			var imageType = 2;
		}
		state.changeColor = true;
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album"], //从相册选择
			success: function (res) {
				console.log("tempFilePaths[0].startsWith('file://')", res.tempFilePaths[0], res.tempFilePaths[0].startsWith('file://'))

				if (state.choiceIndex == 3 || state.choiceIndex == 4) {
					state.showImg = false
					state.images = res.tempFilePaths[0]
					state.phoneType = state.choiceIndex
					state.isTakePhotoModeShow = false
					return
				}
			},
		})
	}
	const takePhoto = (val) => {
		console.log("拍照", val)
		state.phoneType = val;
		state.showImg = true;
	}
	const confirmReturn = (val) => {
		if (state.choiceIndex == 3) {
			var imageType = 1;
		} else {
			var imageType = 2;
		}
		state.changeColor = true;
		state.phoneType = 0
		state.isTakePhotoModeShow = false
		uploadFile(val.tempImagePath, imageType, etcCarOcrCard).then((data) => {
			if (state.choiceIndex === "3") {
				// state.form.vehicleId = data.plate_a;
				state.form.ownerName = data.man;
				state.form.vehicleType = data.vehicle;
				// state.form.useCharacter = 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.vehicleModel = data.model;
			} else {
				state.form.approvedCount = parseFloat(data.apc);
				state.form.maintenaceMass = parseFloat(data.unladen);
				state.form.vehicleDimensions = data.overall;
				state.form.totalMass = parseFloat(data.gross);
				state.form.vehNegImgUrl = data.imageUrl;
			}
			state.isTakePhotoModeShow = false
		})
		console.log("图片地址val", val.tempImagePath)
	}
	const takePhotoMode = (index) => {
		console.log("index", index)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
	}
	const cancle = () => {
		state.isTakePhotoModeShow = false
	}
	const camera = () => {
		state.phoneType = 0
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}

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