VAVABUY/components/nav_menu.vue

<template>
  <view class="menu">
    <view class="menu_item">
      <popOver
        placement="bottom-end"
        :options="optionsList"
        key-name="text"
        ref="popoverRef"
        @select="selectItem"
      >
        <!-- <i class="icon-font icon-menu"></i> -->
        <view class="icon_menu">
          <image src="../static/more.png" class="img" v-if="!blacked"></image>
          <image src="../static/more_light.png" class="img" v-else></image>
        </view>
      </popOver>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import popOver from "@/components/popover";
import { useTabbarStore, useSystemStore } from "@/store";

const useTabbar = useTabbarStore();
const useSystem = useSystemStore();

const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
  page: {
    type: String,
    default: "",
  },
  blacked: Boolean,
});
const arr = [
  {
    icon: "icon-order",
    text: "订单",
  },
  {
    icon: "icon-Warehouse",
    text: "仓库",
  },
  {
    icon: "icon-parcel",
    text: "包裹",
  },
  {
    icon: "icon-Wallet",
    text: "钱包",
  },
  {
    icon: "icon-service",
    text: "在线客服",
  },
];
const optionsList = ref(
  Object.keys(props.options).length ? [props.options, ...arr] : arr
);

const selectItem = (item) => {
  if (item.text == "主页") {
    uni.switchTab({ url: "/pages/index/index" });
    useTabbar.getPageCur("index");
    return;
  }
  switch (item.icon) {
    case "icon-order":
      if (props.page == "order") {
      } else {
        uni.switchTab({ url: "/pages/order/index" });
        useTabbar.getPageCur("order");
      }
      break;
    case "icon-Wallet":
      if (props.page == "wallet") {
      } else {
        uni.navigateTo({ url: "/pages/bank/wallet" });
      }
      break;
    case "icon-Warehouse":
      if (props.page == "warehouse") {
      } else {
        uni.navigateTo({ url: "/pages/dashboard/warehouse" });
      }
      break;
    case "icon-parcel":
      if (props.page == "parcel") {
      } else {
        uni.navigateTo({ url: "/pages/dashboard/parcel" });
      }
      break;
    case "icon-service":
      uni.navigateTo({ url: "/pages/setting/system" });
      break;
    default:
      break;
  }
};
</script>
<style lang="less" scoped>
.menu {
  &_item {
    .icon_menu {
      width: 50rpx;
      height: 50rpx;

      .img {
        width: inherit;
        height: inherit;
      }
    }
  }
}
</style>