ionic typescript--验证码发送功能

Posted 2020-11-06 睡到自然醒

1.新建页面

ionic g page forget

 

2.mode.html文件

<ion-item>
<ion-input clearInput [(ngModel)]=‘code‘ placeholder=‘请输入验证码‘></ion-input>
<button clear ion-button class="i" item-end (tap)="getCode()" [disabled]="!verifyCode.disable">
{{verifyCode.verifyCodeTips}}
</button>
</ion-item>

要点：[disabled]="!verifyCode.disable" 为true时才会允许点击

 

 

 

 

3.demo.ts文件

import { Component } from ‘@angular/core‘;
import { NavController, NavParams } from ‘ionic-angular‘; 


@Component({ 
selector: ‘page-forget‘, 
templateUrl: ‘forget.html‘, 
}) 
export class ForgetPage { 

codeParam = {
    fromflag: 2,
    usertel: "130123123"
  }
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,

  }

  ionViewDidLoad() {
    console.log(‘ionViewDidLoad RegisterpasswordPage‘);
  }
// 验证码倒计时
verifyCode: any = {
  verifyCodeTips: "获取验证码",
  countdown: 60,
  disable: true
}
// 倒计时
settime() {
  if (this.verifyCode.countdown == 1) {
  this.verifyCode.countdown = 60;
  this.verifyCode.verifyCodeTips = "获取验证码";
  this.verifyCode.disable = true;
  return;
  } else {
  this.verifyCode.countdown--;
  }

  this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")";
  setTimeout(() => {
  this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")";
  this.settime();
  }, 1000);
}
getCode() {
  if (this.codeParam.usertel == ‘‘) {
  console.debug("请填写手机号!");
  return;
  }
  else{
  let alert = this.alertCtrl.create({
    title: ‘提示‘,
    subTitle: ‘验证码发送成功，请注意查收！‘,
    buttons: [‘确定‘]
  });
  alert.present();
  
  //发送验证码成功后开始倒计时

  this.verifyCode.disable = false;
  this.settime();
}
}