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

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

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

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. //60秒倒计时
  61. timer: function () {
  62. var that = this;
  63. var second = 60;
  64. that.btnDisabled = true;
  65. var setTimer = setInterval(function(){
  66. that.captchaBtnVal = second+'秒';
  67. second--;
  68. if(second <= 0){
  69. that.captchaBtnVal = '获取验证码';
  70. that.btnDisabled = false;
  71. clearInterval(setTimer);
  72. }
  73. }, 1000);
  74. }
  75. }
  76. </script>
  77. <style>
  78. .demo-page {
  79. flex-direction: column;
  80. justify-content: flex-start;
  81. align-items: center;
  82. background: linear-gradient(#5681d7, #486ec3);
  83. padding: 10px;
  84. }
  85. .row{
  86. height: 80px;
  87. width: 100%;
  88. border-radius: 10px;
  89. margin-top: 50px;
  90. margin-bottom: 50px;
  91. background-color: #ffffff;
  92. display: flex;
  93. }
  94. .codeInp{
  95. flex: 1;
  96. }
  97. .codeBtn{
  98. color: #bbb;
  99. width: 30%;
  100. height: 80px;
  101. width: 190px;
  102. text-align: center;
  103. }
  104. .subBtn{
  105. width: 200px;
  106. height: 80px;
  107. background-color: #ffffff;
  108. color: #000;
  109. border-radius: 50px;
  110. }
  111. </style>
复制代码

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

回复

使用道具 举报

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