参数名q修改keywords

src/layout/header.vue

@@ -1,222 +1,222 @@
-<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' })
-  hasToken.value = ''
-}
-
-interface LinkItem {
-  id: string
-  value: string
-}
-const links: any = ref<LinkItem[]>([])
-
-const searchChange = async (str: string, cb: (arg: any) => void) => {
-  currentIndex.value = ''
-  local.remove('headerPath')          
-  if (str && str.length > 0) {
-    game_name.value = str
-    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;
-// }
+<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' })
+  hasToken.value = ''
+}
+
+interface LinkItem {
+  id: string
+  value: string
+}
+const links: any = ref<LinkItem[]>([])
+
+const searchChange = async (str: string, cb: (arg: any) => void) => {
+  currentIndex.value = ''
+  local.remove('headerPath')          
+  if (str && str.length > 0) {
+    game_name.value = str
+    try {
+      var params = reactive({
+        type: 0,
+        tag_id: 0,
+        page: 1,
+        pagesize: 10,
+        keywords: 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>