注册页面调用接口实现注册功能

1、整合注册页面

(1)在layouts目录下创建sign.vue布局页面。 在这里插入图片描述

(2)sign.vue页面。



(3)在pages目录下创建register.vue空白页面(后面填充)。 在这里插入图片描述

(4)修改default.vue 中注册的超链接。


      注册

2、register.vue页面实现调用

(1)register.vue页面元素。



      登录
      ·
      注册

            {{codeTest}}

          点击 “注册” 即表示您同意并愿意遵守简书

          用户协议
          和
          隐私政策 。

        社交帐号直接注册

 import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'  
export default {    
}

(2)register.vue页面中js的实现

import register from "@/api/register";
export default {
  layout: "sign",
  data() {
    return {
      params: {
        mobile: "",
        code: "",
        nickname: "",
        password: ""
      },
      sending: true, //是否发送验证码
      second: 60, //倒计时间
      codeTest: "获取验证码"
    };
  },
  created() {},
  methods: {
    //调用接口获取验证码
    getCodeFun() {
      register.sendMsmPhone(this.params.mobile).then(response => {
        this.sending = false;
        this.timeDown();
      });
    },
    timeDown() {
      let result = setInterval(() => {
        --this.second;
        this.codeTest = this.second;
        if (this.second  {
        console.log("response======" + response);
        if (response.data.success) {
          //提示成功
          this.$message({
            type: "success",
            message: "注册成功!"
          });
          //跳转登录页面

        } else {
            //提示错误
           this.$message({
            type: "error",
            message: response.data.message
          }); 

        }
      });
    }
  }
};