caimei-authentic-www/layouts/app-ldm.vue

<template>
  <div class="layout" v-if="isMounted">
    <div class="header"></div>
    <div class="content">
      <nuxt />
    </div>
    <div class="footer"></div>
    <ldm-login></ldm-login>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'userInfo',
      'accessToken',
      'authUserId',
      'appId',
      'accountType',
      'routePrefix',
    ]),
  },
  head() {
    return {
      title: '德国WELLCOMET LDM® 官方查询系统',
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/ldm.ico' }],
    }
  },
  data() {
    return {
      isMounted: false,
    }
  },
  mounted() {
    this.responseWidth()
    this.initPageData()
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
    this.refreshCacheData()
  },
  methods: {
    // 初始化数据页面公共数据
    initPageData() {
      // this.$store.commit('app/SET_PAGE_THEME', 'app')
      // 获取用户信息
      let userInfo = this.$getStorage(this.routePrefix, 'userInfo')
      if (userInfo && userInfo.authUserId === this.authUserId) {
        this.$store.commit('user/SET_USER_INFO', userInfo)
      }
      this.isMounted = true
    },

    // 退出登录
    logout() {
      this.$store.dispatch('user/logout')
      this.$removeStorage(this.routePrefix, 'userInfo')
      this.backHome()
    },

    // 回到首页
    backHome() {
      if (this.$route.path === this.routePrefix) return
      this.$router.replace(this.routePrefix)
    },

    // 响应页面宽度变化
    responseWidth() {
      this.$store.commit('app/SET_SCREEN', window.innerWidth)
      window.addEventListener('resize', (e) => {
        this.$store.commit('app/SET_SCREEN', e.target.innerWidth)
      })
    },

    // 数据初始化刷新浏览器
    refreshCacheData() {
      this.$removeStorage(this.routePrefix, 'club_list_data')
    },
  },
}
</script>

<style scoped lang="scss"></style>