water_affairs/pages/index/index.vue

<template>
  <view class="container">
    <tab-control ref="tabControl" :active="opentabControl" />
    <home ref="Home" v-show="PageCur == 'Home'" />
    <facility ref="Map" :tabHeight="tabHeight" v-show="PageCur == 'Map'" />
    <message ref="Message" v-show="PageCur == 'Message'" />
    <mine ref="Mine" v-show="PageCur == 'Mine'" />
    <view class="cu-bar tabbar bg-white foot" style="z-index: 100000">
      <!-- bg-black -->
      <view
        @click="changePage('Home')"
        :class="
          PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'
        "
      >
        <view
          class="iconfont"
          :class="
            PageCur == 'Home'
              ? 'icon-shouye-xuanzhong'
              : 'icon-shouye-weixuanzhong'
          "
        />
        首页
      </view>
      <view
        @click="changePage('Map')"
        :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'"
      >
        <view
          class="iconfont"
          :class="
            PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'
          "
        />
        地图
      </view>
      <view class="text-gray" @click.stop="opentabControl(true)">
        <button
          class="cu-btn cuIcon-add shadow more"
          style="background-color: #0b3f7e; color: #fff"
        ></button>
      </view>
      <view
        @click="changePage('Message')"
        :class="
          PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'
        "
      >
        <view
          class="iconfont"
          :class="
            PageCur == 'Message'
              ? 'icon-xiaoxi-xuanzhong'
              : 'icon-xiaoxi-weixuanzhong'
          "
        >
          <!-- <view class="cu-tag badge">99</view> -->
        </view>
        消息
      </view>
      <view
        @click="changePage('Mine')"
        :class="
          PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'
        "
      >
        <view
          class="iconfont"
          :class="
            PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'
          "
        />
        我的
      </view>
    </view>
  </view>
</template>

<script>
import home from "./modules/home.vue";
import facility from "../facility/index.vue";
import message from "./modules/message.vue";
import mine from "./modules/mine.vue";
import tabControl from "./modules/bottomTabControl.vue";
export default {
  components: { home, facility, message, mine, tabControl },
  data() {
    return {
      PageCur: "Home",
      tabHeight: 98,
    };
  },
  mounted() {
    this.getHeight(".cu-bar", this, false).then((res) => {
      this.tabHeight = res.height;
    });
    this.loadElement();
  },
  onShow() {
    this.$refs.Home.renderData();
  },
  methods: {
    opentabControl(active) {
      if (this.$refs.tabControl.active !== active)
        this.$nextTick(() => (this.$refs.tabControl.active = active));
    },
    changePage(page) {
      this.PageCur = page;
      this.opentabControl(false);
      this.loadElement();
    },
    loadElement(forcedUpdating) {
      let page = this.$refs[this.PageCur];
      if (page.uninitialized || forcedUpdating) page.init();
    },
  },
};
</script>

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