uniapp 实现短信验证码登录

今天开始设计注册功能，由于现在的app应用都是使用手机号来进行验证的，不在是传统的直接用户名+密码进行验证。所以，我打算设计一个使用手机号接受短信的验证码注册。

　　然后开始对注册的逻辑来进行分析，首先用户的需要输入自己的手机号，点击获取验证码，发送请求到后端，后端调用接口来实现发送短信到前端，后端记录这条短信的数据。用户输入验证码点击验证就又会将验证码发送到后端来验证验证码，验证成功后就开始下一步设置密码和确认密码。

　　然后今天目前只完成了获取验证码页面的设计和后端生成用户码，目前只能将验证码放在后端的一个对象中来进行验证。

要求手机号只有11位切都为数字才能点击获取验证码，输入验证码才能点击注册。

<template>
    
    <view class="register-container">
        
        <!-- 获取验证码 -->
            <!-- v-if="!idlogin&&verifycode" -->
        <view v-if="!passwordInput" class="getcodecontainer">
          <view class="logo">
            <!-- 这里放置你的应用 logo -->
            <image src="/static/logo.png" class="logo-img" mode="aspectFit" />
          </view>
          <view class="form-group">
            <text class="label">手机号：</text>
            <input type="tel" v-model="phoneNumber" placeholder="请输入手机号" />
          </view>
          <view class="form-group">
            <text class="label">验证码：</text>
            <input type="text" v-model="verificationCode" placeholder="请输入验证码" />
            <button @click="getVerificationCode" 
                    :disabled="countdown > 0||phoneNumber.length !== 11||!isPhoneNumberValid" 
                    :class="{ 'code-btn-active': countdown <= 0 }">{{ countdown > 0 ? '重新获取('+ countdown + ' s)' : '获取验证码' }}</button>
          </view>
          <button class="regis-btn" @click="verificat" :disabled="phoneNumber.length !== 11 || verificationCode === ''|| !isPhoneNumberValid">注册</button>
        </view>
    
</template>

 computed: {
        isPhoneNumberValid() {
        return /^\d{11}$/.test(this.phoneNumber); // 使用正则表达式检验电话号码是否全是数字且长度为11位
        },
    },

 verificat() {//验证码验证
        uni.request({
            url:this.$BASE_URL.BASE_URL+"/verifySmsCode",
            data:{
                phone:this.phoneNumber,
                code:this.verificationCode
            },
            success: (res) => {
                console.log(res.data.code);
                if(res.data.code)
                {
                    uni.showToast({
                    title:"验证成功",
                    });
                    this.passwordInput=true;
                }
                else{
                    uni.showToast({
                    title:"验证码过期或错误",
                    icon:"none"
                    });
                }
            }
        })
    },

    getVerificationCode() {//获取验证码
        var self=this
      // 模拟发送验证码
    
      // 模拟倒计时
      this.countdown = 60; // 倒计时时间（秒）
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          this.countdown = 0;
        }
      }, 1000);
      uni.hideKeyboard()  
      uni.request({
          url:this.$BASE_URL.BASE_URL+"/getcode",
        data:{
            phone:self.phoneNumber
        },
        success:(res)=>{
            if(res.data.code)
            {
                console.log(res.data)
                uni.showToast({
                title:"验证码已发送",
                });
            }
            else{
                uni.showToast({
                    title:"验证码获取失败",
                    icon: 'error',
                })
            }
        },
        fail: () => {
            uni.showToast({
                title:"验证码获取失败",
                icon: 'error',
            })
        }
      })
    },