h5-elab-open-ownerUnion/pages/ownerCertification/ownerCertification.vue

<template>
	<view class="yezhu_body">
		<view class="user_info">
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">姓名</text>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="name" placeholder="请输入姓名" @blur='inputName' @confirm='inputName'/>
					<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">性别</text>
				<view class="item_right" @click="showGender">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="genderStr" placeholder="请选择" disabled/>
				<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">手机号</text>
				<view class="item_right">
					<input v-if="mobileOld" placeholder-class="item_right_name_placeholder" type='number' maxlength="11"  class="item_right_name" :value="mobileOld" disabled/>
					<input v-else placeholder-class="item_right_name_placeholder" type='number' maxlength="11" style="width: calc(100% - 150rpx);" class="item_right_name" :value="mobile" placeholder="请输入" @blur='inputMobile' @confirm='inputMobile'/>
					<view class="veritify" @click="getVeritify" v-if="!mobileOld">
						{{veritifyTxt}}
					</view>
					<image v-if="mobileOld" class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			
			<view class="user_item" v-if="!mobileOld&&showInputVerifity">
				<text class="item_name">验证码</text>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="verifity" placeholder="请输入" @blur='inputVerifity' @confirm='inputVerifity'/>
					<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="project_ino">
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">认证项目</text>
				<view class="item_right" @click="chooseHouse">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="houseName" placeholder="请选择" disabled/>
					<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">证件类型</text>
				<view class="item_right" @click="chooseCertificateType">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="certificateTypeStr" placeholder="请选择" disabled/>
				<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">证件号</text>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="idcard" :value="certificateNo" placeholder="请输入"  @blur='inputId' @confirm='inputId'/>
					<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
			<view class="user_line">
				
			</view>
			<view class="user_item">
				<text class="item_name">填写房号</text>
				<view class="item_right">
					<input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="roomNo" placeholder="请输入" @blur='inputRoomNo' @confirm='inputRoomNo'/>
					<image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
				</view>
			</view>
		</view>
	    <view class="xieyi" @click="showXieyi">
	    	<image class="icon_selected" v-if="agree" src="../../static/icons/icon_yezhu_selected.png" mode=""></image>
			<image class="icon_selected" v-else src="../../static/icons/icon_yezhu_unselected.png" mode=""></image>
			<text class="tongyi">我已阅读并同意</text>
			<text class="xieyi_text">《入驻协议》</text>
	    </view>
		<view class="btn_next" @click="addOrUpdate">
			下一步
		</view>
		<dmAgreeement ref='agreement' @agree='agreeXieyi'></dmAgreeement>
		<dmPickerView ref="genderPicker" :options="genderList" :value="gender" @confirm="confirm" title="筛选时间维度"></dmPickerView>
	    <dmPickerView ref="housePicker" :options="houseList" :value="houseId" @confirm="houseConfirm" title="筛选时间维度"></dmPickerView>
	    <dmPickerView ref="certificateTypePicker" :options="certificateTypeList" :value="certificateType" @confirm="certificateTypeConfirm" title="筛选时间维度"></dmPickerView>
	    <login-notice></login-notice>
	    <login></login>
	</view>
</template>

<script>
	import dmAgreeement from "../../components/subComponents/dmAgreement.vue";
	import dmPickerView from "../../components/subComponents/dmPickerView.vue";
	let app = getApp();
	export default {
		data() {
			return {
				agree:false,
				veritifyTxt:"获取验证码",
				genderList:[
					{
						title:"男",
						value:"1"
					},
					{
						title:"女",
						value:"0"
					}
				],
				gender:"",
				genderStr:"",
				houseId:"",
				houseName:"",
				houseList:[],
				certificateType:"1",
				certificateTypeStr:"",
				certificateTypeList:[{
					title:"中国居民大陆身份证",
					value:"1"
				},{
					title:"香港居民身份证",
					value:"2"
				},{
					title:"护照",
					value:"3"
				}],
				mobileOld:"",
				mobile:"",
				verifity:"",
				name:"",
				certificateNo:"",
				roomNo:"",
				timer:null,
				countdownTimes:120,
				showInputVerifity:true
			};
		},
		created() {
			this.queryProjectBox();
		},
		methods:{
			agreeXieyi(){
				this.agree = true
			},
			showXieyi(){
				this.$refs.agreement.show()
			},
			showGender(){
				this.$refs.genderPicker.show();
			},
			confirm(e){
				this.genderStr = e.selItem.title;
				this.gender = e.selItem.value;
			},
			chooseCertificateType(){
				this.$refs.certificateTypePicker.show();
			},
			certificateTypeConfirm(e){
				this.certificateTypeStr = e.selItem.title;
				this.certificateType = e.selItem.value;
			},
			async queryProjectBox() {
				let ret = await this.$myRequest({
					url: "/project/queryProjectBox",
					data: {
						"onlineStatus": "1",
					}
				})
				this.houseList = [];
				if (ret.data.success) {
					let houseList = ret.data.list || [];
					let count = 0;
					while (count<houseList.length){
						this.houseList.push({
							title:houseList[count].name,
							value:houseList[count].id,
						})
						count++;
					}
				}
			},
			async getVeritify(){
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return 
				}
				var phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (!phone.test(this.mobile)) {
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return 
				}
				this.showInputVerifity = true;
				if(this.timer&&this.countdownTimes>=0){
					return
				}
				let ret = await this.$myRequest({
					url: "/sms/sendSmsVerifyCode",
					data: {
						"phone": this.mobile,
					},
					method:"GET"
				})
				this.houseList = [];
				if (ret.data.success) {
					this.countdown();
				}
			},
			chooseHouse(){
				this.$refs.housePicker.show();
			},
			houseConfirm(e){
				this.houseId = e.selItem.value;
				this.houseName = e.selItem.title
			},
			countdown(){
				this.timer = setInterval(()=>{
					this.countdownTimes--;
					this.veritifyTxt = this.countdownTimes+"s"
					if(this.countdownTimes<=0){
						clearInterval(this.timer);
						this.timer = null;
						this.veritifyTxt = '获取验证码';
						this.countdownTimes = 120;
					}
				},1000)
			},
			inputName(e){
				this.name = e.detail.value
			},
			inputMobile(e){
				this.mobile = e.detail.value
			},
			inputVerifity(e){
				this.verifity = e.detail.value
			},
			inputId(e){
				this.certificateNo = e.detail.value
			},
			inputRoomNo(e){
				this.roomNo = e.detail.value
			},
			async addOrUpdate() {
				if(!this.name){
					uni.showToast({
						icon:"none",
						title:"请输入姓名"
					})
					return
				}
				if(!this.gender){
					uni.showToast({
						icon:"none",
						title:"请选择性别"
					})
					return
				}
				if(!this.mobile){
					uni.showToast({
						icon:"none",
						title:"请输入手机号"
					})
					return
				}
				
				if(!this.houseId){
					uni.showToast({
						icon:"none",
						title:"请选择认证项目"
					})
					return
				}
				if(!this.certificateType){
					uni.showToast({
						icon:"none",
						title:"请选择证件类型"
					})
					return
				}
				if(!this.certificateNo){
					uni.showToast({
						icon:"none",
						title:"请输入证件号"
					})
					return
				}
				if(!this.roomNo){
					uni.showToast({
						icon:"none",
						title:"请输入房号"
					})
					return
				}
				if(!this.agree){
					uni.showToast({
						icon:"none",
						title:"请阅读并同意《入住协议》"
					})
					return
				}
				let ret = await this.$myRequest({
					url: "/user/regist/addOrUpdate",
					data: {
						"agreeState": this.agree?1:0,
						"captcha":this.verifity,
						"certificateNo": this.certificateNo,
						"certificateType": this.certificateType,
						"phone": this.mobile,
						"projectId": this.houseId,
						"roomNo": this.roomNo,
						"sex": this.gender,
						"sign": this.sign,
						"userId": app.globalData.userId,
						"username": this.name,
						"phoneFrom":this.mobileOld?1:2
					}
				})
				if (ret.data.success) {
					uni.navigateTo({
						url:'../certificationResultPage/certificationResultPage'
					})
				}else{
					uni.showToast({
						icon:"none",
						title:ret.data.message
					})
				}
			},
		},
		destroyed() {
			if(null!=this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		components:{
			dmAgreeement,
			dmPickerView
		}
	}
</script>

<style lang="scss">
.yezhu_body{
	width: 100%;
	height: 100vh;
	position: relative;
	.user_info{
		background: #ffffff;
		.user_item{
			margin-left: 40rpx;
			margin-right: 40rpx;
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item_name{
				width: 20%;
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #262626;
			}
			.item_right{
				width: 80%;
				font-size: 26rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: right;
				color: #262626;
				display: flex;
				align-items: center;
				
				.item_right_name{
					width: 100%;
				}
				.item_right_name_placeholder{
					font-size: 26rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					color: #b1b1b1;
				}
				.icon_right{
					width: 10rpx;
					height: 22rpx;
					margin-left: 19rpx;
				}
				
				.veritify{
					width: 140rpx;
					height: 50rpx;
					margin-left: 10rpx;
					line-height: 50rpx;
					background: #ffffff;
					border: 2rpx solid #f07423;
					border-radius: 8rpx;
					font-size: 20rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					text-align: center;
					color: #f07423;
				}
			}
		}
		
		.user_line{
			margin-left: 40rpx;
			margin-right: 40rpx;
			height: 2px;
			background: #f8f8f8;
		}
	}
	
	.project_ino{
		background: #ffffff;
		margin-top: 20rpx;
		.user_item{
			margin-left: 40rpx;
			margin-right: 40rpx;
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item_name{
				width: 20%;
				font-size: 28rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #262626;
			}
			.item_right{
				width: 80%;
				font-size: 26rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: right;
				color: #262626;
				display: flex;
				align-items: center;
				
				.item_right_name{
					width: 100%;
				}
				.item_right_name_placeholder{
					font-size: 26rpx;
					font-family: Verdana, Verdana-Regular;
					font-weight: 400;
					color: #b1b1b1;
				}
				.icon_right{
					width: 10rpx;
					height: 22rpx;
					margin-left: 19rpx;
				}
			}
		}
		
		.user_line{
			margin-left: 40rpx;
			margin-right: 40rpx;
			height: 2px;
			background: #f8f8f8;
		}
	}
    
	.xieyi{
		display: flex;
		width: 100%;
		justify-content: center;
		position: absolute;
		bottom: 162rpx;
		left: 0;
		align-items: center;
		
		.icon_selected{
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}
		.tongyi{
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			color: #999999;
			display: inline-block;
		}
		.xieyi_text{
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			color: #f07423;
			display: inline-block;
		}
	}
	.btn_next{
		width: calc(100% - 80rpx);
		box-sizing: border-box;
	    margin-left: 40rpx;
		margin-right: 40rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #f07423;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		position: absolute;
		bottom: 60rpx;
		left: 0;
	}
}
</style>