<template>
  <div class="register">
    <van-dialog v-model="show" title="提示" >
        <div class="bar">
           <p>为了维护诚信的平台坏境,<br/>注册用户必须对信息的真实性承担责任</p>
            <span>对资料造假,行为不端的会员,一经查实拉黑处理</span>
        </div>
             <p>王子公园,婚恋请您诚实!</p>
  <!-- <img src="https://img.yzcdn.cn/vant/apple-3.jpg" /> -->
    </van-dialog>
      <h2 @click="back1"><</h2>
      <div class="header">
        <img src="../assets/01.png" alt="">
      </div>
       <div class="center" type=" ">
          <form action="" method="post" onsubmit="return checkForm(this)">
               <input type="text" placeholder="请选择征婚城市"  v-model="city"  @change="getCity"/><hr/>
               <input type="number" placeholder="请输入身份证号码" v-model="cards" @change="getCheckCode"/><hr/>
         <input id="p_tel" type="text" name="p_tel" placeholder="请输入手机号" v-model="phone"/><hr/>

          <input id="p_cardid"    type="text" name="p_cardid" placeholder="请输入验证码" /><hr/>

          <div style="font-size: 0.2rem" @click='getCode' class="code2">{{codeFont}}({{60}})</div>
            <input type="password" name="password" id="p1" placeholder="请输入登录密码"><hr/>
          <p>密码需为8~20位数字 字母和符合的组合</p>
          <input type="password" name="password1" id="p2" placeholder="请再次输入密码"><hr>


          <button type="submit" @click="goMi">完善资料</button>
</form>
       </div>

  </div>
</template>
 <script>

export default {
  name: 'home',
  components: {

  },
  data() {
    return {
      show: true,
      city:'',
      cards:'',
      codeFont: '获取验证码',
      phone: ''
    }
  },
  methods: {
     back1 () {
       this.$router.go(-1)
     },
     goMi () {
       this.$router.push('/data')
     },
      checkForm () {
        var phone = document.getElementById('p_tel').value;
        var cardid=document.getElementById('p_cardid').value;
        if(phone==""&&cardid==""){
        alert("请输入手机号和身份证号！");return false;
        }else if(phone==""){
        alert("请输入手机号！");return false;
        }else{
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){
        alert("手机号码有误，请重新输入");
        return false;
        }
        if(cardid==""){
        alert("请输入身份证号！");return false;
        }
        }
        if(!(/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/.test(cardid))){
        alert("身份证号有误，请重新输入");return false;
        }
      },
      getCity(){
          
      },
      getCheckCode() {
         let that=this;
         let  reg=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
         if(that.checkCode == ''){
           if(reg.test(that.checkCode)){
              this.$message({
                 title:"提示",
                 message:"身份证正确",
                 type:"success"
              })
              return
           }else{
              this.$message({
                 title:"提示",
                 message:"身份证输入错误",
                 type:"warning"
              })
                return
           }
             let params = {
                'cards': that.cards

            }
            let qs=require('qs')
            let data=qs.stringify(params)
            that.$axios.post('/api/Register/register_is_first',data).then(
              res=>{
                console.log(res);
                 let data=res.data.data;
              }
            ).catch(error=>{
              console.log(error)
            })
         }
      },
      getCode () {
        let that = this
        let reg = /^1[1,3,4,5,6,7,8,9]\d{9}$/
        if(that.codeFont=='获取验证码'||that.codeFont=='重新获取'){
          if(!that.phone) {
            this.$message ({
              message: '请输入手机号',
              type: 'warning'
            })
            return
          }else if (!reg.test(that.phone)) {
            this.$message ({
              message: '请输入合法的手机号',
              type: 'warning'
            })
            return
          }
          let params = {
              mobile: that.phone,
              event: 'register'
            }
            let qs = require('qs')
            let data = qs.stringify(params)
          that.$axios.post('/api/sms/send',data).then(r=>{
            console.log(r)
            if(r.data.code==1){
              console.log('发送成功')
              let codeFont = that.codeFont
              let count = 3
              that.codeFont = count + 's'
              let st= setInterval(function(){
                if(count>0){
                  count--
                  that.codeFont = count + 's'
                }else {
                  clearInterval(st)
                  that.codeFont = '重新获取'
                }
              },1000)
            }else{
              this.$message ({
              message: r.data.msg,
              type: 'warning'
            })
            }
          }).catch()
          }
      },
  }
}
 </script>
<style lang="scss" scoped>
 .register{
    width:100%;
    height:100%;
    background:#11A7FC;
    padding-top:5%;
    padding-left:5%;
    h2{
      font-size:.2rem;
      color:#fff;
      margin-bottom:.5rem;
    }
    .van-dialog .bar{
      width:90%;
      height:1.2rem;background:rgba(217,241,255,1);;

      margin-left:5%;
      border-radius:.2rem;
      padding-top:.2rem;
      margin-bottom:.2rem;
      margin-top:.2rem;
      p{
        color:#11A7FC;
        text-align:center;
        margin-bottom:.2rem;

      }
     span{
        color:#11A7FC;
        text-align:center;
        display:inline-block;
     }

    }
    p{
      text-align:center;
      // margin-top:0.2rem;
    }
    .header{
      width:60%;
      height:.4rem;
      margin-left:25%;

    }
     .center{
       width:80%;
       margin-top:.7rem;
       margin-left:7%;
       input{
          width:100%;
          height:.5rem;
          font-size:.2rem;
          display:block;
          background-color:#11A7FC;
          border:none;
          color:#fff;
          padding-left:4%;

       }
       #p_cardid{
           position:relative;
           width:100%;
          height:.5rem;
          font-size:.2rem;
          display:block;
          background-color:#11A7FC;
          border:none;
          color:#fff;
          padding-left:4%;


       }
        .code2{
                width:1.4rem;
                height:.4rem;

                font-size:.08rem;
                color:#fff;
                line-height:.4rem;
                position:absolute;
                right:.35rem;
                top:3.65rem;



            }
             input{
          width:86%;
          height:.5rem;
          font-size:.2rem;
          display:block;
          background-color:#11A7FC;
          border:none;
          color:#fff;
          padding-left:4%;


    }
          hr{
            color:#fff;
            opacity:.3;
            width:92%;
          }
          p{
            color:#fff;
            font-size:.1rem;
            opacity:.4;
            margin-top:0.1rem;
            margin-right:.55rem;

          }


       hr{
         color:#fff;
         opacity:0.3;
       }
       button{
         width:100%;
         height:.5rem;
         font-size:0.2rem;
         border-radius:.2rem;
         color:#11A7FC;
         font-weight:bold;
         border:none;
       }
     }
 }

</style>