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

前端之家收集整理的这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

<image class="imgBtn" src="{{imgCodeSrc}}" bindtap="getImgCode"&gt;</image>
<view class="smsBtn" bindtap="getSMS"&gt;{{captchaText}}</view>

<view class="agree" style="margin-top:40rpx">
<checkBox-group bindchange="checkBoxChange">
<checkBox class="check" value="1" checked="true" bindchange="checkBoxChange">

已阅读并同意 用户使用协议》
登录 Box" wx:if="{{isShowToast}}">

js

获取全局应用程序实例对象 const app = 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
  });
}else if(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() {
var that = this.data;

if (!that.mobile) {
  this.showToast('请输入手机号');
} else if (that.mobile.length != 11 || isNaN(that.mobile)) {
  this.showToast('请输入正确手机号');
}
else if (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 {
      var counter = setInterval(() => {
        that.timer--;
        this.setData({
          timer: that.timer,captchaText: `${that.timer}秒`,isReadOnly: true
        });
        if (that.timer === 0) {
          clearInterval(counter);
          that.captchaSended = false;
          that.captchaText = '<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>验证码';
          this.setData({
            timer: 60,captchaSended: false
          })
        }
      },1000);
    }
  });
}

},// 获取图形码
getImgCode() {
var capKey = "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() {
var that = this.data;
if(!that.checkAgree||!that.phoneAll){
return
}
// sessionCheck为1,目的是防止微信code码先于session过期
var code = wx.getStorageSync('wxCode');
var sessionCheck = wx.getStorageSync('sessionCheck');

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

if (!that.mobile) {
  this.showToast('请输入手机号');
} else if (that.mobile.length != 11 || isNaN(that.mobile)) {
  this.showToast('请输入正确手机号');
} else if (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) {
      //<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>成功
      wx.setStorageSync('token',res.businessObj.token);
      wx.setStorageSync('userId',res.businessObj.userId);
      this.sucessCb(res);
      app.globalData.isLogin = true; //设置为<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>成功
    } else {
      this.showToast(res.message);
    }
  });
}

},// 成功回调
sucessCb(res) {
wx.redirectTo({
url: '/pages/index/index'
})
},onLoad: function () {
this.getImgCode();
var that=this;
if(wx.getStorageSync('mobile')){
that.setData({
mobile: wx.getStorageSync('mobile'),})
}
if(this.data.mobile.length===11){
this.setData({
phoneAll: true
});
}

},})

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

原文链接:https://www.f2er.com/weapp/35520.html

猜你在找的微信小程序相关文章