lin
2024-03-18 bd476fa5a61e9f827c90404807f3dc539546f96a
components/tabBar/tabBar.vue
@@ -1,22 +1,22 @@
<template>
   <view>
      <u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
         :inactive-color="inactiveColor" @change='change'>
         <u-tabbar-item v-for="(item,index) in curTabList" :icon="item.icon" :key="index" :text="item.name">
            <image class="tabbar-icon" slot="active-icon" :src="iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="iconPath"></image>
         :inactive-color="inactiveColor">
         <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
         </u-tabbar-item>
         <u-tabbar-item v-for="(item,index) in curTabList" :icon="item.icon" :key="index" :text="item.name">
            <image class="tabbar-icon" slot="active-icon" :src="iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="iconPath"></image>
         <!--          <u-tabbar-item text="圈子">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item> -->
         <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item>
         <u-tabbar-item text="驾驶舱">
            <image class="tabbar-icon" slot="active-icon" :src="iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="iconPath"></image>
         </u-tabbar-item>
         <u-tabbar-item text="个人中心">
            <image class="tabbar-icon" slot="active-icon" :src="iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="iconPath"></image>
         <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
         </u-tabbar-item>
      </u-tabbar>
   </view>
@@ -26,12 +26,15 @@
   export default {
      props: {
         current: Number,
         isShowTabbarItem: false
      },
      data() {
         return {
            roleType: "",
            curRole: {},
            inactiveColor: '#909399',
            activeColor: '#328CFA',
            curTabList: [{
                  name: '首页',
@@ -43,15 +46,15 @@
               {
                  name: '圈子',
                  iconPathSelected: 'static/img/tabbar-02-selected.png',
                  iconPath: 'static/img/tabbar-02.png',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/home/index'
               },
               {
                  name: '驾驶舱',
                  iconPathSelected: 'static/img/tabbar-02-selected.png',
                  iconPath: 'static/img/tabbar-02.png',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/statistics/index'
               },
@@ -68,6 +71,17 @@
         }
      },
      watch: {
         'curRole.roleName': {
            handler(newVal) {
               if (newVal == "民警") {
                  this.roleType == 2
               }
            },
            deep: true,
            immediate: true
         },
         tabList: {
            handler(newVal) {
               if (newVal && newVal.length > 0) {
@@ -84,17 +98,37 @@
            deep: true,
            immediate: true
         },
         isShowTabbarItem: {
            deep: true,
            immediate: true
         }
      },
      mounted() {
         this.curRole = uni.getStorageSync("activeRole");
         // this.getMessage()
      },
      destroyed() {
      },
      methods: {
         changeTabbar(url) {
            uni.reLaunch({
               url
            })
         },
         change(e) {
            uni.switchTab({
               url: '/' + this.curTabList[e].path
            console.log(e);
            uni.reLaunch({
               url: this.curTabList[e].url,
               complete: (res) => {
                  console.log("===>", res);
               }
            })
            // this.$emit("change", this.curTabList[e].url)
         },
@@ -105,7 +139,7 @@
<style lang="scss" scoped>
   .tabbar-icon {
      width: 40rpx;
      height: 40rpx;
      width: 45rpx;
      height: 45rpx;
   }
</style>