请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

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

0
回复
290
查看
[复制链接]

1

主题

1

帖子

10

积分

 楼主| 2019-6-5 16:35:55 显示全部楼层 |阅读模式

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

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

完整代码:

  1. <template>
  2.   <!-- template里只能有一个根节点 -->
  3.   <div class="demo-page">
  4.     <div class='row'>
  5.       <input type="text" placeholder='请输入手机号' onchange="changePhoneNum"></input>
  6.     </div>
  7.     <div class='row'>
  8.       <input class="codeInp" type="text" placeholder='请输验证码' onchange="changeCaptcha"></input>
  9.       <input class="codeBtn" type="button" value="{{captchaBtnVal}}" disabled='{{btnDisabled}}' onclick="getCode" />
  10.     </div>
  11.     <input class="subBtn" type="button" value="提交" onclick="sub" />
  12.   </div>
  13. </template>

  14. <script>
  15. import prompt from '@system.prompt'
  16. import fetch from '@system.fetch'
  17. import storage from '@system.storage'

  18. export default {
  19.   private: {
  20.     phoneNum: '',//手机号
  21.     captcha: '', //验证码
  22.     captchaBtnVal: '获取验证码',
  23.     btnDisabled: false

  24.   },
  25.   changePhoneNum (e) {
  26.     this.phoneNum = e.value;
  27.   },
  28.   changeCaptcha (e) {
  29.     this.captcha = e.value;
  30.   },
  31.   getCode () {
  32.     var that = this;
  33.     fetch.fetch({
  34.       url: 'http://sms_developer.zhenzikj.com/sms/send.do',
  35.       header: {
  36.         'Content-Type': 'application/x-www-form-urlencoded'
  37.       },
  38.       method: 'POST',
  39.       responseType: 'json',
  40.       data: {
  41.         appId: '你的榛子云短信appId',
  42.         appSecret: '你的榛子云短信appSecret',
  43.         message: '您的验证码: 2233',
  44.         number: '15811111111',
  45.         messageId: ''
  46.       },
  47.       complete: function (ret) {
  48.         if(ret.data.code == 0){
  49.            that.timer();
  50.         }
  51.       }
  52.     })
  53.   },
  54.   sub () {
  55.     var that = this;
  56.     prompt.showToast({
  57.       message: '手机号:'+that.phoneNum + ',验证码:' +  that.captcha
  58.     })
  59.    
  60.    
  61.   },
  62.   //60秒倒计时
  63.   timer: function () {
  64.     var that = this;
  65.     var second = 60;
  66.     that.btnDisabled = true;
  67.     var setTimer = setInterval(function(){
  68.         that.captchaBtnVal = second+'秒';
  69.         second--;
  70.         if(second <= 0){
  71.           that.captchaBtnVal = '获取验证码';
  72.           that.btnDisabled = false;
  73.           clearInterval(setTimer);
  74.         }
  75.     }, 1000);
  76.   }
  77. }
  78. </script>

  79. <style>
  80.   .demo-page {
  81.     flex-direction: column;
  82.     justify-content: flex-start;
  83.     align-items: center;
  84.     background: linear-gradient(#5681d7, #486ec3);
  85.     padding: 10px;
  86.   }
  87. .row{
  88.     height: 80px;
  89.     width: 100%;
  90.     border-radius: 10px;
  91.     margin-top: 50px;
  92.     margin-bottom: 50px;
  93.     background-color: #ffffff;
  94.     display: flex;

  95.   }
  96.   .codeInp{
  97.     flex: 1;
  98.   }
  99.   .codeBtn{
  100.   color: #bbb;
  101.   width: 30%;
  102.   height: 80px;
  103.   width: 190px;
  104.   text-align: center;
  105. }
  106. .subBtn{
  107.   width: 200px;
  108.   height: 80px;
  109.   background-color: #ffffff;
  110.   color: #000;
  111.   border-radius: 50px;

  112. }
  113. </style>
复制代码

发送短信使用的是榛子云短信,需要注册后申请appId、appSecret


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册