<template> <el-button @click="send" :disabled="leftTime > 0 && leftTime < 60">{{text}}</el-button> </template> <script> import {sendSmsCode} from '@/api/ecw/orderCargoControl' let 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 + this.$t('秒') } 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>