aerwen_u_site/components/Header/index.vue

<template>
  <div class="Header">
    <div class="Header-container" :style="[HeaderStyleOption]">
      <HeaderIcon :HeaderIcon="HeaderStyleOption.HeaderIcon"></HeaderIcon>
      <HeaderNav :HeaderNav="HeaderStyleOption.HeaderNav" :navList="navList"></HeaderNav>
      <HeaderSearch
        v-if="_lazy_with_fix_"
        :HeaderSearch="HeaderStyleOption.HeaderSearch"
        :appNav="HeaderStyleOption.appNav"
        :navList="navList"
        @showSearchBox="showSearchBox"
      ></HeaderSearch>
    </div>
    <div class="search-box" @mouseleave="showSearchHideBox([])">
      <!-- @input="searchEvent" -->
      <input
        type="text"
        class="search-box-input"
        v-model="inputval"
        @keydown="keyDownEvent"
        placeholder="请输入关键字回车"
      />
      <nuxt-link
        @click="showSearchBox()"
        class="search-btn"
        :to="url + $('search-box-input')[0].value"
        >搜索</nuxt-link
      >
      <div class="search-hide-box">
        <div class="search-hide-items" v-for="item in searchRes">
          <nuxtLink :to="{ path: getHerf(item.href), query: { s: item.txt } }">
            {{ item.txt }}
          </nuxtLink>
        </div>
      </div>
    </div>
  </div>
  <div class="phone-box"></div>


</template>

<script setup>
import HeaderIcon from "./HeaderIcon.vue";
import HeaderNav from "./HeaderNav.vue";
import HeaderSearch from "./HeaderSearch.vue";

const $ = document
  ? document.getElementsByClassName.bind(document)
  : () => [{ value: "" }];
const _lazy_with_fix_ = ref(false);
setTimeout(() => (_lazy_with_fix_.value = true));
const { t, locale } = useI18n();
const router = useRouter();
/**样式配置*/
const HeaderStyleOption = reactive({
  /**导航样式*/
  HeaderNav: {
    "padding-left": "2vw",
  },
  /**icon样式*/
  HeaderIcon: {
    "padding-left": "15vw",
  },
  /**搜索样式*/
  HeaderSearch: {
    position: " absolute",
    right: "240px",
  },
  /**手机菜单栏样式*/
  appNav: {
    top: " 0",
    height: "100%",
    width: "100%",
  },
});
let inputval = ref("");
let info_article_type_id = ref(0);

// '/product'
// '/product/child'
// 'child'
let navList = ref([
  {
    name: t("common.header.home"),
    children: [],
    href: "/",
    alias: "home",
  },
  {
    name: "Unity工程",
    href: "/project/1-1",
    children: [],
    alias: "project",
  },
  {
    name: "模型",
    children: [],
    href: "/model/1-1",
    alias: "model",
  },
  {
    name: "动画",
    children: [],
    href: "/animation/1-1",
    alias: "animation",
  },
  {
    name: "软件下载",
    children: [],
    href: "/software/1-1",
    alias: "software",
  },
  {
    name: "联系方式",
    children: [],
    href: "/contact",
    alias: "contact",
  },
]);

let searchRes = ref(null);

const showSearchBox = function () {
  document.getElementsByClassName("search-box")[0].classList.toggle("search-show");
  document
    .getElementsByClassName("search-box-input")[0]
    .classList.toggle("search-input-show");
};



let timer = null;

const showSearchHideBox = function (data) {
  searchRes.value = data;
  if (data && data.length !== 0) {
    document.getElementsByClassName("search-box-input")[0].classList.add("search-have");
  } else {
    document
      .getElementsByClassName("search-box-input")[0]
      .classList.remove("search-have");
  }
};

/**对接区域**/
const searchEvent = function (e) {
  return;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    let searchVal = e.target.value;
    useFetch("/api/product/getProductList", {
      params: {
        product_name: searchVal || " ",
        locale: locale.value,
      },
    }).then((res) => {
      let searchData = [];
      for (let item of JSON.parse(res.data.value).data) {
        let obj = {};
        obj.href = "/project/" + item["product_id"] + "-1";
        obj.txt = item["product_name"];
        searchData.push(obj);
      }

      showSearchHideBox(searchData);
    });
  }, 1000);
};
let url = getHerf("/search/0-1?s=");

const keyDownEvent = ($event) => {
  $event.keyCode === 13 && router.push(url + $event.target.value);
  // console.log(123);
  $event.keyCode === 13 && showSearchBox();
};

useFetch("/api/product/getProductTypeTree", { params: { locale: locale.value } }).then(
  (res) => {
    let data = JSON.parse(res.data.value).data || [];
    res = [];
    for (let item of data) {
      if (item.children == 0) {
        let obj = {};
        obj.name = item.product_type_name;
        obj.href = "/project/" + item["product_type_id"] + "-1";
        obj.children = [];
        res.push(obj);
      } else {
        let obj = {};
        obj.name = item.product_type_name;
        obj.href = "/project/" + item["product_type_id"] + "-1";
        let childrens = [];
        for (let _item of item.children) {
          let child = {};
          child.name = _item.product_type_name;
          child.href = "/project/" + _item["product_type_id"] + "-1";
          childrens.push(child);
        }
        obj.children = childrens;
        res.push(obj);
      }
    }
    /**新增全系列跳转**/
    res.unshift({
      href: "/project/0-1",
      name: t("home.products.all"),
    });
    for (let key in navList.value) {
      if (navList.value[key].alias === "project") {
        navList.value[key].children = res;
      }
    }
  }
);
</script>

<style lang="scss" scoped src="~/assets/css/Header/index.scss"></style>
<style lang="scss" scoped src="~/assets/css/Header/media.scss"></style>