手写获取手机验证码按钮-适用vue，uniapp

template

                    <uni-forms-item label="验证码" name="code" style="position: relative;">
                        <input maxlength="6" type="number" placeholder="请输入验证码" v-model="formData.code">
                        <view class="codeButton" @click="getCode">{{codeText}}</view>
                    </uni-forms-item>

 

script

if(this.codeText == '获取验证码' || this.codeText == '重新获取') {
                    // console.log('发起请求获取验证码')
                    // n秒后重新获取
                    let n = 60
                    this.codeText = n + '秒后重新获取'
                    // 定时器递减，开始倒计时
                    let timeout = setInterval(() => {
                        // 倒计时归0，清除定时器
                        if(n <= 1) {
                            // 重置文字
                            this.codeText = '重新获取'
                            // 清除定时器
                            clearInterval(timeout)
                            return
                        }
                        this.codeText = --n + '秒后重新获取'
                    }, 1000)
                    
                    // 发起获取验证码的请求
                    auth.getCaptcha({phone: this.formData.phone}).then(() => {
                        uni.showToast({
                            icon: 'none',
                            title: '验证码已发送'
                        })
                    }).catch(err => {
                        uni.showToast({
                            icon: 'none',
                            title: '验证码获取失败'
                        })
                        console.log('验证码获取失败', err)
                    })