java-mall-app/pagesub/index/components/tabbar.vue

<template>
  <view class="sub__tabbar">
    <view
      :class="['item', { current: current == 1 }]"
      @click="gopage(1, `/pagesub/index/store?store_id=${storeId}`)"
    >
      <view class="box">
        <image
          v-if="current == 1"
          class="icon"
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_home_cur.png"
        />
        <image v-else class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_home.png" />
        <view class="desc">首页</view>
      </view>
    </view>

    <view
      :class="['item', { current: current == 2 }]"
      @click="
        gopage(
          2,
          `/pagesub/index/category?category_id=${categoryId}&store_id=${storeId}`
        )
      "
    >
      <view class="box">
        <image
          v-if="current == 2"
          class="icon"
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_category_cur.png"
        />
        <image v-else class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_category.png" />
        <view class="desc">分类</view>
      </view>
    </view>

    <view
      :class="['item', { current: current == 3 }]"
      @click=" gopage(3,`/pages/index/image?category_id=${categoryId}&store_id=${storeId}`)"
    >
      <view class="box">
        <image
          v-if="current == 3"
          class="icon"
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_feed_cur.png"
        />
        <image v-else class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_feed.png" />
        <view class="desc">社区</view>
      </view>
    </view>

    <view
      :class="['item', { current: current == 4 }]"
      @click="gopage(4, `/pages/index/cart?category_id=${categoryId}&store_id=${storeId}`)"
    >
      <view class="box">
        <image
          v-if="current == 4"
          class="icon"
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_shop_cur.png"
        />
        <image v-else class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_shop.png" />
        <view class="desc">购物车</view>
        <text class="icon_badge">{{ goodsNum }}</text>
      </view>
    </view>
    
    <view
      :class="['item', { current: current == 5 }]"
      @click="gopage(5,`/pages/index/member?category_id=${categoryId}&store_id=${storeId}`)"
    >
      <view class="box">
        <image
          v-if="current == 5"
          class="icon"
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_mine_cur.png"
        />
        <image v-else class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_mine.png" />
        <view class="desc">我的</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1,
    },
    cartNum: {
      type: Number,
      default: 0,
    },
    storeId: {
      type: Number,
      default: 0,
    },
    categoryId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      goodsNum: 0,
    };
  },
  watch: {
    cartNum: {
      handler(newVal) {
        this.goodsNum = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    gopage(tabIndex, url) {
      if (tabIndex === this.current) {
        console.log("当前页面，不执行跳转");
        return;
      }
      if([3,5].includes(tabIndex)){
 this.$.switchTab({
          url,
        });
      } else {
        this.$.navigateTo({
          url,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sub__tabbar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4rpx 0;
  padding-bottom: var(--safe-area-inset-bottom, 4);
  height: 48px;
  background: #fff;

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    color: #666;
    text-align: center;
    position: relative;

    .icon {
      width: 48rpx;
      height: 48rpx;
      display: block;
    }

    .desc {
      font-size: 24rpx;
      line-height: 14rpx;
    }

    .icon_badge {
      display: block;
      position: absolute;
      right: -5px;
      top: -5px;
      text-align: center;
      line-height: 24rpx;
      font-size: 24rpx;
      padding: 4rpx 10rpx;
      border-radius: 20rpx;
      color: #fff;
      background: #dd524d;
    }

    .box {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10rpx;
    }

    &.current {
       color: #dd524d;
       font-weight: 900;
    }
  }
}
</style>