uniapp倒计时按钮,点击发送短信触发倒计时

uniapp倒计时按钮,点击发送短信和倒计时

个人开发时所需用到的，记录下来，便于下次快速使用

<template>
    <view class="box">
        <view class="flex-box">
            <view>
                <text>新手机号码:</text>
            </view>
            <view>
                <input value="" v-model="newPhone" placeholder="输入手机号码" />
            </view>
        </view>
        <view class="flex-box">
            <view>
                <input class="passwordInput" type="text" value="" v-model="code" placeholder="输入验证码"/>
            </view>
            <view class="codeBtn" @click="getCaptcha">
               <text>{{time==0? captchaText:time + 's重新获取'}}</text>
            </view>
        </view>
        <view style=" margin-top: 50px;">
            <u-button text="立即更改"  type="primary" @click="submit"></u-button>
        </view>

    </view>
</template>


<script>

export default {
    data() {
        return {
            sendAuthCode:true,
            newPhone:'',
            code:'',
            time:0,
            captchaText:'获取验证码'
        }
    },
    computed: {
       
    },
    methods: {
        getCaptcha() {
            if(!this.newPhone) {
                return this.$u.toast('请输入手机号码')
            }
            console.log('this.newPhone',this.newPhone)
            if (this.time != 0) {
                uni.showToast({
                    title: '请'+this.time+'s后再重新获取',
                    icon: 'none'
                })
                return false
            }
            text(this.newPhone).then((res) => {
                if(res) {
                   this.$u.toast('验证码已发送')
                }
            })
            const that = this
            that.captchaText = '重新获取'
            that.time = 60
            const fn = setInterval(function() {
                that.time--
                if (that.time==0) {
                    clearInterval(fn)
                }
            }, 1000);
        },
        submit() {
             if(!this.newPhone || !this.code) {
                return this.$u.toast('请输入手机号码和验证码')
            }
            let data = {
                phone:this.newPhone,
                verifyCode:this.code
            }
            submitPhone(data).then((res) => {
                if(res) {
                    this.$u.toast('更改成功')
                }
            })
        }
    }
}
</script>