cdwUniapp/components/custom-tab-bar/my-tab-bar.vue

<script setup>
import { onReady } from "@dcloudio/uni-app";
import { computed, getCurrentInstance, ref } from "vue";
import { useRect } from "@/libs/utils";
import useStore from "@/store";

const props = defineProps({
  tabIndex: String | Number,
});

const store = useStore();
const instance = getCurrentInstance();

/**
 * 底部导航栏下标
 */
const activeTab = ref(props.tabIndex * 1);
/**
 * 未激活tab的颜色
 */
const inactiveColor = "#979996";
/**
 * 激活tab的颜色
 */
const activeColor = "#06CA64";
/**
 * 购物车数量
 */
const cartCount = computed(() => store.getCartTotalQuantity());

/**
 * 底部导航栏标签信息
 */
const tabList = ref([
  {
    pagePath: "/pages/home/home",
    text: "首页",
    iconPath: "/static/tabbar/home.png",
    selectedIconPath: "/static/tabbar/home-selected.png",
    badgeCount: 0,
  },
  {
    pagePath: "/pages/allDish/allDish",
    text: "全部菜品",
    iconPath: "/static/tabbar/alls.png",
    selectedIconPath: "/static/tabbar/alls-selected.png",
    badgeCount: 0,
  },
  {
    pagePath: "/pages/recipeOrder/recipeOrder",
    text: "菜谱下单",
    iconPath: "/static/tabbar/menus.png",
    selectedIconPath: "/static/tabbar/menus-selected.png",
    badgeCount: 0,
  },
  {
    pagePath: "/pages/shoppingCart/shoppingCart",
    text: "购物车",
    iconPath: "/static/tabbar/cart.png",
    selectedIconPath: "/static/tabbar/cart-selected.png",
    badgeCount: 0,
  },
  {
    pagePath: "/pages/personalInformation/personalInformation",
    text: "个人信息",
    iconPath: "/static/tabbar/mys.png",
    selectedIconPath: "/static/tabbar/mys-selected.png",
    badgeCount: 0,
  },
]);

/**
 * 切换 tab 页
 * @param index
 */
function onChangeTab(index) {
  uni.switchTab({
    url: tabList.value[index].pagePath,
  });
}

onReady(() => {
  useRect(".tab-bar", instance.proxy).then((rect) => {
    store.tabbarBottomHeight = rect?.height || 0;
  });
  useRect(".tab-bar-item", instance.proxy).then((rect) => {
    store.tabbarItemWidth = rect?.width || 0;
  });
});
</script>

<template>
  <view id="tab-bar" class="tab-bar">
    <view
      v-for="(tab, index) in tabList"
      :key="tab.pagePath"
      class="tab-bar-item"
      @click="() => onChangeTab(index)"
    >
      <view class="icon-wrapper" :class="activeTab === index ? 'img-active' : ''">
        <image
          class="image"
          mode="widthFix"
          :src="activeTab === index ? tab.selectedIconPath : tab.iconPath"
        />
      </view>
      <view class="box" />
      <view class="name" :style="{ color: activeTab === index ? activeColor : inactiveColor }">
        {{ tab.text }}
      </view>

      <view v-if="index === 3 && cartCount !== 0" class="badge">
        {{ cartCount }}
      </view>
    </view>
  </view>
</template>

<style lang="scss">
// @import '../../uni.scss';

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: auto;
  padding-top: 5px;
  z-index: 10003;
  box-shadow: 0rpx -2rpx 21rpx 0rpx rgba(29,51,17,0.1);
  display: flex;
  .tab-bar-item {
    // width: 20%;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    .img-active {
      background-color: #06CA64;
      transform: translateY(-24rpx);
      padding: 13rpx;
      box-sizing: border-box;
    }
    .image {
      width: 44rpx;
      height: 44rpx;
    }
    .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      // background-color: #fff;
      box-sizing: border-box;
      position: absolute;
      top: 0;
    }
    .box {
      width: 43rpx;
      height: 43rpx;
    }
    .name {
      font-weight: 400;
      font-size: $text-base;
      // font-size: $text-lg;
      color: #979996;
      line-height: 1;
      margin-top: 6rpx;
    }

  }
}

.badge {
  position: absolute;
  top: -20rpx;
  right: 20rpx;
  background: #FF261F;
  border-radius: 24rpx;
  font-weight: 500;
  font-size: $text-sm;
  color: #FFFFFF;
  padding: 8rpx 20rpx;
  box-sizing: border-box;
  line-height: 1;
}
</style>