storevisit-ui-mobile/src/views/home/index.vue

<template>
  <div class="homePage" ref="homePage">
    <van-nav-bar class="navBar" left-arrow title="门店拜访" @click-left="onClickLeft" />
    <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @click="onClickTabs">
      <van-tab title="提示类" name="-1">
        <hintTabPage :tabVal="tabVal" ref="hintTabPage"></hintTabPage
      ></van-tab>
      <van-tab title="A类指标" name="0"
        ><ABtarget :tabVal="tabVal" ref="Atarget"></ABtarget
      ></van-tab>
      <van-tab title="B类指标" name="1"
        ><ABtarget :tabVal="tabVal" ref="Btarget"></ABtarget
      ></van-tab>
    </van-tabs>
    <!-- <van-dialog v-model="shows" @confirm="titleconfirm">
      <div class="tipTitleBox" style="padding: 10px">
        <p class="p">系统提示</p>
        <p>各位好，因五一假期，汇报提交时间有调整。</p>
        <div style="font-size: 14px">
          <p style="margin-bottom: 6px; line-height: 20px">1、5月1-3日，销售员无需提交日报。</p>
          <p style="margin-bottom: 6px; line-height: 20px">
            2、销售部主管周报提交时间改为4月27日-30日。
          </p>
          <p>3、大区主管半月报提交时间改为5月4日-7日。</p>
        </div>
        <br />
        <p style="text-align: right">祝大家假期愉快！</p>
      </div>
    </van-dialog> -->
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import hintTabPage from './hintTabPage/index.vue';
import tabBar from '@/components/tabBar';
import ABtarget from './ABtarget.vue';
import { mapState } from 'vuex';
export default {
  name: 'home',
  components: { tabBar, hintTabPage, ABtarget },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      tabVal: '-1',
      hintTabPageIndex: 0,
    };
  },
  watch: {
    // 监听切换用户
    'userInfo.userName': {
      handler(val) {
        this.tabVal = '-1';
      },
      immediete: true,
    },
  },
  activated() {
    // 从其他页面跳转过来如果；要重新获取对应tab数据
    if (this.tabVal == '-1') {
      if (this.$refs.hintTabPage) this.$refs.hintTabPage.initData();
    } else if (this.tabVal == '0') {
      if (this.$refs.Atarget) this.$refs.Atarget.initData();
    } else if (this.tabVal == '1') {
      if (this.$refs.Btarget) this.$refs.Btarget.initData();
    }
  },
  mounted() {
    if (this.$refs.Atarget) this.$refs.Atarget.initData();
  },
  methods: {
    onClickTabs(val) {
      // this.$refs.homePage.scrollTop = 0;
      // document.getElementById('app').scrollTop = 0;
    },
    onClickLeft() {
      this.$router.go(-1);
      // window.location.href = process.env.VUE_APP_SSB_LINK + "/homeIndex"
    },
  },
};
</script>
<style scoped lang="scss">
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .bgcolor {
    width: 100%;
    height: 100%;
    .homePage {
      width: 100%;
      height: 100%;
      /* overflow-y: auto; */
    }
  }
}
</style>
<style lang="scss">
.homePage {
  display: flex;
  flex-direction: column;
  .myTab {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0px;
    .van-tabs__wrap {
      position: sticky;
      top: 0px;
      z-index: 10;
    }
    .van-tabs__content {
      flex: 1;
      margin-bottom: 50px;
    }
  }
  .myTab .van-tabs__nav--card {
    margin: 0 !important;
    border-left: 0;
    border-right: 0;
  }
  .myTab .van-tabs__wrap,
  .van-tabs__nav--card {
    height: 39px;
  }
  .myTab .van-tab {
    line-height: 40px;
  }
}
</style>