cnbg_web/src/App.vue

<template>
  <div id="app">
    <div v-if="isPageLoading" class="avue-home">
      <div class="avue-home__main">
        <img class="avue-home__loading" src="/svg/loading-spin.svg" alt="loading">
        <div class="avue-home__title">
          正在加载资源
        </div>
        <div class="avue-home__sub-title">
          初次加载资源可能需要较多时间 请耐心等待
        </div>
      </div>
    </div>
    <router-view v-else />
    <AccountStopTip :showDialog.sync="showAccountStopTip" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import applyPortalConfigFn from '@/util/usePortalConfig'
import awaitCatch from '@/util/awaitCatch'
import { getPortalConfig } from '@/api/common'
import AccountStopTip from '@/components/accountStopTip'

export default {
  name: 'App',
  components: { AccountStopTip },
  data() {
    return {
      specialPath: null,
      isRefresh: true, // 是否初次进入页面
      showAccountStopTip: false // 账号截止服务提示窗
    }
  },
  computed: {
    ...mapGetters({ isPageLoading: 'isPageLoading', portalConfig: 'portalConfig' , specialPathStorage: 'specialPath', accountExpiry: 'accountExpiry' })
  },
  watch: {
    $route (newVal) {
      this.specialPath = newVal.query.s
      // 登录页
      if (newVal.path === '/login') {
        if (this.specialPath) {
          this.$store.commit('SET_SPECIAL_PATH', this.specialPath)
          this.getPortalConfigFn()
          this.isRefresh = false
        } else {
          this.$store.commit('SET_SPECIAL_PATH', 'default')
          if (this.isRefresh) {
            // 首次进入需要应用门户配置
            applyPortalConfigFn()
            this.isRefresh = false
          }
        }
      } else {
        if (this.isRefresh) {
          // 首次进入需要应用门户配置
          applyPortalConfigFn()
          this.isRefresh = false
        }
      }
    },
    accountExpiry (newVal) {
      console.log(newVal);
      if (newVal.remainDays <= 30) {
        this.showAccountStopTip = true
      }
    }
  },
  created() {
    this.loadMapScript()
  },
  methods: {
    loadMapScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=C4ABZ-HWE3X-5DW4J-ZO4GH-IQBWK-TXF2X";
      document.body.appendChild(script);
    },
    // 获取门户配置
    async getPortalConfigFn () {
      this.$store.commit('SET_IS_PAGE_LOADING', true)
      const [res] = await awaitCatch(getPortalConfig({ s: this.specialPath }))
      if (res && res.data.code === 0) {
        const config = ((res.data && res.data.data) && Object.keys(res.data.data).length) ? res.data.data : null
        if (config) {
          this.$store.commit('SET_PORTAL_CONFIG', {
            ...this.portalConfig,
            [this.specialPath]: config
          })
        } else {
          this.$store.commit('SET_SPECIAL_PATH', 'default')
          this.$message.warning('未获取到门户配置')
        }
      }
      applyPortalConfigFn()
    }
  }
}
</script>
<style lang="scss">
  #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>