unaipp 发送验证码倒计时

view代码

<view class="margin-top" @tap="getCheckNum()">
      <view class="bg-purple">{{!codeTime?'获取验证码':codeTime+'s' + '后重试'}}</view>
</view>

css代码

.bg-purple {
    text-align: center;
    line-height: 45px;
    border-radius: 50px;
 }

js代码

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


    }

 

posted @ 2020-07-05 15:50  奔跑的前端猿  阅读(270)  评论(0编辑  收藏  举报