dvcp_v2_wxcp_app/library/apps/AppPovertyAlleviation/povertyMonitor.vue

<template>
  <div class="povertyMonitor">
    <div class="form-content">
      <List ref="list" v-if="currIndex === 0"></List>
      <Statistics ref="statistics" v-if="currIndex === 1"></Statistics>
    </div>
    <div class="footer">
      <div @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">监控预警</div>
      <div @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">数据统计</div>
    </div>
  </div>
</template>

<script>
import Statistics from './povertyMonitor/Statistics.vue'
import List from './povertyMonitor/List.vue'

export default {
  data() {
    return {
      currIndex: 0
    }
  },

  components: {
    List,
    Statistics
  },

  computed: {
    tabBar() {
      const link = icon => `${this.$cdn}askform/${icon}.png`
      return [
        {text: "预警监控", iconPath: "bdlb1", selectedIconPath: "bdlb2"},
        {text: "数据统计", iconPath: "xjxm1", selectedIconPath: "xjxm2"}
      ].map(e => ({
        ...e,
        iconPath: link(e.iconPath),
        selectedIconPath: link(e.selectedIconPath)
      }))
    }
  },

  onShow() {
    document.title = '预警监控'
  },

  onLoad() {
    uni.$on('reload', () => {
      if (this.currIndex === 0) {
        this.$refs.list.reload()
      } else {
        this.$refs.addList.getList()
      }
    })
  },

  onReachBottom() {
    if (this.currIndex === 0) {
      this.$refs.list.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.povertyMonitor {
  
  background: #f5f5f5;
  .footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 98px;

    div {
      flex: 1;
      height: 98px;
      line-height: 98px;
      text-align: center;
      color: #333333;
      font-size: 32px;
      background: #fff;

      &.active {
        color: #fff;
        background: #3192F4;
      }
    }
  }
}
</style>