Contract/src/views/Individual.vue

<template>
  <section class="indi-ctnr">
    <mt-header title="个人认证">  
      <span @click='$router.go(-1);' slot="left">  
        <
      </span> 
    </mt-header>
    <section class="indi-box">
      <div class="info-box" v-show="!showResult">
        <div class="info">
          <mt-field label="姓名" placeholder="请输入真是姓名" v-model="user.name">
          </mt-field>
          <mt-field label="身份证" placeholder="请输入身份证号码" type="num" v-model="user.idCard">
          </mt-field>
          <mt-field label="银行卡号" placeholder="请输入银行卡号" type="num" v-model="user.bankNum">
          </mt-field>
          <mt-field label="预留手机" placeholder="请输入银行预留手机号码" type="tel" v-model="user.phone">
          </mt-field>
          <mt-field label="验证码" placeholder="请输入验证码" type="num" v-model="user.authCode">
            <button :class="{getCode:true,countDown:!canCount}" @click="countDown">{{btnValue}}</button>
          </mt-field>
        </div>
        <div class="sum-box" @click="submite">提交</div>
      </div>
      <div class="res-box" v-show="showResult">
        <div class="resultInfo">
        <img src="../assets/img/我的-头像.png" />
        <p>{{user.name}}</p>
        <span>{{user.phone}}</span>
      </div>
      </div>
    </section>
  </section> 
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        showResult:false,
        canCount:true,
        btnValue:"获取验证码",
        user:{
          name: "",
          idCard: "",
          bankNum: "",
          phone: "",
          authCode: "",
        }
      }
    },methods:{
      submite: function() {
        if(this.user.name==""||this.user.phone==""){
          alert("请输入姓名和手机号");
        }else{
          this.showResult=true;
        }
      },
      countDown: function() {
        if(!this.canCount){
          return;
        }else{
          this.canCount=false;
          var num = 60;
          this.btnValue = num+"s";
          var timer = setInterval(()=>{
            num--;
            this.btnValue = num+"s";
            if(num==0){
              clearInterval(timer);
              this.btnValue = "获取验证码";
              this.canCount = true;
            }
          },1000);
        }
      }
    }
  }
</script>

<style scoped>
  .indi-ctnr{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #60c0ff;
    .mint-header{
      height: 1.49333333rem;
      font-size: .45333333rem;
      background-color: #60c0ff;
      span{
        display: block;
        font-size: 0.533049rem;
        margin-left: 0.066631rem;
      }
    }
    .indi-box{
      margin-top: 1.066098rem;
      height: calc(100% - 2.558635rem);
      background-color: #E8EFF5;
      .info-box{
        position: relative;
        top: -1.066098rem;
        width: 8.795309rem;
        margin: 0 auto;
        .info{
          border-radius: 0.266525rem;
          overflow: hidden;
          box-shadow: 0 3px 21px 5px rgba(96, 192, 255, 0.35);
          div.mint-cell-wrapper{
            font-size: 0.373134rem !impotant;
          }
          .getCode{
            width: 2.66666667rem;
            height: .90666667rem;
            border-radius: .45333333rem;
            border: .02666667rem solid #60c0ff;
            background-color: #fff;
            color: #60c0ff;
            font-size: .37333333rem;
          }
        }
        .sum-box{
          width: 8.8rem;
          height: 1.06666667rem;
          display: block;
          margin: .53333333rem auto 0;
          background-color: #60c0ff;
          box-shadow: 0px .04rem .28rem .06666667rem rgba(96, 192, 255, .35);
          border-radius: .53333333rem;
          line-height: 1.06666667rem;
          color: #fff;
          font-size: .4rem;
        }
      }

      .res-box{
        position: relative;
        top: -1.066098rem;
        width: 8.795309rem;
        height: 14.1258rem;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 .04rem .28rem .06666667rem rgba(96, 192, 255, .35);
        padding-top: 3.73333333rem;
        img{
          width: 2.66666667rem;
          display: block;
          margin: 0 auto .4rem;
        }
        p{
          color: #1491e2;
          font-size: .48rem;
          line-height: 1rem;
        }
        span{
          color: #1491e2;
          font-size: .42666667rem;
        }
      }
    }
  }

  .mint-cell{
    min-height: 1.1rem;
  }
  .mint-cell-wrapper{
    padding: 0 .29333333rem;
    font-size: 0.373134rem !impotant;
  }
  .mint-field .mint-cell-title{
    width: 1.53333333rem;
    margin-right: .46666667rem;
  }
  .mint-field-core{
    color: #808080;
    font-size: .32rem;
    height: 0.8rem;
  }
  a:hover{
    text-decoration: none;
  }
</style>