CarRental/page_user/idTest.vue

<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
				height='45' back-icon-color='#fff'></u-navbar>
		</view>
		<view class="backimg">

		</view>
		<!-- <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE" mode=""></image> -->
		<view class="cont">
			<view class="cont_tit">
				请输入您的有效身份信息
			</view>
			<view class="ipt_box">
				<view class="ipt">
					<view class="txt">
						姓名
					</view>
					<input type="text" v-model="idname" placeholder="请填写姓名" />
				</view>
				<view class="ipt" style="margin-top: 40rpx;">
					<view class="txt">
						身份证号
					</view>
					<input type="text" v-model="idnum" placeholder="请填写身份证号" />
				</view>
			</view>
		</view>
		<view class="sub_box">
			<view class="btn" @click="handleSubmit">
				完成
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			idname: '',
			idnum: '',
			background: {
				backgroundColor: " ",
			},
			userInfo: {}
		}
	},
	onShow() {
		this.getUserInfo()
	},
	methods: {
		getUserInfo() {
			this.$u.get('/getInfo').then((res) => {
				if (res.code == 200) {
					this.userInfo = res.user
				}
			})
		},
		// 验证身份证号
		validateIdCard(idCard) {
			const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			return reg.test(idCard);
		},

		// 验证姓名
		validateName(name) {
			const reg = /^[\u4e00-\u9fa5]{2,10}$/;
			return reg.test(name);
		},

		// 提交处理
		handleSubmit() {
			// 表单验证
			if (!this.idname) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return;
			}

			if (!this.validateName(this.idname)) {
				uni.showToast({
					title: '请输入正确的中文姓名',
					icon: 'none'
				});
				return;
			}

			if (!this.idnum) {
				uni.showToast({
					title: '请输入身份证号',
					icon: 'none'
				});
				return;
			}

			if (!this.validateIdCard(this.idnum)) {
				uni.showToast({
					title: '请输入正确的身份证号',
					icon: 'none'
				});
				return;
			}

			// 调用认证接口
			this.$u.get('/appVerify/user/authentication', {
				realName: this.idname,
				idCard: this.idnum,
				userId: this.userInfo.userId,
				phone: this.userInfo.phonenumber
			}).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '认证成功',
						icon: 'success'
					});
					// 认证成功后返回上一页
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}, 1500);
				} else {
					uni.showToast({
						title: res.msg || '认证失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: '认证失败，请重试',
					icon: 'none'
				});
			});
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F7F7;
}

.page {
	.sub_box {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		width: 750rpx;
		height: 174rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 682rpx;
			height: 84rpx;
			background: #4297F3;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.cont {
		margin: 0 auto;
		margin-top: -200rpx;
		width: 676rpx;
		// height: 574rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		z-index: 10;

		.cont_tit {
			width: 676rpx;
			height: 118rpx;
			background: #EFEFEF;
			display: flex;
			align-items: center;
			padding: 34rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}

		.ipt_box {
			padding: 46rpx 26rpx;

			.ipt {
				padding: 24rpx 40rpx;
				width: 624rpx;
				height: 92rpx;
				background: #EFEFEF;
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				display: flex;
				align-items: center;

				.txt {
					width: 30%;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
		}
	}

	.fixed {
		z-index: 999;
		position: fixed;
		top: 0;
	}

	.backimg {
		// position: fixed;
		width: 750rpx;
		height: 696rpx;

		z-index: -10;
		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/usCZzuQpGCBUpvzCfqyE');
		background-size: cover;
		/* 背景图片等比缩放以覆盖整个容器 */
		background-position: center;

	}
}
</style>