433 lines
12 KiB
Vue
433 lines
12 KiB
Vue
<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">
|
||
<!-- 旧密码输入框 -->
|
||
<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>
|
||
|
||
<!-- 忘记密码 -->
|
||
<view class="forgetPassword">
|
||
<text class="forgetPasswordText" @click="onforgetPassword">忘记密码？</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { goEasylogin, goEasylogout } from "../../../components/goEasyTool/tool.js";
|
||
import request from "../../../components/request.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
oldPassword: "", //旧密码
|
||
newPassword: "", //新密码
|
||
confirmPassword: "", //确认密码
|
||
showoldPassword: true, //旧密码是否显示
|
||
shownewPassword: true, //新密码是否显示
|
||
showconfirmPassword: true, //确认密码是否显示
|
||
oldPasswordError: false, //旧密码错误
|
||
newPasswordErrorone: false, //新密码错误
|
||
newPasswordErrortwo: false, //新密码错误
|
||
confirmPasswordError: false, //确认密码错误
|
||
id: "", //用户id
|
||
havaPassword: null, //是否有密码/false无密码/true有密码
|
||
email: "", //邮箱
|
||
};
|
||
},
|
||
onLoad() {
|
||
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;
|
||
},
|
||
});
|
||
},
|
||
methods: {
|
||
// 忘记密码
|
||
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;
|
||
},
|
||
// 返回上一页
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
</style>
|