手机号验证码登录

点击获取验证码登录---点击获取验证码的时候要对手机号进行校验点击登录按钮的时候也要对表单进行一个校验

静态页面

1、静态页面代码---样式自己写1

<template>
  <!-- #ifdef APP || H5 -->

  <uni-forms class="login-form" :rules="mobileRules" ref="form" :model="formData">
    <view class="title">
      <text>手机验证码登录</text>
    </view>
    <uni-forms-item name="mobile">
      <input type="text" placeholder="请输入手机号" v-model="formData.mobile" class="uni-input-input" placeholder-style="color: #818181" />
    </uni-forms-item>
    <uni-forms-item name="code">
      <input type="text" placeholder="请输入验证码" v-model="formData.code" class="uni-input-input" placeholder-style="color: #818181" />
      <text class="text-button" @click="getCode">{{ time == 5 ? '获取验证码' : `${time}秒后重新获取` }}</text>
    </uni-forms-item>
    <button type="primary" @click="submitButton" class="submitButton">登录</button>
  </uni-forms>
  <!-- #endif -->
</template>

2、定义一个手机号和验证码的表单 && 校验规则

<script setup>
import { ref } from 'vue';

const formData = ref({
  mobile: '',
  code: ''
});

// 校验规则
const mobileRules = ref({
  mobile: {
    rules: [
      { required: true, errorMessage: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
    ]
  },
  code: {
    rules: [
      { required: true, errorMessage: '请输入验证码' },
      { pattern: '^\\d{6}$', errorMessage: '验证码格式不正确' }
    ]
  }
});
<script>

3、点击获取验证码的时候--- 对手机号进行校验----校验通过之后--进行倒计时---调接口----要把手机号的参数传给后台

<script setup>
const getCode = async () => {
  console.log('点击验证码', 1111);
  try {
    const mobile = formData.value.mobile;
    //点击---获取验证码--校验--手机号格式
    const mobileRegex = /^1[1-9]\d{9}$/;
    if (!mobileRegex.test(mobile)) {
      uni.showToast({
        title: '手机号码格式不正确',
        icon: 'none'
      });
      return;
    }

    if (time.value == 5) {
      // 调验证码接口
      const yzm = await login({ phoneNumber: formData.value.mobile });
      console.log('验证码', yzm);

      // 成功的提示
      if (yzm.code !== 500) {
        uni.showToast({
          title: yam.message,
          icon: 'success',
          duration: 2000
        });
      } else {
        uni.showToast({
          title: yzm.message,
          icon: 'none',
          duration: 2000
        });
      }

      let timer = setInterval(() => {
        time.value--;
        if (time.value == 0) {
          clearInterval(timer);
          time.value = 5;
          console.log('重置后的time', time.value);
        }
      }, 1000);
    } else {
      // uni.showToast({
      //   title: '请勿重复获取验证码',
      //   icon: 'none'
      // });
    }
  } catch (error) {
    uni.showToast({
      title: '验证码已发送',
      icon: 'none',
      duration: 2000
    });
  }
};
</script>

 

 

 

4、点击登录-- 调接口--传手机号和验证码两个参数

<script setup>
// 登录
const time = ref(5);
const form = ref();
import { useUserStore } from '@/stores/user.js';
// 存储token
const userStore = useUserStore();
// 点击登录按钮
const submitButton = async () => {
  console.log('点击登录', 1111);
  const formJy = await form.value.validate();
  if (formJy) {
    // 调登录按钮---->>接口--->把手机号和验证码传给后台
    const loginAPI = await loginButton({ phoneNumber: formData.value.mobile, verifyCode: formData.value.code });
    console.log('loginAPI,', loginAPI);

    if (loginAPI.code == 200) {
      // 保存token
      userStore.token = loginAPI.data.access_token;
      // console.log('userStore11', userStore.token);

      await uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1000
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/index/index'
        });
      }, 1000);
    } else {
      uni.showToast({
        title: '登录失败',
        icon: 'none'
      });
    }
    console.log('登录接口--数据', loginAPI);
  } else {
    uni.showToast({
      title: '登录失败',
      icon: 'none'
    });
  }
};
</script>