pet-system-fulfiller-app/components/custom-tabbar/index.vue

  <template>
    <view class="custom-tabbar">
      <view class="tabbar-border"></view>
      <view class="tabbar-list">
        <view
          class="tabbar-item"
          v-for="(item, index) in list"
          :key="index"
          @click="switchTab(item.pagePath)"
        >
          <image
            class="tabbar-icon"
            :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath"
          ></image>
          <view
            class="tabbar-text"
            :class="{'tabbar-text-active': currentPath === item.pagePath}"
          >
            {{ item.text }}
          </view>
        </view>
      </view>
    </view>
  </template>

  <script setup>
  import { ref } from 'vue';

  const props = defineProps({
    currentPath: {
      type: String,
      required: true
    }
  });

  const list = ref([
    {
      pagePath: "pages/home/index",
      text: "任务中心",
      iconPath: "/static/tabbar/home.svg",
      selectedIconPath: "/static/tabbar/home-active.svg"
    },
    {
      pagePath: "pages/orders/index",
      text: "我的订单",
      iconPath: "/static/tabbar/order.svg",
      selectedIconPath: "/static/tabbar/order-active.svg"
    },
    {
      pagePath: "pages/mine/index",
      text: "我的",
      iconPath: "/static/tabbar/mine.svg",
      selectedIconPath: "/static/tabbar/mine-active.svg"
    }
  ]);

  const switchTab = (path) => {
    if (props.currentPath === path) return;
    uni.reLaunch({
      url: '/' + path
    });
  };
  </script>

  <style scoped>
  .custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabbar-border {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    transform: scaleY(0.5);
  }

  .tabbar-list {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-around;
  }

  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex: 1;
  }

  .tabbar-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }

  .tabbar-text {
    font-size: 10px;
    color: #999999;
  }

  .tabbar-text-active {
    color: #FF5722;
  }
  </style>