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 @click="(e) => navClick(e, item)" :class="{'active': getActive(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 routePath = computed(() => route.fullPath);

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 getActive = (item) => {
    item = JSON.parse(item.data.replace(/&quot;/g, '"'));
    return item.link_type === 'url' && routePath.value === quillEscapeToHtml(item.link_value)
}

const navClick = (e, val) => {
  e.preventDefault()
  val = JSON.parse(val.data.replace(/&quot;/g, '"'));
  if (val.link_type == "url") {
    //跳转链接地址
    if (val.link_value) {
      val.link_value = quillEscapeToHtml(val.link_value);
    }
    router.push(val.link_value)
    // router.resolve({
    //   path: 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
    // router.push(href)
    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>
.nav_cat {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #F6F8FA;
}
.header {
  width: 1440px;
  height: 45px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: visible;
  position: relative;
  .product_sort {
    position: relative;
    overflow: visible;
    width: max-content;
    height: 100%;
    letter-spacing: 0px;
    line-height: 45px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    z-index:888;
    a{
      // font-weight: bold;
      font-size: $fontE;
      color: #282E30;
      width: 100%;
      height: 100%;
      // padding: 0 20px;
    }

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

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

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

  nav {
    flex: 1;
    width: 100%;

    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: $fontE;
      color: #282E30;
      margin: 0 0 0 15px;
      line-height: 45px;
      padding: 0 5px;
      width: max-content;
      cursor: pointer;
      
      &.active {
        background-color: $colorMain;
        color: #fff;
      }
    }

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