SEEC-Portal-Front/pages/register.vue

<template>
  <div class="page-container login-container">
    <el-card class="login-card">
      <h2 class="login-card__title login-card__item">注 册</h2>
      <el-input ref="name" v-model="name" placeholder="请输入昵称, 长度为1-10个字符" maxlength="10" class="login-card__item" autofocus></el-input>
      <el-input ref="password" v-model="password" type="password" placeholder="请输入密码，长度为6-20个字符" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="passwordConfirm" v-model="passwordConfirm" type="password" placeholder="请再次输入密码" maxlength="20" class="login-card__item"></el-input>
      <el-input ref="phone" v-model="phone"  oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号" minlength='11' maxlength='11' class="login-card__item"></el-input>
      <el-input ref="identifyCode" v-model="identifyCode" placeholder="请输入验证码" maxlength="6" class="login-card__short-item"></el-input>
      <el-button :disabled="disabled" @click="sendMessage" class="login-card__right-button">{{buttonText}}</el-button>
      <el-button type="primary" class="login-card__item" @click="register" :loading="loading" round>注 册</el-button>
      <div class="login-card__bottom"><router-link to="/login" class="login-card__link">已有账号？前往登录</router-link></div>
    </el-card>
    <div class="clear"></div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: "register",
    layout: "blank",
    data(){
      return{
        name: '',
        phone: '',
        password: '',
        identifyCode: '',
        passwordConfirm: '',
        buttonText: '获取验证码',
        disabled: false,
        loading: false
      }
    },
    methods: {
      sendMessage(){
        if(this.phone.length < 11){
          if(this.phone.length === 0){
            this.$message({
              showClose: true,
              message: '请填写手机号码',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '手机号码格式有误',
              type: 'error'
            });
          }
          this.$refs.phone.focus();
          return;
        }
        this.disabled = true;
        let time=60;
        let myScroll = setInterval(() => {
          time--;
          if(time>=0) {
            this.buttonText = time + "s后可重发";
          }else{
            this.buttonText = '获取验证码';
            this.disabled = false;  //倒计时结束能够重新点击发送的按钮
            clearTimeout(myScroll);    //清除定时器
            time = 60;   //设置循环重新开始条件
          }
        }, 1000);
        this.$axios.post("/user/sendMessage", {"phone":this.phone}).then(res => {
          if(res.code === 0){
            this.$message({
              showClose: true,
              message: '发送成功',
              type: 'success'
            });
          }else{
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            });
          }
        });
      },
      checkValid(){
        if(this.name.length === 0){
          this.$message({
            showClose: true,
            message: '昵称不得为空',
            type: 'error'
          });
          this.$refs.name.focus();
          return false;
        }

        if(this.password.length < 6){
          if(this.password.length === 0){
            this.$message({
              showClose: true,
              message: '密码不得为空',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '密码长度不足',
              type: 'error'
            });
          }
          this.$refs.password.focus();
          return false;
        }

        if(this.passwordConfirm !== this.password){
          this.$message({
            showClose: true,
            message: '密码前后不一致',
            type: 'error'
          });
          this.$refs.passwordConfirm.focus();
          return false;
        }

        if(this.phone.length < 11){
          if(this.phone.length === 0){
            this.$message({
              showClose: true,
              message: '手机号码不得为空',
              type: 'error'
            });
          }else{
            this.$message({
              showClose: true,
              message: '手机号码格式有误',
              type: 'error'
            });
          }

          this.$refs.phone.focus();
          return false;
        }

        if(this.identifyCode.length === 0){
          this.$message({
            showClose: true,
            message: '未填写验证码',
            type: 'error'
          });
          this.$refs.identifyCode.focus();
          return false;
        }

        return true;

      },
      register() {
        let isValid = this.checkValid();

        if(!isValid){
          return;
        }

        this.loading = true;

        this.$api.$post('/user/register', {
          phone: this.phone,
          password: this.password,
          name: this.name,
          identifyCode: this.identifyCode
        }).then((res) =>
          {
            if(res.code === 0){
              this.$message({
                showClose: true,
                message: "注册成功，前往登录",
                type: 'success'
              });
              this.$router.push('/login');
            }else{
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error'
              });
            }

          }
        );
        this.loading = false;
      },
    }
  };
</script>

<style lang="scss" scoped>
  @import '~/assets/css/login.scss';
</style>