WeChat-Applet-Eingabe und dynamische Einstellungsschaltflächenmethode

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Implementierung der Eingabe- und dynamischen Einstellungsschaltflächen des WeChat-Applets vorgestellt. Ich hoffe, dass dieser Artikel allen helfen kann.

Implementierung der WeChat-Applet-Eingabeeingabe und der Schaltfläche für dynamische Einstellungen

[Anforderung] Implementieren Sie die Schaltfläche „Jetzt anmelden“, wenn die Mobiltelefonnummer ausgefüllt wurde und die Zustimmung wurde überprüft. Die Schaltfläche wird heller und kann angeklickt werden. Wenn eine der Schaltflächen nicht erfüllt ist, wird die Schaltfläche ausgegraut und kann nicht angeklickt werden. Der Countdown fordert zum Vorgang auf Das Fenster fordert den Inhalt an, der nicht den Anforderungen entspricht.

<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?&#39;active&#39;:&#39;&#39;}}" 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(&#39;请输入手机号&#39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&#39;请输入正确手机号&#39;);
    }
    else if (that.imgCode.length != 4) {
      this.showToast(&#39;请输入正确图片验证码&#39;);
    }
    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 = &#39;获取验证码&#39;;
              this.setData({
                timer: 60,
                captchaText: &#39;获取验证码&#39;,
                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: &#39;../userXieyi/userXieyi&#39;
    })

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

    wx.setStorageSync(&#39;mobile&#39;,that.mobile);

    if (!that.mobile) {
      this.showToast(&#39;请输入手机号&#39;);
    } else if (that.mobile.length != 11 || isNaN(that.mobile)) {
      this.showToast(&#39;请输入正确手机号&#39;);
    } else if (that.code.length != 6) {
      this.showToast(&#39;请输入正确验证码&#39;);
    } else {
      wx.showLoading({
        title: &#39;加载中...&#39;,
      });
      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(&#39;token&#39;, res.businessObj.token);
          wx.setStorageSync(&#39;userId&#39;,res.businessObj.userId);
          this.sucessCb(res);
          app.globalData.isLogin = true; //设置为登录成功
        } else {
          this.showToast(res.message);
        }
      });
    }
  },
  // 成功回调
  sucessCb(res) {
    wx.redirectTo({
      url: &#39;/pages/index/index&#39;
    })
  },
  onLoad: function () {
    this.getImgCode();
    var that=this;
    if(wx.getStorageSync(&#39;mobile&#39;)){
      that.setData({
        mobile: wx.getStorageSync(&#39;mobile&#39;),
      })
    }
    if(this.data.mobile.length===11){
      this.setData({
        phoneAll: true
      });
    }

  },

})

Verwandte Empfehlungen:

php://input Detaillierte Erläuterung des Eingabestreams

Beispielanalyse des Unterschieds zwischen Eingabe, Senden, Schaltfläche und Eingabetaste zum Senden von Daten

Zwei Arten von JS-Methoden zum Hinzufügen kleiner Symbole in der Eingabe

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Eingabe und dynamische Einstellungsschaltflächenmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!