merchapp/java-mall-app-shop-admin/components/tabbar/tabbar.vue

<template>
  <view class="tabbar-container">
    <u-tabbar
      :value="tabbarName"
      @change="changeTabbar"
      :fixed="true"
      :placeholder="false"
      :border="true"
      activeColor="#fe4119"
      inactiveColor="#333"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item text="工作台" name="order">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-gongzuotai custom-icon"
          size="20"
          slot="active-icon"
          color="#fe4119"
        ></u-icon>
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-gongzuotai custom-icon"
          size="20"
          slot="inactive-icon"
          color="#666"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item text="数据" name="shituzhongxin">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-shituzhongxin custom-icon"
          size="16"
          slot="active-icon"
          color="#fe4119"
        ></u-icon>
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-shituzhongxin custom-icon"
          size="16"
          slot="inactive-icon"
          color="#666"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item text="消息" name="IM" :badge="weiduNum">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-xiaoxi1 custom-icon"
          size="20"
          slot="active-icon"
          color="#fe4119"
        ></u-icon>
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-xiaoxi1 custom-icon"
          size="20"
          slot="inactive-icon"
          color="#666"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item text="经营" name="warehouse">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-jingyingguanli custom-icon"
          size="16"
          slot="active-icon"
          color="#fe4119"
        ></u-icon>
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-jingyingguanli custom-icon"
          size="16"
          slot="inactive-icon"
          color="#666"
        ></u-icon>
      </u-tabbar-item>
      <u-tabbar-item text="我的" name="my">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-wode custom-icon"
          size="18"
          slot="active-icon"
          color="#fe4119"
        ></u-icon>
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-wode custom-icon"
          size="18"
          slot="inactive-icon"
          color="#666"
        ></u-icon>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>
<script>
import { mapState } from "vuex";
import permission from "../../utils/permission.js";
export default {
  props: {
    tabbarName: {
      type: String,
      default: "order",
    },
  },
  data() {
    return {
      weiduNum: 0,
    };
  },
  computed: {
    ...mapState("user", ["imWeidu"]),
  },
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        uni.hideTabBar();
      }, 1);
    });
  },
  watch: {
    imWeidu: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.weiduNum = Object.values(this.imWeidu).reduce((sum, item) => {
            // 检查 item 是否是对象，并且有 weidu 属性
            return typeof item === "object" && item.weidu !== undefined
              ? sum + item.weidu
              : sum;
          }, 0);
        }
        if (newValue) {
          var keys = Object.keys(newValue);
          if (keys.length === 1 && keys[0] === "userId") {
            this.weiduNum = 0;
          }
        }
      },
      deep: true,
    },
  },
  mounted() {
    let imWeiDu = uni.getStorageSync("imWeiDu");

    if (imWeiDu) {
      this.weiduNum = Object.values(imWeiDu).reduce((sum, item) => {
        // 检查 item 是否是对象，并且有 weidu 属性
        return typeof item === "object" && item.weidu !== undefined
          ? sum + item.weidu
          : sum;
      }, 0);
    }
  },
  methods: {
    async changeTabbar(e) {
      switch (e) {
        case "order":
          uni.switchTab({
            url: "/pages/order/order",
          });
          break;
        case "warehouse":
          uni.switchTab({
            url: "/pages/warehouse/warehouse",
          });
          break;
        case "IM":
          
          uni.switchTab({
            url: "/pages/IM/IM",
          });

          break;
        case "shituzhongxin":
          uni.switchTab({
            url: "/pages/viewCenter/viewCenter",
          });
          break;
        case "my":
          uni.switchTab({
            url: "/pages/my/my",
          });
          break;

        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .u-border-top {
  border-top-width: 0.5px !important;
  border-color: #dadbde !important;
  border-top-style: solid;
}

.tabbar-container {
  .u-icon {
    font-weight: bold;
  }

  ::v-deep.u-tabbar__content__item-wrapper {
    height: 116rpx;

    .u-tabbar-item__icon {
      margin-bottom: 4rpx;
    }
  }
}

::v-deep.uni-tabbar-bottom {
  display: none;
}
</style>