SendSmsCode.vue

<template>
    <el-button @click="send" :disabled="leftTime > 0 && leftTime < 60">{{text}}</el-button>
</template>
<script>
import {sendSmsCode} from '@/api/ecw/orderCargoControl'
const timeout = null
export default {
    props:{
        orderId: [String, Number],
        scene: [String, Number]
    },
    data(){
        return {
            leftTime: 60,
            loading: false
        }
    },
    computed:{
        text(){
            if(this.leftTime === 60){
                return this.$t('发送验证码')
            }
            if(this.leftTime > 0){
                return this.leftTime + '秒'
            }
            return this.$t('重新发送')
        }
    },
    destroyed(){
        if(timeout)clearTimeout(timeout)
    },
    methods:{
        send(){
            if(this.loading || (this.leftTime > 0 && this.leftTime < 60)) return false
            this.loading = true
            sendSmsCode({
                orderId: this.orderId,
                scene: this.scene
            }).then(res => {
                this.$message.success(this.$t('发送成功'))
                this.countDown()
            }).finally(res => {
                this.loading = false
            })
        },
        countDown(){
            this.leftTime --
            if(this.leftTime <= 0){
                return false 
            }
            timeout = setTimeout(this.countDown, 1000)
        }
    }
}
</script>