FE_huoran_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(() => {
      const w = document.body.clientWidth
      if (w <= 680) {
        // w <= 480 && this.$store.commit('set', true)
        this.$store.commit('updateModelType', false)
      } else if (w > 1700) {
        this.setNav(10)
      } else if (w > 1600) {
        this.setNav(9)
      } else if (w > 1400) {
        this.setNav(8)
      } else if (w > 1200) {
        this.setNav(6)
      } else if (w > 980) {
        this.setNav(4)
      } else {
        this.$store.commit('updateModelType', true)
      }
    }, 500)
  },
  mounted () {
    window.onbeforeunload = function () {
      sessionStorage.removeItem('navPageSize')
    }
    const w = document.body.clientWidth
    if (w > 1700) {
      sessionStorage.setItem('navPageSize', 10)
    } else if (w > 1600) {
      sessionStorage.setItem('navPageSize', 9)
    } else if (w > 1400) {
      sessionStorage.setItem('navPageSize', 8)
    } else if (w > 1200) {
      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();
        }
      }
    },
    setNav(num) {
      this.$store.commit('updateModelType', true)
      this.$store.dispatch('updateNavSumA', num)
      sessionStorage.setItem('navPageSize', num)
    },
  },
};
</script>