mobile_uniapp_mmhy/pageA/identity/identity.vue

<template>
	<view class="identity">
		<!-- #ifdef H5 -->
				<u-navbar v-if="mixin_type=='H5'" back-text=" " :custom-back='goBack' title="身份认证" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff"></u-navbar>
				<!-- #endif -->
		<u-toast ref="uToast" />
		<u-modal v-model="show" :mask-close-able="false" confirm-color="#D52E4C" @confirm="confirm" :show-cancel-button="false" :content="content"></u-modal>
		<view class="form">
			<view class="upload">
				<view class="flexJu">
					<image src="@/static/img/uUploadID11.png" mode="widthFix"></image>
					<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
					<u-upload ref="uUpload1" width="600rpx" height="300rpx"  @on-change="progress1" :action="action" ></u-upload>	
				</view>
				<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">身份证正面照</view>
				<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">证件四角边缘空隙2厘米以上，手机横排，照片清晰不模糊，无水印，无反光，无PS</view>
			</view>
			<view class="upload">
				<view class="flexJu">
					<image src="../../static/img/uUploadID22.png" mode=""></image>
					<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
					<u-upload ref="uUpload2" width="600rpx" height="300rpx" @on-change="progress2" :action="action" ></u-upload>
				</view>
				<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">身份证反面照</view>
				<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">证件四角边缘空隙2厘米以上，手机横排，照片清晰不模糊，无水印，无反光，无PS</view>
			</view>
			<view class="upload">
				<view class="flexJu">
					<image src="../../static/img/uUploadID33.png" mode=""></image>
					<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
					<u-upload ref="uUpload3" width="600rpx" height="300rpx" @on-change="progress3" :action="action" ></u-upload>
				</view>
				<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">本人免冠正面照</view>
				<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</view>
			</view>
			<view class="formInput">
				<view class="title">
					实名信息
				</view>
				<u-form :model="form"  label-width="220">
					<u-form-item label="姓名" >
						<u-input v-model="form.name" placeholder-style="font-size:24rpx;" :clearable="false" placeholder="请输入真实姓名"/>
					</u-form-item>
					<u-form-item label="手机号" >
							<u-input v-model="form.phone" placeholder-style="font-size:24rpx;" :clearable="false" placeholder="请输入手机号"/>
					</u-form-item>
					<u-form-item label="身份证号">
						<u-input v-model="form.id_no" placeholder-style="font-size:24rpx;" :clearable="false" placeholder="请输入身份证号"/>
					</u-form-item>
				</u-form>
				<view class="btn" @tap="apply()">
					提交
				</view>
			</view>
			
		    </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传地址
				action: '',
				form: {
					id:'',
					id_no:'', //身份号码,
					name:'', //姓名
					phone:'', //手机号
				},
				show: false,
				content: '上传成功',
				phoneNext:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.form.id=option.id
				this.phoneNext=option.phone
			}
			this.action=this.$httpUrl+'/api/common/upload'
		},
		methods: {
			goBack(){
				
				if(getCurrentPages().length==1){
					return
				}else{
					uni.navigateBack()
				}
				
			},
			progress1(res, index, lists, name){
				// console.log(JSON.parse(res.data))
				if(JSON.parse(res.data).code==0){
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload1.clear()
				}
			},
			progress2(res, index, lists, name){
				// console.log(JSON.parse(res.data))
				if(JSON.parse(res.data).code==0){
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload2.clear()
				}
			},
			progress3(res, index, lists, name){
				// console.log(JSON.parse(res.data))
				if(JSON.parse(res.data).code==0){
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload3.clear()
				}
			},
				apply(){
					
					let files1 = [];
					let files2 = [];
					let files3 = [];
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					files1 = this.$refs.uUpload1.lists.filter(val => {
						return val.progress == 100;
					})
					files2 = this.$refs.uUpload2.lists.filter(val => {
						return val.progress == 100;
					})
					files3 = this.$refs.uUpload3.lists.filter(val => {
						return val.progress == 100;
					})
					if(files1[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传身份证正面照',
							type: 'error ',
						})
						return;
					}
					if(files2[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传身份证背面照',
							type: 'error ',
						})
						return;
					}
					if(files3[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传本人免冠正面照',
							type: 'error ',
						})
						return;
					}
					if(this.form.name==''){
						this.$refs.uToast.show({
							title: '请输入姓名',
							type: 'error ',
						})
						return;
					}
					if(!this.$check.checkName(this.form.name)){
						this.$refs.uToast.show({
							title: '请输入正确的格式',
							type: 'error ',
						})
						return;
					}
					if(this.form.phone==''){
						this.$refs.uToast.show({
							title: '请输入手机号',
							type: 'error ',
						})
						return;
					}
					if(!this.$check.checkMobile(this.form.phone)){
						this.$refs.uToast.show({
							title: '请输入正确手机号的格式',
							type: 'error ',
						})
						return;
					}
					if(this.form.id_no==''){
						this.$refs.uToast.show({
							title: '请输入身份证号',
							type: 'error ',
						})
						return;
					}
					if(!this.$check.IdName(this.form.id_no)){
						this.$refs.uToast.show({
							title: '请输入正确的身份证',
							type: 'error ',
						})
						return;
					}
					
					let obj={
						id:this.form.id,
						idcard_face_img:files1[0].response.data.url,
						idcard_back_img:files2[0].response.data.url,
						face_img:files3[0].response.data.url,
						name:this.form.name,
						id_no:this.form.id_no,
						phone:this.form.phone,
					}
					this.$http.upload_identity(obj)
					.then(res=>{
						let this_=this;
						console.log(res)
						if(res.data.code==1){
							this.$refs.uToast.show({
								title: '上传成功',
								type: 'success',
							})
							setTimeout(function() {
								 uni.$emit('updateData', {mobile:this.phoneNext})
								 wx.navigateBack({ //返回
									delta: 1	
								 });
							}, 1000);
						}else{
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
						// uni.navigateBack({
						// 		delta:1,//返回层数，2则上上页
						// 	})
					})
				},
				confirm(){
					this.show = false;
				},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f7f7f7;
	}
	.identity{
		height: 100%;
		.flex{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		//平均分配
		.flexJu{
			display: flex;
			justify-content: space-between;
		}
		.form {
		  width: 703rpx;
		  box-sizing: border-box;
		  padding: 30rpx;
		  position: relative;
		  margin: 20rpx auto 30rpx;	  
		  // background-color: #fff;
		  border-radius: 30rpx;
		  .upload{
			  position: relative;
			  left: 50%;
			  transform: translateX(-50%);
			 padding: 30rpx;
			margin-bottom: 30rpx;
			border: 3rpx dashed #d52e4c;
			border-radius: 10rpx;
			  image{
				  width: 220rpx;
				  height: 140rpx;
				  border-radius: 10rpx;
			  }
			  .ding{
				  position: absolute;
				  width: 60rpx;
				  height:50rpx;
				  right: 110rpx;
				  top: 70rpx;
			  }
			  .u-upload{
				  width: 220rpx;
				  height: 140rpx;
				  border-radius: 10rpx;
				  background-color: #f1cfd5;
			  }
			  /deep/ .u-list-item{
				  margin: 0;
				  height: 140rpx!important;
			  }
			  /deep/ .u-add-wrap{
				  opacity: 0;
			  }
		  }
		  .btn{
			  width: 569rpx;
			  height: 77rpx;
			  line-height: 77rpx;
			  background: #D52E4C;
			  border-radius: 39rpx;
			  margin: 20rpx auto;
			  text-align: center;
			  color: #fff;
			  font-size: 32rpx;
		  }
		  .orderTit{
			  text{
				margin-left: 30rpx;  
				color: dimgray;
			  }
		  }
		  .formInput{
			  background-color: #fff;
			  border-radius: 20rpx;
			  box-sizing: border-box;
			  padding: 20rpx;
			  /deep/ .u-form-item{
				  padding: 10rpx;
			  }
			  .title{
				  margin: 24rpx 0;
				  box-sizing: border-box;
				  padding-left: 24rpx;
				  font-size: 28rpx;
				  color: #333333;
				  border-left: 7rpx solid $uni-color-BGC;
			  }
			  .u-form-item{
				  /deep/ .u-form-item--left__content__label{
					  position: relative;
					  padding-left: 30rpx;
					  font-size: 24rpx
				  }
				  /deep/.u-form-item--left__content__label::after{
					  content: '*';
					  position: absolute;
					  left: 18rpx;
					  top: 0;
					color: red;
				  }
			  }
			  /deep/ input{
				  font-size: 24rpx;
			  }
			  .remark{
				  /deep/.u-form-item--left__content__label::after{
				  	display: none;
				  }
			  }
		  }
		}
	}
</style>