一：<div?class="flex?align-items-center">
??????????????<van-button
????????????????plain
????????????????:loading="isLoadingYzm"
????????????????:class="{'border-0':codeSrc}"
????????????????color="#80CA63"
????????????????style="background:#FFFFFF;margin-top:5%"
????????????????@click="getYzm5"
??????????????>
????????????????<span?v-if="showtime===null"?>獲取驗(yàn)證碼</span>
????????????????<span?v-else>{{showtime}}</span>
??????????????</van-button>
????????????</div>
二：data()定義
??//?計(jì)時(shí)器,注意需要進(jìn)行銷毀
??????timeCounter:?null,
??????//?null?則顯示按鈕?秒數(shù)則顯示讀秒
??????showtime:?null,
三：methods里設(shè)置倒計(jì)時(shí)
?// 1，倒計(jì)時(shí)顯示處理
?countDownText(s)?{
??this.showtime?=?`${s}s后重新獲取`
?},
//2， 倒計(jì)時(shí)?60秒?不需要很精準(zhǔn)
?countDown(times)?{
??const?self?=?this;
??//?時(shí)間間隔?1秒
??const?interval?=?1000;
??let?count?=?0;
??self.timeCounter?=?setTimeout(countDownStart,?interval);
??function?countDownStart()?{
??if?(self.timeCounter?==?null)?{
???return?false;
??}
??count++
??self.countDownText(times?-?count?+?1);
??if?(count?>?times)?{
???clearTimeout(self.timeCounter)
???self.showtime?=?null;
??}?else?{
???self.timeCounter?=?setTimeout(countDownStart,?interval)
??}
??}
?},
//3，注冊(cè)根據(jù)手機(jī)號(hào)獲取驗(yàn)證碼
????getYzm()?{
??????//?根據(jù)短信注冊(cè)賬號(hào)
??????if?(this.phone?==?"")?{
????????window.vant.Toast("請(qǐng)輸入手機(jī)號(hào)碼");
????????return;
??????}?else?{
????????if?(!/^1[3456789]\d{9}$/.test(this.phone))?{
??????????window.vant.Toast("手機(jī)號(hào)碼有誤，請(qǐng)重填");
??????????return?false;?
????????}
??????}
??????this.API.sendMsg({
????????phone:?this.phone
??????})
????????.then(res?=>?{
??????????if?(res.code?==?200)?{
????????????this.countDown(60);
????????????window.vant.Toast(res.msg);
??????????}?else?{
????????????//?this.isLoadingYzm?=?false;
????????????window.vant.Toast(res.msg);
??????????}
????????})
????????.catch(err?=>?{
??????????console.log(err);
????????});
????},
