搜索

src/api/search.ts

@@ -3,7 +3,7 @@ import { ISearchDetail } from "@/type/search";
 
 // 搜索内容
 export const getSearch = (keywords: any) => {
-  return request.get<ISearchDetail>("/cloudsearch", {
+  return request.get<ISearchDetail>("/search", {
     params: { keywords: keywords, type: 1018 },
   });
 };

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>

src/views/search/index.vue

@@ -1,23 +1,96 @@
 <template>
-    <div>{{ searchDetail }}</div>
+    <div class="search-page">
+        <div
+            class="hot-search"
+            style="height:750px"
+            :class="setAnimationClass('animate__fadeInDown')"
+        >
+            <n-layout style="height:750px" :native-scrollbar="false">
+                <template v-for="(item,index) in hotSearchData?.data">
+                    <div class="hot-search-item" @click.stop="clickHotKeyword(item.searchWord)">
+                        <span
+                            class="hot-search-item-count"
+                            :class="{ 'hot-search-item-count-3': index < 3 }"
+                        >{{ index + 1 }}</span>
+                        {{ item.searchWord }}
+                    </div>
+                </template>
+            </n-layout>
+        </div>
+        <div>{{ searchDetail }}</div>
+    </div>
 </template>
 
-<script lang="ts" setup>import { getSearch } from "@/api/search";
-import { onMounted } from "@vue/runtime-core";
-import { useRoute } from "vue-router";
+<script lang="ts" setup>
+import { getSearch } from "@/api/search";
+import type { IHotSearch } from "@/type/search";
+
+import { getHotSearch } from '@/api/home';
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { setAnimationClass } from "@/utils";
 import type { ISearchDetail } from "@/type/search"
-import { ref } from "vue";
+import { onBeforeMount, onMounted, ref } from "vue";
+
 const route = useRoute();
-const keyword = route.query.keyword;
+const router = useRouter()
 const searchDetail = ref<ISearchDetail>()
-const loadSearch = async () => {
+const loadSearch = async (keyword: any) => {
+    if (!keyword) return;
     const { data } = await getSearch(keyword);
     searchDetail.value = data;
 }
-onMounted(() => {
-    loadSearch()
+
+// 热搜列表
+const hotSearchData = ref<IHotSearch>()
+const loadHotSearch = async () => {
+    const { data } = await getHotSearch();
+    hotSearchData.value = data;
+}
+
+onBeforeMount(() => {
+    loadSearch(route.params.keyword)
+    loadHotSearch();
 })
+
+
+const clickHotKeyword = (keyword: string) => {
+    router.push({
+        path: "/search",
+        query: {
+            keyword: keyword
+        }
+    })
+    // isHotSearchList.value = false;
+}
+
+
+// 监听路由参数变化
+onBeforeRouteUpdate(to => {
+    let value = to.query.keyword?.toString()
+    loadSearch(value);
+})
+
+
 </script>
 
 <style lang="scss" scoped>
+.search-page {
+    @apply flex;
+}
+.hot-search {
+    @apply mt-3 mr-4 border rounded-xl border-2 flex-1 overflow-hidden;
+    background: #1a1a1a;
+    border-color: #63e2b7;
+    animation-duration: 0.2s;
+    min-width: 400px;
+    &-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>