template-10490/components/MHeader.vue

<template>

    <header class="clearfix flex justify-between items-center w-full">
      <div class="logo" :class="logo?.style">
        <nuxt-link :to="`/m`" target="_top"><img :src="`${logo?.value }`" /></nuxt-link>
      </div>
      <div class="sub-menu">
        <el-icon color="black" :size="20" @click="drawer = true"><Fold /></el-icon>
      </div>
    </header>

  <el-drawer
      v-model="drawer"
      :size="290"
  >
    <div id="menu">
      <el-menu
          currentIndex="/product"
          :unique-opened="true"
      >
        <template v-for="(item,index) in navigations" :key="index">
        <el-sub-menu v-if="item?.children && item.children.length > 0" :index="`${index}`">
          <template #title><span>{{ item.title }}</span></template>
          <el-menu-item v-for="(sub,subIndex) in item.children" :index="`${subIndex}`">
            <el-space>
              <el-avatar v-if="sub.icon" :src="sub.icon" shape="square" size="small"></el-avatar>
              <a :href="navTo(sub)">{{ sub.title }}</a>
            </el-space>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="`${index}`"><a :href="navTo(item)">{{ item.title }}</a></el-menu-item>
        </template>
      </el-menu>
      <div class="search-tools flex justify-center p-4 mt-5">
        <el-input v-model="keyword" placeholder="请输入关键词..." :suffix-icon="Search" @change="onSearch"/>
      </div>
      <div class="lang flex justify-center text-center" v-if="langList.length > 0">
        <el-space>
          <a :href="`/m?spm=zh_CN`" class="text-sm text-gray-500">中文版</a>
          <el-divider direction="vertical" />
          <a :href="`/en/m?spm=en_US`" class="text-sm text-gray-400">English</a>
        </el-space>
      </div>
    </div>
  </el-drawer>

</template>

<script setup lang="ts">
// 引入所需的图标
import {
  useConfigInfo,
  useMenu,
  useToken,
  useUser, useWebsite
} from "~/composables/configState";
import {getPath, isMobileDevice, navTo} from "#imports";
import { Search, Expand, Fold } from '@element-plus/icons-vue'
import {configWebsiteField} from "~/api/cms/cmsWebsiteField";
import {getSiteInfo, getUserInfo} from "~/api/layout";
import {listCmsLangLog} from "~/api/cms/cmsLangLog";
import type {CmsLangLog} from "~/api/cms/cmsLangLog/model";
import type {CmsWebsiteField} from "~/api/cms/cmsWebsiteField/model";
import {getWebsiteField} from "~/api/cms/cmsWebsiteField";

const token = useToken();
const user = useUser();
const navigations = useMenu();
const config = useConfigInfo();
const i18n = useI18n();
const isMobile = ref<boolean>(false);
const langList = ref<CmsLangLog[]>([]);
const drawer = ref<boolean>(false);
const logo = ref<CmsWebsiteField>();
const keyword = ref();

const setNav = () => {
  navigations.value = navigations.value.map(item => {
    item.showChild = false
    item.childHeight = 0;
    return item
  })
}
setNav()

const onSearch = () => {
  window.location.href = `/m/search/${keyword.value}`;
}


const reload = async () => {

  // TODO 读取网站配置信息
  configWebsiteField({
    lang: i18n.locale.value
  }).then(res => {
    config.value = res;
  })

  // TODO 读取国际化配置
  listCmsLangLog({}).then(list => {
    langList.value = list;
  })

  // TODO 读取logo
  getWebsiteField(13686).then(data => {
    logo.value = data;
  })

  // TODO 是否跳转H5版
  if(isMobileDevice()){
    isMobile.value = true;
    const path = getPath(1);
    if(!path || !path.startsWith('/m')){
      let newUrl = '';
      let origin = window.location.origin;
      let href = window.location.href;
      let pathname = window.location.pathname;
      if(pathname.startsWith('/m') || pathname.startsWith(`/${i18n.locale.value}/m`)){
        return false;
      }
      newUrl = href.replace(origin,origin + '/m');
      window.location.href = newUrl;
    }
  }

  // 获取用户信息
  // token.value = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VybmFtZVwiOlwiMTM4MDAwMTAzMTdcIixcInRlbmFudElkXCI6MTAzMTd9IiwiZXhwIjoxNzM1Nzk2NjA1LCJpYXQiOjE3MzMyMDQ2MDV9.hx6OV4ZHe6XTnNye1gvsuXjoxHW0YihcEwSuppUcoCc'
  // 获取用户信息
  if (token.value) {
    getUserInfo().then(data => {
      user.value = data
    })
  }
}

onMounted(() => {
  // 在这里放置你想要在组件渲染完成后执行的代码
  reload();
});
</script>

<style lang="scss">
.el-menu{
  border-right: none !important;
}
.el-menu-item, .el-sub-menu{
  border-bottom: 1px solid #f3f3f3;
}
</style>