一、创建组件和布局

1、创建登录页面

2、配置对应的路由

{ path: '/login', name: 'login', component: () => import('@/views/login') } 通过/login访问页面看看是否成功

3、vant布局样式

（1）布局好对应的表单 <van-form @submit="onSubmit"> <template #button> 发送验证码

# 二、实现登录注册功能 ## 1、登录接口绑定获得表单数据 data () { return { user: { mobile: '', code: '' } } } ## 2、v-mode绑定数据

  <van-field
    v-model="user.code"
    type="number"
    label="验证码"
    placeholder="请输入验证码"
    required
  />
</van-cell-group>

3、请求登录

import request from "@/utils/request"

/**
 * 用户登录
 */
export const login = data => {
  return request({
    method: 'POST',
    url: '/app/v1_0/authorizations',
    data
  })
}

4、绑定点击事件

methods: {
    // 登录
    async onSubmit () {
      const user = this.user
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true,// 是否禁止背景点击
        duration: 3000// 加载的持续时间
      })
      try {
        const { data } = await login(user)
        this.$store.commit('setUser', data.data)
        console.log(this.$store.state.data)
        this.$toast.success('登录成功')   
      } catch (err) {
        if (err.response.status === 400) {
          console.log('手机号或者验证码错误')
          this.$toast.fail('登录失败')
        } else {
          console.log('登录失败，请重新加载', err)
          this.$toast.fail('登录失败')//toast轻提示
        }
      }
    }

5、表单跟手机号的验证，添加:rule验证规则

<van-cell-group inset >
      <van-field
        v-model="user.mobile"
        placeholder="请输入手机号"
        name="mobile"
        max-length="11"
        :rules="usermessage.mobile"
      >
      <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>
      <van-field
        v-model="user.code"
        placeholder="请输入验证码"
        name="code"
        max-length="6"
        :rules="usermessage.code"
      >

三、验证码处理

1、验证手机号

async onSendSms () {
  console.log('onSendSms')
  try {
    await this.$refs.loginForm.validate('mobile')
  } catch (err) {
    return console.log('验证失败', err)
  }

2、设置倒计时

<van-count-down   v-if="isCountDownShow" :time="6000" format=" ss 秒"
          @finish="isCountDownShow = false"/>

3、发送到手机

try {
        const res = await sendSms(this.user.mobile)
        console.log('发送成功', res)
      } catch (err) {
        this.isCountDownShow = false
        if (err.response.status === 429) {
          this.$toast.fail('发送太频繁了，稍后重试')
        } else {
          this.$toast.fail('发送失败，稍后重试', err)
        }