contract/src/views/selfpart.vue

<template>
	<div class="self">
		<div class="enter-both">
			<div class="enter-title">
				<h4>
					<router-link to="/myself"><i class="iconfont icon-fanhui"></i></router-link>
					<span>个人认证</span>
				</h4>		
			</div>
			<div class="both">
		    <div class="content">
					<div class="part" v-show="seen">
						<span>姓名</span>
						<input type="text" placeholder="请输入真实姓名" @blur="canonicalfirst()" v-model="name">
						<span>{{cerfirst}}</span>
					</div>
					<div class="part" v-show="seen">
						<span>身份证号</span>
						<input type="text" placeholder="请输入身份证号码" @blur="canonicalsecond()" v-model="IDcard">
						<span>{{cersecond}}</span>
					</div>
					<div class="part" v-show="seen">
						<span>银行卡号</span>
						<input type="text" placeholder="请输入银行卡号码" @blur="canonicalthree()" v-model="bankcard">
						<span>{{certhree}}</span>
					</div>
					<div class="part" v-show="seen">
						<span>预留手机</span>
						<input type="text" placeholder="请输入银行预留手机号码" @blur="canonicalfourth()" v-model="phone">
						<span>{{cerfourth}}</span>
					</div>
					<div class="validation" v-show="seen">
						<span>验证码</span>
						<input type="text" placeholder="请输入验证码">
						<span @click="getnumber()">获取验证码</span>
					</div>
          <div class="success" v-show="!seen">
          	 	<div class="picture">
          	 		<div></div>
          	 	</div>
              <p>{{name}}<br>{{phone}}</p>
          	 </div>
          </div>
        </div>
        <div class="button" v-show="seen" @click="verify()">提交</div>
     </div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				objectT:{},
				seen:true,
				phone:'',
				name:'',
				IDcard:'',
				bankcard:'',
				first:'',
				last:'',
				place:"1********",
				regular:'',
				cerfirst:'',
				cersecond:'',
				certhree:'',
				cerfourth:'',
			}

		},
		methods:{
      verify(){
      	this.seen=false;
        this.center=document.getElementsByTagName("input")[3].value;
        this.last=this.center.split("")[10];
        this.phone=this.phone.concat(this.place,this.last);
      },
      canonicalfirst(){
      	this.regular=/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
      	if(this.regular.test(this.name)){
            this.cerfirst=" ";
      	}else{
      		this.cerfirst="格式错误";
      	}
      },
      canonicalsecond(){
      	this.regular=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[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(this.regular.test(this.IDcard)){
            this.cersecond=" ";
      	}else{
      		this.cersecond="格式错误";
      	}
      },
      canonicalthree(){
      	this.regular=/([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/;
      	if(this.regular.test(this.bankcard)){
            this.certhree=" ";
      	}else{
      		this.certhree="格式错误";
      	}
      },
      canonicalfourth(){
      	this.regular=/^1[3|4|5|8][0-9]\d{4,8}$/;
      	if(this.regular.test(this.phone)){
            this.cerfourth=" ";
      	}else{
      		this.cerfourth="格式错误";
      	}
      },
			
		}
	}
</script>
<style scoped>
	.self{
			.enter-both{
					width: 100%;
					.enter-title{
						height: 3.041667rem;
						background: #60c0ff;
						width: 100%;
						h4{
							text-align: center;
							color: #fff;
							font-size: 0.472222rem;
							padding: 0.541667rem 0;
							position: relative;
							.icon-fanhui{
								float: left;
								margin-left: 0.513889rem;
								color: #fff !important;
							}
				 		 span{
				  			margin-left: -0.513889rem;
				  		}
						}		
					}
			.both{
				  width: 100%;
					padding: 0 0.3rem;
      		.content{
						float: left;
						margin-top: -1.1111rem;
						width: 100%;
						background-color: #fff;
						border-radius: 10px;
						margin-bottom: 1.388889rem;
						box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
						padding: 0 0.291667rem;
						.part{
								width: 100%;
								height: 1.111111rem;
								line-height: 1.111111rem;
								padding-left: 0.305556rem;
								border-bottom: 1px solid #e8eff5;
								span{
									display: inline-block;
									font-size: 0.388889rem;
									color: #333333;
									margin-right: 0.5rem;
									width: 1.6rem;
									text-align: left;
								}
								input{
									border: 0;
									width: 3.6rem;
								}
								span:nth-of-type(2){
									font-size: 0.2rem;
									width: 2rem;
									color: #f00;
								}
						}
						.part:nth-of-type(4){
							border: 0;
						}
						.validation{
							width: 100%;
							padding-left: 0.305556rem;
							span{
									display: inline-block;
									font-size: 0.388889rem;
									color: #333333;
									padding: 0.430556rem 0;
									margin-right: 0.5rem;
									width: 1.6rem;
									text-align: left;
								}
								input{
									border: 0;
									width: 3.5rem;
								}
								span:nth-of-type(2){
									padding: 0;
									margin: 0;
									width: 2.377778rem;
									height: 0.944444rem;
									line-height: 0.944444rem;
									text-align:center;
									font-size: 0.316667rem;
									border: 1px solid #60c0ff;
									border-radius: 34px;
									color: #60c0ff;
								}
						}
						.success{
							width: 100%;
							height: 14.722222rem;
							position: relative;
							padding-top: 3.916667rem;
							.picture{
								width: 2.777778rem;
								height: 2.777778rem;
								border-radius: 50%;
								background:url("../assets/img/drawable-mdpi/userimg.png");
								background-size: cover;								
								margin: 0 auto;						
								text-align: center;		
								div{
									width: 1.152778rem;
									height: 1.402778rem;
									border-radius: 24% 24% 24% 100%;
									background-image: url("../assets/img/drawable-mdpi/self.png");
									background-position: -1.35rem -1.35rem;
									background: cover;
									float: left;
									margin-left: 2rem;
									margin-top: 2rem;
								}			
							}
							p{
								clear: both;
								font-size: 0.5rem;
								line-height: 0.8rem;
                color: #1491e2;
                text-align: center;
							}
						}
				}
			}
				.button{
			clear: both;
			width: 9.166667rem;
			height: 1.111111rem;
			margin-left: 0.4rem;
			background-color: #60c0ff;
			box-shadow: 0px 3px 21px 5px rgba(96, 192, 255, 0.35);
			border-radius: 40px;
			line-height: 1.111111rem;
			color: #ffffff;
			text-align: center;
		}
		}
	}
</style>