搜索

src/api/home.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 import { IHotSinger } from "@/type/singer";
-import { ISearchKeyword } from "@/type/search";
+import { ISearchKeyword, IHotSearch } from "@/type/search";
 import { IPlayListSort } from "@/type/playlist";
 import { IRecommendMusic } from "@/type/music";
 import { IAlbumNew } from "@/type/album";
@@ -24,6 +24,11 @@ export const getSearchKeyword = () => {
   return request.get<ISearchKeyword>("/search/default");
 };
 
+// 获取热门搜索
+export const getHotSearch = () => {
+  return request.get<IHotSearch>("/search/hot/detail");
+};
+
 // 获取歌单分类
 export const getPlaylistCategory = () => {
   return request.get<IPlayListSort>("/playlist/catlist");

src/api/search.ts

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

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>

src/router/index.ts

@@ -6,6 +6,11 @@ const layoutRouter = [
     name: "home",
     component: () => import("@/views/home/index.vue"),
   },
+  {
+    path: "/search",
+    name: "search",
+    component: () => import("@/views/search/index.vue"),
+  },
 ];
 
 const routes = [

src/store/index.ts

@@ -10,7 +10,7 @@ let state = {
       text: "hello",
     },
     {
-      href: "/main",
+      href: "/search",
       icon: "icon-peoplefill",
       text: "hello",
     },

src/type/search.ts

@@ -14,3 +14,646 @@ interface SearchKeywordData {
   source?: any;
   bizQueryInfo: string;
 }
+
+export interface IHotSearch {
+  code: number;
+  data: Datum[];
+  message: string;
+}
+
+interface Datum {
+  searchWord: string;
+  score: number;
+  content: string;
+  source: number;
+  iconType: number;
+  iconUrl?: string;
+  url: string;
+  alg: string;
+}
+
+export interface ISearchDetail {
+  result: Result;
+  code: number;
+}
+
+interface Result {
+  song: Song2;
+  code: number;
+  mlog: Mlog2;
+  playList: PlayList2;
+  artist: Artist3;
+  album: Album3;
+  video: Video2;
+  sim_query: Simquery2;
+  djRadio: DjRadio2;
+  rec_type?: any;
+  talk: Talk2;
+  rec_query: null[];
+  user: User2;
+  order: string[];
+}
+
+interface User2 {
+  moreText: string;
+  more: boolean;
+  users: User[];
+  resourceIds: number[];
+}
+
+interface User {
+  defaultAvatar: boolean;
+  province: number;
+  authStatus: number;
+  followed: boolean;
+  avatarUrl: string;
+  accountStatus: number;
+  gender: number;
+  city: number;
+  birthday: number;
+  userId: number;
+  userType: number;
+  nickname: string;
+  signature: string;
+  description: string;
+  detailDescription: string;
+  avatarImgId: number;
+  backgroundImgId: number;
+  backgroundUrl: string;
+  authority: number;
+  mutual: boolean;
+  expertTags?: any;
+  experts?: any;
+  djStatus: number;
+  vipType: number;
+  remarkName?: any;
+  authenticationTypes: number;
+  avatarDetail?: any;
+  anchor: boolean;
+  avatarImgIdStr: string;
+  backgroundImgIdStr: string;
+  avatarImgId_str: string;
+  alg: string;
+}
+
+interface Talk2 {
+  more: boolean;
+  talks: Talk[];
+  resourceIds: number[];
+}
+
+interface Talk {
+  talkId: number;
+  shareUrl: string;
+  talkName: string;
+  shareCover: ShareCover;
+  showCover: ShareCover;
+  talkDes: string;
+  follows: number;
+  participations: number;
+  showParticipations: number;
+  status: number;
+  time?: any;
+  hasTag: boolean;
+  alg: string;
+  mlogCount: number;
+  commentCount: number;
+}
+
+interface ShareCover {
+  picKey: string;
+  nosKey: string;
+  width: number;
+  height: number;
+  url: string;
+}
+
+interface DjRadio2 {
+  moreText: string;
+  djRadios: DjRadio[];
+  more: boolean;
+  resourceIds: number[];
+}
+
+interface DjRadio {
+  id: number;
+  dj: Dj;
+  name: string;
+  picUrl: string;
+  desc: string;
+  subCount: number;
+  programCount: number;
+  createTime: number;
+  categoryId: number;
+  category: string;
+  radioFeeType: number;
+  feeScope: number;
+  buyed: boolean;
+  videos?: any;
+  finished: boolean;
+  underShelf: boolean;
+  purchaseCount: number;
+  price: number;
+  originalPrice: number;
+  discountPrice?: any;
+  lastProgramCreateTime: number;
+  lastProgramName?: any;
+  lastProgramId: number;
+  picId: number;
+  rcmdText?: string;
+  hightQuality: boolean;
+  whiteList: boolean;
+  liveInfo?: any;
+  playCount: number;
+  icon?: any;
+  composeVideo: boolean;
+  shareCount: number;
+  likedCount: number;
+  alg: string;
+  commentCount: number;
+}
+
+interface Dj {
+  defaultAvatar: boolean;
+  province: number;
+  authStatus: number;
+  followed: boolean;
+  avatarUrl: string;
+  accountStatus: number;
+  gender: number;
+  city: number;
+  birthday: number;
+  userId: number;
+  userType: number;
+  nickname: string;
+  signature: string;
+  description: string;
+  detailDescription: string;
+  avatarImgId: number;
+  backgroundImgId: number;
+  backgroundUrl: string;
+  authority: number;
+  mutual: boolean;
+  expertTags?: any;
+  experts?: any;
+  djStatus: number;
+  vipType: number;
+  remarkName?: any;
+  authenticationTypes: number;
+  avatarDetail?: any;
+  anchor: boolean;
+  avatarImgIdStr: string;
+  backgroundImgIdStr: string;
+  avatarImgId_str: string;
+}
+
+interface Simquery2 {
+  sim_querys: Simquery[];
+  more: boolean;
+}
+
+interface Simquery {
+  keyword: string;
+  alg: string;
+}
+
+interface Video2 {
+  moreText: string;
+  more: boolean;
+  videos: Video[];
+  resourceIds: number[];
+}
+
+interface Video {
+  coverUrl: string;
+  title: string;
+  durationms: number;
+  playTime: number;
+  type: number;
+  creator: Creator2[];
+  aliaName?: any;
+  transName?: any;
+  vid: string;
+  markTypes?: number[];
+  alg: string;
+}
+
+interface Creator2 {
+  userId: number;
+  userName: string;
+}
+
+interface Album3 {
+  moreText: string;
+  albums: Album2[];
+  more: boolean;
+  resourceIds: number[];
+}
+
+interface Album2 {
+  name: string;
+  id: number;
+  type: string;
+  size: number;
+  picId: number;
+  blurPicUrl: string;
+  companyId: number;
+  pic: number;
+  picUrl: string;
+  publishTime: number;
+  description: string;
+  tags: string;
+  company?: string;
+  briefDesc: string;
+  artist: Artist4;
+  songs?: any;
+  alias: string[];
+  status: number;
+  copyrightId: number;
+  commentThreadId: string;
+  artists: Artist5[];
+  paid: boolean;
+  onSale: boolean;
+  picId_str: string;
+  alg: string;
+}
+
+interface Artist5 {
+  name: string;
+  id: number;
+  picId: number;
+  img1v1Id: number;
+  briefDesc: string;
+  picUrl: string;
+  img1v1Url: string;
+  albumSize: number;
+  alias: any[];
+  trans: string;
+  musicSize: number;
+  topicPerson: number;
+  img1v1Id_str: string;
+}
+
+interface Artist4 {
+  name: string;
+  id: number;
+  picId: number;
+  img1v1Id: number;
+  briefDesc: string;
+  picUrl: string;
+  img1v1Url: string;
+  albumSize: number;
+  alias: string[];
+  trans: string;
+  musicSize: number;
+  topicPerson: number;
+  picId_str: string;
+  img1v1Id_str: string;
+  alia: string[];
+}
+
+interface Artist3 {
+  moreText: string;
+  artists: Artist2[];
+  more: boolean;
+  resourceIds: number[];
+}
+
+interface Artist2 {
+  id: number;
+  name: string;
+  picUrl: string;
+  alias: string[];
+  albumSize: number;
+  picId: number;
+  img1v1Url: string;
+  img1v1: number;
+  mvSize: number;
+  followed: boolean;
+  alg: string;
+  alia?: string[];
+  trans?: any;
+  accountId?: number;
+}
+
+interface PlayList2 {
+  moreText: string;
+  more: boolean;
+  playLists: PlayList[];
+  resourceIds: number[];
+}
+
+interface PlayList {
+  id: number;
+  name: string;
+  coverImgUrl: string;
+  creator: Creator;
+  subscribed: boolean;
+  trackCount: number;
+  userId: number;
+  playCount: number;
+  bookCount: number;
+  specialType: number;
+  officialTags: string[];
+  description: string;
+  highQuality: boolean;
+  track: Track;
+  alg: string;
+}
+
+interface Track {
+  name: string;
+  id: number;
+  position: number;
+  alias: any[];
+  status: number;
+  fee: number;
+  copyrightId: number;
+  disc: string;
+  no: number;
+  artists: Artist[];
+  album: Album;
+  starred: boolean;
+  popularity: number;
+  score: number;
+  starredNum: number;
+  duration: number;
+  playedNum: number;
+  dayPlays: number;
+  hearTime: number;
+  ringtone?: string;
+  crbt?: any;
+  audition?: any;
+  copyFrom: string;
+  commentThreadId: string;
+  rtUrl?: any;
+  ftype: number;
+  rtUrls: any[];
+  copyright: number;
+  mvid: number;
+  rtype: number;
+  rurl?: any;
+  hMusic: HMusic;
+  mMusic: HMusic;
+  lMusic: HMusic;
+  bMusic: HMusic;
+  mp3Url?: any;
+  transNames?: string[];
+}
+
+interface HMusic {
+  name?: any;
+  id: number;
+  size: number;
+  extension: string;
+  sr: number;
+  dfsId: number;
+  bitrate: number;
+  playTime: number;
+  volumeDelta: number;
+}
+
+interface Album {
+  name: string;
+  id: number;
+  type: string;
+  size: number;
+  picId: number;
+  blurPicUrl: string;
+  companyId: number;
+  pic: number;
+  picUrl: string;
+  publishTime: number;
+  description: string;
+  tags: string;
+  company?: string;
+  briefDesc: string;
+  artist: Artist;
+  songs: any[];
+  alias: any[];
+  status: number;
+  copyrightId: number;
+  commentThreadId: string;
+  artists: Artist[];
+  picId_str?: string;
+}
+
+interface Artist {
+  name: string;
+  id: number;
+  picId: number;
+  img1v1Id: number;
+  briefDesc: string;
+  picUrl: string;
+  img1v1Url: string;
+  albumSize: number;
+  alias: any[];
+  trans: string;
+  musicSize: number;
+}
+
+interface Creator {
+  nickname: string;
+  userId: number;
+  userType: number;
+  avatarUrl: string;
+  authStatus: number;
+  expertTags?: any;
+  experts?: any;
+}
+
+interface Mlog2 {
+  moreText: string;
+  more: boolean;
+  mlogs: Mlog[];
+  resourceIds: any[];
+}
+
+interface Mlog {
+  id: string;
+  type: number;
+  mlogBaseDataType: number;
+  position?: any;
+  resource: Resource;
+  alg: string;
+  reason?: any;
+  matchField: number;
+  matchFieldContent: string;
+  sameCity: boolean;
+}
+
+interface Resource {
+  mlogBaseData: MlogBaseData;
+  mlogExtVO: MlogExtVO;
+  userProfile: UserProfile;
+  status: number;
+  shareUrl: string;
+}
+
+interface UserProfile {
+  userId: number;
+  nickname: string;
+  avatarUrl: string;
+  followed: boolean;
+  userType: number;
+  isAnchor: boolean;
+}
+
+interface MlogExtVO {
+  likedCount: number;
+  commentCount: number;
+  playCount: number;
+  song?: any;
+  canCollect?: any;
+  artistName?: any;
+  rcmdInfo?: any;
+  strongPushMark?: any;
+  strongPushIcon?: any;
+  specialTag?: any;
+  channelTag: string;
+  artists: any[];
+}
+
+interface MlogBaseData {
+  id: string;
+  type: number;
+  text: string;
+  interveneText?: string;
+  pubTime: number;
+  coverUrl: string;
+  coverHeight: number;
+  coverWidth: number;
+  coverColor: number;
+  coverPicKey: string;
+  coverDynamicUrl?: any;
+  audio?: any;
+  threadId: string;
+  duration: number;
+}
+
+interface Song2 {
+  moreText: string;
+  songs: Song[];
+  more: boolean;
+  ksongInfos: KsongInfos;
+  resourceIds: number[];
+}
+
+interface KsongInfos {
+  "347230": _347230;
+}
+
+interface _347230 {
+  androidDownloadUrl: string;
+  accompanyId: string;
+  deeplinkUrl: string;
+}
+
+interface Song {
+  name: string;
+  id: number;
+  pst: number;
+  t: number;
+  ar: Ar[];
+  alia: any[];
+  pop: number;
+  st: number;
+  rt: string;
+  fee: number;
+  v: number;
+  crbt?: any;
+  cf: string;
+  al: Al;
+  dt: number;
+  h: H;
+  m: H;
+  l: H;
+  a?: any;
+  cd: string;
+  no: number;
+  rtUrl?: any;
+  ftype: number;
+  rtUrls: any[];
+  djId: number;
+  copyright: number;
+  s_id: number;
+  mark: number;
+  originCoverType: number;
+  originSongSimpleData?: any;
+  resourceState: boolean;
+  version: number;
+  single: number;
+  noCopyrightRcmd?: any;
+  rtype: number;
+  rurl?: any;
+  mst: number;
+  cp: number;
+  mv: number;
+  publishTime: number;
+  showRecommend: boolean;
+  recommendText: string;
+  tns?: string[];
+  officialTags: any[];
+  privilege: Privilege;
+  alg: string;
+  specialTags: any[];
+}
+
+interface Privilege {
+  id: number;
+  fee: number;
+  payed: number;
+  st: number;
+  pl: number;
+  dl: number;
+  sp: number;
+  cp: number;
+  subp: number;
+  cs: boolean;
+  maxbr: number;
+  fl: number;
+  toast: boolean;
+  flag: number;
+  preSell: boolean;
+  playMaxbr: number;
+  downloadMaxbr: number;
+  rscl?: any;
+  freeTrialPrivilege: FreeTrialPrivilege;
+  chargeInfoList: ChargeInfoList[];
+}
+
+interface ChargeInfoList {
+  rate: number;
+  chargeUrl?: any;
+  chargeMessage?: any;
+  chargeType: number;
+}
+
+interface FreeTrialPrivilege {
+  resConsumable: boolean;
+  userConsumable: boolean;
+}
+
+interface H {
+  br: number;
+  fid: number;
+  size: number;
+  vd: number;
+}
+
+interface Al {
+  id: number;
+  name: string;
+  picUrl: string;
+  tns: any[];
+  pic_str?: string;
+  pic: number;
+}
+
+interface Ar {
+  id: number;
+  name: string;
+  tns: any[];
+  alias: string[];
+  alia?: string[];
+}

src/views/search/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>{{ searchDetail }}</div>
+</template>
+
+<script lang="ts" setup>import { getSearch } from "@/api/search";
+import { onMounted } from "@vue/runtime-core";
+import { useRoute } from "vue-router";
+import type { ISearchDetail } from "@/type/search"
+import { ref } from "vue";
+const route = useRoute();
+const keyword = route.query.keyword;
+const searchDetail = ref<ISearchDetail>()
+const loadSearch = async () => {
+    const { data } = await getSearch(keyword);
+    searchDetail.value = data;
+}
+onMounted(() => {
+    loadSearch()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>