contract/src/views/self.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">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">      
          <div class="part" v-show="seen">
           <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
          </div>
          <div class="part" v-show="seen">
            <el-form-item label="身份证号" prop="IDcard">
              <el-input v-model="ruleForm.IDcard" placeholder="请输入身份证号码"></el-input>
            </el-form-item>
          </div>
          <div class="part" v-show="seen">
            <el-form-item label="银行卡号" prop="bankcard">
              <el-input v-model="ruleForm.bankcard" placeholder="请输入银行卡号码"></el-input>
            </el-form-item>
          </div>
          <div class="part" v-show="seen">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入银行预留手机号码"></el-input>
            </el-form-item>
          </div>
          <div class="validation" v-show="seen">
             <el-form-item label="验证码" prop="number">
              <el-input v-model="ruleForm.number" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <span class="send">获取验证码</span>
          </div>
        </el-form>
          <div class="success" v-show="!seen">
              <div class="picture">
                <div></div>
              </div>
              <p>{{ruleForm.name}}<br>{{phone}}</p>
             </div>
          </div>
        </div>
        <div class="button" v-show="seen" @click="submitForm('ruleForm')">提交</div>
     </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      var checkname = (rule, value, callback) => {
        let regular=/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/;
        if (!value) {
          return callback(new Error(' '));/*请输入姓名*/
        }
        setTimeout(() => {
          if (!regular.test(value)) {
            callback(new Error(' '));/*输入不正确*/
          } else {
            callback();
          }
        }, 1000);
      };
        var checkIDcard = (rule, value, callback) => {
        let 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 (!value) {
          return callback(new Error(' '));/*请输入身份证号码*/
        }
        setTimeout(() => {
          if (!regular.test(value)) {
            callback(new Error(' '));/*输入不正确*/
          } else {
            callback();
          }
        }, 1000);
      };
        var checkbankcard = (rule, value, callback) => {
        let regular=/([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/;
        if (!value) {
          return callback(new Error(' '));/*请输入银行卡号*/
        }
        setTimeout(() => {
          if (!regular.test(value)) {
            callback(new Error(' '));/*输入不正确*/
          } else {
            callback();
          }
        }, 1000);
      };
        var checkphone = (rule, value, callback) => {
        let regular=/^1[3|4|5|8][0-9]\d{4,8}$/;
        if (!value) {
          return callback(new Error(' '));/*请输入手机号码*/
        }
        setTimeout(() => {
          if (!regular.test(value)) {
            callback(new Error(' '));/*输入不正确*/
          } else {
            callback();
          }
        }, 1000);
      };
        var checknumber = (rule, value, callback) => {
        if (!value) {
          return callback(new Error(' '));/*请输入验证码*/
        }
        else{
            callback();
          }
        };
     
      return{
        objectT:{},
        seen:true,
        last:'',
        name:'',
        phone:'',
        place:"1********",
        regular:'',
        cerfirst:'',
        cersecond:'',
        certhree:'',
        cerfourth:'',
         ruleForm: {
          name: '',
          IDcard:'',
          bankcard:'',
          phone:'',
          number:'',
        },
        rules: {
          name: [
            { validator: checkname,  trigger: 'blur' },
          ],
          IDcard: [
             { validator: checkIDcard,  trigger: 'blur' },
          ],
          bankcard: [
            { validator: checkbankcard,  trigger: 'blur' },
          ],
          phone: [
            { validator: checkphone,  trigger: 'blur' },
          ],
          number: [
             { validator: checknumber,  trigger: 'blur' },
          ],
        }
      }

    },
    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);
      },
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.seen=false;
            this.center=this.ruleForm.phone;
            this.last=this.center.split("")[10];
            this.phone=this.phone.concat(this.place,this.last);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }   
  }
</script>

<style>
  .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.311111rem;
                line-height: 1.311111rem;
                padding-left: 0.305556rem;
                border-bottom: 1px solid #e8eff5;
                .el-form-item.is-required .el-form-item__label::before{
                  content:' ';
                  margin: 0;
                }
                .el-form-item{
                  margin: 0;
                  clear: left;
                  .el-form-item__label{
                    color: #333;
                    text-align: left;
                    font-size: 0.388889rem;
                    width: 2rem !important;

                  }
                  .el-form-item__content{
                    height: 1.111111rem !important;
                    margin-left:2.088889rem !important;
                    .el-input__inner{
                     margin-left: -0.5rem;
                      height: 1.111111rem !important;
                     border: 0;
                  }
                  } 
                  
                }
            }
            .part:nth-of-type(4){
              border: 0;
            }
            .validation{
              width: 100%;
              padding-left: 0.305556rem;
              margin-bottom: 1rem;
               .el-form-item{
                  margin: 0;
                  clear: left;
                  .el-form-item__label{
                    color: #333;
                    text-align: left;
                    font-size: 0.388889rem;
                    width: 2rem !important;

                  }
                  .el-form-item__content{
                    height: 1.111111rem !important;
                    margin-left:2.088889rem !important;
                    .el-input__inner{
                     margin-left: -0.5rem;
                      height: 1.111111rem !important;
                     border: 0;
                     width: 60%;
                  }
                  .el-input__suffix{
                    right: 2.5rem;
                  }
                  } 
                  
                }
                .send{
                  display: inline-block;
                  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;
                  float: right;
                  margin-top: -1.15rem;
                }
            }
            .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>