devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：你好赵伟 | 2024-02-22 22:59:53

赞

踩

微信小程序 重置密码

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

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

wxml中：

  1. <!--pages/myinfo/myinfo.wxml--> 
  2.   <view class='header'>
  3.     <view class='logo'>
  4.       <open-data type="userAvatarUrl"></open-data>
  5.     </view>
  6.     <view class='name'>
  7.       <open-data type="userNickName"></open-data>
  8.     </view>
  9.   </view>
  10. <view class='content'>
  11.   <view class="msg">
  12.     <text class='msg-left'>学号：</text>
  13.     <text class='msg-right'>{{student.no}}</text> 
  14.   </view>
  15.   <view class="msg">
  16.     <text class='msg-left'>姓名：</text>
  17.     <text class='msg-right'>{{student.name}}</text> 
  18.   </view>
  19.   <view class="msg">
  20.     <text class='msg-left'>班级：</text>
  21.     <text class='msg-right'>{{student.classname}}</text> 
  22.   </view>
  23.   <view class="msg">
  24.     <text class='msg-left'>系部：</text>
  25.     <text class='msg-right'>{{student.departmentname}}</text> 
  26.   </view>
  27.   <view class="msg" bindtap='email'>
  28.     <text class='msg-left'>邮箱：</text>
  29.     <text class='msg-right' wx:if="{{student.email=='' || student.email==null}}">未绑定</text><text class='msg-right' wx:else>{{student.email}}</text> 
  30.   </view>
  31.   <view class="msg">
  32.     <text class='msg-left'>密码：</text>
  33.     <text class='msg-right' bindtap='selectmyinfo' data-no="{{no}}">重置</text> 
  34.   </view>
  35.   <view class="msg" bindtap='exit'>
  36.     <text class='msg-left'>退出：</text>
  37.     <text class='msg-right'>>></text> 
  38.   </view>
  39. </view>

js中：

  1. // pages/myinfo/myinfo.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.     student:null
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.     var student = wx.getStorageSync('student');
  16.     this.setData({
  17.       student:student
  18.     })
  19.   },
  20.   selectmyinfo: function (e) {
  21.     var no = wx.getStorageSync('student').no;
  22.     wx.navigateTo({
  23.       url: '../password/password?no=' + no,
  24.     })
  25.   },
  26.   exit: function (e) {
  27.     wx.showModal({
  28.       title: '提示',
  29.       content: '请确认是否退出',
  30.       success: function (res) {
  31.         if (res.confirm) {
  32.           wx.removeStorageSync('student'),
  33.             wx.redirectTo({
  34.               url: '../login/login'
  35.             })
  36.         } else if (res.cancel) {
  37.           console.log('用户点击取消')
  38.         }
  39.       }
  40.     })
  41.   },
  42.   email: function () {
  43.     wx.navigateTo({
  44.       url: '../email/email',
  45.     })
  46.   },
  47.   /**
  48.    * 生命周期函数--监听页面初次渲染完成
  49.    */
  50.   onReady: function () {
  51.   
  52.   },
  53.  
  54.   /**
  55.    * 生命周期函数--监听页面显示
  56.    */
  57.   onShow: function () {
  58.     this.onLoad();
  59.   },
  60. }）

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

wxml中：

  1. <!--pages/password/password.wxml-->
  2. <view class='content'>
  3.   <form bindsubmit="formSubmit">
  4.     <view class='content_one'>
  5.       <view class='pass'>
  6.         <text>原密码</text>
  7.         <input password='true' name="oldpwd" placeholder='请输入旧密码' />
  8.       </view>
  9.       <view class='pass'>
  10.         <text>新密码</text>
  11.         <input password='true' name="newpwd" placeholder='请输入新密码' />
  12.       </view>
  13.       <view class='pass'>
  14.         <text>确认密码</text>
  15.         <input password='true' name="newpwd2" placeholder='请确认一遍密码' />
  16.       </view>
  17.     </view>
  18.     <button type='primary' form-type="submit" class='btn'>提交</button>
  19.   </form>
  20. </view>

js中：

  1. // pages/password/password.js
  2. const app = getApp()
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.   
  10.   },
  11.   formSubmit:function(e){
  12.     // console.log(e);
  13.     var oldpwd = e.detail.value.oldpwd;
  14.     var newpwd = e.detail.value.newpwd;
  15.     var newpwd2 = e.detail.value.newpwd2;
  16.  
  17.     if(oldpwd=='' || newpwd == '' || newpwd2 == ''){
  18.       wx.showToast({
  19.         title: '密码不能为空',
  20.         icon:'none',
  21.         duration:1000
  22.       })
  23.     }else if(newpwd != newpwd2){
  24.         wx.showToast({
  25.           title: '两次密码输入不一致',
  26.           icon:'none',
  27.           duration:1000
  28.         })
  29.     }else{
  30.       // var url = "https://www.lishuming.top/pj/index.php/student/api/setpassword";
  31.       var url = app.globalData.url.setpassword;
  32.       wx.request({
  33.         url: url,
  34.         method:'POST',
  35.         data:{
  36.           no:'1635050238',
  37.           oldpwd:oldpwd,
  38.           newpwd:newpwd
  39.         },
  40.         header:{
  41.           'content-type':'application/x-www-form-urlencoded'
  42.         },
  43.         success:(res)=>{
  44.           console.log(res.data);  
  45.           if (res.data.error) {
  46.             wx.showToast({
  47.               title: res.data.msg,
  48.               icon: 'none',
  49.               duration: 2000
  50.             })
  51.           } else {
  52.             wx.showToast({
  53.               title: res.data.msg,
  54.               icon: 'success',
  55.               duration: 2000,
  56.               success: function () {
  57.                 setTimeout(function () {
  58.                   wx.navigateBack({ belta: 1 })
  59.                 }, 2000)
  60.               }
  61.             })
  62.           }
  63.  
  64.         }
  65.       })
  66.     }
  67.  
  68.   },
  69. }）

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

wxml中：

  1. <!--pages/forgetpwd/forgetpwd.wxml-->
  2. <view class='content' wx:if='{{show_content}}'>
  3.   <form bindsubmit='next'>
  4.     <view class='header'>
  5.       <text>找回密码：第1步</text>
  6.     </view>
  7.     <view class='section'>
  8.       <input type='number' placeholder='请输入学号' name="no" />
  9.       <input placeholder='请输入绑定的邮箱' name='email'></input>
  10.     </view>
  11.     <button class='btn' type='primary' form-type='submit'>下一步</button>
  12.   </form>
  13. </view>
  14.  
  15. <view class='content2' wx:if='{{show_content2}}'>
  16.   <form bindsubmit='submit'>
  17.     <view class='header'>
  18.       <text>找回密码：第2步</text>
  19.     </view>
  20.     <view class='section2'>
  21.       <view class='section2_one'>
  22.         <input password='{{mask}}' placeholder='输入新密码' name='pwd'></input>
  23.         <view class="body-view">
  24.             <switch bindchange="switchChange"/>
  25.         </view>
  26.  
  27.       </view>
  28.       <view class='section2_one'>
  29.         <input placeholder='请输入邮件中的验证码' name='validcode'></input>
  30.         <view class="time">
  31.           <text style="color:#aaa">剩余：{{second}}秒</text>
  32.         </view>
  33.       </view>
  34.     </view>
  35.     <button class='btn2' type='primary' form-type='submit'>提交</button>
  36.   </form>
  37. </view>

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

  1. // pages/forgetpwd/forgetpwd.js
  2. //计算时间
  3. const app = getApp()
  4. function countdown(that) {
  5.   var second = that.data.second
  6.   if (second == 0) {
  7.     that.setData({
  8.       disabled: true
  9.     });
  10.     return;
  11.   }
  12.   var time = setTimeout(function () {
  13.     that.setData({
  14.       second: second - 1
  15.     });
  16.     countdown(that);
  17.   }
  18.     , 1000)
  19. }
  20.  
  21. Page({
  22.  
  23.   /**
  24.    * 页面的初始数据
  25.    */
  26.   data: {
  27.     no: null,
  28.     second:30,
  29.     mask: true,
  30.     show_content:true,
  31.     show_content2:false
  32.   },
  33.   next:function(e){
  34.     // console.log(e.detail.value);
  35.     var no = e.detail.value.no;
  36.     var email = e.detail.value.email;
  37.     if (no == '' || email == '' || no == null || email == null){
  38.       wx.showToast({
  39.         title: '学号或邮箱不能为空',
  40.         icon: 'none',
  41.         duration: 1000
  42.       })
  43.     }else{
  44.       wx.request({
  45.         url: app.globalData.url.forgetpwd,
  46.         data:{
  47.           no:no,
  48.           email:email
  49.         },
  50.         method:'POST',
  51.         header:{
  52.           'content-type':'application/x-www-form-urlencoded'
  53.         },
  54.         success:(res)=>{
  55.           console.log(res.data);
  56.           if(res.data.error==true){
  57.             wx.showToast({
  58.               title: res.data.msg,
  59.               icon:'none',
  60.               duration:2000
  61.             })
  62.           }else{
  63.             this.setData({
  64.               no: no, 
  65.               second: res.data.expire
  66.               });
  67.             countdown(this);
  68.             wx.showToast({
  69.               title: res.data.msg,
  70.               icon:'success',
  71.               duration:2000
  72.             })
  73.             this.setData({
  74.               show_content: false, show_content2: true
  75.             })
  76.           }
  77.         }
  78.       })
  79.       
  80.     }
  81.   },
  82.  
  83.   switchChange: function (e) {
  84.     // console.log(e.detail.value)
  85.     this.setData({ mask: !e.detail.value })
  86.   },
  87.  
  88.   submit:function(e){
  89.     var pwd = e.detail.value.pwd;
  90.     var validcode = e.detail.value.validcode;
  91.     if (validcode == '' || validcode == null || pwd == '' || pwd == null) {
  92.       wx.showToast({
  93.         title: '验证码和密码不能为空',
  94.         icon: 'none',
  95.         duration: 2000
  96.       })
  97.     }else{
  98.       wx.request({
  99.         url: app.globalData.url.initpassword,
  100.         method: 'POST',
  101.         data:{
  102.           no: this.data.no,
  103.           pwd: pwd,
  104.           validcode: validcode
  105.         },
  106.         header: {
  107.           'content-type': 'application/x-www-form-urlencoded'
  108.         },
  109.         success:(res)=>{
  110.           console.log(res.data);
  111.           if (res.data.error) {
  112.             wx.showToast({
  113.               title: res.data.msg,
  114.               icon: 'none',
  115.               duration: 2000
  116.             })
  117.           }else{
  118.             wx.showToast({
  119.               title: res.data.msg,
  120.               icon: 'success',
  121.               duration: 2000
  122.             })
  123.             setTimeout(() => {
  124.               wx.navigateBack({
  125.                 delta: 1
  126.               })
  127.             }, 2000)
  128.           }
  129.         }
  130.       })
  131.     }
  132.   },
  133. }）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/131791
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号