1.首先在个人信息界面显示密码重置选项,然后创建目录password,在wxml设计页面,代码如下:
<!--pages/password/password.wxml-->
<view class='h2'>修改密码</view>
<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>
2.在wxss中设计样式,代码如下:
/* pages/password/password.wxss */
.h2{
width: 100%;
height: 70rpx;
background: #acc;
color: #fff;
line-height: 60rpx;
text-align: center;
border-radius: 20rpx;
}
page{
background: #ddd;
}
.content{
height:500px;
width: 300px;
margin:0px auto;
display: flex;
flex-direction: column;
}
.content_one{
width: 500px;
height: 280px;
/* background: red; */
}
input{
height: 40px;
border-bottom: 1px solid #ccc;
}
.pass{
width: 300px;
height: 80px;
margin-top: 30rpx;
background: #acc;
border-radius: 20rpx;
}
.btn{
width: 300px;
}
3.设计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";
wx.showLoading({
title: '网络请求中......',
})
wx.request({
url: app.globalData.url.setpassword,
method: 'POST',
data: {
no: '1635050307',
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.navigateTo({
url: '../login/login',
})
}, 2000)
}
})
}
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
密码重置功能全部完成。