微信小程序获取验证码倒计时60秒案例

<viewclass="container"><formcatchsubmit="login"><viewclass="inputView"><inputclass="inputText"placeholder="请输入手机号"name="phone"bindblur="phone"/></view><viewclass="inputView"><inputclass="inputText"placeholder="请输入验证码"bindinput="codeInput"maxlength="4"name="codeInput"value="{{codeInput}}"/><buttonbindtap="sendcode"disabled="{{smsFlag}}"size="mini"class="line">{{sendTime}}</button></view><viewclass="loginBtnView"><buttonclass="loginBtn"type=""formType="submit"bindtap="login">登录</button></view></form></view>

Page{
/* background-color: #24CDB2; */font-size: 16px;
}
.container { 
display: flex;  
flex-direction: column; 
padding: 0; 
   } 
   .inputView { 
line-height: 45px; 
width: 90%;
margin: 30pxauto;
border-bottom:1pxsolid#999999;
background-color: #fff;
   } 
  .title{
width: 100%;
font-weight: bold;
font-size: 26px;
text-align: center;
margin-top: 50px; 
/* background-color: #686767; */color:  #686767;
  }
   .inputText { 
display: inline-block;
width: 200px;
/* background-color: #ccc;  */line-height: 45px; 
padding-left: 10px; 
margin-top: 11px;
color: #9b9999; 
font-size: 14px;
   } 
   .line {
border: 1pxsolid#686767;
border-radius: 20px; 
float: right; 
margin-top: 9px;
color: #686767;
   } 
   .loginBtn { 
margin-top: 60px; 
border-radius:30px;
width: 60%;
background-color: #24CDB2;
color: #686767;
font-weight: 600;
   }
   .logo{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 10pxauto;
   }

// pages/my/my.jsPage({
/*** 页面的初始数据*/data: {
phone:'',
code: '',
adminInput: '',
sendTime: '',
codeInput: '',
sendTime: '获取验证码',
// sendColor: '#363636',snsMsgWait: 60,
  },
//   存入sensoronLoad(){
  },
/*** 获取手机号并验证*/phone(e){
//console.log(e.detail.value)letphone=e.detail.valueletreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if(!reg.test(phone)){
// 弹窗提示wx.showToast({
title: '手机号码格式不正确',
icon:"none",
duration:2000      })
returnfalse;
    }
this.setData({phone:phone})
wx.setStorage({
key:"user_id",
data:phone        })
  },
/*** 获取验证码*/adminNameInput (e) {
this.setData({
adminInput: e.detail.value    })
  },
sendcode:function(){
varinter=setInterval(function(){
this.setData({
smsFlag:true,
sendTime: this.data.snsMsgWait+'s后重发',
snsMsgWait: this.data.snsMsgWait-1        });
if(this.data.snsMsgWait<0){
clearInterval(inter)
//smsFlag: falsethis.setData({
sendTime: '获取验证码',
snsMsgWait: 60,
smsFlag: false            })
        }
    }.bind(this),600)
letphone=this.data.phonewx.request({
url: 'https://app.clovedu.cn/api/face_code', //仅为示例，并非真实的接口地址data: {
user_phone:phone        },
header: {
'content-type': 'application/json'// 默认值      },
method:'POST',
success (res) {
console.log(res)
// 发送验证码错误信息if(!res.statusCode==200){
letinfo=res.data.msgwx.showToast({
title: info,
icon:"error"          })
        }
// 验证码发送成功提示if(res.statusCode==200){
wx.showToast({
title: '验证码已发送',
icon:"success"          })
        }
// 频繁点击提示if(res.code==100){
wx.showToast({
title: '点击频繁',
icon:"error"          })
        }
      }
    })
},
codeInput (e) {
this.setData({
codeInput: e.detail.value    })
  },
/*** 点击登录*/login(e){
console.log(e.detail.value.code)
letsms=e.detail.value.codeletphone=e.detail.value.phoneif(phone==""){
wx.showToast({
title: '手机号不能为空',
icon:"error"    })
  }
if(sms==""){
wx.showToast({
title: '验证码不能为空',
icon:"error"    })
  }
wx.request({
url: 'https://app.clovedu.cn/api/face_login', //仅为示例，并非真实的接口地址data: {
code:sms,
user_phone:phone    },
header: {
'content-type': 'application/json'// 默认值    },
success:(e)=>{
console.log(e)
// 登录失败返回错误提示if(e.data.code==100){
letinfo=e.data.msgwx.showToast({
title: info,
icon:"error"        })
      }
    }
  })
},
})