vue+vant 實(shí)現(xiàn)手機(jī)號(hào) 獲取驗(yàn)證碼頁(yè)面
html
<van-field label="手機(jī)號(hào)"
v-model="phone"
center
required
placeholder="請(qǐng)輸入手機(jī)號(hào)"
:border="true" />
<van-field v-model="sms"
center
required
clearable
label="驗(yàn)證碼"
placeholder="請(qǐng)輸入驗(yàn)證碼"
:border="false"
use-button-slot>
<van-button slot="button"
size="small"
type="primary"
@click="gainCode">{{time}}</van-button>
</van-field>
js
data() {
return {
isClick: true,
time: '獲取驗(yàn)證碼',
phone: '',
sms: '',
}
},
methods:{
// 獲取驗(yàn)證碼
async gainCode() {
if (this.isClick) {
if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)) {
const res = await sendVerifyCode({ phone: this.phone }) // 獲取驗(yàn)證碼接口
this.isClick = false
let s = 60
this.time = s + 's'
let interval = setInterval(() => {
s--
this.time = s + 's'
if (s < 0) {
this.time = '重新獲取'
this.isClick = true
clearInterval(interval)
}
}, 1000)
} else {
Toast.fail('請(qǐng)輸入正確的手機(jī)號(hào)碼')
}
}
},
}
效果
image
第一次獲取
第二次獲取
