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

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
          }); 

        }
      });
    }
  }
};