notarization_applet/pagesHome/login/index.vue

<template>
	<view class="content">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<view class="wx">
						<view class="wx_1">
							<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>

<script setup lang="ts">
	import moment from 'moment';
	import { getCurrentInstance, computed, ref } from 'vue';
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	// openid
	const openid = computed(() => {
		return uni.getStorageSync('openid');
	})
	// 用户协议
	const agree = ref(false);
	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 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: '请阅读并同意用户协议和隐私政策',
				icon: 'none'
			})
		}
	};
	// 查看隐私协议
	const toAgree = () => {
		uni.navigateTo({
			url: `/pagesHome/agree/index`
		})
	};
	// 同意隐私协议
	const changeAgree = () => {
		agree.value = !agree.value;
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.info {
			position: relative;
			flex-grow: 1;

			.wx {
				.wx_1 {
					text-align: center;
					padding: 10vw;

					.image {
						width: 35vw;
						height: 27vw;
					}
				}

				.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;

			.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>