xinkeaboard/xinkeaboard-web/components/NavCatHeader.vue

<template>
  <div class="nav_cat">
    <div class="header">
      <div class="product_sort" >
        <!-- <img :src="sortUrl" alt /> -->
        <nuxt-link to="/goods/Category" target="_blank" class="sort">
          <span >{{L['产品分类']}}</span>
        </nuxt-link>
        <div class="category_sort">
          <CategorySortTop />
        </div>
      </div>
      <nav>
        <li v-if="showIndex">
          <nuxt-link to="/" target="_blank">{{L['首页']}}</nuxt-link>
        </li>
        <li v-for="(item, index) in navList.data" :key="index">
          <a href="javascript:void(0)" @click="navClick(item)">{{
            item.navName
          }}</a>
        </li>
      </nav>
    </div>
  </div>
</template>

<script setup>
import { getCurLanguage } from '@/composables/common.js';
import { ElPopover,ElButton } from 'element-plus';
// const L = lang_zn;
const L = getCurLanguage();
const router = useRouter();
const route = useRoute();
const showIndex = ref(true);
const navList = reactive({ data: [] });
const sortUrl = ref("/header/sort.png");
const showTopMenu = ref(false)
//展示一级全部菜单
const showMenu = () => {
  showTopMenu.value = true
}

const hideMenu = () => {
  setTimeout(() => {
    showTopMenu.value = false
    }, 1000)
}

const toGoodsList = () => {
  navigateTo({ path: "/goods/Category" });
};

const getNavData = async () => {
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/system/front/navigation/list"
  );
  const res = value._rawValue;
  if (res.state == 200) {
    navList.data = res.data;
  }
};
getNavData();

const navClick = (val) => {
  val = JSON.parse(val.data.replace(/&quot;/g, '"'));
  if (val.link_type == "url") {
    //跳转链接地址
    if (val.link_value) {
      val.link_value = quillEscapeToHtml(val.link_value);
    }
    window.open(val.link_value, "_blank");
  } else if (val.link_type == "goods") {
    //跳转商品详情页
    // let routeUrl = router.resolve({
    //   path: "/goods/detail",
    //   query: {
    //     productId: val.info.defaultProductId,
    //   },
    // });
    let href  = "/goods/detail/"+ calcProductName(val.info.goodsName) +'_'+ val.info.defaultProductId
    window.open(href, "_blank");
  } else if (val.link_type == "category") {
    // 分类列表
    let routeUrl = router.resolve({
      // path: "/goods/list",
      path:'/goods/list/_v-'+val.info.categoryId + '_gid-1_pid-0',
      // query: {
      //   categoryId: val.info.categoryId,
      // },
    });

    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "keyword") {
    // 关键词
    let query = {
      keyword: val.link_value,
    };
    if (val.storeId) {
      query.storeId = val.storeId;
    }
    let routeUrl = router.resolve({
      path: "/goods/list",
      query,
    });
    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "topic") {
    //跳转专题页
    let routeUrl = router.resolve({
      path: "/home/topic",
      query: {
        topicId: val.info.decoId,
      },
    });
    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "brand_home") {
    //品牌列表
    let routeUrl = router.resolve({
      path: "/brand",
      query: {},
    });
    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "store_list") {
    //店铺列表
    let routeUrl = router.resolve({
      path: "/store/list/current-1",
    });
    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "voucher_center") {
    //领券中心
    let routeUrl = router.resolve({
      path: "/coupon",
    });
    window.open(routeUrl.href, "_blank");
  } else if (val.link_type == "point_center") {
    let routeUrl = router.resolve({
      path: "/point/index",
    });
    window.open(routeUrl.href, "_blank");
  }
};


onMounted(() => {
  let path = route.path;
  if (path == "/") {
    showIndex.value = false;
  }
});
</script>

<style lang="scss" scoped>
$colorMain: #e2231a !default; //主色、文字选中、搜索

.header {
  width: 100%;
  height: 45px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  .product_sort {
    position: relative;
    overflow: visible;
    flex:0 0 250px;
    height: 100%;
    background: #fff;
    letter-spacing: 0px;
    line-height: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    z-index:888;
    a{
      font-weight: bold;
      font-size: 16px;
      color: #282E30;
    }

    .category_sort {
      position: absolute;
      top: 40px;
      display: none;
    }

    &:hover {
      background: #F6F8FA;
      .category_sort {
        display: block;
      }
    }

    img {
      width: 12px;
      height: 12px;
      margin-right: 7px;
    }
  }

  nav {
    width: 1013px;

    display: flex;
    align-items: center;
    line-height: 30px;
    overflow: hidden;
    flex-wrap: wrap;

    a {
      height: 45px;
      display: inline-block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-weight: bold;
      font-size: 16px;
      color: #282E30;
      margin: 0 0 0 10px;
      line-height: 45px;
      padding: 0 3px;
      width: max-content;
    }

    a:hover {
      color: $colorMain;
      border-bottom: 3px solid $colorMain;
    }
  }
}
</style>