jje_uniapp/loginPages/login/login-real-name-auth.vue

<template>
	<view class="keep-on-record-wrap">
		<!-- 提示内容 -->
		<u-toast ref="uToast" />

		<view class="keep-on-record-content">
			<view class="container">
				<view class="login-wrap">
					<view class="login-form">
						<u--form
							labelPosition="left"
							:model="userRealNameAuth"
							:rules="rules"
							ref="form1"
						>
							<u-form-item
								label="真实姓名"
								prop="name"
								labelWidth="auto"
								labelAlign="right"
							  >
							<u--input
								v-model="userRealNameAuth.name"
								placeholder="请输入真实姓名"
								border="bottom"
								type="text"
								maxlength="11"
							></u--input>
						  </u-form-item>
						  <u-form-item
								labelWidth="auto"
								labelAlign="right"
								label="身份证号"
								prop="idCard"
								width="120"
							>
							<u--input
								v-model="userRealNameAuth.idCard"
								disabledColor="#ffffff"
								placeholder="请输入身份证号"
								border="bottom"
								maxlength="20"
							></u--input>
						  </u-form-item>
						</u--form>
					</view>
				</view>


				<view class="">
					<view class="uploadBox">
						<view @click="uploadImg1(1)">
							<view class="uploadItem bg-img1">
								<image class="imgUrl" :src="imgUrl1"></image>
							</view>
							<view class="h-desc">
								<text>点击上传身份证人像面图片</text>
							</view>
						</view>
						<view @click="uploadImg1(2)">
							<view class="uploadItem bg-img2">
								<image class="imgUrl" :src="imgUrl2"></image>
							</view>
							<view class="h-desc">
								<text>点击上传身份证国徽面图片</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 保存备案信息 -->
				<view class="uploadBox">
					<view  v-if="userRealNameAuth.isAudit != 1" @click="saveUserRealNameAuth" class="leftBtn text-white text-lg text-center">下一步</view>
					<view  v-else  class="leftBtn text-white text-lg text-center">审核中不允许修改</view>
				</view>

			</view>
		</view>

		<view class="footer"></view>

		<u-popup :show="errShow" :round="10"  mode="center" >
		  <view class="h-popo-content">
			   <view class="h-img">
				   <!-- <u-icon name="close" color="red" size="40"></u-icon> -->
				   <u-icon name="/static/login/u01.png" color="red" size="50"></u-icon>
			   </view>
			   <view class="h-text">
				   <text>该身份证号已开通实名认证</text>
			   </view>
			   <view class="h-text">
			   		<text>无法继续操作</text>
			   </view>
			   <view class="h-btn-wrap">
				   <view @click="surebtn()" class="h-right-btn">
					   <text>确定</text>
				   </view>
			   </view>
		  </view>
		</u-popup>

	</view>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			errShow:  false,
			userRealNameAuth: {
				auth: true,
				idCard: '',
				idCardBack: '',
				idCardFront: '',
				name: '',
				phone: '',
				openId: '',
				type: ''
			},
			userInfo: {

			},
			list1: [
				'隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'
			],
			imgUrl1: '',
			imgUrl2: '',
			show: false,
			list: [
			],
			queryParms: {
				userId:'',
				extId: 1
			},
			rules: {
				name:  [
					{
						required: true,
						min: 1,
						max: 12,
						message: '请输入姓名',
						trigger: ['blur', 'change'],
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return !this.$isDataEmpty(value);
						},
						message: "请认真填写姓名",
						trigger: ['blur', 'change'],
					}
				],
				idCard: {
					required: true,
					min: 16,
					max: 20,
					message: '请输入身份证号',
					trigger: ['blur', 'change'],
				},
			},
		}
	},
	onReady() {
		// 初始化静音验证
		this.$refs.form1.setRules(this.rules)
	},
	onLoad(option) {
		console.log("999999999999999999")
		console.log(option)
		// 判断Openid是否为空
		if(!this.$isDataEmpty(option.data)){
			let udata = JSON.parse(option.data);
			this.userRealNameAuth.openId = udata.openId;
			this.userRealNameAuth.phone = udata.phonenumber;
			// 判断Openid是否为空
			this.userRealNameAuth.type = udata.type;
		}
	},
	methods: {
		// 确定
		surebtn(){
			this.errShow = false,
			uni.$u.route({
				url: '/pages/login/login',
				params: {
				}
			})
		},
		// 保存实名信息
		saveUserRealNameAuth(){
			let that = this;
			console.log(this.userRealNameAuth)
			if(!this.userRealNameAuth.idCardFront){
				uni.showToast({
					title: '请上传身份证正面',
				})
				return;
			}
			if(!this.userRealNameAuth.idCardBack){
				uni.showToast({
					title: '请上传身份证背面'
				})
				return;
			}

			that.$refs.form1.validate().then(res => {
				// 验证数据
				this.$api.idCardIsExist({data:this.userRealNameAuth}).then((res)=>{
					console.log(res)
					if(res.idCardIsExist){
						this.errShow = true;
					} else {
						uni.navigateTo({
							url: '/loginPages/login/bind-account-password?data='+JSON.stringify(that.userRealNameAuth)
						})
					}
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				});
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})
		},
		//头像上传
		uploadImg1(imgIndex) {
			let that = this;

			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;

					uni.uploadFile({
						url: that.$host + '/resource/oss/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							// "Content-Type": "multipart/form-data",
							// 'X-Access-Token': uni.getStorageSync('token'),
							'Authorization': 'Bearer ' + that.$store.state.loginState.accessToken,
						},
						success: (uploadFileRes) => {

							let res = JSON.parse(uploadFileRes.data)
							console.log(res.data)
							if(imgIndex == 1){ // 身份证正面
								that.imgUrl1 = tempFilePaths[0];
								that.userRealNameAuth.idCardFront = res.data.ossId
								that.reqParm.ossId = res.data.ossId
							}

							if(imgIndex == 2){ // 微信证背面
								that.imgUrl2 = tempFilePaths[0];;
								that.userRealNameAuth.idCardBack = res.data.ossId
							}

						}
					});
				}
			});
		}
	}
}
</script>
<style scoped lang="scss">
page,body{
	background: #fff;
}
// 弹出框
.h-popo-content{
	height: 190px;
	padding: 12px;
	width: 300px;
	text-align: center;
	font-size: 14px;
	font-family: PingFangSC-Semibold, PingFang SC;
	.h-img{
		display: flex;
		justify-content: center;
	}
	.h-text{
		margin-top: 12px;
		font-weight: 400;
		color: #666666;
	}
	.text{
		margin-top: 6px;
		font-weight: 400;
		color: #666666;
	}
	.h-btn-wrap{
		display: flex;
		justify-content: space-between;
		color: #333333;
		text-align: center;
		margin-top: 14px;
		.h-left-btn{
			height: 32px;
			line-height: 30px;
			background: #EEEEEE;
			width: 100px;
			text-align: center;
			border-radius: 16px;
			margin: 0 auto;
		}
		.h-right-btn{
			height: 32px;
			line-height: 30px;
			background: #FFE05C;
			width: 100px;
			border-radius: 16px;
			margin: 0 auto;

		}
	}
}
.login-wrap {
	display: flex;
	justify-content: center;
	.login-form{
		width: 90%;
	}
	.account{
		display: flex;
	}
	.identifying-code{
	}
}

.h-input-wrap{
	padding-left: 12px;
	padding-right: 12px;
	display: flex;
	align-items: center;
	height: 40px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-size: 14px;
	.h-name{
		font-weight: 400;
		color: #333333;
		line-height: 22px;
		margin-right: 6px;
	}
	.input-style{
		border-radius: 4px;
		font-weight: 400;
		color: #999999;
		line-height: 22px;
		font-size: 14px;
	}
}





.keep-on-record-wrap{
	width: 96%;
	margin: 0 auto;
	color: #676767;
}
.keep-on-record-content{
	margin-top: 12px;
}

.container {
	height: 100%;
}

// 图片上传
.uploadBox {
	margin: 0 auto;
	width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	margin-top: 12px;
	.leftBtn {
		height: 42px;
		background: #FFE05C;
		border-radius: 27px;
		color: #333333;
		line-height: 42px;
		margin-top: 12px;
	}

	.uploadItem {
		width: 100%;
		height: 198px;
		border-width: 1px;
		border-style: dashed;
		border-color: #999;
		.imgUrl {
			width: 100%;
			height: 100%;
		}
	}
	.h-desc{
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 50px;
		text-align: center;
	}

	.bg-img1{
		background-image: url('http://222.85.201.140:10000/static/me/u11.png');
		background-size: cover;
		background-repeat: repeat;
	}
	.bg-img2{
		background-image: url("http://222.85.201.140:10000/static/me/u12.png");
		background-size: cover;
		background-repeat: repeat;
	}
}


/* 底部 */
.footer{
	margin-top: 30px;
	height: 160px;
	font-size: 12px;
	text-align: center;
	color: #666;
}
</style>