shuishen
2024-03-22 fdef23064b801a06bbf369785dbbc14db14b707f
components/tabBar/tabBar.vue
@@ -1,8 +1,11 @@
<template>
   <view>
      <u-tabbar class="custom-tabbar" zIndex="100" :value="currentTab" :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">
      <u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor"
         :inactive-color="inactiveColor">
         <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)"
            v-for="(item,index) in tabbarList" :key="index">
            <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
         </u-tabbar-item>
      </u-tabbar>
   </view>
@@ -11,67 +14,58 @@
<script>
   export default {
      props: {
         currentTab: {},
         current: Number,
         list: {
            type: Array,
            default: () => []
         }
      },
      data() {
         return {
            inactiveColor: '#909399',
            activeColor: '#328CFA',
            curTabList: [{
                  name: '首页',
                  iconPathSelected: '',
                  iconPath: '',
                  icon: "home",
                  url: '/pages/home/index'
               },
               {
                  name: '个人中心',
                  iconPathSelected: '',
                  iconPath: '',
                  icon: "account-fill",
                  url: '/pages/user/center'
               }
            ]
            tabbarList: [],
            inactiveColor: '#C7CED7',
            activeColor: '#017BFC',
            // activeColor: '#003399'
         }
      },
      watch: {
         tabList: {
         list: {
            handler(newVal) {
               if (newVal && newVal.length > 0) {
                  this.tabList = newVal
                  this.tabbarList = newVal;
                  if (uni.getStorageSync("activeRole").roleName == "民警") {
                     this.inactiveColor = "#AFB8C3";
                     this.activeColor = "#003399";
                  } else {
                     this.inactiveColor = "#C7CED7"
                     this.activeColor = "#017BFC";
                  }
               }
            },
            deep: true,
            immediate: true
         },
         currentTab: {
            handler(newVal) {
               this.currentTab = newVal
            },
            deep: true,
            immediate: true
         },
         }
      },
      mounted() {
         // this.getMessage()
      },
      destroyed() {
      },
      methods: {
         change(e) {
            this.$emit("change", this.curTabList[e].url)
         },
         changeTabbar(url, index) {
            if (this.current == index) return
            uni.switchTab({
               url
            })
            this.$emit("change", index)
         }
      }
   }
</script>
<style lang="scss" scoped>
   .u-page_item_slot_icon {
      width: 40rpx;
      height: 40rpx;
   .tabbar-icon {
      width: 56rpx;
      height: 56rpx;
   }
   /deep/.u-tabbar {
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2);
   }
</style>