先勾选协议选框，才能进行下一步

先勾选协议选框，才能进行下一步

效果图：

<template>
  <div class="con">
    <div>
      <div class="input_con">
        <div>真实姓名</div>
        <input v-model.trim="realname" class="input" type="text" placeholder="请输入姓名" />
      </div>
      <div class="input_con">
        <div>证件类型</div>
        <div class="input">身份证</div>
      </div>
      <div class="input_con">
        <div>证件号码</div>
        <input v-model.trim="idcard" class="input" type="text" placeholder="请输入身份证号" />
      </div>
    </div>
    <div class="foot">
    <div @click="confirm" class="confirm"  v-show="hideshow1">
      <div class="con_button" :class="input_check ? 'agreebtn' : 'notagree'">确认添加</div>
    </div>
    <div class="agree">
      <input type="checkbox" @click="check()" id="input_agree" />
      <div>我已阅读并同意《隐私政策》</div>
    </div>
    </div>
  </div>
</template>

<script>
import {  Toast } from "vant"
import { isCardNo } from './../utils/common'
export default {
  data() {
    return {
      realname: '',
      idcard: '',
      input_check: false,
      hideshow: true,
    }
  },
  methods: {
    confirm () {
      if (this.input_check === false) {
        Toast('请先勾选同意隐私政策')
        return
      }
      if (!this.realname && !this.idcard) {
        Toast('请输入信息')
        return 
      }
      // 判断姓名
      var regu = "^[ ]+$";
      var re = new RegExp(regu)
      if(!this.realname || this.realname == null || re.test(this.realname)){
        Toast('请输入姓名')
        return 
      }
      if(!this.idcard || this.idcard == null || re.test(this.idcard)){
        Toast('请输入证件号码')
        return 
      }
      // 判断身份证
      let res = isCardNo(this.idcard)
      console.log(res) 
      if(res.pass === false){
        Toast(res.tip)
        return
      } else {
        Toast('身份证输入正确')
      }
    },
    check () {
      var obj = document.getElementById('input_agree')
      if(obj.checked == true){
        console.log('选中')
        this.input_check = true
      } else {
        console.log('取消选中')
         this.input_check = false
      }
    }
  },
  watch: {
    realname () {
      // console.log(this.realname)
    },
    idcard () {
      // console.log(this.idcard)
    }
  }
}
</script>

<style scoped>
.con{
  color: #333333;
  font-size: 1rem;
}
.input_con {
  display: flex;
  width: 100vw;
  height: 55px;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 0 5vw;
}
.input{
  background-color: #fff;
  text-align: right;
  flex: 1;
  margin-left: 4vw;
  font-size: 1rem;
}
.foot{
  position: absolute;
  bottom: 6vh;
  text-align: center;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.agree{
  display: flex;
  align-items: center;
  margin-top: 2vh;
}
.con_button{
  width: 86.6vw;
  height: 5.54vh;
  width: 325px;
  height: 45px;
  line-height: 45px;
  font-size: 1.1rem;
  color: #fff;
  border-radius: 22.5px;
}
.notagree{
  background-color: #ccc;
}
.agreebtn{
  background-image: linear-gradient(#61D3A4, #5BC9AB);
}
</style>