免费发布

uni-app实现获取验证码倒计时功能

  • 时间:2020-11-02 08:37:51
  • 其它文章
  • 浏览量:0
  • 发布会员:newlegou
  • 举报
  • 本文实例为大家共享了uni-app实现获取验证码倒计时的详细代码,供大家参考,详细内容如下

    实现的效果

    网页部分是一个三目运算,codeTime是倒计时的时间。

    <template>
     <view>
     <view class="three">
     <view class="get" @tap="getCheckNum()">
     <text>{{!codeTime?'获取验证码':codeTime+'s'}}</text>
     </view>
     <view class="all">
     <view class="left">验证码</view>
     <input v-model="mydata.checkNum" placeholder="请输入验证码"/>
     </view>
     <button class="btn" @tap='sure'>确认</button>
     </view>
     </view>
    </template>

    详细思路:

    三目运算,判断codeTime的值,当为0的时候显示文字“获取验证码”,大于0的时候显示验证码的倒计时。codeTime默认为0.

    这里有个问题就是,如何阻止用户在倒计时还没结束的时候一直点击,影响倒计时。

    解决办法是写个判断,当codeTime大于60的时候,弹窗提示用户不能重复获取验证码。当倒计时运行完了之后要清除倒计时。

    代码:

    <script>
     export default {
     data() {
     return {
      codeTime:0,
     }
     },
      methods: {
       getCheckNum(){
     if(this.codeTime>0){
      uni.showToast({
      title: '不能重复获取',
      icon:"none"
      });
      return;
     }else{
      this.codeTime = 60
      let timer = setInterval(()=>{
      this.codeTime--;
      if(this.codeTime<1){
      clearInterval(timer);
      this.codeTime = 0
      }
      },1000)
        }
       }
      }
    }

    css风格:

    .all{
     margin: 30rpx;
     border-bottom: 2rpx solid #EEEEEE;
     display: flex;
     flex-wrap: nowrap;
    }
    .left{
     margin-bottom: 30rpx;
     margin-right: 40rpx;
     width: 150rpx;
    }
    .three{
     background-color: white;
     width: 92%;
     border-radius: 10rpx;
     padding: 20rpx 0;
     margin: 20rpx auto;
     position: relative;
    }
    .btn{
     background-color: orange;
     font-size: 28rpx;
     width: 160rpx;
     height: 70rpx;
     line-height: 70rpx;
     margin-top: 40rpx;
     color: white;
     font-weight: 600;
    }
    .get{
     position: absolute;
     top: 40rpx;
     right: 30rpx;
     background-color: orange;
     height: 70rpx;
     line-height: 70rpx;
     color: white;
     border-radius: 10rpx;
     padding: 0 20rpx;
    }


    提示:喜欢这个作品给它点个红心和关注吧
    newlegou