detection-business/pages/modifyPassword/modifyPassword.vue
2024-11-14 17:48:47 +08:00

107 lines
2.3 KiB
Vue

<template>
<view class="modify-password-page">
<view class="form-item">
<text>旧密码</text>
<input type="password" placeholder="请输入旧密码" v-model="oldPassword"/>
</view>
<view class="form-item">
<text>新密码</text>
<input type="password" placeholder="请输入新密码" v-model="newPassword"/>
</view>
<view class="form-item">
<text>确认新密码</text>
<input type="password" placeholder="再次输入新密码" v-model="confirmPassword"/>
</view>
<button @click="submitPassword">提交</button>
</view>
</template>
<script>
import request from "@/utils/request";
export default {
data() {
return {
oldPassword: '',
newPassword: '',
confirmPassword: ''
};
},
methods: {
submitPassword() {
if (!this.oldPassword || !this.newPassword || !this.confirmPassword) {
uni.showToast({
title: '请填写完整信息',
icon: 'none'
});
return;
}
if (this.newPassword !== this.confirmPassword) {
uni.showToast({
title: '两次密码输入不一致',
icon: 'none'
});
return;
}
// 在这里调用接口提交新密码
request({
url: '/system/user/profile/update-password', // 修改为实际的 API 地址
method: 'PUT',
data: {
oldPassword: this.oldPassword,
newPassword: this.newPassword
},
}).then(res => {
if (res.data) {
uni.showToast({
title: '密码修改成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack();
}, 1000);
} else {
uni.showToast({
title: '修改失败,请重试',
icon: 'none'
});
}
});
}
}
};
</script>
<style scoped>
.modify-password-page {
padding: 20px;
}
.form-item {
margin-bottom: 15px;
}
.form-item text {
display: block;
margin-bottom: 5px;
font-size: 16px;
}
input {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007aff;
color: #fff;
font-size: 16px;
text-align: center;
border-radius: 4px;
}
</style>