uniapp倒计时按钮,点击发送短信触发倒计时

uniapp倒计时按钮,点击发送短信和倒计时

个人开发时所需用到的，记录下来，便于下次快速使用

<template><view class="box"><view class="flex-box"><view><text>新手机号码:</text></view><view><input value="" v-model="newPhone" placeholder="输入手机号码" /></view></view><view class="flex-box"><view><input class="passwordInput" type="text" value="" v-model="code" placeholder="输入验证码"/></view><view class="codeBtn" @click="getCaptcha"><text>{{time==0? captchaText:time + 's重新获取'}}</text></view></view><view style=" margin-top: 50px;"><u-button text="立即更改"  type="primary" @click="submit"></u-button></view></view>
</template><script>export default {data() {return {sendAuthCode:true,newPhone:'',code:'',time:0,captchaText:'获取验证码'}},computed: {},methods: {getCaptcha() {if(!this.newPhone) {return this.$u.toast('请输入手机号码')}console.log('this.newPhone',this.newPhone)if (this.time != 0) {uni.showToast({title: '请'+this.time+'s后再重新获取',icon: 'none'})return false}text(this.newPhone).then((res) => {if(res) {this.$u.toast('验证码已发送')}})const that = thisthat.captchaText = '重新获取'that.time = 60const fn = setInterval(function() {that.time--if (that.time==0) {clearInterval(fn)}}, 1000);},submit() {if(!this.newPhone || !this.code) {return this.$u.toast('请输入手机号码和验证码')}let data = {phone:this.newPhone,verifyCode:this.code}submitPhone(data).then((res) => {if(res) {this.$u.toast('更改成功')}})}}
}
</script>

uniapp倒计时按钮,点击发送短信触发倒计时相关推荐

微信小程序点击发送短信验证（60秒倒计时）
微信小程序点击发送短信验证(60秒倒计时) /*** 执行计时,60s后可以重新发送短信验证码*/countdown: function() {var nsecond = 60;var that = ...
魔方APP项目-05-注册功能实现，手机号唯一验证接口、客户端进行手机号验证、保存用户注册信息接口、客户端用户进行注册、使用云通讯发送短信，服务端实现发送短信验证码的api接口、客户端实现点击发送短信
用户模块注册功能实现 1.手机号码唯一验证接口在开发中,针对客户端提交的数据进行验证或提供模型数据转换格式成字典给客户端.可以使用Marshmallow模块来进行. 为了方便导包,所以我们设置当前 ...
点发送短信无反应是很多用户在搭建优雅草蜻蜓q系统中常见问题-解决点击发送短信无反应
点发送短信无反应是很多用户在搭建优雅草蜻蜓q系统中常见问题,很多时候找不到原因,注册页面点击发送验证码无反应,此问题有两点, 1,后台短信配置有误,此处检查. 很多是模板文字配置错误可参考: 您 ...
前端HTML 点击发送短信验证 js代码
1.HTML(+js库) <div class="form-group"><label for="email_input">手机号< ...
jquery短信验证码倒计时
jquery短信验证码倒计时 1. 演示点击前: 点击后: 2. 代码 1. HTML代码 <input type="button" value="获取验证码&q ...
js开发实例 —— 发送短信验证码倒计时5S钟之后自动跳转页面
十九.发送短信验证码倒计时思路: ① 按钮点击之后,会禁用disabled为true. ② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改. ③ 里面秒数是有变化的, ...
安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时
在sina里看到了什么全民夺宝的链接,然后忍不住1元的诱惑被坑了10多块,什么都没有抽到,但是还是有人抽到了不知道是不是坑爹的,然后也就动手做一下倒计时的功能. 先看全民夺宝: 说起这个功能是不是感觉 ...
android 获取短信验证码倒计时
android 获取短信验证码倒计时 public class MainActivity extends Activity { private Button submit; privat ...
【客户下单】后台系统自动分单成功生成工单发送短信
[客户下单]后台系统自动分单成功生成工单发送短信自动分单成功,后台生成工单发送短信,否则进入人工分单流程. 生成工单,发送短信的方法抽取: //抽取的方法:生成工单发送短信 private voi ...

uniapp倒计时按钮,点击发送短信触发倒计时

uniapp倒计时按钮,点击发送短信触发倒计时相关推荐

最新文章

热门文章