cfc/cfc-frontend/components/bottom-nav.vue

<template>
  <view class="bottom-nav">
    <view
      class="nav-item"
      :class="{ active: current === 'index' }"
      @click="goNav('index')"
    >
      <text class="nav-icon">🏠</text>
      <text class="nav-text">首页</text>
    </view>
    <view
      class="nav-item"
      :class="{ active: current === 'action' }"
      @click="goNav('action')"
    >
      <text class="nav-icon">🎯</text>
      <text class="nav-text">行动</text>
    </view>
    <view
      class="nav-item"
      :class="{ active: current === 'mind' }"
      @click="goNav('mind')"
    >
      <text class="nav-icon">🧠</text>
      <text class="nav-text">心智</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: { type: String, default: 'index' }
  },
  methods: {
    goNav(tab) {
      if (tab === this.current) return

      if (tab === 'index') {
        // 首页是 TabBar 页面
        if (uni.getStorageSync('token')) {
          uni.switchTab({ url: '/pages/index/index' })
        } else {
          uni.navigateTo({ url: '/pages/index/index' })
        }
      } else if (tab === 'action') {
        // 行动是 TabBar 页面
        if (uni.getStorageSync('token')) {
          uni.switchTab({ url: '/pages/action/index' })
        } else {
          uni.navigateTo({ url: '/pages/action/index' })
        }
      } else if (tab === 'mind') {
        // 心智文章页（非 TabBar）
        uni.navigateTo({ url: '/pages/mind/articles' })
      }
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 100;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}
.nav-item.active .nav-text { color: #FF6B6B; }
.nav-icon { font-size: 40rpx; }
.nav-text { font-size: 20rpx; color: #999; margin-top: 4rpx; }
.nav-item.active .nav-text { font-weight: bold; }
</style>