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

最新推荐文章于 2022-12-15 15:34:35 发布

zuoliangzhu

最新推荐文章于 2022-12-15 15:34:35 发布

阅读量490

点赞数

本文链接：https://blog.csdn.net/zuoliangzhu/article/details/90904662

版权

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

完整代码:

<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