微信小程序忘记密码

最新推荐文章于 2024-02-26 18:40:26 发布

原创最新推荐文章于 2024-02-26 18:40:26 发布 · 3.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

4 篇文章

订阅专栏

一：找到注册登录页面

二：点击忘记密码

代码如下

<!--pages/forgetpassword/forgetpassword.wxml-->
<!-- <text>pages/forgetpassword/forgetpassword.wxml</text> -->
<view class='father'>
    <form bindsubmit='submit_email' wx:if="{{form_index == 0}}">
   <view class='header'>
      <text class='pwd'>找回密码：第一步</text>
   </view>
   <view class='content'> 
       <view class='message'>
          <input name="no" type='number' placeholder-class='small' placeholder='请输入学号'></input>
       </view>
       <view class='message'>       
        <input name="email" placeholder-class='small'  placeholder='请输入绑定邮箱'></input>
       </view>
       <view class='bottom'> 
         <button type='primary' placeholder-class='small' formType="submit" >下一步</button>
       </view>
   </view>
</form>



 <form bindsubmit='submit_password' wx:else>
   <view class='header'>
      <text class='pwd'>找回密码：第二步</text>
   </view>
   <view class='content'> 
       <view class='message'>
          <input name="pwd" password="{{mask}}"  placeholder-class='small' placeholder='请输入新密码'></input>
       </view>
       <view class="right">
           <!-- 切换 -->
          <switch   bindchange="switchChange"/>
      </view>
       <view class='message'>       
        <input name="validcode" type='number'  placeholder-class='small' placeholder='输入邮箱中的验证码'></input>
       </view>
       <view class="right">
          <text style="color:#aaa">剩余：{{second}}秒</text>
      </view>
       <view class='bottom'> 
          <button type='primary' formType="submit" disabled="{{disabled}}" >提交</button>
       </view>
   </view>
</form>
</view>

// pages/forgetpassword/forgetpassword.js
const app = getApp();

function countdown(that) {
  var second = that.data.second
  if (second == 0) {
    that.setData({
      disabled: true
    });
    return;
  }
  var time = setTimeout(function () {
    that.setData({
      second: second - 1
    });
    countdown(that);
  }
    , 1000)
}


Page({

  /**
   * 页面的初始数据
   */
  data: {
    form_index: 0,
    no: null,
    second: 30,
    disabled: false,
    mask: true

  },
  //切换
  switchChange: function (e) {
    // console.log(e.detail.value)
    this.setData({ mask: !e.detail.value })
  },
  //提交邮箱
  submit_email: function (e) {
    var no = e.detail.value.no;
    var email = e.detail.value.email;

    if (email == null || email == '') {
      wx.showToast({
        title: '请输入邮箱',
        icon: 'none',
        duration: 2000
      })
      return;
    }

    wx.showLoading({
      title: '网络请求中...',
    })
    wx.request({
      url: app.globalData.url.forgotpwd,
      data: {
        no: no,
        email: email
      },
      method: "POST",
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        wx.hideLoading();
        // console.log(res.data);
        if (res.data.error) {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        } else {
          this.setData({ no: no, second: res.data.expire });
          countdown(this);
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            this.setData({ form_index: 1 });
          }, 2000)

        }
      }

    })
  },
  //重设密码
  submit_password: function (e) {
    console.log(e);

    var validcode = e.detail.value.validcode;
    var pwd = e.detail.value.pwd;

    if (validcode == '' || validcode == null || pwd == '' || pwd == null) {
      wx.showToast({
        title: '验证码和密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.request({
        url: app.globalData.url.initpassword,
        method: 'POST',
        data: {
          no: this.data.no,
          validcode: validcode,
          pwd: pwd
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: (res) => {
          // console.log(res.data);
          if (res.data.error) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: 'success',
              duration: 2000
            })
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        }
      })
    }

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})