微信小程序 input输入及动态设置按钮的实现
2019/6/27 20:35:35
本文主要是介绍微信小程序 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 }); } }, })
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
这篇关于微信小程序 input输入及动态设置按钮的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略