<template>
  <div class="main">
    <div class="banner"></div>
    <div class="message_tab">
      <ul>
        <li>
          <span>手机号</span>
          <input type="text" placeholder="请输入" v-model="userphone" maxlength="11" />
        </li>
        <li>
          <span>短信验证码</span>
          <input type="text" placeholder="请输入" v-model="useryzm" />
          <div class="bd_btn btn_1" @click="sendCode" v-if="!MoblieCodeDownTimeState">获取验证码</div>
          <div class="bd_btn btn_1" v-if="MoblieCodeDownTimeState">{{MoblieCodeDownTime}}s后获取</div>
          <!-- <van-button class="btn btn_1" @click="sendCode">获取验证码</van-button> -->
        </li>
        <!-- <li>
          <span>图片验证码</span>
          <input type="text" placeholder="请输入" />
        </li> -->
      </ul>
      <div class="bd_btn btn_2" @click="submitbinding">提交</div>
    </div>
    <div class="tc" v-show="show">
      <div class="content">
        <div>温馨提示</div>
        <div class="text">{{bdmsg}}</div>
        <a class="mbtn" href="http://v.360lj.com/index.html">前往注册</a>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  name: "binding",
  data() {
    return {
      show: false,
      yzm: "", //验证码
      useryzm: "",
      userphone: "", //
      openId: sessionStorage.getItem("openId"),
      MoblieCodeDownTime: 60,
      MoblieCodeDownTimeState: false,
      SendSMSState: false,
      bdmsg:"",
    };
  },
  created() {
  },
  filters: {},
  methods: {
    // //验证手机号 正则
    // yzphone() {
    //   var phoneReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
    //   var phone = this.userphone
    //   if (! phone ||!phoneReg.test(phone)){
    //     var msg = phone == ""
    //         ? "请填手机号"
    //         : "请填写正确的手机号";
    //      this.$toast(msg);
    //     return;
    //   }
    // },
    //发送验证短信
    sendCode() {
      var phoneReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
      var phone = this.userphone;
      if (!phone || !phoneReg.test(phone)) {
        var msg = phone == "" ? "请填手机号" : "请填写正确的手机号";
        this.$toast(msg);
        return;
      }
      if (this.SendSMSState) {
        layer.open({
          content: "短信验证码发送中请稍后...",
          skin: "msg",
          time: 2
        });
        return;
      }
      this.SendSMSState = true;

      var obj = {
        openId: this.openId,
        phone: this.userphone
      };

      this.$http.sendCode(obj).then(res => {
        if(res.data.success){

           layer.open({content: '验证码已发送，请注意查收',skin: 'msg',time: 2});
           this.DownTime();
        
        }else{
           layer.open({content: res.data.msg,skin: 'msg',time: 2});
        }
        // this.$toast(res.data.msg);
      });
    },
    // 短信倒计时
    DownTime() {
      this.MoblieCodeDownTimeState = true;
      var t = setInterval(() => {
        this.MoblieCodeDownTime--;
        if (this.MoblieCodeDownTime <= 0) {
          clearInterval(t);
          t = null;
          this.MoblieCodeDownTime = 60;
          this.SendSMSState= false
          this.MoblieCodeDownTimeState = false;
        }
      }, 1000);
    },
    submitbinding() {
      // console.log( this.$rels.useryzm.value)
      if (this.userphone == "" || this.userphone == "") {
        this.$toast("手机号或验证码不正确");
        return;
      }
      var obj = {
        code: this.useryzm,
        openid: this.openId,
        phone: this.userphone
      };
      this.$http.verifyAndBind(obj).then(res => {
        if (res.data.success==false) {
            if(res.data.data=="1"){
               this.$toast(res.data.msg)
              this.$router.replace("/login");
            }
            else if(res.data.data=="3"){
              this.bdmsg = res.data.msg
                this.show=true
            }else{
                this.$toast(res.data.msg)
            }
        } else{
            this.$toast(res.data.msg)
              }

      });
    }
  },
  mounted() {
    var that = this
    $(".content").on("click", function() {
      $(this)
        .parent()
        .fadeOut(300);
        that.show=false
    });
  }
};
</script>
<style lang="less">
body {
  background-color: #f3f3f3;
}
.banner {
  height: 5.25rem;
  background: url(../assets/images/binding/banner.png) no-repeat center/100%;
}
.message_tab {
  position: relative;
  top: -2rem;
  ul {
    width: 7rem;
    height: 3.63rem;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0.15rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0rem 0.1rem 0.1rem #51a3ff36;
  }
  li {
    width: 80%;
    height: 1.13rem;
    line-height: 1.1rem;
    border-bottom: 0.01rem solid #b7b7b7;
    font-size: 0.3rem;
        display: flex;
    flex-flow: row nowrap;
    align-items: center;
    input{
      height:.4rem;
      line-height: normal;

    }
  }
  li:nth-child(2) input {
    width: 2.5rem;
  }
  span {
    display: inline-block;
    width: 1.6rem;
    color: #000;
  }
  .bd_btn {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    border-radius: 0.5rem;
    color: #fff;
    background-image: linear-gradient(to right, #4598ff, #70afff);
  }
  .mbtn{
    width: 2rem
  }
  .btn_1 {
    display: inline-block;
    width: 1.5rem;
    font-size: 0.25rem;
  }
  .btn_2 {
    width: 4rem;
    margin: 0.3rem auto;
    font-size: 0.3rem;
  }
}
.tc {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .content {
    width: 5rem;
    height: 3.48rem;
    background-color: #fff;
    border-radius: 0.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -2.5rem;
    margin-top: -1.79rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    > div:first-child {
      height: 0.8rem;
      line-height: 0.8rem;
      border-bottom: 0.01rem solid #e0e0e0;
      text-align: center;
      font-size: 0.3rem;
    }
    .text {
      width: 95%;
      font-size: 0.3rem;
      text-align: center;
      margin: 0 auto;
    }
    .mbtn{
      height: 0.6rem;
      width: 2rem;
      margin: 0 auto;
      line-height: 0.6rem;
      text-align: center;
      border-radius: 0.5rem;
      color: #fff;
      background-image: linear-gradient(to right, #4598ff, #70afff);
      font-size: 0.3rem;
      margin-bottom: 0.2rem;
    }
  }
  .content::after {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background: url(../assets/images/binding/off.png) no-repeat center/100%;
    position: absolute;
    right: 0;
    top: -0.8rem;
  }
}
</style>