assess-app/page_task/identity_upload/add-identity.vue

<template>
	<view class="identity-box">
		<!--    <view class="identity-title">上传身份证图片 ,图片大小不能超过3M</view>-->
		<view class="size-30 sys-weight-600'">身份认证</view>
		<view class="size-26 m-t20 m-b30 text-color-999">应监管要求，请先进行身份认证</view>
		<view class="identity-item m-t10">
			<view class="item-img" @click="showUploadingImg(true,1)">
				<view class="img-bg">
					<image v-if="identity_one" :src="identity_one" mode="aspectFill"></image>
					<image v-else src="@/page_task/static/img/identity-front.png" mode="aspectFill"></image>
				</view>
				<view class="img-text">身份证正面</view>
			</view>
			<view class="item-img" @click="showUploadingImg(true,2)">
				<view class="img-bg">
					<image v-if="identity_two" :src="identity_two" mode="aspectFill"></image>
					<image v-else src="@/page_task/static/img/identity-verso.png" mode="aspectFill"></image>
				</view>
				<view class="img-text">身份证反面</view>
			</view>
		</view>
		<uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
			<view class="popup-block">
				<view class="popup-row" @click="uploadingImg(1)">拍照</view>
				<view class="popup-row" @click="uploadingImg(2)">从手机里面选择</view>
				<view class="popup-row" @click="showUploadingImg(false,0)">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBaiDuImgRecognition
	} from "@/api/common";
	import txUploadFile from "@/service/txOssSts";
	import tools from "@/service/tools";

	export default {
		name: "add-identity",
		components: {},
		props: {
			'identityOne': {
				default: '',
			},
			'identityTwo': {
				default: '',
			},
			'userName': {
				default: '',
			},
			'userSex': {
				default: '',
			},
			'identityValidity': {
				default: '',
			},
			'userBirthday': {
				default: '',
			},
			'idNumber': {
				default: '',
			}
		},
		data() {
			return {
				identity_one: '',
				identity_two: '',
				name: '',
				id_number: '',
				sex: '',
				identity_validity: '',
				isUploading: false,
			}
		},
		watch: {
			'identityOne': function() {
				this.setIdentityOne()
			},
			'identityTwo': function() {
				this.setIdentityTwo()
			}
		},
		mounted() {
			this.setIdentityOne()
			this.setIdentityTwo()
		},
		methods: {
			setIdentityOne() {
				if (this.identityOne) {
					if (this.identityOne !== this.identity_one) {
						this.identity_one = this.identityOne
					}
				}
			},
			setIdentityTwo() {
				if (this.identityTwo) {
					if (this.identityTwo !== this.identity_two) {
						this.identity_two = this.identityTwo
					}
				}
			},
			uploadingImg(sourceType) {
				console.log('sourceType:' + sourceType)
				uni.chooseMedia({
					mediaType: 'image',
					count: 1, //默认9
					sizeType: "compressed",
					sourceType: [sourceType === 1 ? 'camera' : 'album'],
					fail: (e) => {
						console.log(e)
					},
					success: (res) => {
						if (res.tempFiles.length > 0) {
              console.log(res.tempFiles)
							res.tempFiles.forEach((tempFile) => {
								txUploadFile(tempFile.tempFilePath).then((data) => {
									if (!data) {
										tools.error('图片上传失败')
										tools.hideLoading()
									} else {
										if (this.uploadingType === 1) {
											tools.showLoading()
											//开启身份证照片识别
											getBaiDuImgRecognition({
												'imgUrl': data.Location,
												'imgType': '1'
											}).then((res) => {
												tools.hideLoading()
												if (res.code === 1) {
													this.identity_one = data.Location;
													this.name = res.data.name;
													this.id_number = res.data
														.id_number;
													this.sex = res.data.sex;
													this.birthday = res.data.birthday;
													this.$emit('update:userName', this
														.name)
													this.$emit('update:userBirthday',
														this.birthday)
													this.$emit('update:userSex', this
														.sex)
													this.$emit('update:idNumber', this
														.id_number)
													this.$emit('update:identityOne',
														this.identity_one)
												} else {
													tools.error('身份证照片识别失败')
												}
											})
										} else {
											tools.showLoading()
											//开启身份证照片背面识别
											getBaiDuImgRecognition({
												'imgUrl': data.Location,
												'imgType': '4'
											}).then((res) => {
												tools.hideLoading()
												if (res.code === 1) {
													this.identity_two = data.Location;
													this.identity_validity = res.data
														.identity_validity;
													this.$emit('update:identityTwo',
														this.identity_two)
													this.$emit(
														'update:identityValidity',
														this.identity_validity)

												} else {
													tools.error('身份证照片识别失败')
												}
											})
										}
									}
								})
							})
							this.showUploadingImg(false, 0);
						} else {
							tools.error("请选择上传的图片")
						}
					},
				});
			},
			showUploadingImg(showImg, uploadingType) {
				if (showImg) {
					if (this.isUploading) {
						return
					}
					this.isUploading = true
					this.uploadingType = uploadingType;
					this.$refs.popup.open("bottom");
				} else {
					this.$refs.popup.close();
					this.isUploading = false
				}
			},
			closePopup(e) {
				if (e.show === false) {
					this.isUploading = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/static/css/wh-common";

	.identity-box {
		.identity-title {
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #999;
			font-weight: 400;
		}

		.identity-item {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;

			.item-img {
				width: calc(50% - 10rpx);

				.img-bg {
					padding: 20rpx;
					background: #F7F9FE;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
				}

				image {
					width: 100%;
					height: 165rpx;
					border-radius: 6rpx;
				}

				.img-text {
					text-align: center;
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 400;
					height: 60rpx;
					line-height: 60rpx;
					background: #0FB160;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
				}
			}
		}

	}
</style>