web/components/Header/index.vue

<template>
  <div class="app-header pc" :class="{bg1:route.path!='/'}">
    <div class="top">
      <a> <span class="iconfont icon-youxiang"></span> market@aporesearch.com</a>
      <a><span class="iconfont icon-lianxidianhua"></span> 1-332-251-9412</a>
      <template v-if="isLogin">
        <div class="userInfo">
          <img class="avatar" src="@/assets/images/avatar.png" alt="avatar" width="30" />
          <span class="username" @click="toMine">{{
                    userInfo.name
                  }}</span>
          <span>|</span>
          <span class="logout" @click="handleLogout">{{t('common.login.logout')}}</span>
        </div>
      </template>
      <template v-if="!isLogin">
        <div><span class="iconfont icon-weidenglu"></span>
          <div @click="handleSignIn()">Login</div> / <div @click="closeSginDialog('register')">Register</div>
        </div>
      </template>
    </div>
    <div class="navBox">
      <a class="navBox_l" href="/">
        <img src="/assets/images/img2.png" alt="">
      </a>
      <div class="navBox_c">
        <n-dropdown :options="reportOptions" trigger="hover" size="huge" @select="chooseReportMenu">
          <a :class="{'router-link-active':(route.name=='reports')}" :href="jumpLink('/report-industries')">
            Reports
          </a>
        </n-dropdown>
        <a :class="{'router-link-active':route.path=='/market'}" :href="jumpLink('/market')">
          Custom Researc
        </a>
        <n-dropdown :options="newsOptions" trigger="hover" size="huge" @select="chooseNewsMenu">
          <a :class="{'router-link-active':(route.name=='newsCategories'||route.path=='/news-categories')}" :href="jumpLink('/news-categories')">
            Industry News
          </a>
        </n-dropdown>
        <n-dropdown :options="aboutOptions" trigger="hover" size="huge" @select="chooseAboutMenu">
          <a :class="{'router-link-active':route.path=='/about'||route.path=='/link'||route.path=='/order'||route.path=='/term'||route.path=='/qualify'}" :href="jumpLink('/about')">
            About Us
          </a>
        </n-dropdown>
        <a :class="{'router-link-active':route.path=='/contactUs'}" :href="jumpLink('/contactUs')">Contact</a>
      </div>
      <div class="navBox_r">
        <div class="search">
          <div class="search_l">
            <n-dropdown trigger="hover" :keyboard="false" :options="selectTypeList">
              <div class="search_l_type">
                {{ selectTypeLabel }}
                <span class="iconfont icon-dkw_guanbi-"></span>
              </div>
            </n-dropdown>
          </div>
          <div class="search_c">
            <n-input v-model:value="keyword" @keydown.enter="handleSearch()" type="text" clearable placeholder="Please Enter Keywords" />
          </div>
          <div class="search_r" @click="handleSearch()">
            <span class="iconfont icon-sousuo"></span>
            Search
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="headPhone">
    <div class="head_t">
      <div class="head_t_l">
        <a href="/">
          <img src="/assets/images/img2.png" alt="" />
        </a>
      </div>
      <div class="head_t_r">
        <n-dropdown placement="bottom-start" class="en" trigger="click" size="small" :options="mobileMenu" @select="chooseMenu">
          <img src="/assets/images/menu.png" alt="" />
        </n-dropdown>
      </div>
    </div>
    <div class="head_c_box">
      <div class="head_c">
        <div class="head_c_l">
          <n-dropdown trigger="click" :options="selectTypeList" @select="selectValueFun" placement="bottom-start" :class="language">
            <div style="color: #000">
              {{ selectTypeLabel }} <span class="iconfont icon-dkw_guanbi-"></span>
            </div>
          </n-dropdown>
        </div>
        <div class="head_c_c">
          <n-input v-model:value="keyword" type="text" clearable :placeholder="$t('report.content.keyword')" />
        </div>
        <div class="head_c_r" @click="handleSearch()">
          Search
        </div>
      </div>
    </div>
    <div class="head_b">
      <div>
        <div class="userInfo" v-if="userStore.getToken">
          <span class="username">
            <a href="/mine/mineCenter">
              {{ userStore.getUserInfo?.name }}
            </a>
          </span>
          <span>|</span>
          <span class="logout" @click="handleLogout">{{
            $t("common.login.logout")
          }}</span>
        </div>
        <div v-else class="head_t_r_login">
          <span @click="handleSignIn()">
            Login</span>/
          <span @click="closeSginDialog('register')">Register</span>
        </div>
      </div>
    </div>
  </div>
  <n-modal :show="signInVisible" :title="signInTitle" :showIcon="false" @esc="signInVisible = false" @mask-click="signInVisible = false" @close="signInVisible = false" class="modalCls" :class="{ 'login-dialog': !pcShow }">
    <SignInLogin @closeSginDialog="closeSginDialog" v-if="sginType == 'login'"></SignInLogin>
    <SignInRegister @closeSginDialog="closeSginDialog" v-if="sginType == 'register'"></SignInRegister>
    <SignInForgot @closeSginDialog="closeSginDialog" v-if="sginType == 'forgot'"></SignInForgot>
  </n-modal>
  <n-modal v-model:show="logoutVisible" preset="dialog" title="Hint" :showIcon="false" content="Are you sure you want to log out?" positive-text="Confirm" negative-text="Cancel" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
</template>

<script lang="ts" setup>
import { useI18n } from "#imports";
import SignInLogin from "@/components/Login/index.vue";
import SignInRegister from "@/components/Login/register.vue";
import SignInForgot from "@/components/Login/forgot.vue";
import { useLocaleStoreWithOut } from "@/store";
import {
  // Component,
  // h,
  onMounted,
  ref,
  onUnmounted,
  onBeforeMount,
  watch,
  computed,
  inject,
  onServerPrefetch,
} from "vue";
import { createDiscreteApi } from "naive-ui";
import { useRouter, useRoute } from "vue-router";
import {
  MdApps,
  MdHome,
  IosPaper,
  IosSearch,
  MdToday,
  MdPeople,
  MdSearch,
  IosCall,
  IosGlobe,
} from "@vicons/ionicons4";
import { useUserStore } from "@/store/user";
const message = createDiscreteApi(["message"]);
const { t, locale, setLocale } = useI18n();
const switchLocalePath = useSwitchLocalePath();
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const pcShow = ref(true);
const keyword = ref<string>(""); //关键字
userStore.setLang(locale.value == "en" ? "en-US" : "zh-CN");
const value = userStore.getLang;
const language = ref("");
const langSelected = ref("zh");
language.value = value === "en-US" ? "en" : "";
langSelected.value = value === "en-US" ? "en" : "zh";
const renderIcon = (icon: string) => {
  return () => {
    return h("span", { class: icon });
  };
};
const renderIconC4 = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};
const selectValueFun = (value: any) => {
  selectTypeValue.value = selectTypeList.value[value].value;
  selectTypeLabel.value = selectTypeList.value[value].label;
};
// const renderIconLabel = (option: DropdownOption) => {
//   return h('a',{ onclick: () => chooseMenu, target: '_blank' },{ default: () => option.label});
// }
const reportOptions = [] as any; //报告列表
const newsOptions = [] as any; //行业资讯
const aboutOptions = [] as any; //关于我们
const bulletinOptions = [] as any; // 简报智库

const mobileMenu = [
  { label: t("common.navigate.home"), key: "home", name: "index" },
  {
    label: t("common.navigate.report"),
    key: "reports",
    children: reportOptions,
    name: "reports",
  },
  { label: t("common.navigate.market"), key: "market", name: "marketIndex" },
  {
    label: t("common.navigate.news"),
    key: "newsCategories",
    children: newsOptions,
    name: "newsCategories",
  },
  {
    label: t("common.navigate.aboutUs"),
    key: "about",
    children: aboutOptions,
    name: "about",
  },
  {
    label: t("common.navigate.contactUs"),
    key: "contactUs",
    name: "contactUsIndex",
  },
  // {
  //   label: "简报智库",
  //   key: "bulletin",
  //   children: bulletinOptions,
  //   name: "bulletin",
  // },
];
const selectTypeValue = ref("reports");
const selectTypeLabel = ref(t("common.navigate.report"));
const selectTypeList = ref([
  {
    label: t("common.navigate.report"),
    value: "reports",
    key: 0,
  },
  {
    label: t("common.navigate.news"),
    value: "newsCategories",
    key: 1,
  },
  //{
  // label: t("common.navigate.bulletin"),
  // value: "bulletinThinkTank",
  //},
]);
const signInVisible = ref<boolean>(false);
const signInTitle = ref<string>("");
const sginType = ref<string>("login");
const logoutVisible = ref(false);

const userInfo = computed(() => userStore.getUserInfo);
const isLogin = computed(() =>
  userStore.getToken && userStore.getUserInfo ? true : false
);

const jumpLink = (url: string) => {
  return url;
};
watch(
  () => userStore.getSearchType,
  (val) => {
    selectTypeValue.value = val || null;
  }
);

watch(langSelected, () => {
  if (langSelected.value == "en") {
    selectTypeList.value = [
      {
        label: t("common.navigate.report"),
        value: "reports",
      },
      {
        label: t("common.navigate.news"),
        value: "newsCategories",
      },
    ];
    // userStore.resetState();
  }
});

watch(
  () => userStore.getShowLoginDialog,
  (newval, oldval) => {
    signInVisible.value = newval;
    sginType.value = "login";
    signInTitle.value = t("common.login.title");
  }
);

watch(signInVisible, (val) => {
  if (val === false) {
    userStore.setShowLoginDialog(false);
  }
});

// 中英文切换
const langChange = async (lng: string) => {
  userStore.setLang(lng == "zh" ? "zh-CN" : "en-US");
  const path = switchLocalePath(lng);
  setLocale(lng);
  // router.push(path);
  // location.reload();
  location.href = path;
};

// 研究报告菜单切换
function chooseReportMenu(key: string | number, _option: DropdownOption) {
  router.push({
    name: "reports",
    params: { category: key, lang: language.value },
  });
}

// 行业资讯
function chooseNewsMenu(key: string | number) {
  router.push({
    name: "newsCategories",
    params: { marketType: key, lang: language.value },
  });
}

onBeforeMount(async () => {
  pcShow.value = !isMobile();
});

// 关于我们跳转
function chooseAboutMenu(key: string | number, option: DropdownOption) {
  router.push({ name: option.name, params: { lang: language.value } });
}

// 关于简报智库
function chooseBulletinMenu(key: string | number, _option: DropdownOption) {
  router.push({
    name: "bulletinThinkTank",
    params: {
      marketType: _option.marketType,
    },
  });
}

// 手机端跳转
function chooseMenu(key: string | number, option: DropdownOption) {
  if ("reports" === option.name) {
    router.push({
      name: option.name,
      params: { category: key, lang: language.value },
    });
  } else if ("newsCategories" === option.name) {
    router.push({
      name: option.name,
      params: { marketType: key, lang: language.value },
    });
  } else if ("index" === option.name) {
    router.push({
      name: "index___en",
      params: { marketType: key, lang: language.value },
    });
  } else {
    router.push({ name: option.name, params: { lang: language.value } });
  }
}

function handleSearch() {
  switch (selectTypeValue.value) {
    case "reports":
      router.push({
        name: "reports",
        params: { lang: language.value, keyword: keyword.value },
      });
      break;
    case "newsCategories":
      router.push({
        name: "newsCategories",
        params: { lang: language.value, keyword: keyword.value },
      });
      break;
    case "bulletinThinkTank":
      router.push({
        name: "bulletinThinkTank",
        params: { marketType: "industry-brief", title: keyword.value },
      });
      break;
    default:
      router.push({
        name: "reports",
        params: { lang: language.value, keyword: keyword.value },
      });
      break;
  }
}

function keyDown() {
  handleSearch();
}

const handleSignIn = () => {
  signInVisible.value = true;
  sginType.value = "login";
  signInTitle.value = t("common.login.title");
};

const toMine = () => {
  router.push({
    name: "mine",
  });
};

const handleLogout = () => {
  logoutVisible.value = true;
};

const submitLogoutCallback = () => {
  logOut_Api().then((res) => {
    message.message.success(t("report.demand.success"));
    userStore.resetState();
    router.push("/");
  });
};

const cancelLogoutCallback = () => {
  logoutVisible.value = false;
};

const closeSginDialog = (type: string) => {
  switch (type) {
    case "success":
      signInVisible.value = false;
      break;
    case "login":
      signInTitle.value = t("common.login.title");
      break;
    case "register":
      signInVisible.value = true;
      sginType.value = type;
      signInTitle.value = t("common.login.register");
      break;
    case "forgot":
      sginType.value = type;
      signInTitle.value = t("common.login.forgetPasswordTitle");
      break;
    default:
      break;
  }
};
// onMounted(async () => {
//window.addEventListener('scroll',onScroll);

// 下拉菜单
const getDictListData = async () => {
  const cacheDict = await getLocalSessionReport();
  cacheDict?.forEach(
    (vo: { dictLabel: any; dictValue: any; dictIcon: any }) => {
      reportOptions.push({
        label: vo.dictLabel,
        key: vo.dictValue,
        icon: renderIcon(vo.dictIcon),
        name: "reports",
      });
    }
  );

  const cacheDictNews = await getLocalSessionNews();
  cacheDictNews?.forEach((vo: any) => {
    newsOptions.push({
      label: vo.dictLabel,
      key: vo.dictValue,
      icon: renderIcon(vo.dictIcon),
      name: "newsCategories",
    });
  });
  aboutOptions.push({
    label: t("common.navAboutUs.comp"),
    name: "about",
    icon: renderIcon("iconfont iconfont icon-ziyuan"),
  });
  aboutOptions.push({
    label: t("common.navAboutUs.method"),
    name: "link",
    icon: renderIcon("iconfont icon-chaxun"),
  });
  aboutOptions.push({
    label: t("common.navAboutUs.order"),
    name: "order",
    icon: renderIcon("iconfont icon-a-dingdanguanli2x"),
  });
  aboutOptions.push({
    label: t("common.navAboutUs.term"),
    name: "term",
    icon: renderIcon("iconfont icon-shejiyukaifa-"),
  });
  // aboutOptions.push({
  //   label: t("common.navAboutUs.qualify"),
  //   name: "qualify",
  //   icon: renderIcon("iconfont iconfont icon-ziyuan"),
  // });
  bulletinOptions.push({
    label: "行业简报",
    name: "bulletinThinkTank",
    marketType: "industry-brief",
    icon: renderIcon("bqfl-iconfont bqfl-iconfont icon-zhinengjianbao"),
  });
  bulletinOptions.push({
    label: "企业洞察",
    name: "bulletinThinkTank",
    marketType: "enterprise-hole-analysis",
    icon: renderIcon("bqfl-iconfont bqfl-iconfont icon-yanjiubaogao"),
  });
  bulletinOptions.push({
    label: "行业简报",
    name: "bulletinThinkTank",
    marketType: "industry-brief",
    icon: renderIcon("bqfl-iconfont bqfl-iconfont icon-zhinengjianbao"),
  });
};
watch(
  () => route.path,
  (val) => {
    getDictListData();
  }
);
getDictListData();
</script>

<style lang='scss' >
@import "~/assets/css/tool.scss";
.headPhone {
  display: none;
}
.bg1 {
  background: #37404a !important;
}
.app-header {
  z-index: 9;
  width: 100%;
  position: fixed;
  background: rgba(6, 17, 29, 0.5);
  left: 0;
  top: 0;
  .top {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0 var(--size-60);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    > a,
    > div {
      display: inline-block;
      font-size: var(--size-14);
      color: #ffffff;
      margin-left: var(--size-35);
      height: var(--size-45);
      line-height: var(--size-45);
      cursor: pointer;
      display: flex;
      align-items: center;
      span {
        font-size: var(--size-19);
        display: inline-block;
        margin-right: var(--size-4);
      }
      &:last-child {
        padding-left: var(--size-35);
        border-left: var(--size-1) solid #fff;
      }
    }
    .userInfo {
      display: flex;
      align-items: center;

      .avatar {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        vertical-align: middle;
        border-radius: 50%;
      }

      .username {
        font-size: 14px;
      }

      span {
        margin-right: 10px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }
      }
      > .logout {
        font-size: var(--size-14);
      }
    }
  }
  .navBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--size-60);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    height: var(--size-85);
    .navBox_l {
      font-size: var(--size-34);
      color: #ffffff;
      img {
        width: var(--size-366);
        height: var(--size-57);
        display: block;
      }
    }
    .navBox_c {
      font-size: var(--size-18);
      color: #ffffff;
      display: flex;
      cursor: pointer;
      > a {
        padding: var(--size-7) var(--size-43);
        border-right: var(--size-1) solid rgba(255, 255, 255, 0.5);
      }
    }
    .navBox_r {
      .search {
        display: flex;
        align-items: center;
        width: var(--size-450);
        height: var(--size-44);
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        .search_l {
          width: var(--size-148);
          font-size: var(--size-14);
          text-align: center;
          cursor: pointer;
          .search_l_type {
            span {
              transform: rotateZ(90deg);
              display: inline-block;
              color: #1a1a1a;
            }
          }
        }
        .search_c {
          border-left: 1px solid #cccccc;
          .n-input {
            --n-height: var(--size-26) !important;
            line-height: var(--size-26) !important;
          }
        }
        .search_r {
          width: var(--size-105);
          font-size: var(--size-16);
          color: #ffffff;
          height: var(--size-44);
          background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            font-size: var(--size-20);
            margin-right: var(--size-4);
          }
        }
      }
    }
  }
}
.n-input {
  --n-border: none !important;
  --n-border-hover: none !important;
  --n-border-focus: none !important;
  --n-box-shadow-focus: none !important;
  --n-caret-color: #ef001f !important;
  font-size: var(--size-16) !important;
  --n-text-color-hover: none !important;
}
.modalCls {
  width: var(--size-720) !important;
}
@include responseTo("phone") {
  .pc {
    display: none;
  }
  .headPhone {
    background: rgba(6, 17, 29, 0.5);
    z-index: 9;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-size: cover;
    padding: var(--size-10) var(--size-20);
    display: block;
    .head_t {
      display: flex;
      justify-content: space-between;
      .head_t_l {
        font-size: 0;
        img {
          height: var(--size-36);
        }
      }
      .head_t_r {
        img {
          width: var(--size-36);
          height: var(--size-36);
        }
      }
    }
    .head_c {
      height: var(--size-30);
      margin: var(--size-10) auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid none;
      overflow: hidden;
      border-radius: var(--size-4);
      .head_c_l {
        font-size: var(--size-12);
        color: #808080;
        padding-left: var(--size-7);
        position: relative;
        padding-right: var(--size-6);
        cursor: pointer;
        display: flex;
        align-items: center;
        .icon-dkw_guanbi- {
          transform: rotateZ(90deg);
          display: inline-block;
        }
        &::after {
          content: "";
          display: block;
          width: 1px;
          height: var(--size-16);
          background: #cccccc;
          position: absolute;
          right: 0;
        }
        .icon-jiantou {
          display: inline-block;
          transform: rotateZ(-90deg);
          font-size: var(--size-10);
          color: #000000;
          vertical-align: text-bottom;
        }
      }
      .head_c_c {
        flex: 1;
        padding: 0 var(--size-9);
        .n-input {
          --n-border: none !important;
        }
      }
      .head_c_r {
        width: var(--size-53);
        height: var(--size-30);
        font-size: var(--size-12);
        background: linear-gradient(0deg, #7b9c4f 0%, #2da19d 100%), #1a1a1a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .icon-sousuo {
          font-size: var(--size-12);
          margin-right: var(--size-3);
        }
      }
      .n-input {
        font-size: var(--size-12) !important;
        ::v-deep .n-input-wrapper {
          padding: 0 !important;
        }
      }
    }

    .head_b {
      display: flex;
      justify-content: flex-end;
      .head_b_lang {
        font-size: var(--size-12);
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-right: var(--size-30);
        cursor: pointer;
        .head_b_lang_l {
          width: var(--size-13);
          height: var(--size-13);
          margin-right: var(--size-4);
        }
        .head_b_lang_r {
          width: var(--size-9);
          height: var(--size-5);
          margin-left: var(--size-5);
          margin-right: var(--size-10);
        }
      }
      .userInfo {
        display: flex;
        align-items: center;
        .username {
          font-size: var(--size-14);
          color: #fff;
        }
        span {
          margin-right: var(--size-5);
          cursor: pointer;
          color: #fff;
          font-size: var(--size-14);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .head_t_r_login {
        font-size: var(--size-12);
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
}
</style>