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


Posted in Javascript onOctober 27, 2017

微信小程序 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
      });
    }

  },

})

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

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
php跨域调用json的例子
Nov 13 Javascript
vue.js实例todoList项目
Jul 07 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
在Mac下彻底卸载node和npm的方法
May 16 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 #Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 #Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 #Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 #Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
You might like
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
Django的Modelforms用法简介
2019/07/27 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python实现人脸签到系统
2020/04/13 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
英国电子专家:maplin
2019/09/04 全球购物
2015年社区文体活动总结
2015/03/25 职场文书