FE-V2-XCX/component/tabBar.vue

<!-- 底部导航组件 -->
<template>
  <view class="tabBar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
    <!-- 运输 -->
    <view class="tab-bar-box">
      <view class="null-box"></view>
      <view class="tba-bar-min-box" @click="tabBarGoPage(1)">
        <img src="@/images/Version2.2/btn_sy_xz.png" v-if="currentRoute == 'pages/home'">
        <img src="@/images/Version2.2/btn_sy_zc.png" v-else>
        <view :class="currentRoute == 'pages/home'?'primary':''">首页</view>
      </view>
      <view class="null-box"></view>
      <view class="tba-bar-min-box" @click="tabBarGoPage(2)">
        <img src="@/images/Version2.2/btn_xx_xz.png" v-if="currentRoute == 'pages/information/information'">
        <img src="@/images/Version2.2/btn_xx_zc.png" v-else>
        <view class="tip" v-if="totalCount!=0">{{totalCount}}</view>
        <view :class="currentRoute == 'pages/information/information'?'primary':''">消息</view>
      </view>
      <view class="null-box"></view>
      <view class="tba-bar-min-box" @click="tabBarGoPage(3)">
        <img src="@/images/Version2.2/btn_wd_xz.png" v-if="currentRoute == 'pages/mine'">
        <img src="@/images/Version2.2/btn_wd_zc.png" v-else>
        <view :class="currentRoute == 'pages/mine'?'primary':''">我的</view>
      </view>
      <view class="null-box"></view>
    </view>
  </view>
</template>

<script>
import { infoTotalCount } from '@/api/index.js'
export default {
  data() {
    return {
      paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
      currentRoute:"",
      userType:"",
      totalCount:0,
    }
  },
  created() {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
        model.forEach(item => {
          //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
          if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
            that.paddingBottomHeight = 40;
          }
        })
      }
    });
  },

  onShow(){
    this.getTotalList();
  },
  mounted(){

    this.getTotalList();
    this.totalCount=uni.getStorageSync('totalCount')
    // 获取当前路由
    let pages = getCurrentPages();
    let page = pages[pages.length - 1];
    this.currentRoute = page.route;
    // 获取当前角色
    this.userType = uni.getStorageSync('userType');
  },
  methods: {
    //获取消息总数接口
    async getTotalList(){
      const {data} = await infoTotalCount();
      if(data.code==200){
        this.totalCount=data.data.totalCount
      }

    },
    tabBarGoPage(type){
      if(type === 1){
        let safetyIdentity=uni.getStorageSync('gentleIdentifier')[0].pageType
        if(safetyIdentity=='mine'){//安全检查模块判断身份是否有权限
          uni.showToast({
            title: '暂无安全检查权限',
            mask:true,
            icon:"none",
            duration: 2000
          });
        }else{
          if (this.currentRoute !== 'pages/home') {
            uni.redirectTo({
              url: '/pages/home',
            });
          }
        }

      }else if(type === 2){
        if (this.currentRoute !== 'pages/information/information') {
          uni.redirectTo({
            url: '/pages/information/information',
          });
        }
      }else if(type === 3){
        if (this.currentRoute !== 'pages/mine') {
          uni.redirectTo({
            url: '/pages/mine',
          });
        }
      }

    },
  }
}
</script>

<style lang="stylus" scoped>
.tabBar{
  z-index:9999;
  width:100%;
  height:98rpx;
  background:#ffffff;
  position fixed
  bottom:0;
  left:0;
  box-shadow: 0 -3rpx 13rpx 0 rgba(0, 0, 0, 0.1);
  .tab-bar-box{
    display flex;
    .null-box{
      flex:1;
    }
    .tba-bar-min-box{
      width:64rpx;
      position :relative;
      img{
        width:44rpx;
        height:44rpx;
        margin:14rpx auto 0;
      }
      view{
        line-height:37rpx;
        font-size:19rpx;
        text-align center;
        color:#666666;
      }
      .tip{
        display inline-block;
        background :#EF0909;
        border-radius 50%;
        position :absolute;
        font-size 24rpx;
        line-height 24rpx;
        color #fff;
        top :10rpx;
        left :44rpx;
        padding:6rpx 10rpx;
        box-sizing border-box;
      }
    }
  }
}
</style>