gold-vue/src/components/PasswordSuccess.vue

<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>