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-nav-bar>
      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @click="onClickTabs">
        <van-tab title="提示类" name="-1" v-if="isGZorJZ == 'false' && onlyShowHomeTarget == 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" v-if="onlyShowHomeTarget == false">
          <ABtarget :tabVal="tabVal" ref="Atarget"></ABtarget>
        </van-tab>
        <van-tab title="B类指标" name="1" v-if="onlyShowHomeTarget == false">
          <ABtarget :tabVal="tabVal" ref="Btarget"></ABtarget>
        </van-tab>
        <van-tab title="首页指标" name="2" v-if="onlyShowHomeTarget == true">
          <HomeTarget :tabVal="tabVal" ref="HomeTarget"></HomeTarget>
        </van-tab>
      </van-tabs>
      <div class="bottomBtn">
        <bottomBtn :tabVal="tabVal" ref="bottomBtn"></bottomBtn>
      </div>
    </div>
    <div class="floatingIcon" :style="setSIcontyle" v-dialogDrag>
      <div class="AIIcon" @click="deepseek">
        <van-icon class="img" :name="require('@/assets/ai.png')" size="40" />
      </div>
      <a
        class="feedback"
        href="https://qiweitest.nipponpaint.com.cn/weixin/ecoRules/redirect/1064/0"
        target="_blank"
        ><img src="./../../assets/feedback.png"
      /></a>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import { getReportInfo, getDictOption, buryingPoint } from '@/api/index';
import hintTabPage from './hintTabPage/index.vue';
import tabBar from '@/components/tabBar';
import ABtarget from './ABtarget.vue';
import HomeTarget from './HomeTarget.vue';
import { mapState } from 'vuex';
import bottomBtn from './bottomBtn.vue';
import { WXdigest } from '@/utils/digest';
import store from '@/store';
export default {
  name: 'home',
  components: { tabBar, hintTabPage, ABtarget, HomeTarget, bottomBtn },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      reportInfo: (state) => state.user.reportInfo,
    }),
  },
  data() {
    return {
      tabVal: '-1',
      hintTabPageIndex: 0,
      isGZorJZ: null,
      onlyShowHomeTarget: false,
      isLoading: false,
      setSIcontyle: {
        bottom: '85px',
        right: '14px',
      },
    };
  },
  watch: {
    // 监听切换用户
    'userInfo.userName': {
      handler(val) {
        if (val) {
          this.getDict();
          // this.getReportInfo();
        }
      },
      immediete: true,
    },
  },
  activated() {
    this.getReportInfo();
    WXdigest();
  },
  created() {
    this.getDict();
    let floatingIconStyle = JSON.parse(localStorage.getItem('floatingIcon'));
    if (floatingIconStyle && floatingIconStyle.length) {
      this.setSIcontyle = {
        left: floatingIconStyle[0],
        top: floatingIconStyle[1],
      };
    }
  },
  mounted() {},
  methods: {
    onRefresh() {
      this.getDict(true);
      this.isLoading = false;
    },
    async getDict(isRefresh) {
      let postType = this.userInfo.postType;
      let postName = this.userInfo.postName;
      if (postName == '质感销售负责人' || postName == '质感销售专员') {
        this.onlyShowHomeTarget = true;
      } else {
        // <!-- 0-历史指标  1-动态指标，String类型 -->
        if (postType == 'GZ') {
          if (this.reportInfo.targetType == '0') {
            localStorage.setItem('isGZorJZ', 'true');
            this.isGZorJZ = 'true';
          } else if (this.reportInfo.targetType == '1') {
            this.onlyShowHomeTarget = true;
          }
        } else {
          this.onlyShowHomeTarget = false;
          // postType：人员类型，JZ（家装）、GZ（公装）、YF（应服）、DIY（DIY）
          if (postType == '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.$refs.bottomBtn) this.$refs.bottomBtn.getReportInfo();
        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();
        } else if (this.tabVal == '2') {
          if (this.$refs.HomeTarget) this.$refs.HomeTarget.initData();
        }
      });
    },
    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();
        }
        if (this.tabVal == '2') {
          if (this.$refs.HomeTarget) this.$refs.HomeTarget.initData();
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
      // window.location.href = process.env.VUE_APP_SSB_LINK + "/homeIndex"
    },
    getReportInfo() {
      this.toastLoading(0, '加载中...', true);
      // 获取移动端获取用户信息接口
      store
        .dispatch('getReportInfoDeta')
        .then(() => {
          this.toastLoading().clear();
        })
        .catch(() => {
          this.toastLoading().clear();
        });
    },
    deepseek() {
      buryingPoint({
        systemModel: '首页',
        buryingPointType: 10,
        buryingPointValue: '首页-Ai',
        buryingPointName: 'Ai',
        buryingPointPosition: '首页-Ai',
      });
      window.location.href = 'https://deepseek.nipponpaint.com.cn';
    },
  },
};
</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 {
  position: relative;
  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;
  }
  .floatingIcon {
    position: absolute;
    width: 40px;
    z-index: 99999;
    height: min-content;
    .AIIcon {
      width: 100%;
      display: inline-block;
      cursor: pointer;
    }
    .AIIcon .img {
      border-radius: 100px;
      float: left;
    }
    .AIIcon .img .van-icon__image {
      border-radius: 100px;
    }
    .feedback {
      display: inline-block;
      width: 100%;
    }
    .feedback img {
      width: 100%;
    }
  }
}
</style>