实名认证页面上传

2025-05-30 10:54:47 +08:00 · 2025-05-30 10:54:47 +08:00 · a8a2f969b3
commit a8a2f969b3
parent e57c3dbc61
1 changed files with 123 additions and 0 deletions
--- a/ebike-user/pages/user/views/IdentityVerification.vue
+++ b/ebike-user/pages/user/views/IdentityVerification.vue
@ -0,0 +1,123 @@
+<template>
+	<view class="loginbox">
+		<view class="logintop flex justify-center align-center">
+			<image :src="`${imgPath}static/userui/kncxbj.png`" style="width: 100px; height: 100px;" />
+		</view>
+		<view class="input-fields padding">
+			<!-- 输入姓名 -->
+			<view class="input-item flex align-center">
+				<text class="cuIcon-peoplefill" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
+				<input v-model="name" placeholder="请输入姓名" />
+			</view>
+			<!-- 输入身份证号 -->
+			<view class="input-item flex align-center"> 
+				 <text class="cuIcon-card lg text-gray" style="font-size: 20px; color: rgb(173,173,175);margin-right: 10px;"></text>
+				<input v-model="idCard" placeholder="请输入身份证号" />
+			</view>
+			<!-- 登录按钮 -->
+			<view class="flex flex-direction loginbotton">
+				<button @click="phonelogin" class="cu-btn lg bg-green text-white">
+					认证
+				</button>
+			</view>
+		</view>
+	</view>
+	<zero-loading v-if="isloading" color="#c1c1c0" type="wobble" mask="true"></zero-loading>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	import * as api from '@/utils/api.js';
+	import {
+		showModelMessage
+	} from '@/utils/tools.js';
+	import config from '@/utils/config';
+
+	const imgPath = config.imgPath;
+
+	const isloading = ref(false);
+	const name = ref(''); // 用于存储姓名
+	const idCard = ref(''); // 用于存储身份证号
+	const countdown = ref(60); // 设置倒计时时间为60秒
+
+	const phonelogin = async () => {
+		if (!name.value || !idCard.value) {
+			showModelMessage('姓名和身份证号不能为空');
+			return;
+		} 
+		const idCardRegex =
+			/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([12][0-9])|(3[01]))\d{3}(\d|X)$/; // 身份证号正则表达式
+		if (!idCardRegex.test(idCard.value)) {
+			showModelMessage('请输入有效的身份证号');
+			return;
+		} 
+		// 如果验证通过，发起认证请求
+		isloading.value = true;
+		setTimeout(() => {
+			isloading.value = false;
+			// 假设成功认证后跳转
+			uni.navigateTo({
+				url: "/pages/user/home/home"
+			});
+		}, 1000);
+	};
+</script>
+
+<style scoped>
+	.loginbox {
+		height: 100vh;
+		background-color: #fff;
+	}
+
+	.logintop {
+		height: 280px;
+	}
+
+	.input-fields {
+		margin-top: 20px;
+	}
+
+	.input-item {
+		height: 45px;
+		margin-bottom: 30px;
+		position: relative;
+		background: rgb(246, 245, 248);
+		padding: 0px 15px;
+		border-radius: 20px;
+	}
+
+	.input-field {
+		width: 100%;
+		padding: 10px;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+	}
+
+	.get-code-text {
+		margin-left: 10px;
+		color: #4caf50;
+		font-size: 14px;
+		width: 40%;
+		cursor: pointer;
+		line-height: 40px;
+		text-align: right;
+	}
+
+	.get-code-text:disabled {
+		color: #ccc;
+	}
+
+	.get-code-text {
+		cursor: pointer;
+	}
+
+	.loginbotton {
+		font-size: 14px;
+	}
+
+	.is-input-border {
+		border: none;
+	}
+</style>