<template>
|
<div class="container">
|
<div class="row">
|
<el-row>
|
<div class="loginBox">
|
<div class="note-release-success" style="text-align: center">
|
<p class="ico">
|
<img src="/static/images/page-success.png" alt style="width:15%;height:auto"/>
|
</p>
|
<p class="title" >{{message}}</p>
|
<!--<p class="info"></p>-->
|
<p class="button">
|
<router-link :to="{path: '/login'}">
|
重新登陆
|
<span id="num">{{count}}秒后自动跳转</span>
|
</router-link>
|
</p>
|
</div>
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
<script>
|
import PHead from "@/base/components/head.vue";
|
import PFoot from "@/base/components/foot.vue";
|
import utilApi from "../../../common/utils";
|
import * as loginApi from "../api/login";
|
export default {
|
components: {
|
PHead,
|
PFoot
|
},
|
data() {
|
return {
|
logoutsuccess: false,
|
message:'',
|
timer:null,
|
count: "" //倒计时
|
};
|
},
|
methods: {
|
|
//几秒后进入跳转页面
|
goGrdoupRecor() {
|
const TIME_COUNT = 3;
|
if (!this.timer) {
|
this.count = TIME_COUNT;
|
this.show = false;
|
this.timer = setInterval(() => {
|
if (this.count > 0 && this.count <= TIME_COUNT) {
|
this.count--;
|
} else {
|
this.show = true;
|
clearInterval(this.timer);
|
this.timer = null;
|
//跳转的页面写在此处
|
|
this.$router.push({ path: "/login" });
|
}
|
}, 1000);
|
}
|
},
|
},
|
created() {
|
loginApi.user_logout({}).then(
|
res => {
|
if (res.success) {
|
this.message='退出成功'
|
sessionStorage.removeItem("activeUser");
|
this.logoutsuccess = true;
|
this.goGrdoupRecor();
|
} else {
|
this.logoutsuccess = false;
|
}
|
},
|
res => {
|
this.message='退出失败，请重新尝试！'
|
this.logoutsuccess = false;
|
}
|
)
|
},
|
beforeDestroy(){
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
mounted() {}
|
};
|
</script>
|
<style scoped>
|
.container {
|
position: absolute;
|
display: table;
|
height: 100%;
|
width: 100%;
|
text-align: center;
|
margin: auto;
|
background: url("/static/images/background.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
.row {
|
display: table-cell;
|
vertical-align: middle;
|
}
|
.loginBox{
|
width: 20%;
|
height: 20%;
|
margin: auto;
|
padding: 4% 5%;
|
border-radius: 20px;
|
-moz-border-radius: 20px;
|
-webkit-border-radius: 20px;
|
background-color: rgba(250,250,250,0.2);
|
}
|
.login-form {
|
width: 40%;
|
margin: 5% auto 0;
|
}
|
</style>
|
