快應用發送短信驗證碼+60秒倒計時

初試快應用，寫個簡單的短信登陸功能，效果:

完整代碼:

<template>
  <!-- template裏只能有一個根節點 -->
  <div class="demo-page">
    <div class='row'>
      <input type="text" placeholder='請輸入手機號' onchange="changePhoneNum"></input>
    </div>
    <div class='row'>
      <input class="codeInp" type="text" placeholder='請輸驗證碼' onchange="changeCaptcha"></input>
      <input class="codeBtn" type="button" value="{{captchaBtnVal}}" disabled='{{btnDisabled}}' onclick="getCode" />
    </div> 
    <input class="subBtn" type="button" value="提交" onclick="sub" />
  </div>
</template>
 
<script>
import prompt from '@system.prompt'
import fetch from '@system.fetch'
import storage from '@system.storage'
 
export default {
  private: {
    phoneNum: '',//手機號
    captcha: '', //驗證碼
    captchaBtnVal: '獲取驗證碼',
    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: '你的榛子云短信appId',
        appSecret: '你的榛子云短信appSecret',
        message: '您的驗證碼: 2233',
        number: '15811111111',
        messageId: ''
      },
      complete: function (ret) {
        if(ret.data.code == 0){
           that.timer();
        }
      }
    })
  },
  sub () {
    var that = this;
    prompt.showToast({
      message: '手機號:'+that.phoneNum + ',驗證碼:' +  that.captcha
    })
    
    
  },
  //60秒倒計時
  timer: function () {
    var that = this;
    var second = 60;
    that.btnDisabled = true;
    var setTimer = setInterval(function(){
        that.captchaBtnVal = second+'秒';
        second--;
        if(second <= 0){
          that.captchaBtnVal = '獲取驗證碼';
          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>複製代碼

發送短信使用的是榛子云短信，須要註冊後申請appId、appSecret