微信小程序 input输入及动态设置按钮的实现

2023-09-22 11:18:05 320

微信小程序input输入及动态设置按钮的实现

【需求】实现当手机号已填写和协议已勾选时，“立即登录”按钮变亮，按钮可点击；若有一个不满足，按钮置灰，不可点击；实现获取短信验证码，倒计时提示操作；对不满足要求内容进行toast弹窗提示。




手机号





图形验证码








验证码



{{captchaText}}






已阅读并同意《用户使用协议》

立即登录







{{toastText}}

//获取全局应用程序实例对象
constapp=getApp()

Page({
data:{
//toast默认不显示
isShowToast:false,
mobile:'',
imgCode:'',
code:'',
//inviteCode:'',
errorContent:'请输入手机号',
timer:60,
captchaText:'获取验证码',
captchaSended:false,
isReadOnly:false,
capKey:'',
sendRegist:false,
imgCodeSrc:'',
phoneAll:false,
checkAgree:true,
checkboxValue:[1],
},
//显示弹窗
showToast(txt,duration=1500){
//设置toast时间，toast内容
this.setData({
count:duration,
toastText:txt
});
var_this=this;
//toast时间
_this.data.count=parseInt(_this.data.count)?parseInt(_this.data.count):3000;
//显示toast
_this.setData({
isShowToast:true,
});
//定时器关闭
setTimeout(function(){
_this.setData({
isShowToast:false
});
},_this.data.count);
},
//双向绑定mobile
mobileInput(e){
this.setData({
mobile:e.detail.value
});

if(this.data.mobile.length===11){
this.setData({
phoneAll:true
});
}elseif(this.data.mobile.length<11){
this.setData({
phoneAll:false
});
}
},
//双向绑定img验证码
imgCaptchaInput(e){
this.setData({
imgCode:e.detail.value
});
},
//双向绑定sms验证码
smsCaptchaInput(e){
this.setData({
code:e.detail.value
});
},
//同意协议
checkboxChange(e){
this.data.checkboxValue=e.detail.value;
if(this.data.checkboxValue[0]==1){
this.setData({
checkAgree:true
});
}else{
this.setData({
checkAgree:false
});
}
},
//获取短信验证码
getSMS(){
varthat=this.data;

if(!that.mobile){
this.showToast('请输入手机号');
}elseif(that.mobile.length!=11||isNaN(that.mobile)){
this.showToast('请输入正确手机号');
}
elseif(that.imgCode.length!=4){
this.showToast('请输入正确图片验证码');
}
else{
if(that.captchaSended)return;
this.setData({
captchaSended:true
})
app.api.getSMSByMobileAndCaptcha({
mobile:that.mobile,
capKey:that.capKey,
code:that.imgCode,
type:1

}).then((result)=>{
this.showToast(result.message);
if(result.code!=1){
this.getImgCode();
this.setData({
captchaSended:false,
});
}else{
varcounter=setInterval(()=>{
that.timer--;
this.setData({
timer:that.timer,
captchaText:`${that.timer}秒`,
isReadOnly:true
});
if(that.timer===0){
clearInterval(counter);
that.captchaSended=false;
that.captchaText='获取验证码';
this.setData({
timer:60,
captchaText:'获取验证码',
captchaSended:false
})
}
},1000);
}
});
}
},
//获取图形码
getImgCode(){
varcapKey="zdx-weixin"+Math.random();
this.setData({
imgCodeSrc:"http://prezdx.geinihua.com/invite/WeChat/verify?capKey="+capKey,
capKey:capKey
});
},
//用户使用协议
xieyi(){
wx.navigateTo({
url:'../userXieyi/userXieyi'
})

},
//注册
regist(){
varthat=this.data;
if(!that.checkAgree||!that.phoneAll){
return
}
//sessionCheck为1，目的是防止微信code码先于session过期
varcode=wx.getStorageSync('wxCode');
varsessionCheck=wx.getStorageSync('sessionCheck');

wx.setStorageSync('mobile',that.mobile);

if(!that.mobile){
this.showToast('请输入手机号');
}elseif(that.mobile.length!=11||isNaN(that.mobile)){
this.showToast('请输入正确手机号');
}elseif(that.code.length!=6){
this.showToast('请输入正确验证码');
}else{
wx.showLoading({
title:'加载中...',
});
app.api.loginByCaptcha({
mobile:that.mobile,
smsCode:that.code,
code:code,
sessionCheck:sessionCheck,
}).then((res)=>{
wx.hideLoading();
if(res.code==2||res.code==1){
//注册成功
wx.setStorageSync('token',res.businessObj.token);
wx.setStorageSync('userId',res.businessObj.userId);
this.sucessCb(res);
app.globalData.isLogin=true;//设置为登录成功
}else{
this.showToast(res.message);
}
});
}
},
//成功回调
sucessCb(res){
wx.redirectTo({
url:'/pages/index/index'
})
},
onLoad:function(){
this.getImgCode();
varthat=this;
if(wx.getStorageSync('mobile')){
that.setData({
mobile:wx.getStorageSync('mobile'),
})
}
if(this.data.mobile.length===11){
this.setData({
phoneAll:true
});
}

},

})

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 input输入及动态设置按钮的实现

热门推荐

随机推荐