小程序根据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
            });
        }

    },

})