unaipp 发送验证码倒计时

小半 • 2023年8月11日上午9:50 • 前端开发 • 阅读 244

不管现实多么惨不忍睹，都要持之以恒地相信，这只是黎明前短暂的黑暗而已。不要惶恐眼前的难关迈不过去，不要担心此刻的付出没有回报，别再花时间等待天降好运。真诚做人，努力做事！你想要的，岁月都会给你。unaipp 发送验证码倒计时，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

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


    }