锁屏

<template>
  <div v-if="isCover" class="screenBox">
    <div class="userInfo">
      <el-input
        v-model.trim="userForm.newPassword"
        :placeholder="this.$t('lockScreen.pleaseEnterLoginPwd')"
        style=" 260px; "
        size="small"
        clearable
        ref="password"
        :type="passwordType"
        @keyup.enter.native="unLock()"
      />
      <!-- <span class="show-pwd" @click="showPwd">
                  <svg-icon
                    :icon-class="
                      passwordType === 'password' ? 'eye' : 'eye-open'
                    "
                  />
        </span> -->
      <div class="btn_class">
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-unlock"
          @click="unLock"
          >{{ this.$t("lockScreen.unlock") }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getLockCache, getlockCOver } from '@/utils/auth'
import md5 from 'js-md5'
export default {
  data() {
    return {
      userForm: {
        newPassword: ''
      },
      passwordType: 'password',
      imgList: [] // 存放图片的地方
    }
  },
  computed: {
    ...mapGetters(['isCover']),
    ...mapActions(['logout']),
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    unLock() {
      const oldAuct = getLockCache()
      const str1 = 'fo3e8a'
      const str2 = '05e6'
      if (
        this.userForm.newPassword === '' ||
        this.userForm.newPassword === undefined
      ) {
        return
      } else if (str1 + md5(this.userForm.newPassword) + str2 != oldAuct) {
        this.userForm.newPassword = ''
        this.$notify.error({
          title: this.$t('lockScreen.lockError'),
          message: this.$t('lockScreen.unlockPwdErrorPleaseAgainEnter'),
          duration: 1500
        })
        return
      } else {
        setTimeout(() => {
          this.userForm.newPassword = ''
          this.$store.commit('lockScreen/CLEAR_LOCK', false)
        }, 500)
      }
    },
    preventRefresh() {
      const lockCOver = getlockCOver()
      this.$store.commit('lockScreen/PREVENT_REFRSH', lockCOver)
    }
  },
  mounted() {
    this.preventRefresh()
  }
}
</script>

<style lang="scss" scoped>
$dark_gray: #889aa4;
.screenBox {
   100%;
  height: 100%;
  background: url("../../assets/lockscreent_imgs/img_3.jpg") no-repeat;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
}
.userInfo {
  position: relative;
  display: flex;
  .btn_class {
    margin-left: 10px;
  }
}
.show-pwd {
  position: absolute;
  left: 60%;
  top:8px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
</style>

lockMixin.js

import { getToken } from '@/utils/auth.js'
export default {
  data() {
    return {
      lastTime: null, // 第一次点击
      currentTime: null, // 当前点击时间
      quitTIme: 0,
      timeOut: 30 * 60 * 1000 , // 设置超时时间：30分钟S
      clearLastTimer: 0
    }
  },
  methods: {
    doSomeThing() {
      this.currentTime = new Date().getTime() // 记录当前点击的时间
      if (this.currentTime - this.lastTime > this.timeOut) {
        // 登录状态
        if (getToken() !== null) {
          window.clearInterval(this.quitTIme)
          this.$store.commit('lockScreen/SET_LOCK', true)
          this.clearLastTimer = setInterval(() => { // 获取第一次时间，避免刚点击就又锁屏了
            this.lastTime = new Date().getTime()
            clearInterval(this.clearLastTimer)
          }, 200)
        }
      } else {
        this.lastTime = new Date().getTime() // 如果30分之内点击，则把最新时间记录覆盖掉之前存的最后一次点击时间
      }
    }
  },
  created() {
    this.lastTime = new Date().getTime() // 网页第一次打开时，记录当前时间
  },
  mounted() {
    this.quitTIme = window.setInterval(this.testTime, 1000)
  }
}

import { getlockCOver, removlockCOver, setlockCOver } from '@/utils/auth'
const state = {
  isCover: getlockCOver() || false // 是否覆盖
}
const mutations = {
  SET_LOCK: (state, cover) => {
    state.isLock = true
    state.isCover = cover
    setlockCOver(state.isCover)
  },
  CLEAR_LOCK: (state, cover) => {
    state.isCover = cover
    state.isLock = false
    state.lockPassWord = ''
    removlockCOver()
  },
  //保持刷新
  PREVENT_REFRSH: (state, cover) => {
    state.isCover = cover
  }
}
const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

// 锁屏覆盖
const lockCOver = 'HLT_L_S_COVER'

export function getlockCOver() {
  return sessionStorage.getItem(lockCOver)
}

export function setlockCOver(cache) {
  return sessionStorage.setItem(lockCOver, cache)
}
export function removlockCOver() {
  return sessionStorage.removeItem(lockCOver)
}

使用

<template>
  <div id="app" @click="doSomeThing">
    <transition name="el-zoom-in-center">
      <lockScreen />
    </transition>
    <router-view />
  </div>
</template>

<script>
import lockScreen from "@/components/LockScreen/index";
import lockMixin from "@/components/LockScreen/lockMixin";
export default {
  mixins: [lockMixin],
  name: "App",
  components: {
    lockScreen,
  },
};
</script>
<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>