cloud_admin_app/pages/userCenter/personnelCertification/personnelCertification.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>
				<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>
				<view class="badge-box" v-if="imgs_id_back_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" >
				<uni-forms :modelValue="form_add" ref="addFormRef" :rules="rules" labelWidth="180" labelAlign="left" border>
					<uni-forms-item name="realName" label="身份证姓名:">
						<input v-model="form_add.realName" placeholder="请输入">
						</input>
					</uni-forms-item>
					<uni-forms-item name="identification" label="身份证号:">
						<input v-model="form_add.identification" placeholder="请输入">
						</input>
					</uni-forms-item>
				</uni-forms>
				<!-- <view class="flex justify-between">
					<view class="orderNumber">
						<u-form>
							<u-form-item label="车辆VIN码" label-width="100" :required="true"></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" v-if="edit_id == 0">
			<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,
		unref
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import {
		mobile,
		password,
		identification,
		realName
	} from '@/sheep/validate/form';

	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 form_add = ref({
		identification: '',
		realName: ''
	})
	const carVin = ref() //vin码
	const editId = ref()
	const customerId = ref()

	const rules = ref({
		mobile,
		password,
		identification,
		realName
	})
	const customStyle = reactive({
		backgroundColor: '#4C91FF',
		color: '#fff'
	});
	const show = ref(false)
	const title = ref('温馨提示')
	const content = ref('修改后将重新进入审核状态，确定要继续吗？')
	const edit_id = ref(0)
	onLoad((params) => {
		// console.log(params, 'params');
		if (params.data) {
			var options = JSON.parse(params.data)
			if (options.id != '' && options.id != null) {
				edit_id.value = options.id
				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
				}
				form_add.value.realName = options.name
				form_add.value.identification = options.idCard
			}
		}
	})
	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 {
					uni.$u.toast("上传失败！")
				}
			}
		})
	}
	// 点击提交审核
	const comeUp = () => {

		if (!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 addFormRef = ref(null)
	// 提交接口调用
	const submit = async () => {
		const validate = await unref(addFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		console.log(validate, 'validate');
		if (!validate) {
			return;
		}
		var param = {
			idCard: form_add.value.identification,
			idFront: imgs_id_front_url.value,
			idBack: imgs_id_back_url.value,
			name: form_add.value.realName
		}
		let bindUrl = config.baseUrl + 'app-api/member/user/idCardAuth'
		await uni.$request({
			url: bindUrl,
			method: "POST",
			data: param,
		}).then((res) => {
			if (res.data.code == 0) {
				uni.$u.toast('提交成功')
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)

			} else {
				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;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}

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