微信小程序（评教系统----个人中心，重置密码，忘记密码）

最新推荐文章于 2024-07-09 17:13:29 发布

W_SSNY

最新推荐文章于 2024-07-09 17:13:29 发布

阅读量3.9k

点赞数 4

本文链接：https://blog.csdn.net/w_ssny/article/details/80646858

版权

在评教系统中除评教之外还要有个人信息外还要有个人信息，并为了防止忘记密码而设置忘记密码，当忘记密码时点击忘记密码发送验证码到绑定邮箱。

重新建一个myinfo文件分别写它的js和wxml：个人信息中主要有自己的学号，姓名，邮箱。点击退出要清空数据并退出到学生登录页面。

wxml中：

<!--pages/myinfo/myinfo.wxml--> 
  <view class='header'>
    <view class='logo'>
      <open-data type="userAvatarUrl"></open-data>
    </view>
    <view class='name'>
      <open-data type="userNickName"></open-data>
    </view>
  </view>
<view class='content'>
  <view class="msg">
    <text class='msg-left'>学号：</text>
    <text class='msg-right'>{{student.no}}</text> 
  </view>
  <view class="msg">
    <text class='msg-left'>姓名：</text>
    <text class='msg-right'>{{student.name}}</text> 
  </view>
  <view class="msg">
    <text class='msg-left'>班级：</text>
    <text class='msg-right'>{{student.classname}}</text> 
  </view>
  <view class="msg">
    <text class='msg-left'>系部：</text>
    <text class='msg-right'>{{student.departmentname}}</text> 
  </view>
  <view class="msg" bindtap='email'>
    <text class='msg-left'>邮箱：</text>
    <text class='msg-right' wx:if="{{student.email=='' || student.email==null}}">未绑定</text><text class='msg-right' wx:else>{{student.email}}</text> 
  </view>
  <view class="msg">
    <text class='msg-left'>密码：</text>
    <text class='msg-right' bindtap='selectmyinfo' data-no="{{no}}">重置</text> 
  </view>
  <view class="msg" bindtap='exit'>
    <text class='msg-left'>退出：</text>
    <text class='msg-right'>>></text> 
  </view>
</view>

js中：

// pages/myinfo/myinfo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    student:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var student = wx.getStorageSync('student');
    this.setData({
      student:student
    })
  },
  selectmyinfo: function (e) {
    var no = wx.getStorageSync('student').no;
    wx.navigateTo({
      url: '../password/password?no=' + no,
    })
  },
  exit: function (e) {
    wx.showModal({
      title: '提示',
      content: '请确认是否退出',
      success: function (res) {
        if (res.confirm) {
          wx.removeStorageSync('student'),
            wx.redirectTo({
              url: '../login/login'
            })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },
  email: function () {
    wx.navigateTo({
      url: '../email/email',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.onLoad();
  },
}）

修改密码，建一个password的文件：输入正确的旧密码，新密码必须要与确认密码一致即可提交修改

wxml中：

<!--pages/password/password.wxml-->
<view class='content'>
  <form bindsubmit="formSubmit">
    <view class='content_one'>
      <view class='pass'>
        <text>原密码</text>
        <input password='true' name="oldpwd" placeholder='请输入旧密码' />
      </view>
      <view class='pass'>
        <text>新密码</text>
        <input password='true' name="newpwd" placeholder='请输入新密码' />
      </view>
      <view class='pass'>
        <text>确认密码</text>
        <input password='true' name="newpwd2" placeholder='请确认一遍密码' />
      </view>
    </view>
    <button type='primary' form-type="submit" class='btn'>提交</button>
  </form>
</view>

js中：

// pages/password/password.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },
  formSubmit:function(e){
    // console.log(e);
    var oldpwd = e.detail.value.oldpwd;
    var newpwd = e.detail.value.newpwd;
    var newpwd2 = e.detail.value.newpwd2;

    if(oldpwd=='' || newpwd == '' || newpwd2 == ''){
      wx.showToast({
        title: '密码不能为空',
        icon:'none',
        duration:1000
      })
    }else if(newpwd != newpwd2){
        wx.showToast({
          title: '两次密码输入不一致',
          icon:'none',
          duration:1000
        })
    }else{
      // var url = "https://www.lishuming.top/pj/index.php/student/api/setpassword";
      var url = app.globalData.url.setpassword;
      wx.request({
        url: url,
        method:'POST',
        data:{
          no:'1635050238',
          oldpwd:oldpwd,
          newpwd:newpwd
        },
        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,
              success: function () {
                setTimeout(function () {
                  wx.navigateBack({ belta: 1 })
                }, 2000)
              }
            })
          }

        }
      })
    }

  },
}）

忘记密码：建一个forgetpwd文件：忘记密码分为两步进行，第一步：先输入学号和绑定的邮箱，第二步：设置新密码，并输入邮箱中的验证码在规定时间内即可修改密码成功。

wxml中：

<!--pages/forgetpwd/forgetpwd.wxml-->
<view class='content' wx:if='{{show_content}}'>
  <form bindsubmit='next'>
    <view class='header'>
      <text>找回密码：第1步</text>
    </view>
    <view class='section'>
      <input type='number' placeholder='请输入学号' name="no" />
      <input placeholder='请输入绑定的邮箱' name='email'></input>
    </view>
    <button class='btn' type='primary' form-type='submit'>下一步</button>
  </form>
</view>

<view class='content2' wx:if='{{show_content2}}'>
  <form bindsubmit='submit'>
    <view class='header'>
      <text>找回密码：第2步</text>
    </view>
    <view class='section2'>
      <view class='section2_one'>
        <input password='{{mask}}' placeholder='输入新密码' name='pwd'></input>
        <view class="body-view">
            <switch bindchange="switchChange"/>
        </view>

      </view>
      <view class='section2_one'>
        <input placeholder='请输入邮件中的验证码' name='validcode'></input>
        <view class="time">
          <text style="color:#aaa">剩余：{{second}}秒</text>
        </view>
      </view>
    </view>
    <button class='btn2' type='primary' form-type='submit'>提交</button>
  </form>
</view>

js中：在js中写一个计算时间的方法作为输入验证码的倒计时，设置填写的所有内容不能为空并输入正确的邮箱和验证码后调用修改密码的接口修改密码

// pages/forgetpwd/forgetpwd.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: {
    no: null,
    second:30,
    mask: true,
    show_content:true,
    show_content2:false
  },
  next:function(e){
    // console.log(e.detail.value);
    var no = e.detail.value.no;
    var email = e.detail.value.email;
    if (no == '' || email == '' || no == null || email == null){
      wx.showToast({
        title: '学号或邮箱不能为空',
        icon: 'none',
        duration: 1000
      })
    }else{
      wx.request({
        url: app.globalData.url.forgetpwd,
        data:{
          no:no,
          email:email
        },
        method:'POST',
        header:{
          'content-type':'application/x-www-form-urlencoded'
        },
        success:(res)=>{
          console.log(res.data);
          if(res.data.error==true){
            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:'success',
              duration:2000
            })
            this.setData({
              show_content: false, show_content2: true
            })
          }
        }
      })
      
    }
  },

  switchChange: function (e) {
    // console.log(e.detail.value)
    this.setData({ mask: !e.detail.value })
  },

  submit:function(e){
    var pwd = e.detail.value.pwd;
    var validcode = e.detail.value.validcode;
    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,
          pwd: pwd,
          validcode: validcode
        },
        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)
          }
        }
      })
    }
  },
}）