intelligent-etmf-system-applet/components/TabBar/index.vue

<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index"
      class="tab-item"
      :class="{ active: currentTab === item.name }"
      @click="handleTabClick(item)"
    >
      <image 
        class="tab-icon" 
        :src="currentTab === item.name ? item.activeIcon : item.icon"
        mode="aspectFit"
      />
      <text class="tab-text">{{ item.label }}</text>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 定义props
const props = defineProps({
  currentTab: {
    type: String,
    default: 'home'
  }
})

// 底部导航配置
const tabList = computed(() => [
  {
    name: 'home',
    label: t('common.page.home'),
    icon: '/static/pages/tabbar/home.png',
    activeIcon: '/static/pages/tabbar/home-active.png',
    url: '/pages/home/index'
  },
  {
    name: 'scan',
    label: t('common.page.scan'),
    icon: '/static/pages/tabbar/scan.png',
    activeIcon: '/static/pages/tabbar/scan-active.png',
    url: '/pages/scan/index'
  },
  {
    name: 'mine',
    label: t('common.page.mine'),
    icon: '/static/pages/tabbar/mine.png',
    activeIcon: '/static/pages/tabbar/mine-active.png',
    url: '/pages/my/index'
  }
])

// 处理tab点击
const handleTabClick = (item) => {
  if (props.currentTab === item.name) return
  
  // 使用reLaunch跳转，清空页面栈
  uni.reLaunch({
    url: item.url
  })
}
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  border-top: 1rpx solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
  
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rpx 0;
    transition: all 0.3s ease;
    
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 4rpx;
      transition: transform 0.3s ease;
    }
    
    .tab-text {
      font-size: 20rpx;
      color: #666666;
      transition: color 0.3s ease;
    }
    
    &.active {
      .tab-icon {
        transform: scale(1.1);
      }
      
      .tab-text {
        color: #1ec9c9;
        font-weight: 500;
      }
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>