-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(music): ranking-list,ranking-detail
- Loading branch information
Showing
12 changed files
with
367 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| /* | ||
| * @Author: NineNan | ||
| * @Date: 2021-07-19 21:31:39 | ||
| * @LastEditTime: 2021-07-19 22:52:22 | ||
| * @LastEditors: Please set LastEditors | ||
| * @Description: topList | ||
| * @FilePath: /study_vue03/src/api/topList.ts | ||
| */ | ||
|
|
||
| import { get } from "@/service/http"; | ||
| import { IRankList } from "@/types/index"; | ||
| /** | ||
| * 获取排行榜 | ||
| */ | ||
| export const getTopList = <T>(): Promise<T> => { | ||
| return get("/api/getTopList") as Promise<T>; | ||
| }; | ||
|
|
||
| /** | ||
| * 获取排行榜详情 | ||
| * @param {IRankList} top | ||
| * @returns | ||
| */ | ||
| export const getTopDetail = <T>(top: { | ||
| id: string; | ||
| period: string; | ||
| }): Promise<T> => { | ||
| return get("/api/getTopDetail", { | ||
| id: top.id, | ||
| period: top.period, | ||
| }) as Promise<T>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| <!-- | ||
| * @Author: NineNan | ||
| * @Date: 2021-07-19 22:22:25 | ||
| * @LastEditTime: 2021-07-19 23:10:12 | ||
| * @LastEditors: Please set LastEditors | ||
| * @Description: 排行榜详情 | ||
| * @FilePath: /study_vue03/src/views/music/ranking-detail/index.vue | ||
| --> | ||
| <template> | ||
| <div class="ranking-detail"> | ||
| <MusicList | ||
| :songs="songsList" | ||
| :title="title" | ||
| :pic="pic" | ||
| :loading="loading" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { useRoute, useRouter } from "vue-router"; | ||
| import { PropType, ref, computed, Ref } from "vue"; | ||
| import { getTopDetail } from "@/api/topList"; | ||
| import { processSongs } from "@/api/song"; | ||
| import { IRankList, ISingerDetailsInfo } from "@/types/index"; | ||
| import MusicList from "@components/musicList/MusicList.vue"; | ||
| import { useStore } from "@/store/index"; | ||
| import singer from "@/store/modules/singer"; | ||
|
|
||
| interface IProps { | ||
| singer: IRankList | null; | ||
| } | ||
|
|
||
| interface ISingerDetails { | ||
| songsList: Ref<ISingerDetailsInfo[]>; | ||
| pic: Ref<string | undefined>; | ||
| title: Ref<string | undefined>; | ||
| loading: Ref<boolean>; | ||
| computedSingerInfo: Ref<IRankList | null>; | ||
| } | ||
|
|
||
| export default { | ||
| name: "SingerDetails", | ||
| components: { | ||
| MusicList, | ||
| }, | ||
| props: { | ||
| singer: { | ||
| type: Object as PropType<IRankList | null>, | ||
| }, | ||
| }, | ||
| async setup(props: IProps): Promise<ISingerDetails | undefined> { | ||
| const route = useRoute(); | ||
| const router = useRouter(); | ||
| const store = useStore(); | ||
| const loading = ref(true); | ||
| let songsList = ref<ISingerDetailsInfo[]>([]); | ||
| const cacheInfo = computed(() => store.getters.getRankingInfo); | ||
| const computedSingerInfo = computed(() => { | ||
| let result: IRankList | null = null; | ||
| if (props?.singer?.id) { | ||
| result = props.singer; | ||
| } else { | ||
| if (cacheInfo.value?.id === +route.params.id) { | ||
| result = cacheInfo.value; | ||
| } | ||
| } | ||
| return result; | ||
| }); | ||
| const pic = computed(() => { | ||
| return computedSingerInfo.value?.pic; | ||
| }); | ||
| const title = computed(() => { | ||
| return computedSingerInfo.value?.name; | ||
| }); | ||
|
|
||
| if (!computedSingerInfo.value) { | ||
| const path = route.matched[0].path; | ||
| router.push({ path }); | ||
| return; | ||
| } | ||
|
|
||
| const params = { | ||
| id: route.params.id as string, | ||
| period: route.params.period as string, | ||
| }; | ||
|
|
||
| const { songs } = await getTopDetail<{ songs: ISingerDetailsInfo[] }>( | ||
| params | ||
| ); | ||
|
|
||
| processSongs(songs).then((res) => { | ||
| const processSongsRes = res; | ||
| songsList.value = processSongsRes; | ||
| loading.value = false; | ||
| }); | ||
|
|
||
| return { | ||
| pic, | ||
| title, | ||
| loading, | ||
| songsList, | ||
| computedSingerInfo, | ||
| }; | ||
| }, | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .ranking-detail { | ||
| position: fixed; | ||
| z-index: 10; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| background: $color-background; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .ranking-list { | ||
| position: fixed; | ||
| width: 100%; | ||
| top: 44px; | ||
| bottom: 0; | ||
| .top-list-content { | ||
| height: 100%; | ||
| overflow: hidden; | ||
| .item { | ||
| display: flex; | ||
| margin: 0 20px; | ||
| padding-top: 20px; | ||
| height: 100px; | ||
| &:last-child { | ||
| padding-bottom: 20px; | ||
| } | ||
| .icon { | ||
| flex: 0 0 100px; | ||
| width: 100px; | ||
| height: 100px; | ||
| } | ||
| .song-list { | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| padding: 0 20px; | ||
| height: 100px; | ||
| overflow: hidden; | ||
| background: $color-highlight-background; | ||
| color: $color-text-d; | ||
| font-size: $font-size-small; | ||
| .song { | ||
| @include no-wrap(); | ||
| line-height: 26px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.