修改登录

pagesHome/login/index.vue

@@ -1,20 +1,47 @@
 <template>
 	<view class="content">
-		<view class="wx">
-			<view class="wx_1">
-				<text class="t-icon t-icon-weixin"></text>
-			</view>
-			<view class="wx_2">
-				<button size="mini" @tap="otherLogin('wx')">微信信任登录</button>
-			</view>
-			<view class="wx_3">
-				<checkbox-group @change="changeAgree">
-					<label>
-						<checkbox :checked="agree" />
-						<text @tap.stop="toAgree()">我已阅读并同意“用户协议”和“隐私政策”</text>
-					</label>
-				</checkbox-group>
-			</view>
+		<view class="info">
+			<scroll-view scroll-y="true" class="scroll-view">
+				<view class="list-scroll-view">
+					<view class="wx">
+						<view class="wx_1" @tap="validate">
+							<image class="image" src="/static/login.png">
+							</image>
+						</view>
+						<view class="wx_2">
+							<view class="textOne">当前业务需要人脸识别验证</view>
+							<view class="textTwo">信息将用于公证业务办理，并与当前微信绑定</view>
+						</view>
+						<view class="wx_3">
+							<u--form class="form" :model="form" ref="uForm" :rules="rules" labelWidth="70"
+								label-position="top">
+								<u-form-item label="证件号码" prop="card">
+									<input class="input" v-model="form.card" placeholder="填写证件号码" />
+								</u-form-item>
+								<u-form-item label="姓名" prop="name">
+									<input class="input" v-model="form.name" placeholder="填写姓名" />
+								</u-form-item>
+								<u-form-item label="手机号" prop="phone">
+									<input class="input" v-model="form.phone" placeholder="填写常用手机号" />
+								</u-form-item>
+							</u--form>
+						</view>
+						<view class="wx_4">
+							<checkbox-group @change="changeAgree">
+								<label>
+									<checkbox color="#2979ff" :checked="agree" />
+									<text @tap.stop="toAgree()">我同意使用我所提交的信息用于身份验证及公证业务办理，阅读<text
+											style="color: #2979ff;">《用户服务协议》</text>和 <text
+											style="color: #2979ff;">《隐私策略》</text></text>
+								</label>
+							</checkbox-group>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="foot">
+			<button class="btn" @tap="formSubmit">开始验证</button>
 		</view>
 	</view>
 </template>
@@ -30,40 +57,92 @@
 	})
 	// 用户协议
 	const agree = ref(false);
-	// 其他登录方式
-	const otherLogin = () => {
-		if (agree.value) {
-			if (openid.value) {
-				uni.getUserProfile({
-					desc: '用于展示',
-					success: async function (res) {
-						let parmas = {
-							openid: openid.value,
-							nickname: res.userInfo.nickName + moment().valueOf()
-						}
-						const arr = await $api(`/user`, 'POST', parmas);
-						if (arr.errcode == '0') {
-							uni.setStorageSync('user', arr.data);
-							uni.navigateBack({
-								delta: 1
-							})
-						} else {
-							uni.showToast({
-								title: arr.errmsg,
-								icon: 'error'
-							});
-						}
-					},
-					fail: function (err) {
-						console.log(err);
-					}
-				})
-			} else {
-				uni.showToast({
-					title: '系统更新中，请稍后再试!',
-					icon: 'none'
-				})
+	const form = ref({ name: '', card: '', phone: '' });
+	const rules = {
+		'card': [{
+			required: true,
+			message: '请填写身份证号',
+		},
+		{
+			validator: function (rule, value, data, callback) {
+				if (value.indexOf('**') > -1) {
+					callback()
+					return
+				}
+				let idCard = (
+					/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+				); //
+				return idCard.test(value)
+			},
+			message: '身份证格式不正确，请重新填写'
+		}
+		],
+		'name': {
+			type: 'string',
+			required: true,
+			message: '请输入姓名',
+			trigger: ['blur', 'change'],
+		},
+		'phone': [
+			{
+				required: true,
+				message: '请输入手机号',
+				trigger: ['change', 'blur'],
+			},
+			{
+				// 自定义验证函数，见上说明
+				validator: (rule, value, callback) => {
+					return uni.$u.test.mobile(value);
+				},
+				message: '手机号码不正确',
+				trigger: ['change', 'blur'],
 			}
+		]
+	}
+	const uForm = ref(null);
+	// 人脸验证
+	const validate = () => {
+		console.log('人脸验证');
+	};
+	// 开始验证
+	const formSubmit = () => {
+		if (agree.value) {
+			// if (openid.value) {
+			uForm.value.validate().then(async res => {
+				console.log(form.value);
+			}).catch(err => {
+				console.log(err, '校验失败');
+			})
+			// uni.getUserProfile({
+			// 	desc: '用于展示',
+			// 	success: async function (res) {
+			// 		let parmas = {
+			// 			openid: openid.value,
+			// 			nickname: res.userInfo.nickName + moment().valueOf()
+			// 		}
+			// 		const arr = await $api(`user`, 'POST', parmas);
+			// 		if (arr.errcode == '0') {
+			// 			uni.setStorageSync('user', arr.data);
+			// 			uni.navigateBack({
+			// 				delta: 1
+			// 			})
+			// 		} else {
+			// 			uni.showToast({
+			// 				title: arr.errmsg,
+			// 				icon: 'error'
+			// 			});
+			// 		}
+			// 	},
+			// 	fail: function (err) {
+			// 		console.log(err);
+			// 	}
+			// })
+			// } else {
+			// 	uni.showToast({
+			// 		title: '系统更新中，请稍后再试!',
+			// 		icon: 'none'
+			// 	})
+			// }
 		} else {
 			uni.showToast({
 				title: '请阅读并同意用户协议和隐私政策',
@@ -86,36 +165,71 @@
 	.content {
 		display: flex;
 		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
 
-		.wx {
-			text-align: center;
-			margin: 25vw 0 0 0;
+		.info {
+			position: relative;
+			flex-grow: 1;
 
-			.wx_1 {
-				margin: 0 0 5vw 0;
+			.wx {
+				.wx_1 {
+					text-align: center;
+					padding: 10vw;
 
-				text {
-					font-size: 50px;
-					color: var(--f35BColor);
+					.image {
+						width: 35vw;
+						height: 27vw;
+					}
 				}
-			}
 
-			.wx_2 {
-				button {
-					background: var(--f35BColor);
-					color: var(--fffColor);
-					font-size: var(--font16Size);
+				.wx_2 {
+					text-align: center;
+
+					.textOne {
+						font-size: var(--font16Size);
+					}
+
+					.textTwo {
+						font-size: var(--font14Size);
+						margin: 2vw 0 0 0;
+						color: var(--f85Color);
+					}
+				}
+
+				.wx_3 {
+					margin: 5vw;
+				}
+
+				.wx_4 {
+					padding: 2vw;
+					text-align: center;
+					font-size: var(--font12Size);
 				}
 			}
+		}
+
+		.foot {
+			padding: 2vw;
 
-			.wx_3 {
-				position: absolute;
-				bottom: 10vw;
-				width: 100vw;
-				text-align: center;
-				font-size: 12px;
+			.btn {
+				font-size: var(--font14Size);
+				color: var(--mainColor);
+				background-color: var(--fFFColor);
 			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
 
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
 		}
 	}
 </style>