wechat/src/pages/user/mainPage/index.vue

<template>
  <div class="mainPage flex-v">
    <div class="subPage flex-item">
      <div>
        <router-view></router-view>
      </div>
    </div>
    <nav class="flex-h">
      <router-link :to="{name:item.pathName,query:{}}" v-if="showTabBar" class="flex-item" active-class="active" v-for="(item, index) in tabBar" :key="index">
        <div>
          <img v-if="index==0" class="centerLabel" src="../../../common/icon/tabBar-icon-1.png" alt="">
          <img v-if="index==1" class="centerLabel" src="../../../common/icon/tabBar-icon-2.png" alt="">
          <img v-if="index==2" class="centerLabel" src="../../../common/icon/tabBar-icon-3.png" alt="">
        </div>
        <span>{{item.name}}</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: '',
  data () {
    return {
      tabBar: [{
        pathName: 'indexPage',
        name: '城的空间'
      }, {
        pathName: 'coffeeIndex',
        name: '城咖啡'
      }, {
        pathName: 'userCenter',
        name: '会员'
      }],
      showTabBar: false
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo
    })
  },
  components: {
  },
  created () {
    if (!this.userInfo.customer.MapUser || !this.$route.query.hideTabbar) {
      this.showTabBar = true
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>