Quick app sends SMS verification code +60 seconds countdown

First try fast application, write a simple SMS login function, effect:

Complete code:

<template> <! -- There can only be one root node in template --> <div class="demo-page">
    <div class='row'>
      <input type="text" placeholder='Please enter your mobile phone number' onchange="changePhoneNum"></input>
    </div>
    <div class='row'>
      <input class="codeInp" type="text" placeholder='Please enter the verification code' onchange="changeCaptcha"></input>
      <input class="codeBtn" type="button" value="{{captchaBtnVal}}" disabled='{{btnDisabled}}' onclick="getCode" />
    </div> 
    <input class="subBtn" type="button" value="Submit" onclick="sub" />
  </div>
</template>
 
<script>
import prompt from '@system.prompt'
import fetch from '@system.fetch'
import storage from '@system.storage'
 
export default {
  private: {
    phoneNum: ' ',// Mobile phone number captcha:' ', // captchaBtnVal:'Get captcha',
    btnDisabled: false
 
  },
  changePhoneNum (e) {
    this.phoneNum = e.value;
  },
  changeCaptcha (e) {
    this.captcha = e.value;
  },
  getCode () {
    var that = this;
    fetch.fetch({
      url: 'http://sms_developer.zhenzikj.com/sms/send.do',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      method: 'POST',
      responseType: 'json',
      data: {
        appId: 'Your Hazelnut cloud SMS appId',
        appSecret: 'Your Hazelnut cloud SMS appSecret',
        message: 'Your verification code: 2233',
        number: '15811111111',
        messageId: ' '
      },
      complete: function (ret) {
        if(ret.data.code == 0){ that.timer(); }}})},sub () {
    var that = this;
    prompt.showToast({
      message: 'Mobile No. :'+that.phoneNum + ', verification code :'+ that. Captcha})}, //60 seconds timer:function () {
    var that = this;
    var second = 60;
    that.btnDisabled = true;
    var setTimer = setInterval(function(){
        that.captchaBtnVal = second+'秒';
        second--;
        if(second <= 0){
          that.captchaBtnVal = 'Get captcha';
          that.btnDisabled = false;
          clearInterval(setTimer); }}, 1000); } } </script> <style> .demo-page { flex-direction: column; justify-content: flex-start; align-items: center; background: linear-gradient(#5681d7, #486ec3);
    padding: 10px;
  }
.row{
    height: 80px;
    width: 100%;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #ffffff;
    display: flex;
 
  }
  .codeInp{
    flex: 1;
  }
  .codeBtn{
  color: #bbb;
  width: 30%;
  height: 80px;
  width: 190px;
  text-align: center;
}
.subBtn{
  width: 200px;
  height: 80px;
  background-color: #ffffff;
  color: # 000;
  border-radius: 50px;
 
}
</style>Copy the code

Send SMS using hazelnut cloud SMS, need to register after application appId, appSecret