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>
    <div class="AIIcon" @click="deepseek">
      <van-icon class="img" :name="require('@/assets/ai.png')" size="50" />
    </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(['sendChatMessage'], 'agentConfig').then((res) => {
      wx.invoke(
        'sendChatMessage',
        {
          msgtype: 'text', //消息类型，必填
          enterChat: true, //为true时表示发送完成之后顺便进入会话，仅移动端3.1.10及以上版本支持该字段
          text: {
            content: '你好', //文本内容
          },
          image: {
            mediaid: '', //图片的素材id
          },
          video: {
            mediaid: '', //视频的素材id
          },
          file: {
            mediaid: '', //文件的素材id
          },
          news: {
            link: '', //H5消息页面url 必填
            title: '', //H5消息标题
            desc: '', //H5消息摘要
            imgUrl: '', //H5消息封面图片URL
          },
        },
        function (res) {
          if (res.err_msg == 'sendChatMessage:ok') {
            //发送成功
          }
        }
      );
    });
  },
  methods: {
    onRefresh() {
      this.getDict(true);
      this.isLoading = false;
    },
    async getDict(isRefresh) {
      let postType = this.userInfo.postType;
      // postType：人员类型，JZ（家装）、GZ（公装）、YF（应服）、DIY（DIY）
      if (postType == 'JZ' || postType == 'GZ') {
        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);
        }
      });
    },
    deepseek() {
      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 {
  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;
  }
  .AIIcon {
    position: fixed;
    /* color: #666; */
    display: inline-block;
    /* box-shadow: 0px 2px 7px -5px #000; */
    /* border-radius: 100px; */
    /* overflow: hidden; */
    right: 14px;
    cursor: pointer;
    bottom: 96px;
    /* background-color: white; */
  }
  .AIIcon .img {
    border-radius: 100px;
    float: left;
  }
  .AIIcon .img .van-icon__image {
    border-radius: 100px;
  }
}
</style>