safetyHome_wxapp/pages/index/visitorPass.vue

<template>
	<view>
		<view style="width:100%;height:516rpx;position: relative;">
			<view class="navImage">
				<image src="../../static/login_bgground@2x.png" style="width:100%;height:516rpx;"></image>
			</view>
		</view>
		<!--  -->
		<view style="width: 100%;position: absolute;top: 0;">
			<!-- 返回icon -->
			<view class="topBack" :style="{marginTop:phoneHeight + 'px'}">
				<image src="../../static/icon_back@2x(1).png" style="width:48rpx ;height: 48rpx;margin-left: 36rpx;margin-top: 18rpx;" @tap="back"></image>
				<view style="color:#fff;" class="nvaTitle">访客密码</view>
			</view>
			<view class="info">
				<!-- 截止日期 -->
					<view class="endDate">截止日期：2020-1-1 13：10</view>
				<view class="topType"></view>
				<view class="info-title">访客信息填写</view>
				<view class="item" style="margin-top: -50rpx;">
					<view class="left-icon">
						<image src="../../static/register_icon_name@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<input class="uni-input item-input" v-model="form.name" focus placeholder="请输入真实姓名" />
				</view>
				<view class="item">
					<view class="left-icon">
							<image src="../../static/register_icon_identity@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<input class="uni-input item-input" v-model="form.idNumber" focus placeholder="请输入身份证号" />
				</view>
				<view class="item">
					<view class="left-icon">
						<image src="../../static/login_icon_phone@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<input class="uni-input item-input"  type="number" v-model="form.phone" focus placeholder="请输入手机号" />
				</view>
				<view class="item" @tap="selectDate">
					<view class="left-icon">
							<image src="../../static/visitor_icon_hour@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<input class="uni-input item-input" v-model="form.date" focus placeholder="访问时间" />
					<image src="../../static/icon_combo@2x.png" style="width: 56rpx;height: 30rpx;margin-top: 68rpx;margin-right: 54rpx;"></image>
				</view>
				<view class="item">
					<view class="left-icon">
							<image src="../../static/visitor_icon_regard@2x.png" style="width: 100%;height: 100%;"></image>
					</view>
					<input class="uni-input item-input"  v-model="form.dec" placeholder="请输入您的来访事由" />
			</view>
			</view>
			<!-- 获取临时开门码 -->
			<button class="loginNow" @tap="loginNow()" :class="{active:form.name && form.idNumber && form.phone && form.date &&form.dec}">
				获取临时开门码
			</button>
			
		</view>
		<!-- 来访时间选择组件 -->
		 <lb-picker ref="date" :list="dateData" @confirm="confirm">
		 	<!-- <view slot="cancle-text">取消</view>
		 	  <view slot="confirm-text" >确定</view> -->
		 </lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			LbPicker
		},
		data() {
			return {
				phoneHeight: 0, //手机状态栏的高度
				// 时间数据
			    dateData:[{label:'一个小时',value:1,child:[]},{label:'一天',value:24,child:[]},],
				 time:'',//选择时间绑定值
				//表单绑定值
				form: {
					name: '', //姓名
					idNumber: '', //身份证号
					phone: '', //手机号
					date:'',//时间
					dec: '', //来访事由
				}
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			// 选择时间确定
			confirm(data){
				this.form.date=data.item.label
				this.time=data.item.value
				console.log(this.time)
			},
			//选择时间打开组件
			 selectDate(){
				 this.$refs.date.show()
			 },
			//获取临时开门码
			loginNow() {
				// 判断输入框是否都有值  否不可以点击
				if (!this.form.name || !this.form.idNumber || !this.form.date || !this.form.phone|| !this.form.dec) {
					return
				} else {
					let idNumerReg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; //身份证正则
					let phoneReg = /^1[3|4|5|7|8][0-9]{9}$/; //手机号正则校验
					 if (!idNumerReg.test(this.form.idNumber)) {
						console.log(this.form.idNumber)
						uni.showToast({
							icon: 'none',
							title: '身份证号码格式不正确',
							duration: 2000
						});
					} else if (!phoneReg.test(this.form.phone)) {
						uni.showToast({
							icon: 'none',
							title: '手机号码格式不正确',
							duration: 2000
						});
					}else{
						uni.navigateTo({
							url: "../visitor/doorCode"
						})
					}
					
				}
				
			},
		},
		
	}
</script>

<style>
	.endDate{
		width: 342rpx;
		height:34rpx ;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
	    position: absolute;
		top: 542rpx;
		left: 90rpx;
	}
	.topBack{
		display: flex;
		position: absolute;
	}
	.popupClose{
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		
	}
	.popupBtn{
		width: 342rpx;
		height: 80rpx;
		position: absolute;
		bottom: 80rpx;
		left: 128rpx;
		background:rgba(41,138,253,1);
		color: #FFFFFF;
		font-size: 32rpx;
 	}
	.popupTitle{
		width: 260rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #999999;
		position: absolute;
		bottom: 232rpx;
		left: 170rpx;
	}
	.popupImage{
	width:100%;
	height:300rpx;
/* 	background-image: url(../../static/success_popup@2x.png);
     position: absolute;
	 top: -64rpx; */
	 
	}
	.loginNow {
		width: 702rpx;
		height: 90rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
		position: absolute;
		top: 1188rpx;
		left: 26rpx;
		line-height: 90rpx;
		background:rgba(163,197,237,1);
		opacity:1;
	}

	.info-btn {
		width: 342rpx;
		height: 88rpx;
		background: rgba(163, 197, 237, 1);
		opacity: 1;
		border-radius: 14rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 44rpx;
	}

	.item-input {
		width: 100%;
		margin-left: 20rpx;
		height: 40rpx;
		margin-top: 62rpx;
		font-size: 32rpx;
		color: #999999;
		color: #333333;
		opacity: 1;
	}

	.active {
		background:rgba(41,138,253,1);
	}

	.left-icon {
		width: 40rpx;
		height: 40rpx;
		/* border: 1rpx solid #555555; */
		/* box-sizing: border-box; */
		margin-top: 62rpx;
	}
	.item {
		display: flex;
		width: 531rpx;
		height: 120rpx;
		margin: 0 auto;
		border-bottom: 2px solid rgba(247, 247, 247, 1);
		opacity: 1;
		/* margin-top: 50rpx; */
	}

	.info-box {
		width: 90%;
		margin: 0 auto;
		border: 1px solid #808080;
	}

	.info-title {
		width: 100%;
		height: 48rpx;
		font-size: 34rpx;
		text-align: center;
		line-height: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		position: absolute;
		top: 30rpx;
	}

	.topType {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: -50rpx;
		border: 1rpx solide #C0C0C0;
	}
	.info {
		width: 602rpx;
		height: 747rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6px 30px rgba(41, 138, 253, 0.15);
		opacity: 1;
		position: absolute;
		top: 369rpx;
		left: 74rpx;
		border-radius: 20rpx;
	}

	.btn {
		width: 702rpx;
		height: 90rpx;
		background: rgba(41, 138, 253, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 90rpx;
		position: absolute;
		top: 990rpx;
		left: 27rpx;
	}
	.nvaTitle {
		width: 140rpx;
		height: 48rpx;
		text-align: center;
		font-size: 32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,255,255,1);
		margin: 0 auto;
		padding-top: 20rpx;
		margin-left: 234rpx;
	}
</style>