修改动画 完善搜索

src/views/search/index.vue

@@ -1,32 +1,33 @@
 <template>
     <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 class="hot-search" :class="setAnimationClass('animate__fadeInDown')">
+            <template v-for="(item, index) in hotSearchData?.data">
+                <div
+                    :class="setAnimationClass('animate__bounceInLeft')"
+                    :style="setAnimationDelay(index, 100)"
+                    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>
         </div>
-        <div>
-            <!-- 搜索到的歌曲列表 -->
-            <div class="search-song-list">
-                <template v-for="(item,index) in searchDetail?.result.song.songs">
-                    <div class="search-song-item">
-                        <img :src="item.al.picUrl + '?param=100y100'" alt />
-                        <div>{{ item.name }}</div>
-                    </div>
-                </template>
-            </div>
+        <!-- 搜索到的歌曲列表 -->
+        <div class="search-list">
+            <template v-if="searchDetail">
+                <div
+                    v-for="(item, index) in searchDetail?.result.song.songs"
+                    :key="item.id"
+                    :class="setAnimationClass('animate__bounceInRight')"
+                    :style="setAnimationDelay(index, 100)"
+                >
+                    <SongItem :item="item" />
+                </div>
+            </template>
         </div>
     </div>
 </template>
@@ -34,63 +35,79 @@
 <script lang="ts" setup>
 import { getSearch } from "@/api/search";
 import type { IHotSearch } from "@/type/search";
+import { getHotSearch } from "@/api/home";
+import { useRoute, useRouter } from "vue-router";
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+import type { ISearchDetail } from "@/type/search";
+import { onMounted, ref, watch } from "vue";
+import SongItem from "@/components/common/SongItem.vue";
 
-import { getHotSearch } from '@/api/home';
-import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
-import { setAnimationClass } from "@/utils";
-import type { ISearchDetail } from "@/type/search"
-import { onBeforeMount, onMounted, ref } from "vue";
 
 const route = useRoute();
-const router = useRouter()
-const searchDetail = ref<ISearchDetail>()
-const loadSearch = async (keyword: any) => {
-    if (!keyword) return;
-    const { data } = await getSearch(keyword);
-    searchDetail.value = data;
-}
+const router = useRouter();
+const searchDetail = ref<ISearchDetail>();
 
 // 热搜列表
-const hotSearchData = ref<IHotSearch>()
+const hotSearchData = ref<IHotSearch>();
 const loadHotSearch = async () => {
     const { data } = await getHotSearch();
     hotSearchData.value = data;
-}
+};
 
-onBeforeMount(() => {
-    loadSearch(route.params.keyword)
+
+onMounted(() => {
     loadHotSearch();
-})
-
+});
 
 const clickHotKeyword = (keyword: string) => {
     router.push({
         path: "/search",
         query: {
-            keyword: keyword
-        }
-    })
+            keyword: keyword,
+        },
+    });
     // isHotSearchList.value = false;
-}
+};
 
 
-// 监听路由参数变化
-onBeforeRouteUpdate(to => {
-    let value = to.query.keyword?.toString()
-    loadSearch(value);
-})
 
 
+const loadSearch = async (keyword: any) => {
+    searchDetail.value = undefined;
+    if (!keyword) return;
+    const { data } = await getSearch(keyword);
+    const songs = data.result.song.songs;
+    // songs map 替换属性
+    songs.map((item: any) => {
+        item.picUrl = item.al.picUrl;
+        item.song = item;
+        item.artists = item.ar;
+    });
+    data.result.song.songs = songs;
+    searchDetail.value = data;
+};
+
+loadSearch(route.query.keyword);
+
+watch(
+    () => route.query,
+    async newParams => {
+        console.log(newParams);
+        loadSearch(newParams.keyword);
+    }
+)
 </script>
 
 <style lang="scss" scoped>
+.search {
+    height: 750px;
+    background-color: #333;
+}
 .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;
+    @apply mt-3 mr-4 rounded-xl  flex-1 overflow-hidden;
     animation-duration: 0.2s;
     min-width: 400px;
     &-item {
@@ -103,4 +120,8 @@ onBeforeRouteUpdate(to => {
         }
     }
 }
+
+.search-list {
+    @apply mt-3 flex-1;
+}
 </style>