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

<template>
  <div class="homePage" ref="homePage">
    <div class="content">
      <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'">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <hintTabPage :tabVal="tabVal" ref="hintTabPage"></hintTabPage>
          </van-pull-refresh>
        </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" ref="bottomBtn"></bottomBtn>
      </div>
    </div>
    <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';
import { getTicketFun } from '@/utils/TXApiFun';
export default {
  name: 'home',
  components: { tabBar, hintTabPage, ABtarget, bottomBtn },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      tabVal: '-1',
      hintTabPageIndex: 0,
      isGZorJZ: null,
      isLoading: false,
    };
  },
  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();
  },
  mounted() {
    getTicketFun(['showMenuItems', 'hideMenuItems', 'onMenuShareAppMessage']).then((res) => {
      this.wx.ready(() => {
        console.log(this.wx);
        this.wx.hideMenuItems({
          menuList: ['menuItem:favorite'], // 要显示的菜单项
        });
        this.wx.showMenuItems({
          menuList: ['menuItem:share:appMessage'], // 要显示的菜单项
        });
        this.wx.onMenuShareAppMessage({
          title: '企业微信',
          desc: '让每个企业都有自己的微信',
          link: 'https://work.weixin.qq.com/',
          imgUrl:
            'https://res.mail.qq.com/node/ww/wwmng/style/images/index_share_logo$13c64306.png',
          enableIdTrans: 0,
          success: () => {
            // 用户确认分享后回调
            console.log('用户确认分享后回调');
          },
          error: () => {
            console.log('error');
            if (res.errMsg.indexOf('no permission') > 0) {
              alert('未agentConfig');
            }
          },
          cancel: () => {
            // 用户取消分享后回调
            console.log('用户取消分享后回调');
          },
        });
      });
    });
  },
  methods: {
    onRefresh() {
      this.getDict(true);
      this.isLoading = false;
    },
    async getDict(isRefresh) {
      this.toastLoading(0, '加载中...', true);
      let gz_Option = await getDictOption({}, 'gz_customer_post'); //公装业务员岗位
      let jz_Option = await getDictOption({}, 'jz_post_name'); //家装业务员岗位
      this.toastLoading().clear();
      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 (!isRefresh) {
          if (this.isGZorJZ == 'true') {
            this.tabVal = '0';
          } else {
            this.tabVal = '-1';
          }
        }
        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();
        }
        if (this.$refs.bottomBtn) this.$refs.bottomBtn.getReportInfo();
      });
    },
    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 {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .content {
        flex: 1;
        overflow-y: auto;
      }
      .tabBar {
        height: 50px;
      }
    }
  }
}
</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>