小程序绑定手机,发送验证码

<view class='page'>
  <view class="weui-cells weui-cells_after-title">
                          <view class="weui-cell weui-cell_input">
                <view class="weui-cell__hd">
                    <view class="weui-label">手机号</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input" value='{{tel}}' bindinput='inputset' data-ac-hi="tel" data-ac-hi="tel" placeholder="请输入手机号"/>
                </view>
            </view>
        <view class="weui-cell weui-cell_input weui-cell_vcode">
                <view class="weui-cell__hd">
                    <view class="weui-label">验证码</view>
                </view>
                <view class="weui-cell__bd">
                    <input class="weui-input"  bindinput='inputset' data-ac-hi="yzms"  placeholder="验证码" />
                </view>
                <view class="weui-cell__ft">
                    <view style='color:{{color}}' class="weui-vcode-btn" bindtap='{{yzm}}'>{{MSM_loding}}</view>
                </view>
            </view>

            
  </view>
          <view class="weui-btn-area">
            <button style='background-color: #EB6102' class="weui-btn" type="primary" bindtap="submitbyy">确定</button>
        </view>
</view>
<view class="ad_popError11111" wx:if="{{popErrorMsg!=''}}">{{popErrorMsg}}</view>
// pages/bind_tel/bind_tel.js
const app = getApp();
let wx_request = require('../../utils/wx_request_zr.1.0.1.js');
let Verification_common = require('../../utils/Verification_common.js');
let common = require('../../utils/common.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    MSM_loding: "发送验证码",
    color: null,
    yzm: "getyzm",
    popErrorMsg: "",
    tel: "",
    a:true,
    yzms : ""
  },
 
  ohShitfadeOut: function(e) {
    this.setData({
      popErrorMsg: e
    });
    var fadeOutTimeout = setTimeout(() => {
      this.setData({
        popErrorMsg: ''
      });
      clearTimeout(fadeOutTimeout);
    }, 2000);
  },
  getyzm: function() {
    if (!Verification_common.tel(this.data.tel)) {
      this.ohShitfadeOut("请正确填写手机号码")
      return false;
    }
    const thast = this;
    common.SMS_verification(this.data.tel,function(){
      thast.sms_lodining();
    });
   
  },
  getmaxs : function(){
    this.ohShitfadeOut("请稍后")
  }
  ,
  sms_lodining : function(){
    if (this.data.MSM_loding<=0){
      this.setData({
        MSM_loding: "发送验证码",
        color: null,
        yzm: "getyzm",
        a:true
      })
      return false;
    }
    if(this.data.a){
      this.setData({
        MSM_loding:  60 ,
        color: "red",
        yzm: "getmaxs",
        a:false
      })
      var fadeOutTimeout = setTimeout(() => {
        this.sms_lodining()
        clearTimeout(fadeOutTimeout);
      }, 1000);
    }else{
      var a = this.data.MSM_loding-1;
      this.setData({
        MSM_loding: a
      })
      var fadeOutTimeout = setTimeout(() => {
        this.sms_lodining()
        clearTimeout(fadeOutTimeout);
      }, 1000);
    }
  },
  inputset: function(e) {
    
    if (e.currentTarget.dataset.acHi == "tel") {
      this.setData({
        tel: e.detail.value
      })
    } else if (e.currentTarget.dataset.acHi == "yzms") {
      this.setData({
        yzms: e.detail.value
      })
    }
  },
  submitbyy:function(){
    if (!Verification_common.tel(this.data.tel)) {
      this.ohShitfadeOut("请正确填写手机号码")
      return false;
    }
    if (this.data.yzms.length!=6) {
      this.ohShitfadeOut("请正确填写验证码")
      return false;
    }
    new wx_request({
      url: "appmyrelease/renting",
      data: {
        MEMBER_ID: app.globalData.men_openid,
        TEL: this.data.tel,
        CODE: this.data.yzms
      },
      success: function (res) {
        if (res.data.type == true){
          wx.showToast({
            title: '绑定成功',
            icon: 'none'
          })
          setTimeout(function () {
            wx.navigateBack();
          }, 500)
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })
         
      } 

      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})
/* g_details/g_details.wxss */
page{
  background: rgb(241, 241, 241);
}

.content{
  padding: 0.5em 1.5em;
  width: calc(100% - 3em);
  margin: 1em 0;
  background: white;
}

.contentt{
  width: 100%;
  padding: 1em 0;
  margin: 1em 0;
  background: white;
}

.content .title{
  font-size: 0.8em;
  font-weight: 600;
  width: 100%;
  margin: 0.5em 0;
}

.content .index{
  font-size: 0.8em;
  width: 100%;
  text-align: right;
  color: rgb(114, 114, 114);
}

.contentt .titlee{
  font-size: 0.8em;
  font-weight: 600;
  width: 100%;
  margin: 0.5em 0;
}

.contentt .indexx{
  font-size: 0.8em;
  width: 100%;
  margin: 0.5em 0;
  color: rgb(114, 114, 114);
}

.button {
  border-top: 1px solid #ddd;
}

.button view{
  line-height: 3.5em;
  border-bottom: 1px solid #ddd;
}

.button view:active{
  background: rgba(0,0,0,0.1);
}
.page-body{
  height: 12em;
  width:100%;
}

.page-body .page-section{
  width: 100%;
  height: 100%;
}

.page-body .page-section map{
  width: 100%;
  height: 100%;
}
发布了9 篇原创文章 · 获赞 4 · 访问量 6567

猜你喜欢

转载自blog.csdn.net/zzsjsp/article/details/84063197
今日推荐