FE_IASF_client/src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import Setting from '@/setting';
import util from '@/libs/util';
export default {
  name: 'App',
  created() {
    //在页面加载时读取localStorage里的状态信息
    if (util.local.get(Setting.storeKey)) {
      this.$store.replaceState(Object.assign({}, this.$store.state, util.local.get(Setting.storeKey)));
    }

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener('beforeunload', () => {
      util.local.set(Setting.storeKey, this.$store.state);
    });
    // 判断当前处于什么终端 true为PC端，false为手机端
    function IsPCModel() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
      var flagPc = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flagPc = false;
          break;
        }
      }
      return flagPc;
    }
    var flagZt = IsPCModel();
    this.$store.commit('updateModelType', flagZt)
    window.onresize = this.throttle(() => {
      if(document.body.clientWidth <= 1200) {
        this.$store.commit('updateModelType', false)
      }else if(document.body.clientWidth > 1700 ) {
        this.$store.commit('updateModelType', true)
        this.$store.dispatch('updateNavSumA', 10)
        sessionStorage.setItem('navPageSize', 10)
      }else if(document.body.clientWidth > 1600 && document.body.clientWidth <= 1700 ) {
        this.$store.commit('updateModelType', true)
        if (this.$i18n.locale == 'en') {
          this.$store.dispatch('updateNavSumA', 9)
          sessionStorage.setItem('navPageSize', 9)
        }else {
          this.$store.dispatch('updateNavSumA', 10)
        sessionStorage.setItem('navPageSize', 10)
        }
      }else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
        this.$store.commit('updateModelType', true)
        this.$store.dispatch('updateNavSumA', 9)
        sessionStorage.setItem('navPageSize', 9)
      }else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
        this.$store.commit('updateModelType', true)
        if (this.$i18n.locale == 'en') {
          this.$store.dispatch('updateNavSumA', 7)
          sessionStorage.setItem('navPageSize', 7)
        }else {
          this.$store.dispatch('updateNavSumA', 8)
        sessionStorage.setItem('navPageSize', 8)
        }
      }else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
        this.$store.commit('updateModelType', true)
        if (this.$i18n.locale == 'en') {
          this.$store.dispatch('updateNavSumA', 6)
          sessionStorage.setItem('navPageSize', 6)
        }else {
          this.$store.dispatch('updateNavSumA', 7)
        sessionStorage.setItem('navPageSize', 7)
        }
      }else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
        this.$store.commit('updateModelType', true)
        if (this.$i18n.locale == 'en') {
          this.$store.dispatch('updateNavSumA', 6)
          sessionStorage.setItem('navPageSize', 6)
        }else {
          this.$store.dispatch('updateNavSumA', 6)
        sessionStorage.setItem('navPageSize', 6)
        }
      }else {
        this.$store.commit('updateModelType', true)
      }
    },500)
  },
  mounted() {
    window.onbeforeunload = function(){
      sessionStorage.removeItem('navPageSize')
    }
      if(document.body.clientWidth > 1600 ) {
        sessionStorage.setItem('navPageSize', 10)
      }else if(document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
        sessionStorage.setItem('navPageSize', 9)
      }else if(document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
        sessionStorage.setItem('navPageSize', 8)
      }else if(document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
        sessionStorage.setItem('navPageSize', 7)
      }else if(document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
        sessionStorage.setItem('navPageSize', 6)
      }
  },
  methods: {
    throttle(func, delay) {
        var prev = Date.now()
        return function () {
            var context = this;
            var args = arguments;
            var now = Date.now();
            if (now - prev >= delay) {
                func.apply(context, args);
                prev = Date.now();
            }
        }
    }
  },
};
</script>