bangbang-web-kap/src/App.vue

<template>
  <div id="app">
    <router-view class="router-view" />
    <vue-picture-viewer
      v-if="showPreviewImg"
      :img-data="previewImgs"
      :select-index="previewIndex"
      @close-viewer="showPreviewImg = false"
    />
    <xr-import
      v-if="showFixImport"
      :process-status="crmImportStatus"
      @click.native="fixImportClick"
    />
    <VideoPlayer ref="VideoPlayer" />
  </div>
</template>

<script>
/** 常用图片预览创建组件 */
import VuePictureViewer from "@/components/VuePictureViewer/index";
import XrImport from "@/components/XrImport";
import XrImportMixins from "@/components/XrImport/XrImportMixins";
import { mapGetters, mapMutations } from "vuex";
import cache from "@/utils/cache";

export default {
  name: "App",
  components: {
    VuePictureViewer,
    XrImport,
    VideoPlayer: () => import("@/components/VideoPlayer"),
  },
  mixins: [XrImportMixins],
  data() {
    return {
      showPreviewImg: false,
      previewIndex: 0,
      previewImgs: [],
    };
  },
  computed: {
    ...mapGetters(["activeIndex", "userInfo"]),
  },
  watch: {
    $route(to, from) {
      this.showPreviewImg = false; // 切换页面隐藏图片预览
      if (this.$refs["VideoPlayer"]) {
        this.$refs["VideoPlayer"].close();
      }
    },
  },
  created() {
    let isBBDomain = false;
    if (
      process.env.IS_ALPHA === "0" &&
      location.host !== "kap.shenzhoubb.com"
    ) {
      isBBDomain = false;
    } else {
      isBBDomain = true;
    }
    this.SET_ISBBDOMAIN(isBBDomain);
  },
  mounted() {
    this.addBus();
    this.addDocumentVisibilityChange();
    this.setMinHeight();
  },
  beforeDestroy() {},
  methods: {
    ...mapMutations(["SET_ISBBDOMAIN"]),
    addDocumentVisibilityChange() {
      // 网页当前状态判断
      // hidden,
      var state, visibilityChange;
      if (typeof document.hidden !== "undefined") {
        // hidden = 'hidden'
        visibilityChange = "visibilitychange";
        state = "visibilityState";
      } else if (typeof document.mozHidden !== "undefined") {
        // hidden = 'mozHidden'
        visibilityChange = "mozvisibilitychange";
        state = "mozVisibilityState";
      } else if (typeof document.msHidden !== "undefined") {
        // hidden = 'msHidden'
        visibilityChange = "msvisibilitychange";
        state = "msVisibilityState";
      } else if (typeof document.webkitHidden !== "undefined") {
        // hidden = 'webkitHidden'
        visibilityChange = "webkitvisibilitychange";
        state = "webkitVisibilityState";
      }
      // 添加监听器，在title里显示状态变化
      document.addEventListener(
        visibilityChange,
        () => {
          if (document[state] == "visible") {
            if (cache.updateAxiosHeaders() && this.$route.name === "login") {
              window.location.reload();
            }
          }
          this.$bus.emit("document-visibility", document[state]);
        },
        false
      );
    },

    addBus() {
      var self = this;
      this.$bus.on("preview-image-bus", function (data) {
        self.previewIndex = data.index;
        self.previewImgs = data.data;
        self.showPreviewImg = true;
      });
      this.$bus.on("preview-video", (data) => {
        this.$refs["VideoPlayer"].showDialog(data);
      });
    },

    setMinHeight() {
      this.$nextTick(() => {
        const dpr = window.devicePixelRatio || 1;
        const clientWidth = document.body.clientWidth;
        const dom = document.getElementById("app");
        if (dpr !== 1 && clientWidth > 1600) {
          dom.style.minHeight = "800px";
        } else if (dpr === 1 && clientWidth > 1600) {
          dom.style.minWidth = "1650px";
        } else {
          // dom.style.minWidth = '1200px'
          dom.style.minHeight = "605px";
        }
      });
    },
  },
};
</script>

<style>
#app {
  width: 100%;
  position: relative;
  height: 100%;
  min-width: 1200px;
  min-height: 605px;
}
</style>