验证码注册功能的实现

作为随便参考

分别写入登录，验证码的接口
export const 事件名 =(data) => Request.getData({
        url: ,
        method: ,
        data
});

<template>
  <div>
    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入手机号">
      <template #button>
        <van-button size="small" type="primary" @click="senden">发送验证码</van-button>
      </template>
    </van-field>
    <div>
      <van-field v-model="value" placeholder="请输入验证码" />
    </div>
    <van-button round type="info" @click="zhuce">注册</van-button>
  </div>
</template>

<script>
//这里引用的是Vant组件库
import { Field , Button } from "vant";
//这里获取的是登录以及验证码接口的路径
import {senden,zhuce} from "../request/http"
export default {
  name: "",
  data() {
    return {
        sms:"",
        value:""
    };
  },
  props: {},
  components: {
    [Field.name]: Field,
    [Button.name]:Button
  },
  mounted() {},
  methods: {
      senden(){
          let obj={
          //获取验证码：手机号，短信验证登录
              mobile:this.sms,
              sms_type:"login"
          }
          senden(obj).then(res=>{
              console.log(res)
          })
      },
      zhuce(){
          let obj={
          //用户登录：手机号，手机验证码，
              mobile:this.sms,
              sms_code:this.value,
              type:2
          }
          zhuce(obj).then(res=>{
              console.log(res)
              //如果data下的code码为200即为成功，执行以下代码内容
              if(res.data.code==200){
                //   token，
                //本地存储
                localStorage.setItem("token",res.data.data.remember_token);
                //通过getItem接收本地存储的内容
                console.log(localStorage.getItem("token"));
               
                this.$router.push({
                    path:"/"
                })
                //如果data下的code码为201即为失败打印输入有误
              }else if(res.data.code == 201){
                  alert("输入有误")
              }

          })
      }
  }
};
</script>