sports_wap/vue_sports/.svn/pristine/82/8277ece6465f0c207eeeb4890d4b15c92e31f6f4.svn-base

<template>
  <div>
    <yd-popup v-model="rgShow" position="center" width="90%margin:0;">
      <div class="reg-box">
        <div class="reg-top row allAlignment item-center">
          <span>注册-用户信息</span>
          <img :src="url1" alt @click="closeRg()">
        </div>
        <div class="reg-mian">
          <div>
            <span>会员账号</span>
            <br>
            <input
              type="text"
              v-model="account"
               maxlength="15"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              @blur="vipID()"
              placeholder="请输入你的账号"
            >
            <br>
            <i :class="idInfo?'infoRed':''">*使用4-15位数字、字母和汉字，不能使用特殊字符</i>
          </div>
          <div>
            <span>会员密码</span>
            <br>
            <input
              type="password"
              maxlength="15"
              v-model="password"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              @blur="pwd()"
              placeholder="请输入你的密码"
            >
            <br>
            <i :class="pwdInfo?'infoRed':''">*使用6-15位数字或字母，不能使用特殊字符</i>
          </div>
          <div>
            <span>密码确认</span>
            <br>
            <input
              type="password"
              v-model="again_password"
              @blur="monitor()"
              maxlength="15"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              placeholder="请输入确认密码"
            >
            <br>
            <i :class="suerPwdInfo?'infoRed':''">*请输入确认密码</i>
          </div>
          <div>
            <span>真实姓名</span>
            <br>
            <input
              type="text"
              v-model="userName"
              @blur="username()"
            
              placeholder="请输入真实姓名"
            >
            <br>
            <i :class="userInfo?'infoRed':''">*请输入真实姓名</i>
          </div>
          <div>
            <span>手机号</span>
            <br>
            <input
              type="number"
              v-model="iPhone"
              @blur="iphone()"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              placeholder="请输入手机号"
            >
            <br>
            <i :class="phoneInfo?'infoRed':''">*请输入正确的手机号码</i>
          </div>
        </div>

        <div class="row vertical-center">
          <yd-button :class="access?'btnCor':''" @click.native="reg()">完成注册</yd-button>
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  name: "register",
  data() {
    return {
    
      idInfo: false, // ID字段提醒输入错误
      pwdInfo: false, //密码提醒
      suerPwdInfo: false, //确认密码
      userInfo: false, //用户信息提醒
      phoneInfo: false, //手机号提醒
      access: false, //btn样式修改
      account: "",
      password: "",
      again_password: "",
      userName: "",
      iPhone: "",
      rgShow:this.$store.state.rgShow,
      url1: require("@/assets/st-imges/guanbi.png"),
      docmHeight: '0',  //默认屏幕高度
      showHeight:  '0',  //实时屏幕高度
      hidshow:true,  //显示或者隐藏footer,
      isResize:false, //默认屏幕高度是否已获取
    };
  },
  methods: {
    closeRg(){
      	this.$store.dispatch('GETRGSHOW', false);
    },
    monitor() {
      if (this.again_password != this.password) {
        this.suerPwdInfo = true;
        this.again_password = "";
      } else {
        this.suerPwdInfo = false;
      }
    },
    reg() {
            if (
        this.account != "" &&
        this.password != "" &&
        this.again_password != "" &&
        this.userName != "" &&
        this.iPhone != ""
      ) {
        this.$http.post(this.$ports.login.reg,{account:this.account,name:this.userName,password:this.password,again_password:this.again_password,phone:this.iPhone}).then(res =>{
          if(res.data.status == 1){
            localStorage.setItem('token',res.data.data[0].token)
            localStorage.setItem('name',res.data.data[0].name)
              this.$dialog.alert({mes: res.data.msg });
              	this.$store.dispatch('GETRGSHOW', false);

          }else{
            this.$dialog.alert({mes: res.data.msg });
          } 
        })
      }else{
         this.$dialog.alert({mes: '请完善您的信息！' });
      }
    },
    vipID() {
      if (/^[0-9a-zA-Z\u4e00-\u9fa5]{4,15}$/.test(this.account) && this.password != this.account) {
        this.idInfo = false;
      } else {
        this.account = "";
        this.idInfo = true;
      }
    },
    pwd() {
      if (/^[a-zA-Z0-9]{6,15}$/.test(this.password) && this.password != this.account) {
        this.pwdInfo = false;
      }
      else {
        this.password = "";
        this.pwdInfo = true;
      }
    },
    username() {
      if (/^[a-zA-Z\u4e00-\u9fa5]{2,32}$/.test(this.userName)) {
        this.userInfo = false;
      } else {
        this.userInfo = true;
        this.userName = "";
      }
    },
    iphone() {
      if (/^1[34578]\d{9}$/.test(this.iPhone)) {
        this.phoneInfo = false;
      } else {
        this.phoneInfo = true;
        this.iPhone = "";
      }
    }
  },
  computed:{
   Isshow:function(){
     
        this.$store.dispatch('GETRGSHOW',this.rgShow)
			return {
				isshow_code:this.$store.state.rgShow
			}
		},
    noNull(){
            if (
        this.account != "" &&
        this.password != "" &&
        this.again_password != "" &&
        this.userName != "" &&
        this.iPhone != ""
      ) {
        this.access = true;
      }
      return this.access
    }
  },
  watch:{
    noNull(val){
    },
    Isshow(obj){
      this.rgShow=obj.isshow_code
    },
    isshow:{
        istrue(val){
         
        }
    }
  },
  mounted(){
 
  }
};
</script>
<style scoped>
.reg-box {
  width: 6.75rem;
  /* height: 8.26rem; */
  background: #f8f8f8;
  border-radius: 0.52rem;
  padding: 0 0.54rem;

}
.reg-top {
  font-size: 0.32rem;
  padding-top: 0.58rem;
  padding-bottom: 0.6rem;
  color: #f76649;
}
.reg-top img {
  width: 0.26rem;
  height: 0.26rem;
}
.reg-mian {
  /* height: 5.46rem; */
}
.reg-mian div {
  padding-bottom: 0.27rem;
}
.reg-mian span {
  font-size: 0.28rem;
}
.reg-mian i {
  font-size: 0.22rem;
  color: #aaaaaa;
}
.reg-mian input {
  width: 90%;
  height: 0.46rem;
  border: none;
  outline: none;
  border-bottom: 1px solid #aaaaaa;
  margin: 0.14rem auto 0.1rem ;
  font-size: 0.24rem;
}
button {
  width: 1.9rem;
  height: 0.7rem;
  border-radius: 0.35rem;
  border: none;
  background: #aaaaaa;
  color: #f8f8f8;
  margin-bottom: 0.5rem;
}
input {
  font-size: 0.2rem;
}
.reg-mian .infoRed {
  color: #f76649;
}
div.row .btnCor {
  background: #f76649;
}
 .yd-btn-primary:not(.yd-btn-loading){
  background: #aaaaaa;
}
div /deep/ .yd-popup-center{
  margin: 0;
     overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
         position: absolute;  
}
</style>