sqxp/sqxp-wx/components/client/client-tab-bar.vue

<template>
  <view class="client-tab-bar">
    <view class="client-tab-bar__inner">
      <view
        v-for="item in tabs"
        :key="item.key"
        class="tab-item"
        @click="onTab(item)"
      >
        <view class="tab-icon-wrap">
          <image
            class="tab-icon"
            :src="active === item.key ? item.selectedIconPath : item.iconPath"
            mode="aspectFit"
          />
        </view>
        <text class="tab-text" :class="{ 'tab-text--on': active === item.key }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 非 tabBar 页面底部占位：与 pages.json 中客户端 tab 一致，避免 H5 子路由下只有空白条。
 * 图标使用项目内 static/tabbar 下 PNG（与 pages.json 原生 tabBar 一致；微信小程序不支持 SVG 作原生 tab 图）。
 * 固定在视口底部，主内容区底部操作栏需留出高度：calc(100rpx + env(safe-area-inset-bottom))
 */
const props = defineProps<{
  active: 'home' | 'order' | 'cart' | 'profile'
}>()

const tabs = [
  {
    key: 'home' as const,
    text: '首页',
    pagePath: '/pages/client/home/home',
    iconPath: '/static/tabbar/首页.png',
    selectedIconPath: '/static/tabbar/首页-active.png'
  },
  {
    key: 'order' as const,
    text: '订单',
    pagePath: '/pages/client/order/order',
    iconPath: '/static/tabbar/订单.png',
    selectedIconPath: '/static/tabbar/订单-active.png'
  },
  {
    key: 'cart' as const,
    text: '购物车',
    pagePath: '/pages/client/cart/cart',
    iconPath: '/static/tabbar/购物车.png',
    selectedIconPath: '/static/tabbar/购物车-active.png'
  },
  {
    key: 'profile' as const,
    text: '我的',
    pagePath: '/pages/client/profile/profile',
    iconPath: '/static/tabbar/我的.png',
    selectedIconPath: '/static/tabbar/我的-active.png'
  }
]

function onTab(item: (typeof tabs)[number]) {
  if (item.key === props.active) return
  uni.switchTab({
    url: item.pagePath,
    fail: () => {
      uni.reLaunch({ url: item.pagePath })
    }
  })
}
</script>

<style lang="scss" scoped>
.client-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 低于 Vant Popup / 业务浮层，避免挡住弹窗 */
  z-index: 500;
  background: #ffffff;
  /* 与首页原生 tabBar 边界线更一致 */
  border-top: 1rpx solid rgba(0, 0, 0, 0.2);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.client-tab-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 88rpx;
  box-sizing: border-box;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rpx 0 0;
  text-align: center;
}

.tab-icon-wrap {
  width: 42rpx;
  height: 42rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 42rpx;
  height: 42rpx;
  display: block;
  margin: 0 auto;
}

.tab-text {
  width: 100%;
  margin-top: 6rpx;
  font-size: 18rpx;
  color: #000000;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

.tab-text--on {
  color: #0a9f6d;
  font-weight: 700;
}
</style>