index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="lock-container">
  3. <div class="lock-form animated bounceInDown">
  4. <div class="animated"
  5. :class="{'shake':passwdError,'bounceOut':pass}">
  6. <h3 class="title">{{userInfo.username}}</h3>
  7. <el-input placeholder="请输入登录密码"
  8. type="password"
  9. class="input-with-select animated"
  10. v-model="passwd"
  11. @keyup.enter.native="handleLogin">
  12. <el-button slot="append"
  13. icon="icon-bofangqi-suoping"
  14. @click="handleLogin"></el-button>
  15. <el-button slot="append"
  16. icon="icon-tuichu"
  17. @click="handleLogout"></el-button>
  18. </el-input>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import { mapGetters, mapState } from "vuex";
  25. import { removeRefreshToken, removeToken } from '@/util/auth';
  26. export default {
  27. name: "lock",
  28. data() {
  29. return {
  30. passwd: "",
  31. passwdError: false,
  32. pass: false
  33. };
  34. },
  35. created() {},
  36. mounted() {},
  37. computed: {
  38. ...mapState({
  39. userInfo: state => state.user.userInfo
  40. }),
  41. ...mapGetters(["tag", "lockPasswd"])
  42. },
  43. props: [],
  44. methods: {
  45. handleLogout() {
  46. this.$confirm("是否退出系统, 是否继续?", "提示", {
  47. confirmButtonText: "确定",
  48. cancelButtonText: "取消",
  49. type: "warning"
  50. }).then(() => {
  51. this.$store.dispatch("LogOut").then(() => {
  52. // 清除token信息
  53. removeToken();
  54. removeRefreshToken();
  55. this.$router.push({ path: "/login" });
  56. });
  57. });
  58. },
  59. handleLogin() {
  60. if (this.passwd !== this.lockPasswd) {
  61. this.passwd = "";
  62. this.$message({
  63. message: "解锁密码错误,请重新输入",
  64. type: "error"
  65. });
  66. this.passwdError = true;
  67. setTimeout(() => {
  68. this.passwdError = false;
  69. }, 1000);
  70. return;
  71. }
  72. this.pass = true;
  73. setTimeout(() => {
  74. this.$store.commit("CLEAR_LOCK");
  75. this.$router.push({
  76. path: this.$router.$avueRouter.getPath({ src: this.tag.value })
  77. });
  78. }, 1000);
  79. }
  80. },
  81. components: {}
  82. };
  83. </script>
  84. <style lang="scss">
  85. .lock-container {
  86. height: 100%;
  87. display: flex;
  88. align-items: center;
  89. justify-content: center;
  90. position: relative;
  91. .title {
  92. margin-bottom: 8px;
  93. color: #333;
  94. }
  95. }
  96. .lock-container::before {
  97. z-index: -999;
  98. content: "";
  99. position: absolute;
  100. left: 0;
  101. top: 0;
  102. width: 100%;
  103. height: 100%;
  104. background-image: url("/img/bg/login.png");
  105. background-size: cover;
  106. }
  107. .lock-form {
  108. width: 300px;
  109. }
  110. </style>