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"
      v-if="isGZorJZ">
      <van-tab title="提示类" name="-1" v-if="isGZorJZ == 'false'">
        <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>
    <div class="bottomBtn">
      <bottomBtn :tabVal="tabVal"></bottomBtn>
    </div>
    <!-- <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 { getReportInfo, getDictOption } from '@/api/index';
import hintTabPage from './hintTabPage/index.vue';
import tabBar from '@/components/tabBar';
import ABtarget from './ABtarget.vue';
import { mapState } from 'vuex';
import bottomBtn from './bottomBtn.vue';
export default {
  name: 'home',
  components: { tabBar, hintTabPage, ABtarget, bottomBtn },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      tabVal: '-1',
      hintTabPageIndex: 0,
      isGZorJZ: null,
    };
  },
  watch: {
    // 监听切换用户
    'userInfo.userName': {
      handler(val) {
        if (val) {
          this.getDict();
          // this.getReportInfo();
        }
      },
      immediete: true,
    },
  },
  activated() {
    if (this.tabVal == '-1') {
      // 从其他页面跳转过来如果；要重新获取对应tab数据
      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();
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    async getDict() {
      this.isGZorJZ = null;
      let gz_Option = await getDictOption({}, 'gz_customer_post'); //公装业务员岗位
      let jz_Option = await getDictOption({}, 'jz_post_name'); //家装业务员岗位
      let postName = this.userInfo.postName;
      let is_gz = gz_Option.data.find((res) => res.dictLabel == postName);
      let is_jz = jz_Option.data.find((res) => res.dictLabel == postName);
      if (is_gz || is_jz) {
        localStorage.setItem('isGZorJZ', 'true');
        this.isGZorJZ = 'true';
      } else {
        localStorage.setItem('isGZorJZ', 'false');
        this.isGZorJZ = 'false';
      }
      // 家装或工装不显示提示类tab
      this.$nextTick(() => {
        if (this.isGZorJZ == 'true') {
          this.tabVal = '0';
        } else {
          this.tabVal = '-1';
        }
      });
    },
    onClickTabs(val) {
      this.$nextTick(() => {
        // this.tabVal == '-1' 有watch监听不需要在触发
        // 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();
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
      // window.location.href = process.env.VUE_APP_SSB_LINK + "/homeIndex"
    },
    getReportInfo() {
      getReportInfo({ isContent: false }).then((res) => {
        if (res.code == 200) {
          localStorage.setItem('powerGrade', res.data.positionId);
          localStorage.setItem('isDiy', res.data.diy);
          localStorage.setItem('uType', res.data.userType);
          localStorage.setItem('jzType', res.data.jzType);
          localStorage.setItem('customerVisits', res.data.customerManagerVisits);
          localStorage.setItem('postType', res.data.postType);
        } else {
          this.$toast(res.msg);
        }
      });
    },
  },
};
</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;
  }
  .bottomBtn {
    margin-bottom: 55px;
  }
}
</style>