搜索

src/layout/components/SearchBar.vue

@@ -5,32 +5,14 @@
                 size="large"
                 round
                 v-model:value="searchValue"
-                :placeholder="searchKeyword"
+                :placeholder="hotSearchKeyword"
                 class="border border-gray-600"
-                @focus="searchFocus"
-                @blur="isSearch = false"
                 @keydown.enter="search"
             >
                 <template #prefix>
                     <i class="iconfont icon-search"></i>
                 </template>
             </n-input>
-
-            <div
-                class="hot-search"
-                v-if="isSearch"
-                :class="setAnimationClass('animate__fadeInDown')"
-            >
-                <template v-for="(item,index) in hotSearchData?.data">
-                    <div class="hot-search-item">
-                        <span
-                            class="hot-search-item-count"
-                            :class="{ 'hot-search-item-count-3': index < 3 }"
-                        >{{ index + 1 }}</span>
-                        {{ item.searchWord }}
-                    </div>
-                </template>
-            </div>
         </div>
         <div class="user-box">
             <n-popselect v-model:value="value" :options="options" trigger="click" size="small">
@@ -48,43 +30,34 @@
 
 <script lang="ts" setup>
 import { getSearchKeyword, getHotSearch } from '@/api/home';
-import type { IHotSearch } from "@/type/search";
 import { onMounted, ref } from 'vue';
-import { setAnimationClass } from "@/utils";
 import { useRouter } from 'vue-router';
 
 const router = useRouter()
-
-const searchKeyword = ref("搜索点什么吧...")
-const searchValue = ref("")
-
-const loadSearchKeyword = async () => {
+// 推荐热搜词
+const hotSearchKeyword = ref("搜索点什么吧...")
+const loadHotSearchKeyword = async () => {
     const { data } = await getSearchKeyword();
-    searchKeyword.value = data.data.showKeyword
+    hotSearchKeyword.value = data.data.showKeyword
 }
 
-const hotSearchData = ref<IHotSearch>()
-const loadHotSearch = async () => {
-    const { data } = await getHotSearch();
-    hotSearchData.value = data;
-}
 
-const searchFocus = () => {
-    isSearch.value = true;
-    loadHotSearch()
-}
 
+
+
+// 页面初始化
 onMounted(() => {
-    loadSearchKeyword()
+    loadHotSearchKeyword()
 })
 
-const isSearch = ref(false)
 
+// 搜索词
+const searchValue = ref("")
 const search = () => {
 
     let value = searchValue.value
     if (value == "") {
-        searchValue.value = searchKeyword.value
+        searchValue.value = hotSearchKeyword.value
     } else {
         router.push({
             path: "/search",
@@ -93,8 +66,6 @@ const search = () => {
             }
         })
     }
-
-    isSearch.value = false;
 }
 
 const value = 'Drive My Car'
@@ -123,20 +94,5 @@ const options = [
 
 .search-box-input {
     @apply relative;
-    .hot-search {
-        @apply absolute mt-3  left-0 w-full z-10 shadow-lg border rounded-xl border-2 overflow-hidden grid grid-cols-3;
-        background: #1a1a1a;
-        border-color: #63e2b7;
-        animation-duration: 0.2s;
-        &-item {
-            @apply px-4 py-3 text-lg hover:bg-gray-700 rounded-xl cursor-pointer;
-            &-count {
-                @apply text-green-500 inline-block ml-3 w-8;
-                &-3 {
-                    @apply text-red-600 font-bold inline-block ml-3 w-8;
-                }
-            }
-        }
-    }
 }
 </style>