微信小程序---评教(忘记密码)

在日常生活中,很容易忘记密码,所以这个时候找回密码就很重要了!!!(此例子是在一个评教app里面)

1.首先在这个app里面得有绑定一个邮箱(这个邮箱对于找回密码发挥着至关重要的作用)

绑定一个邮箱显示页面


点进去可以进行修改邮箱


页面的代码是

<view class='pj'>
 <form bindsubmit='formSubmit' bindreset='formReset'>
    <view class='cont'>
       <view class='pwd'>
          <text class='text1'>登录密码</text>
          <input password='true' name='pwd'  placeholder='请输入登录密码' class='pwd1' />
       </view>
        <view class='pwd'>
          <text class='text1'>邮箱</text>
            <input password='true' name='email' placeholder='请输入邮箱' class='pwd1'/>
       </view>
    </view>
    <view class='section'>
      <button type='primary' form-type='submit' class='submit'>提交</button>
    </view>
    </form>
</view>

为这个提交绑定单击事件

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

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  formSubmit: function (e) {
    var pwd = e.detail.value.pwd;
    var email = e.detail.value.email;
    var student = wx.getStorageSync('student');
    var no = student.no;

    if (pwd == '' || email == '') {
      wx.showToast({
        title: '密码或邮箱不能为空',
        icon: 'none',
        duration: 1000
      })
    } else {
      wx.request({
        url: app.globalData.url.email,
        data: {
          no: no,
          pwd: pwd,
          email: email
        },
        method: 'POST',
        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 {
            var _student = wx.getStorageSync('student');
            _student.email = email;
            wx.setStorageSync('student', _student);

            wx.showToast({
              title: '邮箱绑定成功',
              icon: 'success',
              duration: 2000,
              success: () => {
                setTimeout(function () {
                  wx.navigateBack({
                    delta: 1
                  })
                }, 2000)
              }
            })
          }
        }
      })

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

  },


})

绑定邮箱成功

2.设计忘记密码页面


点击这个忘记密码->出现

<view class="pj">
 <view class='a'>
  <form bindsubmit='send_email' wx:if="{{form_index == 0}}" >
      <text>找回密码:第1步</text>
      <view class="section">
          <input name="no" type='number' placeholder-class='small'  placeholder='请输入学号' />
      </view>
      <view class="section">
          <input name="email" placeholder-class='small' placeholder='请输入绑定的邮箱' />
      </view>
      <button type='primary' class='submit' placeholder-class='small' formType="submit" >下一步</button>
  </form>

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

绑定事件

// pages/forgotpwd/forgotpwd.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 })
  },
  //提交邮箱
  send_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 () {

  }
})
更改密码成功
阅读更多
想对作者说点什么? 我来说一句

微信程序-教务系统源代码

2018年01月03日 186KB 下载

没有更多推荐了,返回首页

不良信息举报

微信小程序---评教(忘记密码)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭