scancode-miro/components/cjx/tabbar_hexiao_jxs.vue

<template>
  <view class="tabbar-container">
    <view class="tabbar-item" @click="navigate('/pages/hexiao/jxs/index', 0)">
      <uni-icons type="home-filled" :color="current === 0 ? activeColor : inactiveColor" size="26"></uni-icons>
      <view class="text" :style="{ color: current === 0 ? activeColor : inactiveColor }">首页</view>
    </view>

    <view class="tabbar-item" @click="navigate('/pages/hexiao/jxs/order', 1)">
      <uni-icons type="shop" :color="current === 1 ? activeColor : inactiveColor" size="26"></uni-icons>
      <view class="text" :style="{ color: current === 1 ? activeColor : inactiveColor }">订单</view>
    </view>

    <view class="tabbar-item" @click="navigate('/pages/hexiao/jxs/my', 2)">
      <uni-icons type="person" :color="current === 2 ? activeColor : inactiveColor" size="26"></uni-icons>
      <view class="text" :style="{ color: current === 2 ? activeColor : inactiveColor }">我的</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "my-tab-bar",
  props: {
    // 通过 props 接收当前页面的索引，用于高亮
    // 0: 首页, 1: 门店, 2: 我的
    current: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 定义高亮和非高亮颜色
      activeColor: '#409EFF', // 蓝色
      inactiveColor: '#909399' // 灰色
    };
  },
  methods: {
    navigate(path, index) {
      // 如果点击的已经是当前页，则不跳转，防止重复加载
      if (this.current === index) {
        return;
      }

      // 使用 reLaunch 跳转可以关闭所有其他页面，适合tabBar之间的切换
      uni.redirectTo({
        url: path
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);

  /* 适配iPhone X等机型的底部安全区域 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1; // 保证均分
  height: 100%;
}

.text {
  font-size: 24rpx;
  margin-top: 2rpx;
}
</style>