VAVABUY/components/tabbar.vue

<template>
  <Theme>
    <view class="cu-bar tabbar foot ZIndex tabbars">
      <view
        class="action"
        @click="NavChange(item, index)"
        v-for="(item, index) in currentNavList"
        :key="index"
        :data-cur="item.name"
      >
        <!-- 图标和数量显示 -->
        <view class="cuIcon-cu-image _item">
          <view>
            <i
              class="icon-font"
              :class="item.icon"
              :style="
                pageCur == item.name
                  ? { color: 'var(--primary)' }
                  : { color: '#c3cad9' }
              "
              v-if="item.icon"
            ></i>
            <image
              class="img"
              :src="pageCur == item.name ? item.img_active : item.img"
              mode="heightFix"
              v-else
            ></image>
          </view>
          <!-- 数量徽章 -->
          <view class="entry_num" v-if="item.num > 0">{{ item.num }}</view>
        </view>

        <view :class="pageCur == item.name ? 'tabbar_active' : 'tabbar_item'">
          {{ t(item.title) }}
        </view>
      </view>
    </view>
  </Theme>
</template>

<script setup>
import { onMounted, computed, watch, ref, nextTick } from "vue";
import {
  useTabbarStore,
  useMessageStore,
  useShopStore,
  useUserStore,
} from "@/store";
// 导入图片资源（保持不变）
import channel from "@/static/tabbar/channel.png";
import home from "@/static/tabbar/home.png";
import home_active from "@/static/tabbar/home_active.png";
import cart from "@/static/tabbar/cart.png";
import cart_active from "@/static/tabbar/cart_active.png";
import ship from "@/static/tabbar/ship.png";
import ship_active from "@/static/tabbar/ship_active.png";
import chat from "@/static/tabbar/chat.png";
import chat_active from "@/static/tabbar/chat_active.png";
import user from "@/static/tabbar/user.png";
import user_active from "@/static/tabbar/user_active.png";
import shop from "@/static/tabbar/shop.png";
import shop_active from "@/static/tabbar/shop_active.png";
import index from "@/static/tabbar/index.png";
import index_active from "@/static/tabbar/index_active.png";

import { t } from "@/locale";
import { storeToRefs } from "pinia";
import { query } from "@/utils";
import { onShow } from "@dcloudio/uni-app";

const useTabbar = useTabbarStore();
const useShop = useShopStore();
const useMessage = useMessageStore();
const useUser = useUserStore();
const { globalMap } = storeToRefs(useMessage);
const unreadCount = ref(0);

// 1. 定义购物车数量计算属性（响应式）
const cartNum = computed(() => useShop.getCartNum);
const sellerNum = computed(() => useShop.getSellerNum);

// 获取用户信息
const userInfo = computed(() => useUser.getuserInfo);

const isBuyer = computed(() => {
  console.log(useUser.getUserType, "123");
  return useUser.getUserType == 0;
});

const props = defineProps({
  page: {
    type: String,
    default: "index",
  },
});

const emit = defineEmits(["getTabbarHeight"]);

// 2. 将navList定义为ref响应式数组（关键修改）
const navList = ref([
  {
    name: "index",
    title: "tabbar.首页",
    img: home,
    img_active: home_active,
    num: 0,
  },
  {
    name: "shop",
    title: "tabbar.购物车",
    img: cart,
    img_active: cart_active,
    num: cartNum.value, // 初始值
  },
  {
    name: "chat",
    title: "tabbar.咨询",
    img: chat,
    img_active: chat_active,
    num: unreadCount.value,
  },
  {
    name: "order",
    title: "tabbar.订单",
    img: ship,
    img_active: ship_active,
    num: 0,
  },
  {
    name: "user",
    title: "tabbar.我的",
    img: user,
    img_active: user_active,
    num: 0,
  },
]);

// 买家端导航列表
const buyerNavList = ref([
  {
    name: "index",
    title: "tabbar.首页",
    img: index,
    img_active: index_active,
    num: 0,
  },
  {
    name: "store",
    title: "tabbar.店铺街",
    img: shop,
    img_active: shop_active,
    num: 0,
  },
  {
    name: "cart",
    title: "tabbar.购物车",
    img: cart,
    img_active: cart_active,
    num: sellerNum.value,
  },
  {
    name: "user",
    title: "tabbar.我的",
    img: user,
    img_active: user_active,
    num: 0,
  },
]);

// 3. 监听cartNum变化，实时更新navList中购物车项的num（关键修改）
watch(
  cartNum,
  (newNum) => {
    // 更新卖家端购物车数量
    const cartItem = navList.value.find((item) => item.name === "shop");
    if (cartItem) {
      cartItem.num = newNum;
    }
    // 更新买家端购物车数量
    const buyerCartItem = buyerNavList.value.find(
      (item) => item.name === "cart"
    );
    if (buyerCartItem) {
      buyerCartItem.num = newNum;
    }
  },
  { immediate: true } // 初始化时立即执行一次
);

// 监听咨询消息数量（保持不变）
watch(
  () => globalMap.value.serviceChannel,
  (newVal) => {
    if (newVal) {
      unreadCount.value = newVal.unreadCount;
      const chatItem = navList.value.find((item) => item.name === "chat");
      if (chatItem) {
        chatItem.num = unreadCount.value;
      }
    }
  },
  { deep: true, immediate: true }
);

const pageCur = computed(() => useTabbar.setPageCur);

// 根据用户类型返回相应的导航列表
const currentNavList = computed(() => {
  // 如果用户已登录，根据用户类型显示导航
  if (userInfo.value && Object.keys(userInfo.value).length > 0) {
    return isBuyer.value ? buyerNavList.value : navList.value;
  }

  // 如果用户未登录，根据当前页面路径判断
  const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
  const isBuyerPage = currentPath.includes("pagesBuyer");
  return isBuyerPage ? buyerNavList.value : navList.value;
});

const NavChange = (item, index) => {
  if (item.name == pageCur.value) return;

  let targetUrl = "";

  // 根据用户类型决定跳转路径
  if (userInfo.value && Object.keys(userInfo.value).length > 0) {
    // 用户已登录，根据用户类型跳转
    if (isBuyer.value) {
      // 买家端页面跳转
      if (item.name === "cart") {
        targetUrl = "/pagesBuyer/cart/index";
      } else if (item.name === "index") {
        targetUrl = "/pagesBuyer/home/index";
      } else if (item.name === "store") {
        targetUrl = "/pagesBuyer/store/index";
      } else if (item.name === "user") {
        targetUrl = "/pagesBuyer/profile/index";
      } else {
        targetUrl = `/pagesBuyer/${item.name}/index`;
      }
    } else {
      // 卖家端页面跳转
      if (item.name === "shop") {
        targetUrl = "/pages/shop/cart";
      } else {
        targetUrl = `/pages/${item.name}/index`;
      }
    }
  } else {
    // 用户未登录，根据当前页面路径判断
    const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
    const isBuyerPage = currentPath.includes("pagesBuyer");

    if (isBuyerPage) {
      // 买家端页面跳转
      if (item.name === "cart") {
        targetUrl = "/pagesBuyer/cart/index";
      } else if (item.name === "index") {
        targetUrl = "/pagesBuyer/home/index";
      } else if (item.name === "store") {
        targetUrl = "/pagesBuyer/store/index";
      } else if (item.name === "user") {
        targetUrl = "/pagesBuyer/profile/index";
      } else {
        targetUrl = `/pagesBuyer/${item.name}/index`;
      }
    } else {
      // 卖家端页面跳转
      if (item.name === "shop") {
        targetUrl = "/pages/shop/cart";
      } else {
        targetUrl = `/pages/${item.name}/index`;
      }
    }
  }
  useTabbar.getPageIndex(index);
  // 判断是否为买家端页面
  const isBuyerPage = targetUrl.includes("pagesBuyer");

  if (isBuyerPage) {
    // 买家端页面使用 navigateTo
    uni.navigateTo({
      url: targetUrl,
      success: () => {
        useTabbar.getPageCur(item.name);
        useTabbar.getPageIndex(index);
      },
      fail: (err) => {
        console.error("买家端页面跳转失败:", err);
        // 如果 navigateTo 失败，尝试使用 reLaunch
        uni.reLaunch({
          url: targetUrl,
          success: () => {
            useTabbar.getPageCur(item.name);
            useTabbar.getPageIndex(index);
          },
        });
      },
    });
  } else {
    // 卖家端页面使用 switchTab
    uni.switchTab({
      url: targetUrl,
      success: () => {
        useTabbar.getPageCur(item.name);
        useTabbar.getPageIndex(index);
      },
      fail: (err) => {
        console.error("卖家端页面跳转失败:", err);
      },
    });
  }
};
const getHeight = async () => {
  try {
    const res = await query(".tabbar");
    nextTick(() => {
      emit("getTabbarHeight", res.height);
    });
  } catch (error) {}
};

onMounted(() => {
  let num = navList.value.findIndex((item) => item.name == props.page);
  if (num >= 0) {
    useTabbar.getPageCur(props.page);
  }
});

onShow(() => {
  setTimeout(() => {
    getHeight();
  }, 200);
});
</script>

<!-- 样式部分保持不变 -->
<style>
.ZIndex {
  z-index: 2000;
  bottom: 0;
}

:deep(.cu-bar .content) {
  cursor: pointer;
  pointer-events: unset;
}

.cu-tag.badge:not([class*="bg-"]) {
  background-color: var(--red) !important;
  color: var(--black);
  position: absolute;
  top: -10rpx;
  right: 32%;
}
</style>
<style lang="less" scoped>
@import "@/static/css/theme.less";
@import url("@/style.less");

.tabbar {
  background-color: var(--light);
  bottom: 0;
}

.action {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

._item {
  width: max-content !important;
  position: relative;

  .icon-font {
    font-size: 24px;
  }

  ._item {
    height: 24px;
    vertical-align: top;
  }
  .entry_num {
    position: absolute;
    top: -12rpx;
    right: -14rpx;
    background-color: var(--danger);
    border: 1px solid var(--light);
    color: var(--light);
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    .size(18rpx);
    .flex_center();
  }
}

.tabbar_item {
  color: var(--text-01);
  font-size: 10px;
  line-height: 12px;
  margin: 2px auto 0;
}

.tabbar_active {
  font-size: 10px;
  line-height: 12px;
  margin: 2px auto 0;
  color: var(--text-02);
}

.foot {
  box-shadow: 0 -4px 6px #0000000d;
}

.cont_num {
  position: absolute;
  @width: 32rpx;
  width: @width;
  height: @width;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  background-color: var(--red);
  font-size: 24rpx;
  z-index: 2;
  right: -18rpx;
  top: -6rpx;
}
</style>