在做手机app的时候难免会遇到短信验证码问题,身为做Android原生的我,接触ionic 也有半年多,但界面设计对我来说真的很头疼,这不搞了个验证码废了很大的劲,分享出来与大家共享。其实代码没多少比较简单
1.html中
<ion-item >
<ion-label>
验 证 码
</ion-label>
<ion-input placeholder="请输入验证码" [(ngModel)]="item.phoneCode"></ion-input>
<button color="custom" item-right ion-button (click)="getCode()" [disabled]="!verifyCode.disable">{{verifyCode.verifyCodeTips}}</button>
</ion-item>
2.ts中
//验证码倒计时
verifyCode: any = {
verifyCodeTips: "获取验证码",
countdown: 120,//总共时间
disable: true
}
//倒计时
settime() {
if (this.verifyCode.countdown == 0) {
debugger
this.verifyCode.verifyCodeTips = "获取验证码";
this.verifyCode.disable = true;
return;
} else {
this.verifyCode.countdown--;
}
setTimeout(() => {
this.verifyCode.verifyCodeTips = "重新获取" + this.verifyCode.countdown + "秒";
this.settime();
}, 1000);
}
再从后台获取到时间的时候调用settime()即可。