第一步:引用vant的组件van-password-input
van-password-input
:value="value"
:mask="false"
:length="4"
:focused="showKeyboard"
:gutter="32"
@focus="showKeyboard = true"
/>
第二步 监听输入框的值进行调取接口
value(value) {
if (value.length === 4){
this.showKeyboard = false
this.$toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
duration:1000
})
let request = {
phone: this.phone,
smsCode: value,
platform: 'h5'
}
this.axios.post('api/v1/user/login', request).then((data) => {
if(data.data.msg === 'success'){
this.$router.push({ path: 'wallet' })
localStorage.setItem('token',data.data.data.token)
localStorage.setItem('userId',data.data.data.user.userId)
} else {
this.$toast('短信验证码错误')
return false
}
})
} else if (value.length > 4) {
return false
}
}