WeChatアプレットがSMS認証コード送信のカウントダウンを実装

<ビュークラス="コンテナ">
  <view class="userinfo">
    <image class="userinfo-avatar" src="../../images/timg.jpg" mode="カバー"></image>
    <text class="userinfo-nickname">何</text>
  </ビュー>
  <view class="wrap">
    <view class="tel">
      <input type="number" bindinput="bindTelInput" maxlength="11" 
         placeholder="電話番号を入力してください"
         プレースホルダースタイル="color:#C3C6C4;"/>
    </ビュー>
    <view class="ver-code">
      <view class="code">
        <input type="number" bindinput="bindCodeInput" maxlength="6"
               placeholder="確認コードを入力してください"
               プレースホルダースタイル="color:#C3C6C4;"/>
      </ビュー>
      <view class="getCode" bindtap="getCode" wx:if="{{countDownNum == 60 || countDownNum == -1}}">
        <button type="primary" plain="true">確認コードを取得</button>
      </ビュー>
      <view class="getCode" wx:else>
        <button type="primary" plain="true">{{countDownNum}} 秒後に再取得</button>
      </ビュー>
    </ビュー>
  </ビュー>
  <view class="btn-login" bindtap="login">ログイン</view>
</ビュー>

//アプリケーションインスタンスを取得する const app = getApp()

ページ（{

  /**
   * ページの初期データ */
  データ： {
    phone: null, // 電話番号 code: null, // 電話認証コード countDownNum: 60, // カウントダウン初期値 },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },

  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
    
  },
  
  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {

  },
  
  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  },
  // 電話番号を入力 bindTelInput: function (e) {
    this.setData({
      電話番号: e.detail.value
    })
  },
  // 検証コードを入力するbindCodeInput: function (e) {
    this.setData({
      コード: e.detail.value
    })
  },
  // モバイル認証コードを送信getCode: function () {
    if (!!this.data.phone) {
      （!!（/^1[34578]\d{9}$/.test(this.data.phone)））の場合{
        wx.showToast({
          タイトル:「送信に成功しました」
          アイコン: "なし",
          所要時間: 1500
        })
        this.countDown()
      } それ以外 {
        wx.showToast({
          タイトル:「有効な携帯電話番号を入力してください」
          アイコン: "なし",
          所要時間: 1500
        })
      }
    } それ以外 {
      wx.showToast({
        タイトル: 「携帯電話番号を入力してください」
        アイコン: "なし",
        所要時間: 1500
      })
    }
  },
  /**
   * 認証コードのカウントダウン */
  カウントダウン: 関数 () {
    var _this = これ
    var countDownNum = _this.data.countDownNum // カウントダウンの初期値を取得します var timer = setInterval(function () {
      カウントダウン数 -= 1
      _this.setData({
        カウントダウン数: カウントダウン数
      })
      カウントダウン数 <= -1 の場合 {
        クリアインターバル(タイマー)
        // setInterval関数が実行するコードの固定を解除する_this.setData({
          カウントダウン数: 60
        })
      }
    }, 1000)
  },
  // 携帯電話認証コードログイン: function () {
    if (this.data.phone) {
      （!!（/^1[34578]\d{9}$/.test(this.data.phone)））の場合{
        if (this.data.code) {
          wx.showToast({
            タイトル: 「ログイン成功」、
            アイコン: "なし",
            所要時間: 1500
          })
        } それ以外 {
          wx.showToast({
            タイトル: 「確認コードを入力してください」
            アイコン: "なし",
            所要時間: 1500
          })
        }
      } それ以外 {
        wx.showToast({
          タイトル:「有効な携帯電話番号を入力してください」
          アイコン: "なし",
          所要時間: 1500
        })
      }
    } それ以外 {
      wx.showToast({
        タイトル: 「携帯電話番号を入力してください」
        アイコン: "なし",
        所要時間: 1500
      })
    }
  }
})

.ユーザー情報{
  高さ: 240rpx;
  マージン: 40rpx 自動 0;
  ディスプレイ: フレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
}

.userinfo .userinfo-アバター {
  幅: 140rpx;
  高さ: 140rpx;
  マージン: 20rpx;
  境界線の半径: 50%;
  境界線: 1rpx 実線 #dad5d5;
}

.userinfo .userinfo-ニックネーム {
  色: #aaa;
}

。包む {
  幅: 630rpx;
  フォントサイズ: 32rpx;
  マージン: 80rpx 自動 120rpx;
}

.wrap .tel {
  幅: 100%;
  高さ: 68rpx;
  下部境界線: 1rpx 実線 #DDE3EC;
  下部マージン: 60rpx;
  ディスプレイ: フレックス;
  flex-direction: 列;
  コンテンツの配置: flex-start;
}

.wrap .ver-code {
  幅: 100%;
  高さ: 68rpx;
  下部境界線: 1rpx 実線 #DDE3EC;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
}

.wrap .ver-code .code {

}

.wrap .ver-code .getCode {
  最小幅: 190rpx;
  高さ: 40rpx;
}

.wrap .ver-code .getCode ボタン {
  幅: 100%;
  高さ: 100%;
  フォントサイズ: 28rpx;
  フォントの太さ: 標準;
  行の高さ: 40rpx;
  背景: #fff;
  色: #ffaa7f;
  境界線: なし;
  パディング: 0;
  マージン: 0;
}

.btnログイン{
  幅: 588rpx;
  高さ: 88rpx;
  背景: #ffaa7f;
  境界線の半径: 10rpx;
  テキスト配置: 中央;
  行の高さ: 88rpx;
  フォントサイズ: 36rpx;
  フォントの太さ: 500;
  色: #fff;
  マージン: 0 自動;
}

.clickClass{
  背景: #ea986c;
}