直接贴代码:
HTML
<div class="phone">
<div class="number">
<p class="tip">手机号码<span style="color: #ff0000;">*</span></p>
<input type="number" class="info" :placeholder="question.prompt_content" v-model="phoneObj"/>
</div>
<div class="number">
<p class="tip"> </p>
<input type="number" class="checkPhone" placeholder="请输入验证码" v-model="checkNumberObj"/>
<button :disabled="fetchCodeMsg || false" class="getCheckNumber" :class="{unselected: fetchCodeMsg}" @click="getCheckNumber(question.question_id)">{{timerCodeMsg||'获取验证码'}}</button>
</div>
</div>
CSS
.number{
height: torem(100px);
line-height: torem(100px);
padding-left: torem(20px);
position: relative;
float: left;
width: 100%;
border-bottom: 1px solid #dddddd;
.unselected{
background-color: #cccccc !important;
}
.tip{
font-size: torem(28px);
color: #000000;
width: torem(260px);
position: relative;
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.info{
font-size: torem(28px);
color: #000000;
width: torem(450px);
}
.checkPhone{
width: torem(220px);
font-size: torem(28px);
color: #000000;
padding-right: torem(30px);
}
.getCheckNumber{
width: torem(180px);
height: torem(54px);
color: #ffffff;
background-color: #2E97DD;
font-size: torem(28px);
position: relative;
float: right;
border-radius: torem(6px);
text-align: center;
line-height: torem(54px);
margin-top: torem(24px);
margin-right: torem(30px);
}
}
JS
data(){
return {
phoneObj: '', // phoneOb
timerCodeMsg: '', // timerCodeMsg
fetchCodeMsg: '', // fetchCodeMsg
}
}
getCheckNumber () {
let newPhone = this.phoneObj
if (!(/^1[34578]\d{9}$/.test(newPhone))) {
Toast('手机号码有误,请重填')
return false
} else {
this.$root._axios('post', 'CheckCodeApi/sendSmSodeReserve', {phone: newPhone})
.then(res => {
if (res.data.errcode === 0) {
let sec = 60
for (let i = 0; i <= 60; i++) {
window.setTimeout(() => {
if (sec != 0) {
this.timerCodeMsg = sec + '秒后重发'
this.fetchCodeMsg = true
sec--
} else {
sec = 60 // 如果倒计时结束就让 获取验证码显示出来
this.timerCodeMsg = '重新发送'
this.fetchCodeMsg = false
}
}, i * 1000)
}
}
})
}
}