init
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="login-container" ref="login" @keyup.enter="handleLogin">
|
||||
<div class="login-time">
|
||||
{{ time }}
|
||||
</div>
|
||||
<div class="login-weaper">
|
||||
<div class="login-left animate__animated animate__fadeInLeft">
|
||||
<img class="img" src="/img/logo.png" alt="" />
|
||||
<p class="title">{{ $t('login.info') }}</p>
|
||||
</div>
|
||||
<div class="login-border animate__animated animate__fadeInRight">
|
||||
<div class="login-main">
|
||||
<div class="lock-form animate__animated animate__bounceInDown">
|
||||
<div
|
||||
class="animate__animated"
|
||||
:class="{ shake: passwdError, animate__bounceOut: pass }"
|
||||
>
|
||||
<h3 style="color: #333">{{ userInfo.username }}</h3>
|
||||
<el-input
|
||||
placeholder="请输入登录密码"
|
||||
type="password"
|
||||
class="input-with-select animated"
|
||||
v-model="passwd"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<template #append>
|
||||
<i class="icon-bofangqi-suoping" @click="handleLogin"></i>
|
||||
|
||||
<i class="icon-tuichu" @click="handleLogout"></i>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { removeRefreshToken, removeToken } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'lock',
|
||||
data() {
|
||||
return {
|
||||
time: '',
|
||||
passwd: '',
|
||||
passwdError: false,
|
||||
pass: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTime();
|
||||
setInterval(() => {
|
||||
this.getTime();
|
||||
}, 1000);
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
...mapGetters(['userInfo', 'tag', 'lockPasswd']),
|
||||
},
|
||||
props: [],
|
||||
methods: {
|
||||
getTime() {
|
||||
this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss');
|
||||
},
|
||||
handleLogout() {
|
||||
this.$confirm('是否退出系统, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
// 清除token信息
|
||||
removeToken();
|
||||
removeRefreshToken();
|
||||
this.$router.push({ path: '/login' });
|
||||
});
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
if (this.passwd !== this.lockPasswd) {
|
||||
this.passwd = '';
|
||||
this.$message({
|
||||
message: '解锁密码错误,请重新输入',
|
||||
type: 'error',
|
||||
});
|
||||
this.passwdError = true;
|
||||
setTimeout(() => {
|
||||
this.passwdError = false;
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
this.pass = true;
|
||||
setTimeout(() => {
|
||||
this.$store.commit('CLEAR_LOCK');
|
||||
this.$router.push({
|
||||
path: this.tag.path,
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
Reference in New Issue
Block a user