From c7c1143cb4d5ed74e8d1e9bf9c5b1c1f01a1af41 Mon Sep 17 00:00:00 2001 From: algerkong Date: Wed, 27 Dec 2023 23:25:26 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BF=AE=E6=94=B9=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 4 ++ package.json | 11 ++-- src/api/search.ts | 10 +++- src/components/common/PlayListsItem.vue | 0 src/components/common/SearchItem.vue | 50 +++++++++++++++++ src/layout/components/SearchBar.vue | 61 +++++++++++++++++++- src/type/album.ts | 50 ++++++++--------- src/type/list.ts | 74 ++++++++++++------------- src/views/search/index.vue | 40 ++++++++++--- src/views/user/index.vue | 2 + 10 files changed, 224 insertions(+), 78 deletions(-) create mode 100644 src/components/common/PlayListsItem.vue create mode 100644 src/components/common/SearchItem.vue diff --git a/components.d.ts b/components.d.ts index fbd8c9f..830f9ce 100644 --- a/components.d.ts +++ b/components.d.ts @@ -7,6 +7,7 @@ export {} declare module 'vue' { export interface GlobalComponents { + AlbumsItem: typeof import('./src/components/common/AlbumsItem.vue')['default'] MPop: typeof import('./src/components/common/MPop.vue')['default'] MusicList: typeof import('./src/components/MusicList.vue')['default'] NAvatar: typeof import('naive-ui')['NAvatar'] @@ -22,15 +23,18 @@ declare module 'vue' { NMessageProvider: typeof import('naive-ui')['NMessageProvider'] NPopover: typeof import('naive-ui')['NPopover'] NScrollbar: typeof import('naive-ui')['NScrollbar'] + NSelect: typeof import('naive-ui')['NSelect'] NSlider: typeof import('naive-ui')['NSlider'] NTooltip: typeof import('naive-ui')['NTooltip'] PlayBottom: typeof import('./src/components/common/PlayBottom.vue')['default'] + PlayListsItem: typeof import('./src/components/common/PlayListsItem.vue')['default'] PlaylistType: typeof import('./src/components/PlaylistType.vue')['default'] RecommendAlbum: typeof import('./src/components/RecommendAlbum.vue')['default'] RecommendSinger: typeof import('./src/components/RecommendSinger.vue')['default'] RecommendSonglist: typeof import('./src/components/RecommendSonglist.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SearchItem: typeof import('./src/components/common/SearchItem.vue')['default'] SongItem: typeof import('./src/components/common/SongItem.vue')['default'] } } diff --git a/package.json b/package.json index ff9ad87..5f45987 100644 --- a/package.json +++ b/package.json @@ -16,16 +16,17 @@ "dependencies": { "@tailwindcss/postcss7-compat": "^2.2.4", "@vue/runtime-core": "^3.3.4", + "@vueuse/core": "^10.7.1", "autoprefixer": "^9.8.6", "axios": "^0.21.1", "lodash": "^4.17.21", + "naive-ui": "^2.34.4", "postcss": "^7.0.36", "sass": "^1.35.2", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4", "vue": "^3.3.4", "vue-router": "^4.2.4", - "vuex": "^4.1.0", - "naive-ui": "^2.34.4" + "vuex": "^4.1.0" }, "devDependencies": { "@sicons/antd": "^0.10.0", @@ -35,11 +36,11 @@ "electron": "^28.0.0", "electron-builder": "^24.9.1", "typescript": "^4.3.2", + "unplugin-auto-import": "^0.17.2", + "unplugin-vue-components": "^0.26.0", "vfonts": "^0.1.0", "vite": "^4.4.7", "vite-plugin-vue-devtools": "1.0.0-beta.5", - "vue-tsc": "^0.0.24", - "unplugin-auto-import": "^0.17.2", - "unplugin-vue-components": "^0.26.0" + "vue-tsc": "^0.0.24" } } diff --git a/src/api/search.ts b/src/api/search.ts index 8e23b77..1937faf 100644 --- a/src/api/search.ts +++ b/src/api/search.ts @@ -1,9 +1,13 @@ import request from "@/utils/request" import { ISearchDetail } from "@/type/search" +interface IParams { + keywords: string + type: number +} // 搜索内容 -export const getSearch = (keywords: any) => { - return request.get("/cloudsearch", { - params: { keywords: keywords, type: 1 }, +export const getSearch = (params: IParams) => { + return request.get('/cloudsearch', { + params, }) } diff --git a/src/components/common/PlayListsItem.vue b/src/components/common/PlayListsItem.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/components/common/SearchItem.vue b/src/components/common/SearchItem.vue new file mode 100644 index 0000000..69035e8 --- /dev/null +++ b/src/components/common/SearchItem.vue @@ -0,0 +1,50 @@ + + + + + \ No newline at end of file diff --git a/src/layout/components/SearchBar.vue b/src/layout/components/SearchBar.vue index 78c2bfc..827d429 100644 --- a/src/layout/components/SearchBar.vue +++ b/src/layout/components/SearchBar.vue @@ -12,6 +12,14 @@ +
@@ -80,6 +88,7 @@ onMounted(() => { // 搜索词 const searchValue = ref("") +const searchType = ref(1) const search = () => { let value = searchValue.value @@ -89,12 +98,62 @@ const search = () => { router.push({ path: "/search", query: { - keyword: value + keyword: value, + type: searchType.value } }) } } +const selectSearchType = (key: any) => { + searchType.value = key +} + +const SEARCH_TYPES = [ + { + label: '单曲', + key: 1 + }, + { + label: '专辑', + key: 10 + }, + { + label: '歌手', + key: 100 + }, + { + label: '歌单', + key: 1000 + }, + { + label: '用户', + key: 1002 + }, + { + label: 'MV', + key: 1004 + }, + { + label: '歌词', + key: 1006 + }, + { + label: '电台', + key: 1009 + }, + { + label: '视频', + key: 1014 + }, + { + label: '综合', + key: 1018 + } +] + +const searchTypeOptions = ref(SEARCH_TYPES) + const value = 'Drive My Car' const options = [ { diff --git a/src/type/album.ts b/src/type/album.ts index 46c9e6a..eaaf239 100644 --- a/src/type/album.ts +++ b/src/type/album.ts @@ -3,31 +3,31 @@ export interface IAlbumNew { albums: Album[]; } -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: string[]; - status: number; - copyrightId: number; - commentThreadId: string; - artists: Artist2[]; - paid: boolean; - onSale: boolean; - picId_str: string; +export 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: string[] + status: number + copyrightId: number + commentThreadId: string + artists: Artist2[] + paid: boolean + onSale: boolean + picId_str: string } interface Artist2 { diff --git a/src/type/list.ts b/src/type/list.ts index 102b92f..745ed12 100644 --- a/src/type/list.ts +++ b/src/type/list.ts @@ -6,43 +6,43 @@ export interface IList { total: number; } -interface Playlist { - name: string; - id: number; - trackNumberUpdateTime: number; - status: number; - userId: number; - createTime: number; - updateTime: number; - subscribedCount: number; - trackCount: number; - cloudTrackCount: number; - coverImgUrl: string; - coverImgId: number; - description: string; - tags: string[]; - playCount: number; - trackUpdateTime: number; - specialType: number; - totalDuration: number; - creator: Creator; - tracks?: any; - subscribers: Subscriber[]; - subscribed: boolean; - commentThreadId: string; - newImported: boolean; - adType: number; - highQuality: boolean; - privacy: number; - ordered: boolean; - anonimous: boolean; - coverStatus: number; - recommendInfo?: any; - shareCount: number; - coverImgId_str?: string; - commentCount: number; - copywriter: string; - tag: string; +export interface Playlist { + name: string + id: number + trackNumberUpdateTime: number + status: number + userId: number + createTime: number + updateTime: number + subscribedCount: number + trackCount: number + cloudTrackCount: number + coverImgUrl: string + coverImgId: number + description: string + tags: string[] + playCount: number + trackUpdateTime: number + specialType: number + totalDuration: number + creator: Creator + tracks?: any + subscribers: Subscriber[] + subscribed: boolean + commentThreadId: string + newImported: boolean + adType: number + highQuality: boolean + privacy: number + ordered: boolean + anonimous: boolean + coverStatus: number + recommendInfo?: any + shareCount: number + coverImgId_str?: string + commentCount: number + copywriter: string + tag: string } interface Subscriber { diff --git a/src/views/search/index.vue b/src/views/search/index.vue index dc1595a..941c664 100644 --- a/src/views/search/index.vue +++ b/src/views/search/index.vue @@ -33,13 +33,26 @@
@@ -55,10 +68,12 @@ import { setAnimationClass, setAnimationDelay } from "@/utils"; import { onMounted, ref, watch } from "vue"; import SongItem from "@/components/common/SongItem.vue"; import { useStore } from "vuex"; +import { useDateFormat } from '@vueuse/core' const route = useRoute(); const router = useRouter(); const searchDetail = ref(); +const searchType = ref(Number(route.query.type) || 1); // 热搜列表 const hotSearchData = ref(); @@ -79,18 +94,21 @@ const clickHotKeyword = (keyword: string) => { path: "/search", query: { keyword: keyword, + type: 1 }, }); // isHotSearchList.value = false; }; -const loadSearch = async (keyword: any) => { - hotKeyword.value = keyword; +const dateFormat = (time:any) => useDateFormat(time, 'YYYY.MM.DD').value +const loadSearch = async (keywords: any) => { + hotKeyword.value = keywords; searchDetail.value = undefined; - if (!keyword) return; - const { data } = await getSearch(keyword); + if (!keywords) return; + const { data } = await getSearch({keywords, type:searchType.value}); - const songs = data.result.songs; + const songs = data.result.songs || []; + const albums = data.result.albums || []; // songs map 替换属性 songs.map((item: any) => { @@ -98,7 +116,14 @@ const loadSearch = async (keyword: any) => { item.song = item; item.artists = item.ar; }); - searchDetail.value = data; + albums.map((item: any) => { + item.desc = `${item.artist.name } ${ item.company } ${dateFormat(item.publishTime)}`; + }); + searchDetail.value = { + songs, + albums + } + console.log('searchDetail',searchDetail.value) }; loadSearch(route.query.keyword); @@ -106,6 +131,7 @@ loadSearch(route.query.keyword); watch( () => route.query, async newParams => { + searchType.value = Number(newParams.type || 1) loadSearch(newParams.keyword); } ) diff --git a/src/views/user/index.vue b/src/views/user/index.vue index f01e819..7313e0b 100644 --- a/src/views/user/index.vue +++ b/src/views/user/index.vue @@ -35,6 +35,8 @@ const loadPage = async () => { recordList.value = recordData.allData } +loadPage() + watch(() => router.currentRoute.value, (to) => { if (to.path === "/user") { loadPage()