获取验证码
父组件：
<sendsms :to="phoneNumber" />
子组件
<template>
<div class="sendsms">
<div class="content">
<button class="button" :disabled="smsdisable" v-text="buttonText" @click="handleSendSms()"></button>
</div>
</div>
</template>
<script>
import vuex from "vuex";
export default {
name: "sendsms",
data() {
return {
interval: null, //定时器对象
smstiming: null,
smsdisable: false,
getsms:"获取验证码",
resend: "重新获取",
};
},
props: ["to", "type"],
computed: {
buttonText: {
get() {
if (!this.smstiming) {
return this.getsms;
} else {
return this.smstiming;
}
},
set(value) {
this.smstiming = value;
}
}
},
methods: {
//倒计时
timing(timeout) {
if (this.interval) {
clearInterval(this.interval);
}
let maxtime = timeout;
this.interval = setInterval(() => {
if (maxtime > 0) {
--maxtime;
this.buttonText = maxtime;
} else {
this.buttonText = this.resend;
this.smsdisable = false;
}
}, 1000);
},
handleSendSms() {
this.smsdisable = true;
const prm = this.$server.sendSms(this.to, this.type);
prm.then(result => {
if (result.getState() === 200) {
this.timing(60);
return true;
}
if (this.interval) {
clearInterval(this.interval);
}
this.buttonText = this.resend;
this.smsdisable = false;
return false;
});
}
}
};
</script>
sendSms(to, type) {
return new Promise((resolve, reject) => {
let prm = null
if (type == 'lognin') {
prm = this.request('url', {
phone: to,
sendType: 1
})
}
if (!prm) {
return new Return('未知短信类型,发送失败')
}
prm.then((result) => {
resolve(result)
})
})
}
