work-order/work-order-uniapp/components/FooterTabBar.vue

<template>
  <view class="footer-tab-bar">
    <template v-if="mode === 'user'">
      <view class="tab-item" :class="{ active: active === '/pages/index/index' }" @click="onTabClick('/pages/index/index')">
        <image :src="active === '/pages/index/index' ? homeActiveIcon : homeIcon" class="tab-icon" />
        <text class="tab-label">首页</text>
      </view>
      <view class="tab-item plus" @click="onPlusClick">
        <view class="plus-btn">
          <text class="plus-icon">+</text>
        </view>
      </view>
      <view class="tab-item" :class="{ active: active === '/pages/mine/index' }" @click="onTabClick('/pages/mine/index')">
        <image :src="active === '/pages/mine/index' ? mineActiveIcon : mineIcon" class="tab-icon" />
        <text class="tab-label">我的</text>
      </view>
    </template>
    <template v-if="mode === 'mch'">
      <view class="tab-item" :class="{ active: active === '/pages/mch/index' }" @click="onUrlClick('/pages/mch/index')">
        <image :src="active === '/pages/mch/index' ? homeActiveIcon : homeIcon" class="tab-icon" />
        <text class="tab-label">首页</text>
      </view>
      <view class="tab-item" :class="{ active: active === '/pages/task/index' }" @click="onUrlClick('/pages/task/index?mode=mch')">
        <image :src="active === '/pages/task/index' ? orderActiveIcon : orderIcon" class="tab-icon" />
        <text class="tab-label">订单</text>
      </view>
      <view class="tab-item" :class="{ active: active === '/pages/mch/mine' }" @click="onUrlClick('/pages/mch/mine')">
        <image :src="active === '/pages/mch/mine' ? mineActiveIcon : mineIcon" class="tab-icon" />
        <text class="tab-label">我的</text>
      </view>
    </template>
  </view>
</template>

<script>
/**
 * FooterTabBar 底部导航栏组件
 * @prop {Number} activeIndex 当前激活tab索引
 * @event tabChange 切换tab事件
 * @event plusClick 点击加号事件
 */
export default {
  name: 'FooterTabBar',
  props: {
    active: {
      type: String,
      default: '/pages/index/index'
    },
    mode: {
      type: String,
      default: "user"
    }
  },
  data() {
    return {
      homeIcon: '/static/images/tabbar/home.png',
      homeActiveIcon: '/static/images/tabbar/home_.png',
      mineIcon: '/static/images/tabbar/mine.png',
      mineActiveIcon: '/static/images/tabbar/mine_.png',
      orderIcon: '/static/images/tabbar/order.png',
      orderActiveIcon: '/static/images/tabbar/order_.png',
    }
  },
  methods: {
    onTabClick(url) {
      uni.switchTab({ url })
    },
    onUrlClick(url) {
      uni.redirectTo({ url })
    },
    onPlusClick() {
      uni.navigateTo({ url: '/pages/task/edit' })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 120rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 16rpx 0 rgba(0,0,0,0.04);
  z-index: 100;
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 22rpx;
    &.active {
      color: #3478f6;
      .tab-icon {
        filter: none;
      }
    }
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 6rpx;
      filter: grayscale(1);
    }
  }
  .plus {
    position: relative;
    top: -32rpx;
    z-index: 101;
    .plus-btn {
      width: 88rpx;
      height: 88rpx;
      background: linear-gradient(180deg, #4f9cff 0%, #3478f6 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 16rpx 0 rgba(52,120,246,0.18);
      .plus-icon {
        color: #fff;
        font-size: 56rpx;
        font-weight: bold;
        line-height: 1;
      }
    }
  }
}
</style>