sport_mobile/.svn/pristine/bf/bfba351b3a4f71f03096c86daf9e9e15fece740f.svn-base

<template>
  <div @mousewheel.prevent>
    <div class="registered row center" @click.stop="escRg"></div>
    <div class="registered-box">
      <div class="registered-box-title pdg20 row item-center allAlignment">
        <p style="margin-left:.1rem;">快速注册</p>
        <img
          style="width:.3rem;height:.3rem;cursor: pointer;"
          @click="escRg"
          src="@/assets/st-imges/del.png"
        >
      </div>
      <div class="registered-box-center pdg20">
        <div>
          <p>
            用户名
            <span
              :style="accountHint?'color:#f76649':''"
            >{{accountHint?accountHint:"（6-15位数字下划线或字母，或微信、QQ号组成）"}}</span>
          </p>
          <input v-model="account" @blur="accountVerify" type="text">
        </div>
        <div>
          <p>
            设置密码
            <span
              :style="passwordHint?'color:#f76649':''"
            >{{passwordHint?passwordHint:"（必须由6-15位数字或字母组成）"}}</span>
          </p>
          <input v-model="password" @blur="passwordVerify" type="password">
        </div>
        <div>
          <p>
            确认密码
            <span
              :style="again_passwordHint?'color:#f76649':''"
            >{{again_passwordHint?again_passwordHint:"（请再次输入密码）"}}</span>
          </p>
          <input v-model="again_password" @blur="again_passwordVerify" type="password">
        </div>
        <div>
          <p>
            真实姓名
            <span>（与提款银行账户姓名一致）</span>
          </p>
          <input v-model="name" type="text">
        </div>
        <div>
          <p>
            电话号码
            <span :style="phoneHint?'color:#f76649':''">{{phoneHint?phoneHint:'（请确定是您本人电话）'}}</span>
          </p>
          <input v-model="phone" @blur="PhoneVerify" type="text">
        </div>
        <div style="position: relative;">
          <p>验证码
            <span :style="VerificationHint?'color:#f76649':''">{{VerificationHint?"（验证码错误请重新输入）":"（请输入验证码）"}}</span>
          </p>
          <input v-model="Verification" :style="VerificationActive?'color:lawngreen;':''" @blur="VerificationVerify" type="text">
          <p @click="createCode()" class="checkCode row center">{{checkCode}}</p>
        </div>
        <p>
          <input style="width:.22rem;height:.22rem;margin:.1rem 0;" v-model="deal" type="checkbox">我已满18岁并且已阅读及同意
          <i>开户协议</i>。
        </p>
        <button style="cursor: pointer;" @click="submit">创建用户</button>
      </div>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  name: "registered",
  data() {
    return {
      account: "",
      password: "",
      again_password: "",
      name: "",
      Verification: "",
      code: "",
      checkCode: "",
      phone: "",
      phoneHint: "", //电话号码提示
      accountHint: "", //账号违法提示
      passwordHint: "", //密码违规提示
      again_passwordHint: "", //确认密码提示
      VerificationHint: "", //验证码输入错误
      VerificationActive:false,//验证码输入
      deal:true,//协议
      timers: true //刷新验证码
    };
  },
  methods: {
    // 图片验证码
    createCode() {
      //先清空验证码的输入
      this.code = "";
      this.checkCode = "";
      this.Verification = "";
      //验证码的长度
      var codeLength = 4;
      //随机数
      var random = [0,1,2,3,4,5,6,7,8,9,"A","C","D","E","F","G","H","J","K","L","M","N","P","Q","R","T","U","V","W","X","Y"];
      for (var i = 0; i < codeLength; i++) {
        //取得随机数的索引（0~30）
        var index = Math.floor(Math.random() * 31);
        //根据索引取得随机数加到code上
        this.code += random[index];
      }
      //把code值赋给验证码
      this.checkCode = this.code;
    },
    //关闭
    escRg() {
      this.$store.dispatch("GETRGSHOW", false);
    },
    //验证电话号码
    PhoneVerify() {
      let rex = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/;
      let result = rex.test(this.phone);
      if (result == false) {
        this.phoneHint = "（请输入正确的电话号码）";
        this.phone = "";
      } else {
        this.phoneHint = "";
      }
    },
    accountVerify() {
      let rex = /^[\da-zA-Z_]{6,15}$/;
      let result = rex.test(this.account);
      if (result == false) {
        this.accountHint = "（请输入6-15位数字下划线或字母，或微信、QQ号）";
        this.account = ''
      } else {
        this.accountHint = "";
      }
    },
    passwordVerify() {
      let rex = /^[\da-zA-Z]{6,15}$/;
      let result = rex.test(this.password);
      if (result == false) {
        this.passwordHint = "（请输入6-15位数字或字母）";
        this.password = ''
      } else if(this.password == this.account){
        this.passwordHint = "（账号密码不能一致）";
        this.password = ''
      }else{
        this.passwordHint = "";
      }
    },
    again_passwordVerify() {
      if (this.password) {
        if (this.password != this.again_password) {
          this.again_passwordHint = "（确认密码错误）";
          this.again_password = ''
        }else{
           this.again_passwordHint = "";
        }
      } else {
        this.again_passwordHint = "（请先输入密码再确认密码）";
        this.again_password = "";
      }
    },
    VerificationVerify() {
      let str=this.Verification.toLocaleUpperCase()
      if (str == this.checkCode) {
        this.timers = false;
        this.VerificationActive = true;
        this.VerificationHint = ''
      } else {
        this.VerificationActive = false;
        this.VerificationHint = "（验证码错误）";
        this.Verification = '';
      }
    },
    submit(){
      if(this.account&&this.password&&this.again_password&&this.name&&this.phone&&this.VerificationActive){
        if(this.deal){
          this.$http.post(this.$ports.login.reg,{
            account:this.account,
            name:this.name,
            password:this.password,
            again_password:this.again_password,
            phone:this.phone,
          }).then(res=>{
            if(res.data.data){
              this.$store.dispatch('SET_TOKEN',res.data.data[0].token)
                this.$public.setItem('user',res.data.data)
                this.$dialog.toast({ mes: '注册成功', timeout: 2000 });
                this.$store.dispatch('GETRGSHOW',false)

            }else{
              this.$dialog.toast({ mes: res.data.msg, timeout: 2000 });
              this.account=this.password=this.again_password=this.name=this.phone=this.VerificationActive = this.Verification ='';
              this.timers = true;
            }
            // console.log(res)
            
          })
        }else{
         this.$dialog.toast({ mes: "请同意我方开户协议", timeout: 2000 });
        }
      }else{
        this.$dialog.toast({ mes: "请将表格填写完毕", timeout: 1000 });
      }
    }
  },
  mounted() {
    let _this = this
    this.$public.ajaxTimerFun(timing => {
      if (_this.timers) {
        _this.createCode();
      } else {
        clearInterval(timing);
      }
    }, 1000 * 16);
  },
  beforeDestroy() {
    this.timers = false;
  },
  created() {
    this.createCode();
  }
};
</script>

<style scoped>
.pdg20 {
  padding: 0 0.2rem;
  color: lawngreen
}
.registered {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
.registered-box {
  position: fixed;
  top: 10%;
  right: 50%;
  bottom: 50%;
  left: 38%;
  z-index: 11;
  width: 5rem;
  height: 8rem;
  background: #fff;
  border-radius: 0.1rem;
}
.registered-box-title {
  height: 0.5rem;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
  border-radius: 0.1rem 0.1rem 0 0;
  color: #fff;
  font-size: 0.18rem;
  position: relative;
}
.registered-box-title::before {
  content: "";
  display: inline-block;
  width: 0.04rem;
  height: 0.2rem;
  border-radius: 0.02rem;
  background: #f76649;
  position: absolute;
  left: 0.2rem;
  top: 0.15rem;
}
.registered-box-center {
  font-size: 0.16rem;
  color: #666;
}
.registered-box-center span {
  font-size: 0.14rem;
  color: #999;
}
.registered-box-center input {
  background: #eee;
  width: 4.6rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  border: 0.01rem solid #ccc;
  padding-left: 0.2rem;
  color: #666;
}
.registered-box-center div {
  height: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
button {
  background: #f76649;
  height: 0.5rem;
  border-radius: 0.05rem;
  font-size: 0.18rem;
  color: #fff;
  border: none;
  width: 100%;
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}
.checkCode {
  width: 1rem;
  height: 0.38rem;
  position: absolute;
  right: 0%;
  top: 51%;
  border-radius: 0 0.05rem 0.05rem 0;
  background: #ccc;
  cursor: pointer;
}
</style>