1.html
<template>
<div class="forgrtCode">
<mt-header title="忘记密码" class="headerBox">
<mt-button
icon="back"
slot="left"
class="backBox"
@click="backAction">返回</mt-button>
</mt-header>
<div class="codeInputBox">
<!--手机号-->
<el-input
class="phoneNum"
type="tel"
v-model="phoneNum"
placeholder="手机号"
>
</el-input>
<!--验证码-->
<div class="codeBox">
<el-input
class="codeNum"
type="tel"
v-model="codeNum"
placeholder="验证码"
>
</el-input>
<!--/倒计时触发按钮-->
<mt-button
class="codeBtn"
:class="{hwDisables:captchaDisable}"
type="default"
@click="codeBtnAction"
v-bind:disabled="captchaDisable"
>{{captchaLabel}}</mt-button>
</div>
</div>
<!--注册-->
<mt-button
class="nextBottomBtn"
type="default"
@click.native="registerBottomBtnAction"
v-bind:disabled="isClickAble">
下一步</mt-button>
</div>
</template>
2.js
<script>
import kTimer from '../../../../src/components/Lib/Timer/timer'
import {Toast} from 'mint-ui'
export default {
data:function () {
return {
phoneNum:'',
codeNum:'',
captchaLabel:"获取验证码",
seconds:15,
captchaDisable:false,
}
},
methods:{
//导航返回
backAction:function () {
this.$router.back()
},
//获取验证码点击
codeBtnAction:function () {
if(this.phoneNum==""){
Toast('请填写手机号!');
return;
}
//发送网络请求
// this.codeBtnActionAPI();
this.captchaDisable = true;
//立即显示重发提示不必等待倒计时启动
this.captchaLabel =this.seconds+'秒后重新发送';
//启动1s步长倒计时
var interval = setInterval(()=>{
kTimer.countdown(this)
console.log(this.seconds)
if(this.seconds == 15){
//停止倒计时
clearTimeout(interval)
}
},1000);
}
},
computed:{
isClickAble:function () {
if(this.phoneNum!==''&&this.codeNum!==''){
return false
}
return true;
}
}
}
</script>
3.css
<style>
.forgrtCode{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
}
.forgrtCode .headerBox{
background: #da9c5f !important;
}
/*输入框*/
.codeInputBox{
margin-top: 60px;
}
.registerBox .inputBox{
padding: 0 20px;
margin-top: 20px;
}
/*普通状态*/
.forgrtCode .phoneNum input{
border-color: white;
border-radius: 0 ;
border-bottom: 1px solid #eeeeee ;
width: 80%;
margin-left: 10%;
margin-top: 10px;
}
/*高亮状态下面添加直线*/
.forgrtCode .phoneNum :focus{
border-bottom: 1px solid #da9c5f ;
padding-right: 100px;
}
/*验证码容器*/
.forgrtCode .codeBox{
margin-top: 20px;
width:80%;
margin-left: 10%;
position: relative;
}
/*输入框普通状态*/
.forgrtCode .codeNum input{
border-color: white;
border-radius: 0 ;
border-bottom: 1px solid #eeeeee ;
}
/*高亮状态下面添加直线*/
.forgrtCode .codeNum :focus{
border-bottom: 1px solid #da9c5f ;
}
.forgrtCode .codeBox .codeNum{
margin-right: 10px !important;
}
.forgrtCode .codeBox .codeBtn{
position: absolute;
right: 0;
top: 0;
font-size: 13px;
height: 32px;
color: white;
background: #da9c5f;
}
/*按钮*/
.nextBottomBtn{
margin-top: 40px;
width: 80%;
margin-left: 10%;
background: #da9c5f !important;
color: white;
}
</style>
4.timer.js
/**
* Created by lvkk on 17/11/14.
*/
var length = 15;
function countdown(that) {
//console.log('count down'+that.seconds);
var seconds = that.seconds;
//console.log(seconds);
var captchaLabel = that.captchaLabel;
if (seconds < 1) {
captchaLabel = '获取验证码';
seconds = length;
that.captchaDisable = false;
} else {
captchaLabel = --seconds + '秒后重新发送'
}
that.seconds = seconds;
that.captchaLabel = captchaLabel;
}
module.exports = {
countdown: countdown,
length: length
}