【小程序】登录、注册、找回密码界面三合一，无缝切换

简介

将登录、注册、找回密码等功能集成于一个界面上，一些情况下可以减少重复输入以及界面的重复切换，切换的动画效果用css的transition属性实现

可直接导入小程序代码片段：https://developers.weixin.qq.com/s/LMsBNWm47ofR

效果

实现

js 代码

// account.js
Page({
  data: {
    action: "login", // 当前页面状态, 取值为：login:登录, register:注册,reset：找回密码，下同
    code_button_text: "获取验证码", // 验证码按钮的文字
    pos: { login: 1, register: 2, reset: 3 }, // 用于标记三个按钮的样式和位置
    action_text: { login: "登录", register: "注册", reset: "找回密码" },
  },
  login(value) {
    let {login, password} = value;
  	/**
  	请在这里实现注册逻辑，该函数名不要改
  	login: 用户名, password:密码
    */
  },
  register(value) {
    let {login, password, code} = value;
  	/**
  	请在这里实现注册逻辑，该函数名不要改
  	login: 用户名, password:密码, code:验证码
  	*/
  },
  reset(value) {
    let {login, password, password_confirmation, code} = value;
    /**
    请在这里实现重置密码逻辑，该函数名不要改
  login: 用户名, password:密码, password_confirmation: 再次确认输入的密码,code:验证码
  */
  },
  getCode(value) {
    let {login} = value;
    let { action } = this.data
    this.setData({code_status:1}) //正在获取验证码的标志;
    this.countDown();
    /**
    请在这里实现获取验证码逻辑
    !!获取验证码成功后执行 this.countDown() 启动再次获取验证码的倒计时
  	login: 用户名, action:当前的操作，取值有login, register, reset(找回密码)
  	*/
  },
  countDown() {
    // 启动验证码倒计时
    var count = 60; //倒计时时间，可以根据需要更改
    this.setData({ code_status: 2, code_button_text: count-- + "秒后重试" });
    var id = setInterval(() => {
      if (count <= 0)
        return this.clearCount(id);
      this.setData({ code_button_text: count-- + "秒后重试" })
    }, 1000);
    return id;
  },
  clearCount(id) {
    // 停止验证码倒计时
    clearInterval(id);
    this.setData({ code_status: 0, code_button_text: "获取验证码" });
  },
  onSubmit({ detail: { value, target } }) {
    // 点击按钮提交的回调函数
    if (!this.checkInput({ value, action: target.id })) // 验证输入是否合法
      return;
    if (target.id == "code")
      return this.getCode(value);
    if (target.id != this.data.action)
      return this.setAction(target.id);
    this[target.id](value);
    console.log("执行函数" + target.id, "参数value的属性有login,password, password_confirmation, save_password, no_login_after_reset值，可根据需要选用",value);
  },
  checkInput({ value, action }) {
    /**验证输入是否合法，这里只验证是否为空，可以根据需要更改
     * value: Object类型
     * value.login: 用户名
     * value.passwork: 密码
     * ...
     **/
    if (action != this.data.action && action != "code")
      return true;
    if (!value.login)
      return wx.showToast({ title: '请输入邮箱或手机号', icon: "none" }) && false;
    if (action == "code")
      return true;
    if (!value.password)
      return wx.showToast({ title: '请输入密码', icon: "none" }) && false;
    if (action == "login")
      return true;
    if (!value.code)
      return wx.showToast({ title: '请输入验证码', icon: "none" }) && false;
    if (action == "register")
      return true;
    if (!value.password_confirmation)
      return wx.showToast({ title: '请再次输入密码', icon: "none" }) && false;
    return true;
  },
  setAction(action) {
    // 设置当前页面状态action
    let { pos } = this.data;
    if (!(action in pos))
      return;
    let tmp = pos[action];
    pos[action] = pos[this.data.action];
    pos[this.data.action] = tmp;
    this.setData({ pos, action });
  },
  onLoad: function (options) {
  	// 通过页面跳转的参数action来控制页面的初始状态(登录、注册、忘记密码)
    let {action="login"} = options;
    this.setAction(action);
  }
})

wxml代码

<page-meta>
  <navigation-bar title="{{action_text[action]}}" /> 
page-meta>

<view>
  <form class="account-form" bindsubmit="onSubmit">
    <view class="inputs">
      <view class="input-wrap">
        <input name="login"  placeholder="邮箱或手机号"/>
      view>
      <view class="input-wrap {{action!='login'?'':'hidden'}}">
        <input name="code" placeholder="验证码"/>
        <button id="code" type="primary" size="mini" form-type="submit" loading="{{code_status==1}}" disabled="{{code_status}}" class="obtain-code">
          {{code_button_text}}
        button>
      view>
      <view class="input-wrap">
        <input password name="password" value="{{password}}" placeholder="请输入密码"/>
      view>
      <view class="input-wrap {{action=='reset'?'':'hidden'}}">
        <input password name="password_confirmation" placeholder="请再次输入密码"/>
      view>
      <view class="checkbox-wrap">
        <switch type="checkbox" name="save_password" color="#00b0f0" checked="{{save_password}}">保存密码switch>
        <switch type="checkbox" class="no-login {{action=='reset'?'':'hidden'}}" name="no_login_after_reset" color="#00b0f0">重置后不登录switch>
      view>
    view>
    <view class="actions">
      <view class="pos{{pos.login}}">
        <button id="login" form-type="submit">登录button>
      view>
      <view class="pos{{pos.register}}">
        <button id="register" form-type="submit">注册button>
      view>
      <view class="pos{{pos.reset}}">
        <button id="reset"  form-type="submit">{{pos.reset==1?'重置密码':'忘记密码?'}}button>
      view>
    view>
  form>
view>

wxss代码

/**account.wxss*/
.checkbox-wrap,.input-wrap{
  transition: 1s all ease;
  max-height: 50px;
  display: flex;
  margin: 5px 26px;
  overflow: hidden;
}
.checkbox-wrap{
  font-size: 14px;
  margin: 0px 20px;
  display: flex;
  justify-content: space-between;
}
.checkbox-wrap switch{
  transform: scale(0.82);
}
.input-wrap>input{
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px #00b0f0 solid; 
  flex:auto;
}
.obtain-code{
  margin-left: 12px!important;
  white-space: nowrap;
  display: flex!important;
  justify-content: center;
  align-items: center;
  flex: none;
  background: #00b0f0!important;
}
.obtain-code[disabled]{
  color: white!important; /*验证码按钮禁用的样式*/
}
.input-wrap.hidden{
  max-height: 0px;
}
switch.no-login.hidden{
  opacity: 0;
}
switch.no-login{
  float: left;
  transition: 1s all ease;
}
.actions{
  position: relative;
  margin: 0 26px
}
.actions button{
  transition: 1s all ease;
}
.actions>view{
  width: 100%;
  position: absolute;
  transition: 1s all ease;
}
.actions>.pos1{
  top: 18px;
}
.pos1>button{
  background: #00b0f0;
  color:white;
}
.actions>.pos2{
  top:66px;
}
.pos2>button{
  color: #00b0f0;
  border:#00b0f0 1px solid;
}
.actions>.pos3{
  top: 0px;
}
.pos3>button{
  font-size: 14px;
  color: #00b0f0;
  background: transparent;
  transform: translateX(240rpx);
  padding: 0px!important;
  border-style: none!important;
  line-height: 1;
}
.pos3>button::after{
  content: none!important;
}

tip

• 示例代码使用的微信小程序是新版组件样式 style:v2，旧版的界面会有点不一样。
• 如果懒得复制，可以用小程序代码片段直接导入开发工具，链接：https://developers.weixin.qq.com/s/LMsBNWm47ofR