freight-web/src/components/TabBar/index.vue

<template>
  <!-- 工作台底部菜单 -->
  <uni-transition mode-class="fade" :duration="100" :show="true">
    <view>
      <view class="tabBar">
        <view class="tabMenuBox">
          <view class="circle-box"></view>
          <u-grid :border="false">
            <u-grid-item
              v-for="(item, listIndex) in tabMenuList"
              :key="listIndex"
              @click="item.fn"
            >
              <up-image
                :src="`https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/pages/TabMenu/${
                  item.icon
                }${
                  listIndex !== 1 && currentIndex === listIndex ? '1' : ''
                }.png`"
                width="33rpx"
                height="40rpx"
                mode="aspectFill"
                class="grid-icon"
              ></up-image>
              <text
                class="grid-text"
                :class="{ active: currentIndex === listIndex }"
                :style="{ color: listIndex === 1 ? '#fff' : '' }"
                >{{ item.title }}</text
              >
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
  </uni-transition>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";

const tabMenuList = reactive([
  {
    icon: "statistics",
    title: "统计",
    fn: () => {
      const pages: any = getCurrentPages();
      if (
        [
          "pagesStatistics/index",
          "pagesHome/index",
          "pages/profile/index",
        ].indexOf(pages[pages.length - 1].route) === 0
      ) {
        return;
      }
      uni.redirectTo({
        url: "/pagesStatistics/index", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "home",
    title: "工作台",
    fn: () => {
      const pages: any = getCurrentPages();
      if (
        [
          "pagesStatistics/index",
          "pagesHome/index",
          "pages/profile/index",
        ].indexOf(pages[pages.length - 1].route) === 1
      ) {
        return;
      }
      uni.redirectTo({
        url: "/pagesHome/index", // 要跳转到的页面路径
      });
    },
  },
  {
    icon: "profile",
    title: "我的",
    fn: () => {
      const pages: any = getCurrentPages();
      if (
        [
          "pagesStatistics/index",
          "pagesHome/index",
          "pages/profile/index",
        ].indexOf(pages[pages.length - 1].route) === 2
      ) {
        return;
      }
      uni.redirectTo({
        url: "/pages/profile/index", // 要跳转到的页面路径
      });
    },
  },
]);

const currentIndex = ref(1);

onLoad(() => {
  const pages: any = getCurrentPages();
  currentIndex.value = [
    "pagesStatistics/index",
    "pagesHome/index",
    "pages/profile/index",
  ].indexOf(pages[pages.length - 1].route);
});
</script>

<style lang="scss" scoped>
.tabBar {
  background: url("/static/img/TabMenu/bg.png");
  height: 140rpx;
  background-size: cover;
  position: fixed;
  width: 100%;
  bottom: 0px;
  .tabMenuBox {
    padding-top: 30rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    .grid-text {
      margin-top: 10rpx;
    }
    .circle-box {
      width: 154rpx;
      height: 154rpx;
      background: linear-gradient(0deg, #1992ef, #00f6ff);
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 50, 100, 0.12);
      border-radius: 50%;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      margin-top: -49rpx;
      margin-left: calc(50% - 78rpx);
    }
    .normal-box {
      width: 150rpx;
      height: 150rpx;
      text-align: center;
    }
  }

  .active {
    color: rgba(0, 220, 238, 1);
  }
}
</style>