hh-szyl-face/pages/index/open.vue

<template>
	<view class="container-open">
		<view class="form-layout">
			<view class="form-label">姓名</view>
			<input v-model="form.userName" maxlength="20" placeholder="请输入您的姓名" placeholder-class="form-input-placeholder"/>
			<view class="form-label" style="margin-top: 28rpx;">身份证号</view>
			<input v-model="form.idNumber" maxlength="18" type="idcard" placeholder="请输入您的身份证号" placeholder-class="form-input-placeholder"/>
		</view>
		<view style="flex: auto;"></view>
		<button class="btn black" type="primary" @click="zfbIotVsp">提 交</button>
		<view style="flex: none;height: 100rpx;"></view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		iotVspInit,
		iotVspUniqueId
	} from '@/utils/ioTVsp'
	export default {
		data() {
			return {
				form: {
					idNumber: null,
					userName: null
				}
			}
		},
		onLoad() {
			uni.onAppShow(this.onAppShowHandler)
		},
		onUnload: function() {
			my.offAppShow(this.onAppShowHandler)
		},
		onReady() {
			iotVspInit((res) => {
				my.navigateBack()
				if (res.success) {
					setTimeout(() => {
						my.navigateBack()
						uni.showModal({
							title: '提示',
							content: '恭喜您,已成功开通快速刷脸通行!',
							showCancel: false
						})
						this.form = {
							idNumber: null,
							userName: null
						}
					}, 1000)
				}
			})
		},
		methods: {
			zfbIotVsp: _.throttle(function() {
				if(!this.form.userName) {
					uni.showToast({
						title: '姓名不能为空',
						duration: 2000
					})
					return
				}
				if(!this.form.idNumber) {
					uni.showToast({
						title: '身份证号不能为空',
						duration: 2000
					})
					return
				}
				if(this.form.idNumber.length === 15) {
					const idreg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
					if(!idreg.test(this.form.idNumber)) {
						uni.showToast({
							title: '身份证号格式错误',
							duration: 2000
						})
						return
					}
				} else if(this.form.idNumber.length === 18) {
					const idreg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
					if(!idreg.test(this.form.idNumber)) {
						uni.showToast({
							title: '身份证号格式错误',
							duration: 2000
						})
						return
					}
				} else {
					uni.showToast({
						title: '身份证号位数错误',
						duration: 2000
					})
					return
				}
				iotVspUniqueId(this.form.idNumber, this.form.userName, null, null).then((res) => {
					if(res) {
						uni.showModal({
							title: "提示",
							content: '您已开通快速刷脸通行!',
							showCancel: false
						})
						this.form = {
							idNumber: null,
							userName: null
						}
					} else {
						// uni.showModal({
						// 	title: "提示",
						// 	content: '人脸已入库!',
						// 	showCancel: false
						// })
					}
				})
			}, 3000)
		}
	}
</script>

<style scoped>
	.container-open {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
	}
	
	.form-layout {
		width: calc(100% - 144rpx);
		margin: 24rpx 32rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 50rpx 40rpx;
	}
	.form-layout .form-label {
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.form-layout input {
		padding: 0;
		margin: 0;
		border: 0;
		background-color: transparent;
		width: 100%;
		border-bottom: 1px solid rgba(238, 238, 238, 1);
		min-height: 80rpx;
		line-height: 80rpx;
	}
	
	.form-layout .form-input-placeholder {
		color: rgba(204, 204, 204, 1);
		font-size: 36rpx;
		font-weight: 400;
	}
	
	.container-open .btn {
		width: 82%;
		height: 112rpx;
		line-height: 112rpx;
		border: none;
		border-radius: 16rpx;
		overflow: hidden;
		font-size: 36rpx;
		font-weight: 500;
	}
	.container-open .black {
		background-color: rgba(35, 54, 59, 1);
	}
</style>