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

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

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

<view class="container">
  <!--手机号-->
  <view class="section">
    <text class="txt">手机号</text>
    <input value="{{mobile}}" placeholder-class="placeholder" placeholder="11位手机号码" type="number" maxlength="11"
        bindinput="mobileinput"/>
  </view>
  <!--图片验证码-->
  <view class="section">
    <view>
      <text class="txt">图形验证码</text>
      <input placeholder-class="placeholder" placeholder="输入图形验证码" type="text" maxlength="4"
          bindinput="imgcaptchainput"/>
    </view>

    <image class="imgbtn" src="{{imgcodesrc}}" bindtap="getimgcode"></image>
  </view>
  <!--短信验证码-->
  <view class="section">
    <view>
      <text class="txt">验证码</text>
      <input placeholder-class="placeholder" placeholder="输入验证码" type="number" maxlength="6"
          bindinput="smscaptchainput"/>
    </view>

    <view class="smsbtn" bindtap="getsms">{{captchatext}}</view>
  </view>

  <view class="agree" style="margin-top:40rpx">
    <checkbox-group bindchange="checkboxchange">
     <checkbox class="check" value="1" checked="true" bindchange="checkboxchange"></checkbox>
    </checkbox-group>
    <span>已阅读并同意</span> <text style="color:#98c7ff" bindtap="xieyi">《用户使用协议》</text>
  </view>
  <view class="regist {{phoneall&&checkagree?'active':''}}" bindtap="regist">立即登录</view>
</view>
    <!--mask-->
<view class="toast_mask" wx:if="{{isshowtoast}}"></view>
    <!--以下为toast显示的内容-->
<view class="toast_content_box" wx:if="{{isshowtoast}}">
<view class="toast_content">
  <view class="toast_content_text">
    {{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<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 = '获取验证码';
              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) => {
        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
      });
    }

  },

})

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