首页 > 小程序教程 > 微信小程序五洲到家红色手机验证码登陆页面设计制作开发教程

微信小程序五洲到家红色手机验证码登陆页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序五洲到家红色手机验证码登陆页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/login/login.wxml-->
<import src="../../template/count-down/count-down.wxml"/>
<view class="login-panel">

    <view>
        <view class="title">请输入手机号码</view>
        <input class="input" type="number" value="{{phone}}" placeholder="手机号码" bindinput="updatePhone"/>
    </view>

    <view>
        <view class="title">请填入获取到的验证码</view>
        <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="doLogin">登录</button>

</view>
 
二、wxss样式文件代码如下:
/* pages/login/login.wxss */
page {
  display: block;
  min-height: 100%;
  background-color: #f5f5f5;
}
.login-panel .title{
    font-size: 24rpx;
    color: #222;
    margin: 30rpx 0 20rpx 20rpx;
}
.login-panel .input{
    border: 1px #ddd solid;
    border-left: 0;
    border-right: 0;
    height: 88rpx;
    background-color: #fff;
    padding-left: 20rpx;
    font-size: 28rpx;
}
.login-panel .code-box{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 88rpx;
    border-bottom: 1px #ddd solid;
}
.login-panel .code-box input{
    border: 0;
    flex: 1;
}
.login-panel .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;
}
.login-panel .code-box button[disabled]{
    color: #ccc;
    border: 1px #ccc solid;
}
.bind-btn{
    margin-top: 50rpx;
}
三、js页面代码如下:
// pages/login/login.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:{
    phone: '',
    code: '',
    isNotSubmit: true
  },
  updatePhone: function(e){
      this.setData({
        phone: e.detail.value
      });
  },
  updateCode: function(e){
      this.setData({
        code: e.detail.value
      });
  },
  checkPhone: function(phone){
      if(!/^1[34578]d{9}$/.test(phone) || phone === ''){
        return false;
      }
      return true;
  },
  checkCode: function(code) {
      if(!/[0-9]{6}$/.test(code)) {
          return false;
      }
      return true;
  },
  _getCode: function(){
      if(!this.checkPhone(this.data.phone)){
        return wx.showToast({
          title: '手机号格式不正确或为空',
          duration: 1000
        });
      }
      var _this = this;     
      util.wxRequest({
          method: 'POST',
          url: ports.sendPhoneMessage,
          header:{'content-type': 'application/x-www-form-urlencoded'},
          data: {
              phone: _this.data.phone
          }
      }).then((res) => {
        if(res.status === 0){
            wx.showToast({
              title: '请查收手机验证码',
              duration: 1000
            });
            _this.setData({
                isNotSubmit: false
            });
            _this.countDown.run(60);
        }else{
            return wx.showToast({
              title: res.msg,
              duration: 1000
            });
        }
      }).catch((err) => {
          return wx.showToast({
            title: err,
            duration: 1000
          });
      });
  },
  doLogin: function() {
      var _this = this;   
      if(!this.checkCode(this.data.code)){
        return wx.showToast({
          title: '验证码错误',
          duration: 1000
        });
      }
      util.wxRequest({
          url: ports.doLogin,
          method: 'POST',
          header:{'content-type': 'application/x-www-form-urlencoded'},
          data: {
              phone: _this.data.phone,
              verifycode: _this.data.code
          }
      }).then(res => {
          if(res.status === 0) {
              return util.updateToken().then((res) => {
                  wx.navigateBack({
                    delta: 1
                  });
              })
          }else {
            return wx.showToast({
              title: res.msg,
              duration: 1000
            });
          }
      }).catch(err => {
          console.log(err)
      })
  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    //初始化倒计时组件
    this.countDown = new CountDown(this);
    this.countDown.setDisabledValue(false);
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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