微信小程序配合Tdesign实现验证码倒计时

效果

点击发送验证码后

实现

wxml

        <view class="userName">
          <view class="name">Code.
            <text>*text>
          view>
          <t-input placeholder="" value="{{code}}" type="number"  bindchange="onPhoneInput" style="{{style}}">
            <view slot="suffix" style="display: flex; align-items: center">
              <view class="suffix--line">view>
              <view class="verify" aria-role="button" bindtap="sendVerificationCode" disabled="{{isWaiting}}">
                {{verificationButtonText}}
              view>
            view>
          t-input>
        view>

js

Page({
  data: {
    code: '',
    isWaiting: false,
    remainingSeconds: 60,
    verificationButtonText: '发送验证码'
  },

  onPhoneInput(event) {
    // 处理手机号输入
    this.setData({
      phoneNumber: event.detail.value
    });
  },

  sendVerificationCode() {
    // 发送验证码时的处理
    if (this.data.remainingSeconds === 60) {
      // 设定倒计时定时器
      const countdownIntervalId = setInterval(() => {
        this.setData({
          remainingSeconds: this.data.remainingSeconds - 1,
          verificationButtonText: `${this.data.remainingSeconds}s`
        });
        // 倒计时结束
        if (this.data.remainingSeconds === 0) {
          clearInterval(countdownIntervalId);
          this.setData({
            remainingSeconds: 60,
            verificationButtonText: '发送验证码',
            isWaiting: false
          });
        }
      }, 1000);
      this.setData({
        isWaiting: true
      });
    }
  }
});