快应用发送短信验证码+60秒倒计时

初试快应用，写个简单的短信登录功能，效果:

屏幕快照 2019-06-05 16.30.19.png

完整代码:

<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