如图我看有要这种需求的随便贴一下,随便看一下。有需要的根据自己的业务修改一下就OK了
`
<div class="title">请输入验证码</div>
<div class="conBox">
<div class="concon">
<block v-for="item in verCodeNumber" :key="index">
<input
:value="inputValue.length >= index+1 ? inputValue[index] : '' "
class='conNum'
disabled
@tap='Tap'
></input>
</block>
</div>
<input
class="hiddenInput"
type="number"
name=""
:maxlength="verCodeNumber"
v-model="inputValue"
bindinput="Focus"
:focus="isFocus"
@input="!Focus"
/>
</div>
<div class="sendAgain" @click="handleClickSendAgainBtn">{{second}}</div>
</div>
`
data(){
return{
verCodeNumber:4,
inputValue:"",
isFocus:false,
second:"",
phoneNum:"",
canClickAgainSend:true,
}
},
watch:{
inputValue(newValue){
console.log(newValue)
if(newValue == ""){ //为空 关闭键盘 失去焦点
this.isFocus = false
}else if(newValue.length >= this.verCodeNumber){//输入完成 关闭键盘 接口校验验证码
this.isFocus = false
this.mesCodeSendTest()
console.log("输入完成")
}
}
},
mounted(){
this.phoneNum = this.$root.$mp.query.phoneNum;
this. startTiming();
this.canClickAgainSend = false
},
methods:{
Focus(e){
console.log(e)
},
Tap(){
this.isFocus = true
},
startTiming(){
var that = this;
this.$wxhttp.post({
host:'app',
url:'sendSmsCode',
data: {
phone:that.phoneNum,
smsType:3
},
}).then((res)=>{
console.log(res)
that.canClickSendMessage = false;
if(res.status != '000000') {
wx.showToast({
title: res.message,
icon: 'none',
duration: 1000
})
setTimeout(()=>{
wx.navigateBack({
delta: 1
})
},1000)
}else{
var i = 60
var timer = setInterval(()=>{
i--
that.second = i +"秒之后重新发送验证码"
if(i == 0){
that.second = '重新发送'
clearInterval(timer);
this.canClickAgainSend = true
}
},1000)
}
})
},
handleClickSendAgainBtn(){
this.startTiming()
},