From 936593553c2afa3890beadd4711e5485fd582b55 Mon Sep 17 00:00:00 2001 From: mackt <1033530438@qq.com> Date: Fri, 5 Apr 2024 15:10:55 +0800 Subject: [PATCH] feat(page): Add mylist page. --- public/img/icon/play-ellipse.svg | 4 ++ src/app/mylist/index.module.css | 14 ++++++ src/app/mylist/page.tsx | 81 ++++++++++++++++++++++++++++++++ src/components/Song/SongCard.tsx | 2 +- src/services/client/audio.ts | 14 +++++- 5 files changed, 112 insertions(+), 3 deletions(-) create mode 100644 public/img/icon/play-ellipse.svg create mode 100644 src/app/mylist/index.module.css create mode 100644 src/app/mylist/page.tsx diff --git a/public/img/icon/play-ellipse.svg b/public/img/icon/play-ellipse.svg new file mode 100644 index 0000000..6f16b99 --- /dev/null +++ b/public/img/icon/play-ellipse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/mylist/index.module.css b/src/app/mylist/index.module.css new file mode 100644 index 0000000..61e807b --- /dev/null +++ b/src/app/mylist/index.module.css @@ -0,0 +1,14 @@ +.tab-active { + transition-property: color; + transition-duration: 300; + color: rgba(0, 0, 0, 0.95); +} + +.tab-active::after { + content: ''; + display: block; + width: 60px; + height: 3px; + margin: 12px auto 0; + background-color: rgba(0, 0, 0, 0.95); +} diff --git a/src/app/mylist/page.tsx b/src/app/mylist/page.tsx new file mode 100644 index 0000000..b3996fa --- /dev/null +++ b/src/app/mylist/page.tsx @@ -0,0 +1,81 @@ +/** 期刊列表 */ + +'use client'; + +import { useEffect, useState } from 'react'; + +import { useShallow } from 'zustand/react/shallow'; + +import styles from './index.module.css'; + +import { SongCardList } from '@/components'; +import { apiGetSongCollect } from '@/services'; +import useUserStore from '@/store/user'; + +export default function Journal({ params }: { params: { category?: string; page?: number } }) { + const { userInfo, userLogout } = useUserStore( + useShallow((state) => ({ + userInfo: state.userInfo, + userLogout: state.userLogout, + })), + ); + + const [type, setType] = useState<'single' | 'journal'>('single'); // 收藏类型 + const [pageNum, setPageNum] = useState(1); + const [pageSize] = useState(6); + const [list, setList] = useState([]); // 列表 + + const handleChangeType = (type: 'single' | 'journal') => { + setList([]); + setType(type); + setPageNum(1); + }; + + const getList = async () => { + // const fn = { + // single: apiGetSongCollect, + // journal: apiGetSongCollect, + // }; + const result = await apiGetSongCollect({ userId: userInfo?.id, pageNum, pageSize }); + if (result.code === 200) setList(result.data.rows); + }; + + const nav: Array<{ label: string; value: 'single' | 'journal' }> = [ + { + label: '收藏的单曲', + value: 'single', + }, + { + label: '收藏的期刊', + value: 'journal', + }, + ]; + + useEffect(() => { + getList(); + }, [type, pageNum]); + + return ( +
+
+ {/* Nav */} +
    + {nav.map((item) => ( +
  • handleChangeType(item.value)} + > + {item.label} +
    • + ))} +
+
+ 播放全部 +
+ {/* List */} + +
+
+ ); +} diff --git a/src/components/Song/SongCard.tsx b/src/components/Song/SongCard.tsx index e895044..a5c6ba6 100644 --- a/src/components/Song/SongCard.tsx +++ b/src/components/Song/SongCard.tsx @@ -5,7 +5,7 @@ export default function JournalItem({ id, title, pic, artist, haveCollect }: Son return ( {/* left */}
diff --git a/src/services/client/audio.ts b/src/services/client/audio.ts index b9f76cf..8b708a7 100644 --- a/src/services/client/audio.ts +++ b/src/services/client/audio.ts @@ -9,7 +9,17 @@ export const apiGetSongInfo = async (id: string) => { * @pageNum 页码，不传或者小于1，则返回所有收藏歌曲 * @pageSize 每页条数，不传或者小于1，则返回所有收藏歌曲 */ -export const apiGetSongCollect = async () => { - const result: FetchResponse> = await clientHttp.get(`/luoo-music/song/collect`); +export const apiGetSongCollect = async ({ + pageNum, + pageSize, + userId, +}: { + pageNum: number; + pageSize: number; + userId: string; +}) => { + const result: FetchResponse> = await clientHttp.get( + `queyueapi/luoo-music/song/collect?userId=${userId}&pageNum=${pageNum}&pageSize=${pageSize}`, + ); return result; };