GCLS_Page_Book_Component_NPC/src/App.vue

<template>
  <div id="app">
    <router-view />
    <div
      class="userAgentTips"
      :class="[isPhone ? 'userAgentTips-phone' : '']"
      v-if="userAgentTipShow"
    >
      <img src="./assets/userAgentWarning.png" width="32px" />
      <span
        >当前浏览器可能与网站不兼容！建议使用 chrome 浏览器获得最佳使用体验。
      </span>
      <img
        src="./assets/userAgentClose.png"
        width="16px"
        @click="handleClickUserAgent"
      />
    </div>
  </div>
</template>

<script>
import { removeSession } from "@/utils/role";
import { removeToken } from "@/utils/auth";
import Cookies from "js-cookie";
import { getConfig } from "@/utils/auth";
export default {
  name: "App",
  data() {
    return {
      userAgentTipShow: false,
      timeOut: null,
      isPhone: false
    };
  },
  created() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
    this.handleUserAgentRoot();
    window.addEventListener("click", () => {
      sessionStorage.setItem("lastClickTime", new Date().getTime());
    });
    window.addEventListener("mousewheel", () => {
      sessionStorage.setItem("lastClickTime", new Date().getTime());
    });
    window.addEventListener("mousemove", () => {
      sessionStorage.setItem("lastClickTime", new Date().getTime());
    });
  },
  methods: {
    // 判断是否为chrome浏览器
    handleUserAgentRoot() {
      if (
        (!sessionStorage.getItem("useragent_root_close") &&
          navigator.userAgent.indexOf("Chrome") == -1) ||
        (!sessionStorage.getItem("useragent_root_close") &&
          navigator.userAgent.indexOf("CriOS") == -1 &&
          this.isPhone)
      ) {
        this.userAgentTipShow = true;
      }
    },
    handleClickUserAgent() {
      sessionStorage.setItem("useragent_root_close", true);
      this.userAgentTipShow = false;
    },
    // 是否超时
    isTimeOut() {
      clearInterval(this.timeOut);
      const dataConfig = getConfig() ? JSON.parse(getConfig()) : null;
      if (dataConfig && dataConfig.user_connection_timeout_duration) {
        this.timeOut = setInterval(() => {
          let lastClickTime = sessionStorage.getItem("lastClickTime") * 1;
          let nowTime = new Date().getTime();
          if (
            nowTime - lastClickTime >
            1000 * dataConfig.user_connection_timeout_duration
          ) {
            clearInterval(this.timeOut);
            removeSession("SysList");
            removeToken();
            Cookies.remove("JSESSIONID");
            this.userShow = false;
            this.userMessage = null;
            sessionStorage.removeItem("useragent_root_close");
            window.location.href = dataConfig.sys_home_url;
          }
        });
      }
    }
  },
  mounted() {
    sessionStorage.setItem("lastClickTime", new Date().getTime());
    this.isTimeOut();
  }
};
</script>
<style lang="scss" scoped>
.userAgentTips {
  position: fixed;
  top: 62px;
  left: 50%;
  // width: 624px;
  margin-left: -312px;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 16px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 24px;
  z-index: 3;
  &-phone {
    width: 100%;
    left: 0;
    margin-left: 0;
  }
  :nth-child(1) {
    margin-right: 8px;
  }
  :nth-child(3) {
    cursor: pointer;
  }
}
</style>