搜索

src/layout/components/PlayBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="drawer-target" :class="musicFullClass">
+    <div id="drawer-target" :class="musicFullClass" v-if="musicFull">
         <div class="music-img">
             <img class="img" :src="playMusic.picUrl + '?param=300y300'" />
         </div>
@@ -193,8 +193,13 @@ const musicFullClass = computed(() => {
 })
 
 const lrcData = ref<ILyric>()
-const lrcArray = ref<Array<Object>>()
-const lrcTimeArray = ref<any>()
+
+interface ILrcData {
+    text: string;
+    trText: string;
+}
+const lrcArray = ref<Array<ILrcData>>()
+const lrcTimeArray = ref<Array<Number>>([])
 // 加载歌词
 const loadLrc = async () => {
     const { data } = await getMusicLrc(playMusic.value.id)
@@ -207,7 +212,7 @@ const loadLrc = async () => {
         console.log(musicText);
         //歌词时间
         let timeArray = musicText.match(/(\d{2}):(\d{2})(\.(\d*))?/g)
-        let timeArrayNum = []
+        let timeArrayNum: Array<Number> = []
         timeArray?.forEach(function (item, index) {
             if (item.length < 9) {
                 item = item + "0"
@@ -217,28 +222,24 @@ const loadLrc = async () => {
         lrcTimeArray.value = timeArrayNum
         console.log(lrcTimeArray.value)
         //歌词
-        musicText = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-        let count = musicText.length - lrcTimeArray.length;
-        if (count) {
-            musicText = musicText.slice(count - 1)
-        }
-        console.log(musicText)
+        let musicTextArray = musicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+        console.log(musicTextArray)
         let text = []
 
         try {
             let trMusicText = data.tlyric.lyric
-            trMusicText = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
-            for (let i = 0; i < musicText.length - 1; i++) {
+            let trMusicTextArray = trMusicText.replace(/(\[(\d{2}):(\d{2})(\.(\d*))?\])/g, '').split('\n')
+            for (let i = 0; i < musicTextArray.length - 1; i++) {
                 text.push({
-                    text: musicText[i],
-                    trText: trMusicText[i]
+                    text: musicTextArray[i],
+                    trText: trMusicTextArray[i]
                 })
             }
             lrcArray.value = text
             console.log(text)
 
         } catch (err) {
-            text = null
+            text = []
         }
     } catch (err) {
         console.log(err)

src/layout/components/SearchBar.vue

@@ -1,11 +1,36 @@
 <template>
     <div class="search-box flex">
         <div class="search-box-input flex-1">
-            <n-input size="large" round :placeholder="searchKeyword" class="border border-gray-600">
+            <n-input
+                size="large"
+                round
+                v-model:value="searchValue"
+                :placeholder="searchKeyword"
+                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">
@@ -22,22 +47,55 @@
 </template>
 
 <script lang="ts" setup>
-import { getSearchKeyword } from '@/api/home';
+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<String>("搜索点什么吧...")
+const searchKeyword = ref("搜索点什么吧...")
+const searchValue = ref("")
 
 const loadSearchKeyword = async () => {
     const { data } = await getSearchKeyword();
     searchKeyword.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()
 })
 
+const isSearch = ref(false)
 
+const search = () => {
+
+    let value = searchValue.value
+    if (value == "") {
+        searchValue.value = searchKeyword.value
+    } else {
+        router.push({
+            path: "/search",
+            query: {
+                keyword: value
+            }
+        })
+    }
+
+    isSearch.value = false;
+}
 
 const value = 'Drive My Car'
 const options = [
@@ -62,4 +120,23 @@ const options = [
     @apply ml-6 flex text-lg justify-center items-center rounded-full pl-3 border border-gray-600;
     background: #1a1a1a;
 }
+
+.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>