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.
85 lines
2.0 KiB
85 lines
2.0 KiB
<template>
|
|
<div class="success-popup">
|
|
<div class="popup-content">
|
|
<div class="icon">
|
|
<el-icon :size="48" color="#67c23a">
|
|
<SuccessFilled />
|
|
</el-icon>
|
|
</div>
|
|
<div class="title">修改密码成功！</div>
|
|
<div class="desc">系统将在 {{ countdown }} 秒后自动跳转至登录页</div>
|
|
<el-button type="primary" @click="immediateJump">立即跳转</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted} from 'vue';
|
|
import {ElIcon, ElButton} from 'element-plus';
|
|
import {SuccessFilled} from '@element-plus/icons-vue';
|
|
import {useRouter} from 'vue-router';
|
|
|
|
const machineId = localStorage.getItem("machineId");
|
|
|
|
const countdown = ref(3);
|
|
const router = useRouter();
|
|
|
|
// 倒计时逻辑，自动跳转
|
|
const startCountdown = () => {
|
|
const timer = setInterval(() => {
|
|
countdown.value--;
|
|
if (countdown.value === 0) {
|
|
clearInterval(timer);
|
|
// 这里可根据实际需求选择刷新跳转还是路由跳转
|
|
// 若需要刷新页面跳转，使用 window.location.href
|
|
// window.location.href = '/login';
|
|
router.replace(`/login?machineId=${machineId || ''}`);
|
|
// 若用路由跳转（路由配置好登录页路径前提下）：router.push('/login');
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
const immediateJump = () => {
|
|
// window.location.href = '/login';
|
|
// 路由跳转方式：
|
|
router.replace(`/login?machineId=${machineId || ''}`);
|
|
};
|
|
|
|
onMounted(() => {
|
|
startCountdown();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.success-popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.popup-content {
|
|
background: #fff;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
.icon {
|
|
margin-bottom: 16px;
|
|
}
|
|
.title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
.desc {
|
|
margin-bottom: 24px;
|
|
color: #999;
|
|
}
|
|
</style>
|