crm-mobile/pages_oa/legwork/index.vue

<template>
  <view v-if="!refreshPage" class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar :title="navList[navIndex].label" />

      <view class="list-view">
        <!-- #ifdef H5 -->
        <keep-alive>
          <components :is="activeCom" />
        </keep-alive>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <legwork-list v-if="activeCom === 'LegworkList'" />
        <legwork-statistics v-else-if="activeCom === 'LegworkStatistics'" />
        <!-- #endif -->
      </view>
    </view>

    <wk-tabbar v-model="navIndex" :list="footerNav" />
  </view>
</template>

<script>
  import LegworkList from './component/legworkList.vue'
  import LegworkStatistics from './component/legworkStatistics.vue'

  export default {
    name: 'LegworkIndex',
    components: {
      LegworkList,
      LegworkStatistics
    },
    data() {
      return {
        navIndex: 0,
        navList: [
          {label: '签到', com: 'LegworkList'},
          {label: '统计', com: 'LegworkStatistics'}
        ],

        footerNav: [
          {
            name: '签到',
            src: 'images/legwork/tab_clock_default.png',
            active_src: 'images/legwork/tab_clock.png'
          },
          {
            name: '统计',
            src: 'images/legwork/tab_statistics_default.png',
            active_src: 'images/legwork/tab_statistics.png'
          }
        ],

        refreshPage: false	// 刷新页面标志
      }
    },
    computed: {
      activeCom() {
        const index = this.navIndex || 0
        return this.navList[index].com
      }
    },
    onShow() {
      if (this.refreshPage) {
        this.$nextTick(function() {
          this.refreshPage = false
        })
      }
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
.main-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .list-view {
    flex: 1;
    overflow: hidden;
  }
}
</style>