contract/src/views/selfcycle.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-for="item,key in list" v-show="seen">
						<span>{{item.name}}</span>
						<input type="text" :placeholder="'请输入'+item.content" @blur="canonical(key)">
						<span>{{objectT[key]}}</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:'',
				first:'',
				last:'',
				place:"1********",
				center:'',
				input:'',
				regular:'',
				innertext:[],
				list:[
				     {
				     	 name:'姓名',
				     	 content:'真实姓名',
				     },
				     {
				     	 name:'身份证号',
				     	 content:'身份证号码',
				     },
				     {
				     	 name:'银行卡号',
				     	 content:'银行卡号码',
				     },
				     {
				     	 name:'预留手机',
				     	 content:'银行预留手机号码',
				     }
				]
			}

		},
		watch:{
			value:function(){
				this. canonical();
			}		
        	
		},
		mounted(){
        this.canonical();
		},
		methods:{
      verify(){
      	this.seen=false;
        this.name=document.getElementsByTagName("input")[0].value;
        this.center=document.getElementsByTagName("input")[3].value;
        this.last=this.center.split("")[10];
        this.phone=this.phone.concat(this.place,this.last);
      },
			canonical(e){
				console.log(e)//索引值
				let ObjectX = ['','','',''];
				for(let i in ObjectX){
					console.log(ObjectX[i]);
				}
			}
		}
	}
</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%;
								padding-left: 0.305556rem;
								border-bottom: 1px solid #e8eff5;
								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.8rem;
								}
						}
						.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;
								}
								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>