intelligent-etmf-system-applet/pages/index.vue

<template>
  <view class="page-container">
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 首页内容 -->
      <HomePage v-if="currentTab === 'home'" />
      
      <!-- 扫描内容 -->
      <ScanPage v-else-if="currentTab === 'scan'" />
      
      <!-- 我的内容 -->
      <MyPage v-else-if="currentTab === 'mine'" />
    </view>
    
    <!-- 自定义底部导航栏 -->
    <view class="custom-tabbar">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === item.name }"
        @click="switchTab(item.name)"
      >
        <image 
          class="tab-icon" 
          :src="currentTab === item.name ? item.activeIcon : item.icon"
          mode="aspectFit"
        />
        <text class="tab-text">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import HomePage from '../pages-content/home/index.vue'
import ScanPage from '../pages-content/scan/index.vue'
import MyPage from '../pages-content/my/index.vue'

const { t } = useI18n()

// 当前激活的tab
const currentTab = ref('home')

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

// 切换tab
const switchTab = (name) => {
  if (currentTab.value === name) return
  currentTab.value = name
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

// 主内容区
.main-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

// 自定义底部导航栏
.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: #2E7CF6;
        font-weight: 500;
      }
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>