SendSmsCode.vue 1.32 KB
<template>
    <span @click="send">{{text}}</span>
</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 '发送验证码'
            }
            if(this.leftTime > 0){
                return this.leftTime + ''
            }
            return '重新发送'
        }
    },
    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.countDown()
            }).finally(res => {
                this.loading = false
            })
        },
        countDown(){
            this.leftTime --
            if(this.leftTime <= 0){
                return false 
            }
            timeout = setTimeout(this.countDown, 1000)
        }
    }
}
</script>