web_site2/components/Header/index.vue

<template>
  <div class="app-header">
    <div class="header-wrapper">
      <div class="header-inner">
        <div class="left-info">
          <a class="title-sec" :href="jumpLink('/')">
            <img v-if="language == ''" src="@/assets/images/logo_cn2.png" alt="logo" class="logo cn-logo" />
            <img v-else src="@/assets/images/logo_en2.png" alt="logo" class="logo" />
          </a>
        </div>

        <template v-if="pcShow">
          <div class="home-nav-bar-top">
            <div class="search">
              <n-input-group>
                <n-button size="large" color="#355672" @click="handleSearch" style="padding: 0 10px"><n-icon :component="MdSearch" size="30" color="#fff" /></n-button>
                <n-input @keydown.enter="keyDown" type="text" size="large" :placeholder="t('report.content.keyword')" v-model:value="keyword" clearable style="background-color: #fafafa" />
                <n-select style="width: 200px" clearable :placeholder="t('report.content.keywordType')" v-model:value="selectTypeValue" :options="selectTypeList" />
              </n-input-group>
            </div>
            <div class="home-nav-link">
              <a id="nav-item" class="nav-item" :class="{'router-link-active':(route.name=='index___en'||route.name=='index___zh')}" :href="jumpLink('/')">
                <span class="txt">{{ t("common.navigate.home") }}</span>
              </a>
              <n-dropdown :options="reportOptions" trigger="hover" size="huge" @select="chooseReportMenu">
                <a id="nav-item" class="nav-item" :class="{'router-link-active':(route.name=='reports'||route.path=='/en/report-industries'||route.path=='/report-industries')}" :href="jumpLink('/report-industries')">
                  <span class="txt">{{ t("common.navigate.report") }}</span>
                </a>
              </n-dropdown>
              <n-dropdown :options="bulletinOptions" trigger="hover" size="huge" @select="chooseBulletinMenu" v-if="language == ''">
                <!-- :to="{
                    name: 'bulletinThinkTank',
                    params: { marketType: 'industry-brief' },
                  }" -->
                <a id="nav-item" class="nav-item" :class="{'router-link-active':route.name=='bulletinThinkTank'}" :href="jumpLink('/bulletin/bulletin-think-tank/industry-brief')">
                  <span class="txt">简报智库</span>
                </a>
              </n-dropdown>
              <a id="nav-item" class="nav-item" :class="{'router-link-active':route.path=='/market'}" :href="jumpLink('/market')">
                <span class="txt">{{ t("common.navigate.market") }}</span>
              </a>
              <n-dropdown :options="newsOptions" trigger="hover" size="huge" @select="chooseNewsMenu">
                <a id="nav-item" class="nav-item" :class="{'router-link-active':(route.name=='newsCategories'||route.path=='/news-categories'||router.path=='/en/news-categories')}" :href="jumpLink('/news-categories')">
                  <span class="txt">{{ t("common.navigate.news") }}</span>
                </a>
              </n-dropdown>
              <n-dropdown :options="aboutOptions" trigger="hover" size="huge" @select="chooseAboutMenu">
                <a id="nav-item" class="nav-item" :class="{'router-link-active':route.path=='/about'||route.path=='/link'||route.path=='/order'||route.path=='/term'||route.path=='/qualify'}" :href="jumpLink('/about')">
                  <span class="txt">{{ t("common.navigate.aboutUs") }}</span>
                </a>
              </n-dropdown>
              <a id="nav-item" class="nav-item" :class="{'router-link-active':route.path=='/contactUs'}" :href="jumpLink('/contactUs')">
                <span class="txt">{{ t("common.navigate.contactUs") }}</span>
              </a>
            </div>
          </div>
          <div class="home-nav">
            <!-- <template v-if="language == ''"> -->
            <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 class="login" @click="handleSignIn">{{t('common.login.title')}}</div>
            </template>
            <!-- </template> -->
            <!-- <p class="home-tel" v-else>
              <n-icon :component="IosCall" size="30" />
              <a href="tel:1-8884226999">+1-888 422 6999 (US)</a>
            </p> -->
            <div id="nav-item" class="lang">
              <n-icon :component="IosGlobe" size="22" />
              <select class="lang-select" @change="langChange($event.target.value)" v-model="langSelected">
                <option value="zh">中文</option>
                <option value="en">English</option>
              </select>
            </div>
          </div>
        </template>

        <!--手机端导航-->
        <div v-if="!pcShow" class="mobile">
          <n-dropdown trigger="click" :size="language ? 'small' : 'huge'" :options="mobileMenu" @select="chooseMenu" placement="bottom-start" :class="language">
            <n-icon :component="MdApps" size="80" color="#fff" />
          </n-dropdown>
        </div>
      </div>
      <div v-if="!pcShow" class="header-lang">
        <div class="mobile-search">
          <n-input-group>
            <n-button size="large" color="#355672" @click="handleSearch" style="padding: 0 10px"><n-icon :component="MdSearch" size="30" color="#fff" /></n-button>
            <n-input type="text" size="large" :placeholder="t('report.content.keyword')" v-model:value="keyword" clearable style="background-color: #fafafa" />
            <n-select style="width: 240px" clearable :placeholder="t('report.content.keywordType')" v-model:value="selectTypeValue" :options="selectTypeList" />
          </n-input-group>
        </div>
        <div class="top-login">
          <template v-if="language == ''">
            <div class="userInfo" v-if="isLogin">
              <span>{{ userInfo.name }}</span>
              <span>|</span>
              <span @click="toMine">{{t('common.login.personalCenter')}}</span>
              <span>|</span>
              <span class="logout" @click="handleLogout">{{t('common.login.logout')}}</span>
            </div>
            <div class="login" @click="handleSignIn" v-if="!isLogin">{{t('common.login.title')}}</div>
          </template>
          <div>
            <a class="txt" @click="langChange('zh')">{{
              t("common.lang.zh-CN")
            }}</a>
            <span class="separator txt">|</span>
            <a class="txt" @click="langChange('en')">{{
              t("common.lang.en-US")
            }}</a>
          </div>
        </div>
      </div>
    </div>
    <n-modal :show="signInVisible" preset="dialog" :title="signInTitle" :showIcon="false" :close-on-esc="false" :mask-closable="false" @close="signInVisible = false" :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="提示" :showIcon="false" content="确认退出登录吗?" positive-text="确认" negative-text="取消" :close-on-esc="false" :mask-closable="false" @positive-click="submitLogoutCallback" @negative-click="cancelLogoutCallback" :class="{ 'login-dialog': !pcShow }" />
  </div>
</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 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: "home" },
  {
    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();
const selectTypeList = ref([
  {
    label: t("common.navigate.report"),
    value: "reports",
  },
  {
    label: t("common.navigate.news"),
    value: "newsCategories",
  },
  {
    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 (language.value == "en" ? "/en" : "") + 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 ("home" === option.name) {
    // router.push({
    //   name: language.value === "" ? "home" : "homeEn",
    //   params: { marketType: key, lang: language.value },
    // });
    jumpLink("/");
  } 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":
      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"),
  });
};
watch(
  () => route.path,
  (val) => {
    getDictListData();
  }
);
getDictListData();
</script>

<style lang='scss' >
.app-header {
  z-index: 9;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  height: 140px;
  box-shadow: 2.5px 4.33px 15px 0px rgb(0 0 0 / 15%);

  .header-wrapper {
    transition: all 0.3s;

    .header-inner {
      // width: 1200px;
      margin: 0 auto;
      height: 140px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;

      .left-info {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        flex-shrink: 0;

        .title-sec {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          margin-right: 15px;
          cursor: pointer;

          .logo {
            height: 80px;
            width: 100%;
            max-width: 240px;
            object-fit: contain;
          }

          .cn-logo {
            height: 120px;
          }

          .sub-title {
            font-size: 12px;
            color: #fff;
            margin-bottom: 2px;
          }

          .title {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
          }
        }
      }

      .login-box {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .msg-box {
          color: #fff;
          font-size: 15px;
          margin-right: 15px;
          transition: all 0.5s;
          cursor: pointer;

          &:hover {
            color: $blue;
          }
        }

        .avator-box {
          width: 30px;
          height: 30px;
          margin-right: 15px;
          border-radius: 15px;
          overflow: hidden;

          .avator {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .basic-info {
          cursor: pointer;
          color: #fff;
          outline: none !important;
        }

        .btn-group {
          .register {
            background: #fff;
            color: #000;
            border-color: #fff;
            margin-left: 5px;

            &:hover {
              color: $blue;
              border-color: $blue;
            }
          }
        }
      }

      .tool-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        .tool-item {
          margin-right: 20px;
          color: #409eff;
          font-size: 15px;
          cursor: pointer;
        }

        .icon {
          font-size: 20px;
        }
      }
    }

    // .home-nav-bar {
    // 	margin: 0;
    // 	height: 140px;
    // 	display: flex;
    // 	flex-flow: row nowrap;
    // 	align-items: center;
    // 	justify-content: center;
    // 	width: calc(100% - 350px);
    // 	flex-wrap: wrap;

    //border-top: 1px solid rgba(255, 255, 255, 0.2);
    .home-nav-bar-top {
      flex: 1;
      height: 100%;
      // width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      // justify-content: space-between;

      .search {
        width: 45rem;

        .n-base-selection {
          height: 100%;
          --n-border: 1px solid #18a058 !important;

          .n-base-selection-label {
            height: 100%;
            background-color: #18a058 !important;

            .n-base-selection-input,
            .n-base-selection-placeholder__inner {
              color: #fff;
            }
          }
        }
      }

      .home-nav-link {
        display: flex;

        .nav-item {
          height: 100%;
          margin-right: 2rem;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }

          .txt {
            font-size: 1.2rem;
            color: #000;
            font-weight: 600;
          }

          &.router-link-active {
            position: relative;

            &::after {
              position: absolute;
              left: 0;
              bottom: 0;
              content: "";
              width: 100%;
              height: 3px;
              background: #000;
            }
          }

          &:hover {
            position: relative;

            &::after {
              position: absolute;
              left: 0;
              bottom: 0;
              content: "";
              width: 100%;
              height: 3px;
              background: #000;
            }
          }
        }
      }
    }

    .home-nav {
      height: 100%;
      // width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      flex-shrink: 0;

      .home-tel {
        //color: #fff;
        .n-icon {
          vertical-align: middle;
          border-radius: 100%;
          //border: 1px solid #fff;
          margin-right: 10px;
        }

        > a {
          font-size: 18px;
        }
      }

      .userInfo {
        display: flex;
        align-items: center;

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

        .username {
          font-size: 16px;
        }

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

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .login {
        width: 110px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-size: 16px;
        background-color: #18a058;
        border-radius: 20px;
        cursor: pointer;
      }
    }
    // }
  }
}

.lang {
  font-weight: 600;
  font-size: 18px;
  margin: 0 20px;

  .separator {
    padding: 0 7px;
  }

  .n-icon {
    vertical-align: middle;
    //color: #fff;
  }

  .lang-select {
    border: none;
    outline: none;
    margin-left: 2px;
    width: 100px;
    font-size: 15px;
    background: none;

    //color: #fff;
    option {
      color: #000;
    }
  }
}

.nav-search {
  width: 200px;

  .n-icon {
    margin-right: -25px;
    vertical-align: middle;
  }

  .nav-search-ipt {
    border: none;
    width: 200px;
    height: 30px;
    font-size: 1em;
    padding-left: 30px;
  }
}
.n-dropdown-option-body__label {
  font-weight: 600;
}

.n-dialog {
  min-width: 550px;
  padding-top: 48px;
  border-radius: 20px;

  .n-dialog__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #1a1a1a;
    font-weight: bold;
    text-align: center;
  }
}
.n-dropdown-option-body__label {
  font-weight: 600;
}

.n-dialog {
  min-width: 550px;
  padding-top: 48px;
  border-radius: 20px;

  .n-dialog__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #1a1a1a;
    font-weight: bold;
    text-align: center;
  }
}

.login-dialog.n-dialog {
  min-width: auto;

  padding-top: 20px;
  border-radius: 10px;

  .n-dialog__title {
    font-size: 18px;
  }

  .n-dialog__content {
    .container {
      padding: 20px 10px;

      .login-btn {
        height: 45px;
      }

      .n-form {
        .n-form-item {
          .n-form-item-label {
            width: 85px !important;
            font-size: 12px;
          }

          .n-form-item-feedback-wrapper {
            min-height: 10px;
          }
        }
      }
    }
  }
}
</style>