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

laozuo

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

完整代码:

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>
15. <script>
16. import prompt from '@system.prompt'
17. import fetch from '@system.fetch'
18. import storage from '@system.storage'
20. export default {
21. private: {
22. phoneNum: '',//手机号
23. captcha: '', //验证码
24. captchaBtnVal: '获取验证码',
25. btnDisabled: false
27. },
28. changePhoneNum (e) {
29. this.phoneNum = e.value;
30. },
31. changeCaptcha (e) {
32. this.captcha = e.value;
33. },
34. getCode () {
35. var that = this;
36. fetch.fetch({
37. url: 'http://sms_developer.zhenzikj.com/sms/send.do',
38. header: {
39. 'Content-Type': 'application/x-www-form-urlencoded'
40. },
41. method: 'POST',
42. responseType: 'json',
43. data: {
44. appId: '你的榛子云短信appId',
45. appSecret: '你的榛子云短信appSecret',
46. message: '您的验证码: 2233',
47. number: '15811111111',
48. messageId: ''
49. },
50. complete: function (ret) {
51. if(ret.data.code == 0){
52. that.timer();
53. }
54. }
55. })
56. },
57. sub () {
58. var that = this;
59. prompt.showToast({
60. message: '手机号:'+that.phoneNum + ',验证码:' + that.captcha
61. })
64. },
65. //60秒倒计时
66. timer: function () {
67. var that = this;
68. var second = 60;
69. that.btnDisabled = true;
70. var setTimer = setInterval(function(){
71. that.captchaBtnVal = second+'秒';
72. second--;
73. if(second <= 0){
74. that.captchaBtnVal = '获取验证码';
75. that.btnDisabled = false;
76. clearInterval(setTimer);
77. }
78. }, 1000);
79. }
80. }
81. </script>
83. <style>
84. .demo-page {
85. flex-direction: column;
86. justify-content: flex-start;
87. align-items: center;
88. background: linear-gradient(#5681d7, #486ec3);
89. padding: 10px;
90. }
91. .row{
92. height: 80px;
93. width: 100%;
94. border-radius: 10px;
95. margin-top: 50px;
96. margin-bottom: 50px;
97. background-color: #ffffff;
98. display: flex;
100. }
101. .codeInp{
102. flex: 1;
103. }
104. .codeBtn{
105. color: #bbb;
106. width: 30%;
107. height: 80px;
108. width: 190px;
109. text-align: center;
110. }
111. .subBtn{
112. width: 200px;
113. height: 80px;
114. background-color: #ffffff;
115. color: #000;
116. border-radius: 50px;
118. }
119. </style>

复制代码

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