写在前面
短信验证现在做项目几乎是必备技能,现在我帮我最近这个项目的这一功能实现分享给大家,希望有所帮助。
先上效果图
html代码
<view class="match-row form-item">
<view class="title">手机号</view>
<input placeholder-class="in-text" :disabled="IDNumber != ''?true:false" placeholder="请输入手机号" v-model="Phone" @blur="checkPhone" />
<view class="checking" @tap="handleCode" v-if="IDNumber == ''">{{codeBtn}}</view>
</view>
<view class="match-row form-item" v-if="IDNumber == ''">
<view class="title">短信验证码</view>
<input class="input-text" v-model="code" placeholder="请输入短信验证码" placeholder-class="in-text" type="text" />
</view>
js代码
data() {
return {
Phone: '',
codeBtn: '获取验证码',
code: '',
isClick2: true,
};
},
methods: {
//获取验证码
handleCode() {
var that = this;
let count = 60;
if (that.Phone == '') {
uni.showToast({
title: '手机号不能为空',
duration: 1000,
icon: 'none'
});
} else if (that.isClick2) {
that.isClick2 = false;
let timer = setInterval(function() {
count--;
that.codeBtn = '获取中(' + count + ')';
if (count == 0) {
that.isClick2 = true;
clearInterval(timer)
that.codeBtn = '重新获取';
}
}, 1000)
that.utils.sendRequest('/api/publicc/send_code', 'GET', {
mobile: that.Phone
}).then(function(res) {
if (res.data.code == 1) {
uni.showToast({
title: '已发送,请注意查收',
duration: 1000,
icon: 'none'
});
}
})
}
},
},
创作不易,点个赞吧!!
版权声明:如无特殊说明,文章均为本站原创,转载请注明出处
本文链接:https://blog.csdn.net/wsad861512140