pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0044f8f334cfb17aae6e5f0ca8bc0ae6a2a7ff43
tk-mini-program/pages/Setting/settingmod/changePassword.vue

433 lines
12 KiB
Vue
Raw Normal View History

优化代码
2025-08-05 22:05:56 +08:00
<template>
<view class="change-password">
<view class="bg">
<image
class="bgImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
mode="scaleToFill"
/>
</view>
<view class="Return" @click="onBack">
<image
class="ReturnImg"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
mode="scaleToFill"
/>
</view>
<view class="title">修改密码</view>
<view class="contentbox">
<view class="content">
优化代码
2025-08-06 20:48:39 +08:00
<!-- 旧密码输入框 -->
<view class="uni-input-wrapper" v-if="havaPassword">
<input
class="uni-input"
v-model="oldPassword"
placeholder="请输入旧密码"
:password="showoldPassword"
/>
<view>
<img
class="passwordImg"
@click="changeoldPassword"
:src="
showoldPassword
? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
"
alt=""
/>
</view>
</view>
<text v-if="havaPassword" class="error">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
<text v-if="oldPasswordError == true && havaPassword == true" class="error-text">请输入正确的旧密码</text>
<!-- 新密码输入框 -->
<view class="uni-input-wrapper">
<input
class="uni-input"
v-model="newPassword"
placeholder="请输入新密码"
:password="shownewPassword"
/>
<view>
<img
class="passwordImg"
@click="changenewPassword"
:src="
shownewPassword
? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
"
alt=""
/>
</view>
</view>
<text class="error">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
<text v-if="newPasswordErrorone" class="error-text">请输入合法的密码</text>
<text v-if="newPasswordErrortwo" class="error-text">新密码和旧密码不能相同</text>
<!-- 新密码输入框 -->
<view class="uni-input-wrapper">
<input
class="uni-input"
v-model="confirmPassword"
placeholder="请重复输入新密码"
:password="showconfirmPassword"
/>
<view>
<img
class="passwordImg"
@click="changeconfirmPassword"
:src="
showconfirmPassword
? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
"
alt=""
/>
</view>
</view>
<text v-if="confirmPasswordError" class="error-text"
>请确认两次输入的密码是否一致</text
>
<!-- 确认按钮 -->
<view class="confirmBtn" @click="onConfirm"> 确认修改 </view>
优化代码
2025-08-05 22:05:56 +08:00
优化代码
2025-08-06 20:48:39 +08:00
<!-- 忘记密码 -->
<view class="forgetPassword">
<text class="forgetPasswordText" @click="onforgetPassword">忘记密码？</text>
</view>
优化代码
2025-08-05 22:05:56 +08:00
</view>
</view>
</view>
</template>
<script>
优化代码
2025-08-06 20:48:39 +08:00
import { goEasylogin, goEasylogout } from "../../../components/goEasyTool/tool.js";
import request from "../../../components/request.js";
优化代码
2025-08-05 22:05:56 +08:00
export default {
data() {
return {
优化代码
2025-08-06 20:48:39 +08:00
oldPassword: "", //旧密码
newPassword: "", //新密码
confirmPassword: "", //确认密码
showoldPassword: true, //旧密码是否显示
shownewPassword: true, //新密码是否显示
showconfirmPassword: true, //确认密码是否显示
oldPasswordError: false, //旧密码错误
newPasswordErrorone: false, //新密码错误
newPasswordErrortwo: false, //新密码错误
confirmPasswordError: false, //确认密码错误
id: "", //用户id
havaPassword: null, //是否有密码/false无密码/true有密码
email: "", //邮箱
优化代码
2025-08-05 22:05:56 +08:00
};
},
onLoad() {
优化代码
2025-08-06 20:48:39 +08:00
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
this.havaPassword = res.data.havaPassword;
console.log(this.id, this.havaPassword);
this.email = res.data.email;
},
});
},
onShow() {
uni.getStorage({
key: "userinfo",
success: (res) => {
this.id = res.data.id;
this.havaPassword = res.data.havaPassword;
console.log(this.id, this.havaPassword);
this.email = res.data.email;
},
});
优化代码
2025-08-05 22:05:56 +08:00
},
methods: {
优化代码
2025-08-06 20:48:39 +08:00
// 忘记密码
onforgetPassword() {
if (this.email === ""||this.email === null) {
uni.showToast({
title: "请先绑定邮箱再进行操作",
icon: "none",
duration: 2000,
});
return;
}
request({
url: "user/forgetMail",
method: "POST",
data: {
mailAddress: this.email,
},
userInfo: true,
}).then((ress) => {
if (ress.code === 200) {
uni.showToast({
title: "已向您的"+this.email+"邮箱发送密码重置邮件，请在邮箱中进行密码重置",
icon: "success",
duration: 5000,
});
}else{
uni.showToast({
title: ress.data,
icon: "none",
duration: 2000,
});
}
}).catch(() => {
uni.showToast({
title: '网络错误',
icon: "none",
duration: 2000,
});
});
},
// 验证密码合法性
validatePassword(password) {
const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
return regex.test(password);
},
// 确认修改
onConfirm() {
this.oldPasswordError = false;
this.newPasswordErrorone = false;
this.newPasswordErrortwo = false;
this.confirmPasswordError = false;
if (this.email === ""||this.email === null) {
uni.showToast({
title: "请先绑定邮箱再进行操作",
icon: "none",
duration: 2000,
});
return;
}
if (this.oldPassword === "" && this.havaPassword == true) {
this.oldPasswordError = true;
return;
}
if (this.validatePassword(this.oldPassword) === false && this.havaPassword == true) {
this.oldPasswordError = true;
return;
}
if (this.validatePassword(this.newPassword) === false) {
this.newPasswordErrorone = true;
return;
}
if (this.newPassword === "") {
this.newPasswordErrorone = true;
return;
}
if (this.newPassword === this.oldPassword) {
this.newPasswordErrortwo = true;
return;
}
if (this.confirmPassword !== this.newPassword) {
this.confirmPasswordError = true;
return;
}
if (this.havaPassword) {
uni.showLoading({
title: "修改中...",
mask: true,
});
goEasylogout(this.$goeasy);
request({
url: "user/updateUserInfo",
method: "POST",
data: {
id: this.id,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword,
oldPassword: this.oldPassword,
},
userInfo: true,
}).then((ress) => {
console.log("修改调用返回", ress);
if (ress.code === 200) {
uni.showToast({
title: "修改成功",
icon: "success",
});
uni.setStorageSync("userinfo", ress.data);
goEasylogin(
this.$goeasy,
String(ress.data.id),
ress.data.headerIcon,
ress.data.nickName
);
uni.hideLoading();
//```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
uni.navigateBack({
delta: 1,
});
//````````````````````````````````````````````````````````````````````
} else {
uni.hideLoading();
uni.showToast({
title: ress.data,
icon: "none",
});
}
});
} else {
uni.showLoading({
title: "修改中...",
mask: true,
});
request({
url: "user/setPassword",
method: "POST",
data: {
id: this.id,
password: this.newPassword,
confirmPassword: this.confirmPassword,
},
userInfo: true,
}).then((ress) => {
console.log("修改调用返回", ress);
if (ress.code === 200) {
uni.showToast({
title: "修改成功",
icon: "success",
});
uni.hideLoading();
//```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
uni.navigateBack({
delta: 1,
});
//````````````````````````````````````````````````````````````````````
} else {
uni.hideLoading();
uni.showToast({
title: ress.data,
icon: "none",
});
}
});
}
},
//新密码显示/隐藏
changenewPassword() {
this.shownewPassword = !this.shownewPassword;
},
// 确认密码显示/隐藏
changeconfirmPassword() {
this.showconfirmPassword = !this.showconfirmPassword;
},
// 旧密码显示/隐藏
changeoldPassword() {
this.showoldPassword = !this.showoldPassword;
},
优化代码
2025-08-05 22:05:56 +08:00
// 返回上一页
onBack() {
console.log(1);
wx.navigateBack({
delta: 1,
});
},
},
};
</script>
<style scoped>
.bg {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.bgImg {
width: 100%;
height: 100%;
}
.Return {
position: fixed;
left: 35rpx;
top: 120rpx;
width: 46rpx;
height: 46rpx;
z-index: 2;
}
.title {
position: fixed;
top: 120rpx;
left: 0;
right: 0;
text-align: center;
font-size: 34rpx;
color: #100e0f;
font-weight: bold;
z-index: 1;
}
.ReturnImg {
width: 100%;
height: 100%;
}
.contentbox {
position: absolute;
top: 200rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
优化代码
2025-08-06 20:48:39 +08:00
.uni-input-wrapper {
width: 70%;
display: flex;
align-items: center;
padding: 8rpx 13rpx;
flex-direction: row;
flex-wrap: nowrap;
border-bottom: 1px solid #e5e5e5;
margin-top: 60rpx;
}
.uni-input {
height: 50rpx;
padding: 15rpx 25rpx;
line-height: 50rpx;
font-size: 28rpx;
flex: 1;
}
.passwordImg {
width: 40rpx;
height: 40rpx;
}
.error-text {
color: red;
font-size: 20rpx;
}
.error {
color: #999;
font-size: 24rpx;
}
.confirmBtn {
width: 90%;
height: 90rpx;
background: linear-gradient(135deg, #00afb2, #4fcacd);
color: #fff;
text-align: center;
line-height: 90rpx;
font-size: 36rpx;
border-radius: 50rpx;
margin-top: 70rpx;
}
.forgetPassword {
width: 90%;
display: flex;
justify-content: flex-end;
margin-top: 40rpx;
}
.forgetPasswordText {
color: #00afb2;
}
优化代码
2025-08-05 22:05:56 +08:00
</style>
Reference in New Issue Copy Permalink