website/src/layout/header.vue

<template>
  <div class="header_nav">
    <nav class="w1000 df jcsb aic">
      <!-- 网站title -->
      <h1 class="game_logo df aic" @click="clearAct">
        <a class="logo" href="/p_index" alt="朱雀游戏官网" title="朱雀游戏官网">朱雀游戏中心</a>
      </h1>

      <!-- 首页、分类、排行 -->
      <router-link v-for="(item, index) in routes" :key="index" class="nav_title" :to="item.path"
        @click="changeIndex(item.title)" :class="{ active: currentIndex === item.title }">
        {{ item.title }}
      </router-link>

      <!-- 搜索框 -->
      <el-autocomplete v-model="game_name" :fetch-suggestions="searchChange" placeholder="请输入游戏名称" :prefix-icon="Search"
        clearable @select="handleSelect" @keyup.native.enter="handleKeyEnter" maxlength="30" />

      <!-- 登录 -->
      <router-link class="nav_title" :to="hasToken ? '' : 'p_login'" @click="clearActive">
        <img v-if="!hasToken" src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
        <el-dropdown trigger="click" v-else>
          <span class="el-dropdown-link">
            <img src="https://static.g.mi.com/game/websites/public/img/portrait_default.06318944.png" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item class="clearfix" @click="logOut">
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </router-link>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { getGameList } from '@/api/index'
import Message from '@/utils/Message'
import local from '@/utils/local'
import { useStore } from '@/store'

const router = useRouter()
const route = useRoute()
const search = useStore('search')
const header = useStore('header')

// 搜索内容
const game_name = ref(local.get('searchText') || '')
// 绑定el-autocomplete组件
const myAutocomplete = ref(null)
const hasToken = ref(localStorage.getItem('token'))

const currentIndex = ref(local.get('headerPath') || header.getHeaderTitle)   //取保存的title
console.log('currentIndex', currentIndex.value);

if (route.query.account) {
  currentIndex.value = '我的'
  console.log('1234567', currentIndex.value);
}

// 顶部导航栏
const routes = reactive([
  { id: 0, path: '/p_index', title: '首页' },
  // { id: 1, path: '/p_rank', title: '排行' },
  { id: 2, path: '/p_categroy', title: '分类' },
  { id: 3, path: '/p_mine', title: '我的' }
])

// 改变字体颜色
const changeIndex = (val: string) => {
  currentIndex.value = val
  local.set('headerPath', currentIndex.value)  //保存当前title
  local.remove('searchText')
  game_name.value = ''
}

// 点击登录清除本地存储
const clearActive = () => {
  currentIndex.value = ''
  local.remove('headerPath')           //删除保存的title
  local.remove('searchText')
  game_name.value = ''
}
// 点击网页title清除本地存储
const clearAct = () => {
  local.remove('headerPath')
  currentIndex.value = '首页'
  local.set('headerPath', currentIndex.value)
  local.remove('searchText')
  game_name.value = ''
}

// 退出登录
const logOut = () => {
  // console.log(22);
  localStorage.removeItem('token')
  router.push({ path: 'p_login' })
}

interface LinkItem {
  id: string
  value: string
}
const links: any = ref<LinkItem[]>([])

const searchChange = async (str: string, cb: (arg: any) => void) => {
  if (str && str.length > 0) {
    game_name.value = str
    currentIndex.value = ''
    local.remove('headerPath')          
    try {
      var params = reactive({
        type: 0,
        tag_id: 0,
        page: 1,
        pagesize: 10,
        q: str
      })
      var { data } = await getGameList(params)
      links.value = data.data.lists
        links.value = links.value.map((item, index) => {
          return {
            id: `${index}`,
            value: `${item.screen_name}`
          }
        })
        links.value = links.value.filter(item => {
          return item.value.indexOf(str) > -1
        })
        cb(links.value)
      
    } catch (error: any) {
      // links.value.push({
      //   id: '-1',
      //   value: '暂无匹配数据'
      // })
      // cb(links.value)
      console.log(error)
      Message.error(error.data.msg)
    }
  } else {
    cb([])
  }
}

const handleSelect = (item: LinkItem) => {
  if (item) {
    let { value } = item
    router.push({ path: '/p_search', query: { screen_name: value } })
    search.setSearchText(game_name.value)
    local.set('searchText', game_name.value)
    search.setSearchLis(game_name.value)
  }
}

// 手动回车跳转搜索页
const handleKeyEnter = () => {
  router.push({ path: '/p_search', query: { screen_name: game_name.value } })
  search.setSearchText(game_name.value)
  local.set('searchText', game_name.value)
  search.setSearchLis(game_name.value)
}

watch(currentIndex, (iold, inew) => { }, { deep: true, immediate: true })
</script>

<style scoped lang="scss">
.header_nav{
  margin: auto;
}
nav {
  height: 100%;

  .game_logo {
    height: 100%;
    line-height: 80px;
    font-weight: normal;

    .logo {
      font-size: 24px;
      color: #000;
      background: url('http://gm.nkfzs.com/favicon.ico') no-repeat center left;
      background-size: 30px 30px;
      height: 100%;
      padding-left: 37px;
    }
  }

  .nav_title {
    font-size: 20px;
    text-align: center;

    &:hover {
      color: #ed8c0f
    }
  }

  .active {
    color: #ed8c0f
  }

}

:deep(.el-input) {
  width: 200px;
}

:deep(.el-input__wrapper) {
  border-radius: 20px;
}

// .el-dropdown {
//   margin-top: 1.1rem;
// }
</style>