Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes

<Klasse anzeigen="Container">
  <Klasse anzeigen="Benutzerinfo">
    <image class="userinfo-avatar" src="../../images/timg.jpg" mode="cover"></image>
    <text class="userinfo-nickname">Was</text>
  </Ansicht>
  <Klasse anzeigen="wrap">
    <view class="tel">
      <Eingabetyp="Nummer" bindinput="bindTelInput" maxlength="11" 
         Platzhalter="Bitte geben Sie Ihre Telefonnummer ein"
         Platzhalter-Stil="Farbe:#C3C6C4;"/>
    </Ansicht>
    <Ansichtsklasse="ver-code">
      <Klasse anzeigen="Code">
        <Eingabetyp="Nummer" bindinput="BindCodeInput" maxlength="6"
               Platzhalter="Bitte geben Sie den Bestätigungscode ein"
               Platzhalter-Stil="Farbe:#C3C6C4;"/>
      </Ansicht>
      <view class="getCode" bindtap="getCode" wx:if="{{countDownNum == 60 || countDownNum == -1}}">
        <button type="primary" plain="true">Bestätigungscode abrufen</button>
      </Ansicht>
      <Ansichtsklasse="getCode" wx:else>
        <button type="primary" plain="true">Nach {{countDownNum}}s erneut abrufen</button>
      </Ansicht>
    </Ansicht>
  </Ansicht>
  <view class="btn-login" bindtap="login">Anmelden</view>
</Ansicht>

//Anwendungsinstanz abrufen const app = getApp()

Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    phone: null, // Telefonnummer code: null, // Telefonverifizierungscode countDownNum: 60, // Countdown-Anfangswert },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {

  },

  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
    
  },
  
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {

  },
  
  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {

  },
  // Telefonnummer eingeben bindTelInput: function (e) {
    dies.setData({
      Telefon: e.detail.value
    })
  },
  // Bestätigungscode eingeben bindCodeInput: function (e) {
    dies.setData({
      Code: e.detail.Wert
    })
  },
  // Mobilen Bestätigungscode sendengetCode: function () {
    if (!!dieses.Datentelefon) {
      wenn (!!(/^1[34578]\d{9}$/.test(dieses.Datentelefon))) {
        wx.showToast({
          Titel: „Erfolgreich gesendet“,
          Symbol: "keine",
          Dauer: 1500
        })
        dies.countDown()
      } anders {
        wx.showToast({
          Titel: „Bitte geben Sie eine gültige Handynummer ein“,
          Symbol: "keine",
          Dauer: 1500
        })
      }
    } anders {
      wx.showToast({
        Titel: "Bitte geben Sie Ihre Handynummer ein",
        Symbol: "keine",
        Dauer: 1500
      })
    }
  },
  /**
   * Countdown für Bestätigungscode*/
  countDown: Funktion () {
    var _this = dies
    var countDownNum = _this.data.countDownNum // Den Anfangswert des Countdowns abrufen var timer = setInterval(function () {
      countDownNum -= 1
      _this.setData({
        Anzahl der Downs: Anzahl der Downs
      })
      wenn (countDownNum <= -1) {
        Intervall löschen(Timer)
        // Den Code lösen, den die Funktion setInterval ausführen wird_this.setData({
          countDownNum: 60
        })
      }
    }, 1000)
  },
  // Anmeldung per Handy-Bestätigungscode: function () {
    wenn (dieses.Daten.Telefon) {
      wenn (!!(/^1[34578]\d{9}$/.test(dieses.Datentelefon))) {
        wenn (dieser.Daten.Code) {
          wx.showToast({
            Titel: „Anmeldung erfolgreich“,
            Symbol: "keine",
            Dauer: 1500
          })
        } anders {
          wx.showToast({
            Titel: „Bitte geben Sie den Bestätigungscode ein“,
            Symbol: "keine",
            Dauer: 1500
          })
        }
      } anders {
        wx.showToast({
          Titel: „Bitte geben Sie eine gültige Handynummer ein“,
          Symbol: "keine",
          Dauer: 1500
        })
      }
    } anders {
      wx.showToast({
        Titel: "Bitte geben Sie Ihre Handynummer ein",
        Symbol: "keine",
        Dauer: 1500
      })
    }
  }
})

.Benutzerinfo {
  Höhe: 240rpx;
  Rand: 40rpx auto 0;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
}

.Benutzerinfo .Benutzerinfo-Avatar {
  Breite: 140rpx;
  Höhe: 140rpx;
  Rand: 20 Rpx;
  Randradius: 50 %;
  Rand: 1rpx durchgezogen #dad5d5;
}

.Benutzerinfo .Benutzerinfo-Spitzname {
  Farbe: #aaa;
}

.wickeln {
  Breite: 630rpx;
  Schriftgröße: 32rpx;
  Rand: 80 Rpx, automatisch 120 Rpx;
}

.wrap .tel {
  Breite: 100 %;
  Höhe: 68rpx;
  Rahmen unten: 1rpx durchgezogen #DDE3EC;
  Rand unten: 60rpx;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Inhalt ausrichten: Flex-Start;
}

.wrap .ver-code {
  Breite: 100 %;
  Höhe: 68rpx;
  Rahmen unten: 1rpx durchgezogen #DDE3EC;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
}

.wrap .ver-code .code {

}

.wrap .ver-code .getCode {
  Mindestbreite: 190rpx;
  Höhe: 40rpx;
}

.wrap .ver-code .getCode Schaltfläche {
  Breite: 100 %;
  Höhe: 100%;
  Schriftgröße: 28rpx;
  Schriftstärke: normal;
  Zeilenhöhe: 40rpx;
  Hintergrund: #fff;
  Farbe: #ffaa7f;
  Rand: keiner;
  Polsterung: 0;
  Rand: 0;
}

.btn-login {
  Breite: 588rpx;
  Höhe: 88rpx;
  Hintergrund: #ffaa7f;
  Rahmenradius: 10rpx;
  Textausrichtung: zentriert;
  Zeilenhöhe: 88rpx;
  Schriftgröße: 36rpx;
  Schriftstärke: 500;
  Farbe: #fff;
  Rand: 0 automatisch;
}

.klickKlasse {
  Hintergrund: #ea986c;
}