PHP前端开发

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

百变鹏仔 2个月前 (03-12) #前端问答
文章标签 按钮

这篇文章主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

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

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

<view>  <!--手机号-->  <view>    <text>手机号</text>    <input>  </view>  <!--图片验证码-->  <view>    <view>      <text>图形验证码</text>      <input>    </view>    <image></image>  </view>  <!--短信验证码-->  <view>    <view>      <text>验证码</text>      <input>    </view>    <view>{{captchaText}}</view>  </view>  <view>    <checkbox-group>     <checkbox></checkbox>    </checkbox-group>    <span>已阅读并同意</span> <text>《用户使用协议》</text>  </view>  <view>立即登录</view></view>    <!--mask--><view></view>    <!--以下为toast显示的内容--><view><view>  <view>    {{toastText}}  </view></view></view>

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 {        this.showToast(result.message);        if (result.code != 1) {          this.getImgCode();          this.setData({            captchaSended: false,          });        } else {          var counter = setInterval(() =&gt; {            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() {    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) =&gt; {        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();    var that=this;    if(wx.getStorageSync('mobile')){      that.setData({        mobile: wx.getStorageSync('mobile'),      })    }    if(this.data.mobile.length===11){      this.setData({        phoneAll: true      });    }  },})