You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.6 KiB
159 lines
3.6 KiB
<template>
|
|
<el-container class="accounts">
|
|
<!-- 页面头部 -->
|
|
<el-header>
|
|
<h3 class="header-title">账户设置</h3>
|
|
</el-header>
|
|
|
|
<el-main>
|
|
<el-row justify="center" class="button-row">
|
|
<!-- 注销账号按钮 -->
|
|
<el-col :span="24" class="action-col">
|
|
<el-button type="danger" size="large" @click="showLogoutConfirm" class="action-btn">注销账号</el-button>
|
|
</el-col>
|
|
|
|
<!-- 修改密码按钮 -->
|
|
<el-col :span="24" class="action-col">
|
|
<el-button type="primary" size="large" @click="navigateToResetPassword" class="action-btn">修改密码</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { useRouter } from 'vue-router'; // 如果是Vue 3
|
|
|
|
export default {
|
|
setup() {
|
|
const router = useRouter(); // 如果是Vue 3
|
|
|
|
const showLogoutConfirm = () => {
|
|
ElMessageBox.confirm(
|
|
'您确定要注销您的账号吗？<br>此操作是不可逆的，并且会删除所有与该账号相关联的数据。<br>请谨慎操作。',
|
|
'警告',
|
|
{
|
|
dangerouslyUseHTMLString: true, // 允许HTML字符串
|
|
confirmButtonText: '取消', // 位置互换
|
|
cancelButtonText: '我已阅读并同意注销', // 位置互换
|
|
type: 'warning',
|
|
center: true,
|
|
showClose: false, // 隐藏右上角的关闭按钮
|
|
beforeClose: (action, instance, done) => {
|
|
if (action === 'cancel') { // 注意这里 action 是 'cancel' 表示确认
|
|
// 用户点击“我已阅读并同意注销”后的逻辑，例如发送注销请求
|
|
console.log('用户确认了注销');
|
|
// 这里可以加入注销账号的API调用
|
|
// 模拟异步操作
|
|
setTimeout(() => {
|
|
done(); // 关闭弹窗
|
|
// 注销成功后的处理
|
|
}, 1000);
|
|
} else {
|
|
done(); // 用户点击取消或关闭时直接关闭弹窗
|
|
}
|
|
},
|
|
}
|
|
).catch(() => {
|
|
// 用户取消注销
|
|
console.log('用户取消了注销');
|
|
});
|
|
};
|
|
|
|
const navigateToResetPassword = () => {
|
|
router.push('/reset-password');
|
|
};
|
|
|
|
return {
|
|
showLogoutConfirm,
|
|
navigateToResetPassword,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.accounts {
|
|
padding: 30px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.el-header {
|
|
text-align: center;
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.header-title {
|
|
color: #409EFF;
|
|
font-family: 'Helvetica', sans-serif;
|
|
}
|
|
|
|
.button-row {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.action-col {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 200px;
|
|
height: 50px;
|
|
font-size: 16px;
|
|
border-radius: 25px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.custom-dialog .el-dialog__header {
|
|
background-color: #409EFF;
|
|
color: white;
|
|
}
|
|
|
|
.password-form .el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-field {
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.el-form-item label {
|
|
font-size: 14px;
|
|
color: #555;
|
|
}
|
|
|
|
.dialog-footer {
|
|
text-align: right;
|
|
}
|
|
|
|
.dialog-footer .el-button {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background-color: #409EFF;
|
|
border-color: #409EFF;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
background-color: #66b1ff;
|
|
border-color: #66b1ff;
|
|
}
|
|
|
|
</style>
|