首页 > 小程序教程 > 微信小程序绑定手机号验证身份页面设计制作开发教程

微信小程序绑定手机号验证身份页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序绑定手机号验证身份页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/editphone/editphone.wxml-->
<import src="../../template/count-down/count-down.wxml"/>
<view class="phone-box">
    <view class="check-box">
        <view class="title">输入您当前微信账号绑定的手机号码以校验信息</view>
        <input class="input" type="number" value="{{oldUserPhone}}" placeholder="手机号码" bindblur="checkOldPhone"/>
    </view>
    <view class="edit-box">
        <view class="title">输入您需要绑定的新手机号码</view>
        <input class="input new-phone" type="number" value="{{newUserPhone}}" placeholder="手机号码" bindinput="updateNewPhone"/>
        <view class="code-box">
            <input class="input" type="text" value="{{code}}" placeholder="短信验证码" bindinput="updateCode"/>
            <template is="countDown" data="{{disabled: disabled, plain: plain, text: text}}" />
        </view>
    </view>
    <button class="bind-btn" type="primary" hover-class="none" disabled="{{isNotSubmit}}" bindtap="submit">验证重新绑定</button>
</view>
 
二、wxss样式文件代码如下:
/* pages/editphone/editphone.wxss */
page {
  display: block;
  min-height: 100%;
  background-color: #f5f5f5;
}
.phone-box .title{
    font-size: 24rpx;
    color: #222;
    margin: 30rpx 0 20rpx 20rpx;
}
.phone-box .input{
    border: 1px #ddd solid;
    border-left: 0;
    border-right: 0;
    height: 88rpx;
    background-color: #fff;
    padding-left: 20rpx;
    font-size: 28rpx;
}
.phone-box .input.new-phone{
    border-bottom: 1px #ddd solid;
}
.phone-box .code-box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 88rpx;
    border-bottom: 1px #ddd solid;
}
.phone-box .code-box input{
    border: 0;
    flex: 1;
}
.phone-box .code-box button{
    border: 1px #e61773 solid;
    color: #e61773;
    border-radius: 99px;
    background-color: transparent!important;
    margin: 15rpx 20rpx 15rpx 0;
    font-size: 22rpx;
    height: 58rpx;
    width: 220rpx;
}
.phone-box .code-box button[disabled]{
    color: #ccc;
    border: 1px #ccc solid;
}
.bind-btn{
    margin-top: 50rpx;
}
三、js页面代码如下:
// pages/editphone/editphone.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
//引入倒计时组件
var CountDown = require('../../template/count-down/count-down.js');
var appInstance = getApp();
Page({
  data:{
      oldUserPhone: '',
      newUserPhone: '',
      code: '',
      isNotSubmit: true,
  },
  judge: function(){
      if(!appInstance.globalData.userInfo.hasData){
          wx.navigateBack({
            delta: 2
          });
      }
  },
  checkPhone: function(phone){
      if(!/^1[34578]d{9}$/.test(phone) || phone === ''){
        return false;
      }
      return true;
  },
  checkOldPhone: function(e){
    this.countDown.setDisabledValue(true);
    if(!this.checkPhone(e.detail.value)){
        return wx.showToast({
          title: '旧手机号格式不正确或为空',
          duration: 1000
        });
    }
    var _this = this;
        util.getToken().then(token => {
            util.wxRequest({
                method: 'POST',
                url: ports.checkPhone,
                header:{ 'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded'},
                data: {
                    old_phone: e.detail.value
                }
            }).then((res) => {
              if(res.status !== 0){
                return wx.showToast({
                  title: res.msg,
                  duration: 1000
                });
              }
              _this.countDown.setDisabledValue(false);
              _this.setData({
                  oldUserPhone: e.detail.value
              });
            }).catch((err) => {
              return wx.showToast({
                title: err,
                duration: 1000
              });
            });
        });
  },
  updateNewPhone: function(e){
      this.setData({
        newUserPhone: e.detail.value
      });
  },
  updateCode: function(e){
      this.setData({
        code: e.detail.value
      });
  },
  _getCode: function(){
      if(!this.checkPhone(this.data.newUserPhone)){
        return wx.showToast({
          title: '新手机号格式不正确或为空',
          duration: 1000
        });
      }
      var _this = this;
          util.getToken().then(token => {
              util.wxRequest({
                  method: 'POST',
                  url: ports.sendMsg,
                  header:{'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded'},
                  data: {
                      phone: _this.data.newUserPhone
                  }
              }).then((res) => {

                wx.showToast({
                  title: '请查收手机验证码',
                  duration: 1000
                });
                _this.setData({
                    isNotSubmit: false
                });
                _this.countDown.run(60);
              }).catch((err) => {
                  return wx.showToast({
                    title: err,
                    duration: 1000
                  });
              });
          });
  },
  submit(){
      var _this = this;
      if(!this.checkPhone(this.data.newUserPhone)){
          return wx.showToast({
            title: '手机号格式不正确或为空',
            duration: 1000
          });
      }
      if(!/^d{6}$/.test(this.data.code)){
          return wx.showToast({
            title: '验证码为6个数字',
            duration: 1000
          });
      }
      util.getToken().then(token => {
          util.wxRequest({
              method: 'POST',
              url: ports.updatePhone,
              header:{'X-Auth-Token':token, 'content-type': 'application/x-www-form-urlencoded'},
              data: {
                  phone: _this.data.newUserPhone,
                  old_phone: _this.data.oldUserPhone,
                  verifycode: _this.data.code,
              }
          }).then((res) => {
            if(res.status === 0){            
                appInstance.globalData.userInfo.phone = res.data.phone;
                wx.showToast({
                  title: res.msg,
                  icon: 'success',
                  duration: 1000,
                  success: function(){
                    setTimeout(function(){
                      wx.navigateBack({
                        delta: 1
                      });
                    }, 1000);
                  }
                });
            }else{
                return wx.showToast({
                  title: res.msg,
                  duration: 1000
                });
            }
          }).catch((err) => {
                return wx.showToast({
                  title: err,
                  duration: 1000
                });
          });
      });
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.judge();
    //初始化倒计时组件
    this.countDown = new CountDown(this);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序绑定手机号验证身份页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 46,308次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信公众平台 企业网站 自适应 微信图片 响应式 微信文章 微信模板 单页式简历模板 微信素材 html5
您可能会喜欢的其他模板