小程序中简单的一些操作综

小程序中要实现的效果：

小程序中简单的一些操作综

(1.) 点击获取验证码时获取表单数据及获取验证码后时间倒计：

wxml:

<view class="input-border input-view-mobile">
    <view class="fl input-name">联系电话</view>
    <view class="fl input-value">
        <input class="fl" style="width: 35vw" placeholder="请输入联系电话" placeholder-class="place_input" bindinput="mobileInputEvent" name="mobile"/>
        <button class="input-submit {{codeStatus ? 'display_none' : ''}}" bindtap="mobileCode" size="0">获取验证码</button>
        <button class="input-submit {{codeStatus ? '' : 'display_none'}}" disabled size="0">{{codeTime}}s后再次获取</button>
    </view>
    <view class="clear"></view>
</view>

<view class="input-border input-view-name">
    <view class="fl input-name">验证码</view>
    <view class="fl input-value">
        <input placeholder="请输入验证码" placeholder-class="place_input" name="code"/>
    </view>
    <view class="clear"></view>
</view>

js:

/**
 * 获取手机号
 * @param e (mobile)
 */
mobileInputEvent : function (e) {
    let that = this;
    let mobile = e.detail.value;
    that.setData({
        mobile : mobile
    });

},

/**
 * 点击获取验证码
 */
mobileCode : function () {
    let that = this;
    if(!that.data.mobile) {
        utils.showDialog(that, '请填写联系电话');
        that.setData({loading:false});
        return false;
    } else if(!utils.isMobile(that.data.mobile)) {
        utils.showDialog(that, '手机格式错误');
        that.setData({loading:false});
        return false;
    }
    that.setData({
        codeStatus : true
    });
    that.timeStart(that);
    //网络请求
},

/**
 * 开始倒计时60s
 * @param app this
 */
timeStart : function (app) {
    let that = this;
    let intervalId = setInterval(function () {
        that.data.codeTime--;
        app.setData({
            codeTime : that.data.codeTime,
        });
        if(that.data.codeTime < 0) {
            clearInterval(intervalId);
            app.setData({
                codeStatus : false
            });
            return false;
        }
    }, 1000);
},

(2.) 实现密码的显示与隐藏：

wxml:

<view class="input-border input-view-mobile">
    <view class="fl input-name">密码</view>
    <view class="fl input-value">
        <view class="fl">
            <view wx:if="{{showPassPic}}">
                <input placeholder="请输入密码" style="width: 45vw;" bindinput="passInputEvent" placeholder-class="place_input" name="password" value="{{password}}"/>
            </view>
            <view wx:else>
                <input placeholder="请输入密码" style="width: 45vw;" bindinput="passInputEvent" password placeholder-class="place_input" name="password" value="{{password}}"/>
            </view>
        </view>

        <image src="../../img/[email protected]" bindtap="passChange" class="show-pass-pic {{showPassPic ? '' : 'display_none'}}"></image>
        <image src="../../img/[email protected]" bindtap="passChange" class="show-pass-pic {{showPassPic ? 'display_none' : ''}}"></image>
    </view>
    <view class="clear"></view>
</view>

js:

/**
 * 以下是密码显示隐藏 切换
 * 对应 ：
 * passInputEvent ---- passChange
 */
passInputEvent : function (e) {
    let that = this;
    that.setData({
        password : e.detail.value
    });
},

/**
 * 点击查看按钮是更新状态
 */
passChange : function () {
    let that = this;
    let showPassPic;
    if(that.data.showPassPic) {
        showPassPic = false;
    } else {
        showPassPic = true;
    }
    that.setData({
        showPassPic : showPassPic,
    });
},

小程序中简单的一些操作综

相关推荐