xinkeaboard/xinkeaboard-web/components/NavTopBar.vue

// 头部登陆注册导航栏
<template>
  <div class="header_wrap">
    <div class="header">
      <div class="header_left">
        <span class="hello">
<!--          {{ L["您好，欢迎来到"] }}-->
          {{ configInfo.data.basic_site_name }}
        </span>
        <div v-show="loginFlag">
          <span class="register h1" @click="goToByPush('/member/home')" style="font-weight:bold;color:#444;" >{{
            memberInfo.memberNickName || memberInfo.memberName
          }}</span>
          <span class="register h1 login_out" @click="loginOut()"
            >[{{ L["退出"] }}]</span
          >
        </div>

        <div v-show="!loginFlag && !isRegisterStatus">
          <span class="register h1" @click="goToByPush('/login')" style="border-right: 1px solid #c1c1c1; padding-right: 15px;">{{
            L["登录"]
          }}</span>
          <span class="register h1" @click="goToByPush('/register')">{{
            L["注册"]
          }}</span>
        </div>



      </div>

      <div class="header_right">
        <ul>
          <li >
          <Nuxt-link to="/">
            <div class="li_item">{{ L["商城首页"] }}</div>
          </Nuxt-link>

          </li>

          <li @click="goToByPush('/member/home')">
            <div class="li_item">{{ L["个人中心"] }}</div>
          </li>
          <li>
            <div class="has_more li_item">
              {{ L["我的收藏"] }}
              <div class="li_item_more">
                <a
                  href="javascript:void(0)"
                  class="li_item_more_item"
                  @click="goToByPush('/member/collect')"
                  >{{ L["商品收藏"] }}</a
                >
                <a
                  href="javascript:void(0)"
                  class="li_item_more_item"
                  @click="goToByPush('/member/collect', { type: 'store' })"
                  >{{ L["店铺收藏"] }}</a
                >
                <a
                  href="javascript:void(0)"
                  class="li_item_more_item"
                  @click="goToByPush('/member/footprint')"
                  >{{ L["我的足迹"] }}</a
                >
              </div>
            </div>
          </li>

          <!-- <li @click="goToByPush('/service', { vid: 0 })">
            <div class="li_item">官方客服</div>
          </li> -->
          <li @click="goToByPush('/article')">
            <div class="li_item">{{ L["服务中心"] }}</div>
          </li>
          <li>
          <div class="li_item">
            <div id=google_translate_element></div>

          </div>
       
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { useFiltersStore } from "@/store/filter.js";
import { getCurLanguage } from "@/composables/common.js";
const router = useRouter();
const route = useRoute()
// const L = lang_zn;
const filtersStore = useFiltersStore();
const loginFlag = computed(() => filtersStore.getLoginFlag)
const memberInfo = computed(() => filtersStore.getMemberInfo);
const L = getCurLanguage();

// 判断当前页面是否为注册页面
const isRegisterStatus = computed(() => route.name === 'register')

// 获取系统配置信息
const configInfo = reactive({ data: {} });
const getSystemConfigInfo = async () => {
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/system/front/setting/getSettings",
    {
      params: {
        names:
          "main_site_logo,main_user_center_logo,main_user_logon_bg,main_user_register_bg,pc_home_bottom_adv,main_user_forget_password_bg,basic_site_name,basic_site_icp,basic_site_copyright,basic_site_technical_support,platform_customer_service_name,platform_customer_service_logo,sys_seo_title,sys_seo_desc,sys_seo_keywords,pt_map_parameter",
      },
    }
  );
  let res = value._rawValue;
  if (res.state) {
    filtersStore.setSiteLogo(res.data[0]);
    configInfo.data = {
      main_site_logo: res.data[0],
      main_user_center_logo: res.data[1],
      main_user_logon_bg: res.data[2],
      main_user_register_bg: res.data[3],
      pc_home_bottom_adv: res.data[4],
      main_user_forget_password_bg: res.data[5],
      basic_site_name: res.data[6],
      basic_site_icp: res.data[7],
      basic_site_copyright: res.data[8],
      basic_site_technical_support: res.data[9],
      platform_customer_service_name: res.data[10],
      platform_customer_service_logo: res.data[11],
    };
  }
};
getSystemConfigInfo();
//前往具体的页面，type为具体的页面地址，param为参数对象
const goToByPush = (type, param = {}) => {
  router.push({
    path: type,
    query: param,
  });
};
//退出登录
const loginOut = async () => {
  filtersStore.setMemberInfo({});
  filtersStore.setLoginStatus(false);
  filtersStore.setToken("");
  filtersStore.setRefreshToken("");
  filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
  sessionStorage.setItem('noRefresh', 'true')
  localStorage.setItem('isLoggedIn', 'false');
  // window.location.reload();
};



</script>

<style >
  .goog-te-gadget-simple{
    white-space: nowrap!important;
    border: none!important;
    padding: 0!important;
    background-color: transparent!important;
    line-height: 1;
  }
</style>

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

.header_wrap {
  width: 100%;
  height: 33px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;

  .header {
    width: 1210px;
    height: 33px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header_left {
      height: 100%;
      font-size: 13px;
      color: #333;
      line-height: 36px;
      display: flex;

      .hello {
        margin-right: 20px;
        color: #333;
      }

      .h1 {
        margin: 0 5px;
        cursor: pointer;

        &:hover {
          color: $colorMain;
        }
      }
    }

    .header_right {
      height: 100%;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .personal_center {
          width: 121px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        li {
          float: left;
          text-align: center;
          border-right: 1px solid #ddd;
          padding: 0 10px;
          height: 33px;
          line-height: 33px;
          .li_item {
            position: relative;
            cursor: pointer;
            font-size: 13px;
            color: #333;

            &:hover {
              color: $colorMain;

              &.has_more {
                &:before {
                  border-top-color: $colorMain;
                }
              }

              .li_item_more {
                display: block;
              }
            }

            &.has_more {
              padding-right: 12px;

              &:before,
              &:after {
                position: absolute;
                right: -2px;
                display: block;
                width: 0;
                height: 0;
                content: " ";
                border: 4px solid transparent;
                border-radius: 2px;
              }

              &:before {
                top: 16px;
                border-top: 5px solid #888;
              }

              &:after {
                top: 14px;
                border-top: 5px solid #f7f7f7;
              }
            }

            .li_item_more {
              position: absolute;
              width: 120px;
              padding: 5px 3px;
              left: 50%;
              transform: translateX(-50%);
              top: 21px;
              background: #fff;
              box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
              z-index: 999;
              display: none;

              &:before,
              &:after {
                position: absolute;
                top: -11px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                display: block;
                content: " ";
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-bottom: 6px solid #dedede;
              }

              &:after {
                top: -10px;
                border-bottom: 6px solid #fff;
              }

              .li_item_more_item {
                display: block;
                text-align: center;
                color: #333;
                line-height: 12px;
                padding: 8px 0;

                &:hover {
                  color: $colorMain;
                }
              }
            }
          }

          &:last-child {
            border-right-width: 0;
            padding-right: 0;
          }
        }
      }
    }
  }
}
</style>