js实现获取验证码倒计时
框架:vue + vuex效果图:代码实现:<template><div class="container"><x-header style="background-color:#30A2F4;">城市服务</x-header><div class="common"></div>...
·
框架:vue + vuex
效果图:
代码实现:
<template>
<div class="container">
<x-header style="background-color:#30A2F4;">城市服务</x-header>
<div class="common"></div>
<group>
<x-input title="手机号 " v-model="phone"></x-input>
</group>
<group>
<x-input title="验证码" class="weui-vcode" v-model="authcode">
<x-button class="btn" @click.native="getCode" :disabled="isdisabled" slot="right" type="primary" mini>{{codeText}}</x-button>
</x-input>
</group>
<div class="paydiv">
<x-button class="btn" @click.native="confirmPay" type="primary">确定</x-button>
</div>
</div>
</template>
<script>
import { XInput, Group, XButton,XHeader } from 'vux'
import Tools from '../utils/Tools'
export default {
name: 'OrderInfo',
components: {
Tools,
XInput,
XButton,
XHeader,
Group
},
data () {
return {
phone: '',
isdisabled: false,
codeText: '获取验证码',
authcode: '123456'
}
},
mounted: function (params) {
},
methods:{
confirmPay:function (params) {
console.log('click confirmPay');
this.$router.push('/result')
},
getCode:function (e){
console.log("获取验证码");
this.setTime();
},
setTime:function (){
let time = 60;
let i = 0;
let that = this;
//1.在60秒之内,button上倒计时60秒,并显示
//2.向controller请求验证码,并发送到指定的手机号上面
let set = setInterval(function() {
that.codeText = (--time)+"秒后重发";
i++;
//此变量用于标识只调用一次获取验证码的函数
if (i==1) {
console.log("get code start1 ... ");
//使获取验证码按钮不可点击
that.isdisabled=true
that.getVerificationCode();
}
}, 1000);
//60秒之后需要做的事情
setTimeout(function() {
//恢复获取验证码按钮可点击
that.isdisabled=false
that.codeText = "获取验证码";
clearInterval(set);//清除计时器
}, time * 1000); //60000
},
getVerificationCode: function(){
//向服务器获取验证码
console.log("get code start2 ... ");
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
width: 100%;
}
.common{
margin-top: 15px;
}
.paydiv{
width: 94%;
margin-top: 20%;
padding-left: 3%;
padding-right: 3%;
}
.btn{
background-color: #30A2F4;
}
.btn:active {
background-color: #30A2F4;
}
</style>
更多推荐
已为社区贡献16条内容
所有评论(0)