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',
            })
        }
      })
    },