注册的实现

<template>

  <div class="register">

    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">

      <h3 class="title"></h3>

      <el-form-item prop="nickName">

        <el-input v-model="registerForm.nickName" type="text" auto-complete="off" placeholder="真实姓名">

          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

        </el-input>

      </el-form-item>

      <el-form-item prop="email">

        <el-input v-model="registerForm.email" type="text" auto-complete="off" placeholder="邮箱">

          <svg-icon slot="prefix" icon-class="email" class="el-input__icon input-icon" />

        </el-input>

      </el-form-item>

      <el-form-item prop="password">

        <el-input

          v-model="registerForm.password"

          type="password"

          auto-complete="off"

          placeholder="密码"

        >

          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />

        </el-input>

      </el-form-item>

      <el-form-item prop="rePassword">

        <el-input

          v-model="registerForm.rePassword"

          type="password"

          auto-complete="off"

          placeholder="确认密码"

        >

          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />

        </el-input>

      </el-form-item>

      <el-form-item prop="phone">

        <el-input v-model="registerForm.phone" type="text" auto-complete="off" placeholder="手机号">

          <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />

        </el-input>

      </el-form-item>

      <el-form-item prop="code" v-if="captchaEnabled">

        <el-input

        v-model="registerForm.code"

        auto-complete="off"

        placeholder="验证码"

        style="width: 63%"

        :disabled="disabled"

      >

        <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />

      </el-input>

      <div class="register-code">

        <el-button v-if="eRcode" :disabled="!disabled"  @click="sendCode()">获取验证码</el-button>

        <el-button v-else disabled>剩余{{ time }}秒</el-button>

      </div>

      </el-form-item>

      <el-form-item style="width:100%;">

        <el-button

          :loading="loading"

          size="medium"

          type="primary"

          style="width:100%;"

          @click.native.prevent="handleRegister"

        >

          <span v-if="!loading">注 册</span>

          <span v-else>注 册 中...</span>

        </el-button>

        <div style="float: right;">

          <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>

        </div>

      </el-form-item>

    </el-form>

    <!--  底部  -->

    <div class="el-register-footer">

      <span>Copyright © 2018-2023  All Rights Reserved.</span>

    </div>

  </div>

</template>



<script>



export default {

  name: "Register",

  data() {

    const equalToPassword = (rule, value, callback) => {

      if (this.registerForm.password !== value) {

        callback(new Error("两次输入的密码不一致"));

      } else {

        callback();

      }

    };

    return {

      disabled:true,

      eRcode:true,

      time:120,

      codeUrl: "",

      registerForm: {

        nickName:"",

        email:"",

        password: "",

        rePassword: "",

        phone:"",

        code: ""

      },

      registerRules: {

        nickName: [

          { required: true, trigger: "blur", message: "请输入您的真实姓名" },

          { pattern: /^[\u4E00-\u9FA5]{1,}$/, message: '姓名只能输入汉字', trigger: 'blur' }

        ],

        email: [

          { required: true, trigger: "blur", message: "请输入您的邮箱" },

          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式不正确', trigger: 'blur' }

        ],

        password: [

          { required: true, trigger: "blur", message: "请输入您的密码" },

          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }

        ],

        rePassword: [

          { required: true, trigger: "blur", message: "请再次输入您的密码" },

          { required: true, validator: equalToPassword, trigger: "blur" }

        ],

        phone: [

          { required: true, trigger: "blur", message: "请输入您的手机号" },

          { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur"}

        ],

        code: [{ required: true, trigger: "change", message: "请输入验证码" }]

      },

      loading: false,

      captchaEnabled: true

    };

  },

  created() {

   

  },

  methods: {

    sendCode(){  

      let phone = /^1[3-9]\d{9}$/;

      if(phone.test(this.registerForm.phone)){

        this.$service.get(`/merchant/getCode?phone=${this.registerForm.phone}`).then(res => {

        if(res.code==200){

          this.eRcode = false;

          this.disabled = false;

          let clock = window.setInterval(()=>{

          this.time--;

          if(this.time<1){

            window.clearInterval(clock);

            this.eRcode = true;

            this.disabled = true;

            this.time = 120;

          }

        },1000)

        }

        }).catch(() => {});

      }else{

        this.$message({

            type: 'error', // success error warning

            message: "手机号不正确",

            duration: 2000,

          })

      }

    },

    handleRegister() {

      this.$refs.registerForm.validate(valid => {

        if (valid) {

          let body = this.registerForm

          this.$service.post(`/merchant/register`,body).then(res => {

         if(res.code==200){

            this.$message({

              type: 'success', // success error warning

              message: "注册成功",

              duration: 2000,

            })

           this.$router.push({name:'login',params: {

            phone:this.registerForm.phone,

            password:this.registerForm.password

           },})

        }else{

          this.registerForm = {};

        }

        }).catch(() => {});

        }

      });

    }

  }

};

</script>



<style rel="stylesheet/scss" lang="scss">

.register {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  background-image: url("../assets/images/login-background.jpg");

  background-size: cover;

}

.title {

  margin: 0px auto 30px auto;

  text-align: center;

  color: #707070;

}



.register-form {

  border-radius: 6px;

  background: #ffffff;

  width: 400px;

  padding: 25px 25px 5px 25px;

  .el-input {

    height: 38px;

    input {

      height: 38px;

    }

  }

  .input-icon {

    height: 39px;

    width: 14px;

    margin-left: 2px;

  }

}

.register-tip {

  font-size: 13px;

  text-align: center;

  color: #bfbfbf;

}

.register-code {

  width: 33%;

  height: 38px;

  float: right;

  img {

    cursor: pointer;

    vertical-align: middle;

  }

}

.el-register-footer {

  height: 40px;

  line-height: 40px;

  position: fixed;

  bottom: 0;

  width: 100%;

  text-align: center;

  color: #fff;

  font-family: Arial;

  font-size: 12px;

  letter-spacing: 1px;

}

.register-code-img {

  height: 38px;

}

</style>