uni-app手机号验证码登录，和账号密码登录的页面，切换使用

---

实现方式：

首先，在pages文件夹下创建两个页面，一个用于手机号验证码登录，一个用于账号密码登录。比如命名为loginByPhone.vue和loginByAccount.vue。

loginByPhone.vue代码示例：

<template>
  <div>
    <form>
      <div>
        <label for="phone">手机号码：</label>
        <input type="text" id="phone" v-model="phone" />
      </div>
      <div>
        <label for="code">验证码：</label>
        <input type="text" id="code" v-model="code" />
        <button @click="sendCode" :disabled="isSending">{{ buttonText }}</button>
      </div>
      <button type="submit" @click.prevent="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      isSending: false,
      countDown: 60,
      buttonText: '发送验证码'
    }
  },
  methods: {
    sendCode() {
      // TODO: 发送验证码的逻辑
      // 判断手机号是否合法，发送验证码请求，设置倒计时
      this.isSending = true
      const timer = setInterval(() => {
        this.countDown -= 1
        this.buttonText = `${this.countDown}s后重试`
        if (this.countDown === 0) {
          clearInterval(timer)
          this.buttonText = '发送验证码'
          this.isSending = false
          this.countDown = 60
        }
      }, 1000)
    },
    submit() {
      // TODO: 校验验证码的逻辑
      // 调用后端接口，校验验证码，登录成功后跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

loginByAccount.vue代码示例：

<template>
  <div>
    <form>
      <div>
        <label for="account">用户名/手机号：</label>
        <input type="text" id="account" v-model="account" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit" @click.prevent="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    submit() {
      // TODO: 校验用户名和密码的逻辑
      // 调用后端接口，校验用户名和密码，登录成功后跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

以上示例代码中，loginByPhone.vue页面实现了发送短信验证码、校验验证码的逻辑，loginByAccount.vue页面实现了输入账号密码、校验登录的逻辑。您可以根据您的实际需求，修改这些代码适配您的项目。

切换按钮代码示例：

最后，在原生的登录页面中，您可以通过切换按钮等方式，跳转到不同的登录方式。比如：

<template>
  <div>
    <div>
      <button @click="switchToPhoneLogin">手机号验证码登录</button>
      <button @click="switchToAccountLogin">账号密码登录</button>
    </div>
    <div v-if="isPhoneLogin">
      <login-by-phone />
    </div>
    <div v-else>
      <login-by-account />
    </div>
  </div>
</template>

<script>
import LoginByPhone from './loginByPhone.vue'
import LoginByAccount from './loginByAccount.vue'

export default {
  components: {
    LoginByPhone,
    LoginByAccount
  },
  data() {
    return {
      isPhoneLogin: true
    }
  },
  methods: {
    switchToPhoneLogin() {
      this.isPhoneLogin = true
    },
    switchToAccountLogin() {
      this.isPhoneLogin = false
    }
  }
}
</script>

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果教程中有不懂的地方，可添加学习会员小助手咨询（微信：mifankeji77）