cloud_admin_app/pages/userCenter/vehicleCertification/vehicleCertification.vue

<template>
	<view class="section">
		<view class=" padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>上传认证资料</view>
		<view class="flex flex-wrap ">
			<view class="flex-sub padding-sm margin-xs radius listPic" @click="chooseImgIdFront">
				<image v-if="has_id_front" class="sizeBox" :src="imgs_id_front" mode="scaleToFill"></image>
				<!-- <image v-else class="sizeBox" src="../../../static/user/idcard_front.png" mode="scaleToFill"></image> -->
				<image v-else class="sizeBox" src="../../../static/user/drive_upload.png" mode="scaleToFill"></image>
				<view class="badge-box" v-if="imgs_id_front_url"></view>
			</view>
			<view class="flex-sub padding-sm margin-xs radius listPic" @click="chooseImgIdBack">
				<image v-if="has_id_back" class="sizeBox" :src="imgs_id_back" mode="scaleToFill"></image>
				<!-- <image v-else class="sizeBox" src="../../../static/user/idcard_back.png" mode="scaleToFill"></image> -->
				<image v-else class="sizeBox" src="../../../static/user/drive_upload.png" mode="scaleToFill"></image>
				<view class="badge-box" v-if="imgs_id_back_url"></view>
			</view>
			<view class="flex-sub padding-sm margin-xs radius listPic" @click="chooseImgDrive">
				<image v-if="has_drive" class="sizeBox" :src="imgs_drive" mode="scaleToFill"></image>
				<image v-else class="sizeBox" src="../../../static/user/travel_upload.png" mode="scaleToFill"></image>
				<view class="badge-box" v-if="imgs_drive_url"></view>
			</view>
			<view class="flex-sub padding-sm margin-xs radius listPic" @click="chooseImgTravel">
				<image v-if="has_travel" class="sizeBox" :src="imgs_travel" mode="scaleToFill"></image>
				<image v-else class="sizeBox" src="../../../static/user/travel_upload.png" mode="scaleToFill"></image>
				<view class="badge-box" v-if="imgs_travel_url"></view>
			</view>
		</view>
		<!--  -->
		<view class=" padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>车辆信息</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<!-- <view class="flex solids-bottom  justify-between">
					<view class="orderNumber">
						<u-form>
							<u-form-item label="驾驶证姓名" label-width="100"></u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" v-model.trim="userName" placeholder="上传行驶证自动识别" inputAlign='right'>
						</u-input>
					</view>
				</view> -->
				<view class="flex solids-bottom  justify-between">
					<view class="orderNumber">
						<u-form>
							<u-form-item label="车牌号" label-width="100"></u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" v-model.trim="licensePlate" placeholder="请输入" inputAlign='right'>
						</u-input>
					</view>
				</view>
				<view class="flex justify-between">
					<view class="orderNumber">
						<u-form>
							<u-form-item label="车辆VIN码" label-width="100"></u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" :required="true" v-model.trim="carVin" placeholder="请输入"
							inputAlign='right'>
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="comeUp">
			<u-button @click="comeUp" :customStyle="customStyle" iconColor="red" shape='circle'>提交审核</u-button>
		</view>
		<u-modal :show="show" :title="title" :showCancelButton="true" :content="content" @confirm="confirm"
			@cancel="cancel">
		</u-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	const has_id_front = ref()
	const imgs_id_front = ref()
	const has_id_back = ref()
	const imgs_id_back = ref()
	const has_drive = ref()
	const imgs_drive = ref()
	const has_travel = ref()
	const imgs_travel = ref()

	const imgs_id_front_url = ref()
	const imgs_id_back_url = ref()
	const imgs_drive_url = ref()
	const imgs_travel_url = ref()

	const licensePlate = ref() //车牌号
	const carVin = ref() //vin码
	const editId = ref()
	const customerId = ref()

	const userName = ref() //驾驶证姓名

	const customStyle = reactive({
		backgroundColor: '#4C91FF',
		color: '#fff'
	});
	const show = ref(false)
	const title = ref('温馨提示')
	const content = ref('修改后将重新进入审核状态，确定要继续吗？')
	// const provinceArray=reactive(['京', '津', '皖', '苏', '沪', '浙', '闵', '黑', '湘', '赣', '川', '渝', '贵', '云', '粤', '桂', '琼', '港', '澳', '台', '鄂', '藏', '青', '新', '甘', '宁', '蒙', '陕', '晋', '鲁', '豫', '冀', '辽', '吉']) 
	onLoad((params) => {
		if (params.data) {
			var options = JSON.parse(params.data)
			console.log(options, 'options');
			if (options.id != '' && options.id != null) {
				if (options.driverLicense != null && options.driverLicense != "") {
					imgs_drive_url.value = options.driverLicense
					imgs_drive.value = options.driverLicense
					has_drive.value = true

				}

				if (options.vehicleLicense != null && options.vehicleLicense != "") {
					imgs_travel_url.value = options.vehicleLicense
					imgs_travel.value = options.vehicleLicense
					has_travel.value = true
				}

				if (options.idBack != null && options.idBack != "") {
					imgs_id_back_url.value = options.idBack
					imgs_id_back.value = options.idBack
					has_id_back.value = true

				}

				if (options.idFront != null && options.idFront != "") {
					imgs_id_front_url.value = options.idFront
					imgs_id_front.value = options.idFront
					has_id_front.value = true
				}

				// proviceIndex: index,
				// province: that.data.provinceArray[index],
				editId.value = parseInt(options.id), //编辑时的认证id
					licensePlate.value = options.carNo
				carVin.value = options.vin
				userName.value = options.userName
				// engineNo: options.engineNo,
				// auditStatus: parseInt(options.auditStatus),

			}
		}

	})
	onShow(() => {

		customerId.value = uni.getStorageSync('userInfo').customerId
	})
	const chooseImgIdFront = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
			success: (res) => {
				const tempFilePaths = res.tempFilePaths;
				// console.log(tempFilePaths, 'ppppppppppppppppppppppppppppp');
				if (tempFilePaths.length >= 1) {
					has_id_front.value = true,
						imgs_id_front.value = tempFilePaths[0]
				} else {
					return;
				}
				//身份证人像面上传
				uplodFile(1)
			}

		});

	}
	const chooseImgIdBack = () => {
		uni.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function(res) {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				const tempFilePaths = res.tempFilePaths;
				if (tempFilePaths.length >= 1) {

					has_id_back.value = true
					imgs_id_back.value = tempFilePaths[0]

				} else {
					return;
				}
				//身份证人像面上传
				uplodFile(2)
			}
		});
	}

	const chooseImgDrive = () => {
		uni.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function(res) {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				let tempFilePaths = res.tempFilePaths;
				if (tempFilePaths.length >= 1) {

					has_drive.value = true
					imgs_drive.value = tempFilePaths[0]

				} else {
					return;
				}
				//驾驶证上传
				uplodFile(3)
			}
		});
	}
	const chooseImgTravel = () => {
		uni.chooseImage({
			count: 1, // 默认9
			//sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sizeType: ['compressed'], // 指定压缩图
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: function(res) {
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				var tempFilePaths = res.tempFilePaths;
				if (tempFilePaths.length >= 1) {
					has_travel.value = true
					imgs_travel.value = tempFilePaths[0]
				} else {
					return;
				}
				//行驶证上传
				uplodFile(4)
			}
		});
	}
	// 上传图片验证
	const uplodFile = (type) => {
		let filePath = null;
		if (type == 1) {
			filePath = imgs_id_front.value
		} else if (type == 2) {
			filePath = imgs_id_back.value
		} else if (type == 3) {
			filePath = imgs_drive.value
		} else if (type == 4) {
			filePath = imgs_travel.value
		} else {
			uni.$u.toast("无效的图片类型！")
		}

		if (filePath == null || filePath == "") {
			uni.$u.toast("无效的图片,请重新选择！")
		}

		uni.uploadFile({
			filePath: filePath,
			name: 'file',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token'),
				'tenant-id': 1
			},
			url: config.upload,
			formData: {},
			success: function(res) {
				// console.log("--------uplodFile---------", res)
				let data = JSON.parse(res.data);
				// console.log("--------uplodFile.data---------", data)
				if (data.code === 0) {
					uni.$u.toast('上传成功');
					if (type == 1) {
						imgs_id_front_url.value = data.data
					} else if (type == 2) {
						imgs_id_back_url.value = data.data
					} else if (type == 3) {
						imgs_drive_url.value = data.data
					} else if (type == 4) {
						imgs_travel_url.value = data.data
						// console.log('ddddddddddddddddddddddd');
					}
				} else {
					uni.$u.toast("上传失败！")
				}
			}
		})
	}
	// 点击提交审核
	const comeUp = () => {
		if (!carVin.value || !licensePlate.value || !imgs_drive_url.value ||
			!imgs_travel_url.value || !imgs_id_front_url.value || !imgs_id_back_url.value) {
			uni.$u.toast('请填写必填项与全部认证资料')
			return
		}
		//有id时是编辑 无是新增
		if (editId.value != null && editId.value != "") {
			show.value = true
			return
		}
		submit()
	}
	// 修改弹窗取消
	const cancel = () => {
		show.value = false
	}
	// 修改弹窗确认
	const confirm = () => {
		submit()
	}
	// 提交接口调用
	const submit = () => {
		var param = {
			vehicleNo: licensePlate.value,
			vehicleLicense: [imgs_drive_url.value,
				imgs_travel_url.value
			],
			driverLicense: [imgs_id_front_url.value,
				imgs_id_back_url.value
			],
			vehicleVin: carVin.value
		}
		// console.log(param, "---------updateVehicle---------", JSON.stringify(param))

		let bindUrl = config.baseUrl + 'app-api/cloud/personal/personalVel/apply'
		uni.$request({
			url: bindUrl,
			method: "POST",
			data: param,
		}).then((res) => {
			// console.log(res,'提交');
			if (res.data.code == 0) {
				uni.$u.toast('保存成功')
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)

			} else {
				// console.log(res);
				uni.$u.toast(res.data.msg)
			}

		}).catch((err) => {
			uni.$u.toast(res.data.msg)
		})
	}
</script>

<style lang='scss' scoped>
	.section {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
	}

	.textBlue {
		color: #4C91FF;
	}

	.sizeBox {
		width: 335rpx;
		height: 190rpx;
	}

	.listPic {
		width: 40%;
		position: relative;
	}

	.badge-box {
		text-align: right;
		background-color: #373737;
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
		color: #fff;
		border-radius: 0 0 0 100%;
		background: url('../../../static/user/upSucceed.svg') no-repeat 100% 100%;
	}

	.comeUp {
		width: 80%;
		position: absolute;
		bottom: 50rpx;
		left: 10%;
	}

	.inputTop {
		margin-top: 5rpx;
	}
</style>