yiliangyiyun-app/pageD/identity/companyIdentityTwo.vue

<template>
	<view class="center">
		<view>
			<!-- 个人身份证正面 -->
			<upload class="upload" :file-list='cardAddressUrlList[0]' ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl1"  @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions1"
				:custom="uploadCustom1" ></upload>
			<!-- 个人身份证反面 -->
			<upload class="upload" :file-list='cardAddressUrlList[1]' ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl2"  @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions2"
				:custom="uploadCustom1" ></upload>
		</view>
		<view class="c-row b-b">
			<text class="tit_red">*</text>
			<text class="tit">姓名</text>
			<view class="con-list">
				<input placeholder="请填写姓名" name="input" v-model="identityAuthenticationInfo.customerName"></input>
			</view>
		</view>
		<view class="c-row b-b">
			<text class="tit">身份证号</text>
			<view class="con-list">
				<input  placeholder="请填写身份证号" name="input"
					v-model="identityAuthenticationInfo.customerNumberCard"></input>
			</view>
		</view>
		<button class="btns btn" @click="jumpUrl">下一步</button>
	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			upload
		},
		data() {
			return {
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false, //防止重复点击
				isAdd: true,
				cardAddressUrlList:[],
				imgUrls: [],
				uploadCustom1: true,
				uploadCustom2: true,
				uploadOptions1: {
					"text": "上传身份证头像页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				},
				uploadOptions2: {
					"text": "上传身份证国徽页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				},
				id: [],
				id1: "../../static/img/authentication/identityup(3).png",
				id2: "../../static/img/authentication/identitylow(3).png",
				identityImgs1: {},
				identityAuthenticationInfo: {},
				certificates: true,
				certificatesTwo: true,
			}
		},
		onLoad(options) {
			this.identityAuthenticationInfo = JSON.parse(options.identityAuthenticationInfo)
			console.log(this.identityAuthenticationInfo)
			if (this.identityAuthenticationInfo.cardAddressUrl) {
				let _lsit = []
				_lsit = this.identityAuthenticationInfo.cardAddressUrl.split(',')
				this.cardAddressUrlList[0] = [{url:_lsit[0]}]
				this.cardAddressUrlList[1] = [{url:_lsit[0]}]
			}
		},
		methods: {
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			getImgUrl1(res) {
				console.log(res)
				console.log('------------res-----------')
				let that = this;
				that.id[0] = res
				that.id1 = res
				that.certificates = false
				that.identityImgs1.personImg = res
				that.$api.doRequest('get', '/driverViewInfo/personShibie', that.identityImgs1).then(res => {
					if (res.data.data.recPerson != null) {
						if (res.data.data.recPerson != "") {
							that.$set(that.identityAuthenticationInfo, 'customerName', res.data.data.recPerson)
						}
					}
					if (res.data.data.recPersonNo != null) {
						if (res.data.data.recPersonNo != "") {
							that.$set(that.identityAuthenticationInfo, 'customerNumberCard', res.data.data
								.recPersonNo)
						}
					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			getImgUrl2(res) {
				console.log(res)
				console.log('------------res-----------')
				let that = this;
				that.id[1] = res
				that.id2 = res
				that.certificatesTwo = false
				that.identityImgs1.personImg = res
				that.$api.doRequest('get', '/driverViewInfo/personShibie', that.identityImgs1).then(res => {
					if (res.data.data.recPerson != null) {
						if (res.data.data.recPerson != "") {
							that.$set(that.identityAuthenticationInfo, 'customerName', res.data.data.recPerson)
						}

					}
					if (res.data.data.recPersonNo != null) {
						if (res.data.data.recPersonNo != "") {
							that.$set(that.identityAuthenticationInfo, 'customerNumberCard', res.data.data
								.recPersonNo)
						}

					}
				}).catch(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					})
				})
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {
				this.imgUrls.splice(index, 1);
			},
			jumpUrl() {
				
				this.identityAuthenticationInfo.cardAddressUrl = this.id.toString()
				// if (this.id[0] == '' || this.id[0] == null) {
				// 	this.$api.msg('请上传身份证正面')
				// 	return
				// }
				// if (this.id[1] == '' || this.id[1] == null) {
				// 	this.$api.msg('请上传身份证反面')
				// 	return
				// }
				if (!this.identityAuthenticationInfo.customerName) {
					this.$api.msg('姓名不能为空')
					return
				}
				if (this.identityAuthenticationInfo.customerName.length < 2 || this.identityAuthenticationInfo.customerName
					.length > 10) {
					this.$api.msg('姓名输入错误')
					return
				}
				// if (!this.identityAuthenticationInfo.customerNumberCard) {
				// 	this.$api.msg('身份证号不能为空')
				// 	return
				// }
				// if (this.identityAuthenticationInfo.customerNumberCard.length != 18) {
				// 	this.$api.msg('身份证号输入错误')
				// 	return
				// }
				var model = JSON.stringify(this.identityAuthenticationInfo);
				uni.navigateTo({
					url: `/pageD/identity/companyIdentityThree?identityAuthenticationInfo=` + model,
				})
			},
		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
		color: white;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}

	.words {
		font-size: 18px;
		font-weight: 600;
		color: #617E8B;
	}

	.floats {
		position: relative;
		top: -150px;
		text-align: center;
	}

	.upload {
		margin: 20rpx 0;
	}
	.tit_red{
		color: #E54D42;
	}
</style>