1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
<el-button :disabled="leftTime > 0 && leftTime < 60" @click="send">{{ text }}</el-button>
</template>
<script>
import { getCode } from '@/api/user'
export default {
props: {
form: Object
},
data() {
return {
leftTime: 60,
loading: false,
timeout: null
}
},
computed: {
text() {
if (this.leftTime === 60) {
return this.$t('setting.getCode')
}
if (this.leftTime > 0) {
return this.leftTime + this.$t('sendSmsCode.seconds')
}
return this.$t('setting.getCode')
}
},
destroyed() {
if (this.timeout)clearTimeout(this.timeout)
},
methods: {
send() {
if (this.loading || (this.leftTime > 0 && this.leftTime < 60)) return false
this.loading = true
getCode(this.form).then(() => {
this.$message({
message: this.$t('common.success'),
type: 'success'
})
this.countDown()
}).finally(res => {
this.loading = false
})
},
countDown() {
this.leftTime--
if (this.leftTime <= 0) {
return false
}
this.timeout = setTimeout(this.countDown, 1000)
}
}
}
</script>