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" v-show="endTime">截止日期：{{endDate}}</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>
				<picker mode="selector" :range="dateData" @change="selectDate" range-key="label" class="item">
				<view class="item" >
					<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" :disabled="true" focus placeholder="访问时间" />
					<image src="../../static/icon_combo@2x.png" style="width: 56rpx;height: 30rpx;margin-top: 68rpx;margin-right: 54rpx;"></image>
				</view>
				</picker>
				<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 {
				isLoading:false,
				endDate: '',
				startTime: '',
				endTime: '',
				phoneHeight: 0, //手机状态栏的高度
				// 时间数据
				dateData: [{
					label: '一个小时',
					value: 1
				}, {
					label: '一天',
					value: 24
				}, {
					label: '一周',
					value: 7
				}],
				time: '', //选择时间绑定值
				//表单绑定值
				form: {
					name: '', //姓名
					idNumber: '', //身份证号
					phone: '', //手机号
					date: '', //时间
					dec: '', //来访事由
				}
			}
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 计算时间
			computedTime(type) {
				let endTime = 0
				let nowDate = Date.parse(new Date());
				this.startTime = this.date.formatDate(nowDate, 's')
				// 判断当前选择的时间是多少
				if (type == 1) {
					endTime = nowDate + (1 * 60 * 60 * 1000)
				} else if (type == 24) {
					endTime = nowDate + (24 * 60 * 60 * 1000)
				} else {
					endTime = nowDate + (168 * 60 * 60 * 1000)
				}
				this.endDate = this.date.formatDate(endTime, 'm')
				this.endTime = this.date.formatDate(endTime, 's')
			},
			// 返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			//选择时间打开组件
			selectDate(e) {
				this.form.date = this.dateData[e.target.value].label
				this.time =  this.dateData[e.target.value].value
				this.computedTime(this.time)
			},
			//获取临时开门码
			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}$/; //手机号正则校验
					let nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
					if (!nameReg.test(this.form.name)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的姓名格式',
							duration: 2000
						});
					} 
					else 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.showLoading({
							mask:true,
							title:"加载中"
						})
						this.http.httpRequest('/wxapplet/owner/peopleInfor/add', 'post',{
							cardId: uni.getStorageSync('idNumber'),
							comtyId: uni.getStorageSync('comtyId'),
							startTime: this.startTime,
							endTime: this.endTime,
							visitorReason: this.form.dec,
							doorNum: uni.getStorageSync('homeId'),
							ownerUserName: uni.getStorageSync('createBy'),
							cardNo: this.form.idNumber,
							phoneNum: this.form.phone,
							personName: this.form.name

						},true).then((res) => {
							if (res.code == 0) {
								uni.navigateTo({
									url: "../visitor/doorCode?code="+res.data.Qrcode+'&img='+res.data.codePhotoUrl
								})
								uni.hideLoading()
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									'icon': 'none'
								})
							}
						}).catch(()=>{
							uni.hideLoading()
						})
					
					}

				}

			},
		},

	}
</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>