- {{ $t('library.playlists') }}
+ {{
+ { all: '全部歌单', mine: '创建的歌单', liked: '收藏的歌单' }[
+ playlistFilter
+ ]
+ }}
+
+
+
+ 全部歌单
+
+
+ 我创建的歌单
+
+
+ 收藏的歌单
+
+
@@ -123,6 +141,7 @@ import { randomNum, dailyTask } from '@/utils/common';
import { isAccountLoggedIn } from '@/utils/auth';
import NProgress from 'nprogress';
+import ContextMenu from '@/components/ContextMenu.vue';
import TrackList from '@/components/TrackList.vue';
import CoverRow from '@/components/CoverRow.vue';
import SvgIcon from '@/components/SvgIcon.vue';
@@ -130,7 +149,7 @@ import MvRow from '@/components/MvRow.vue';
export default {
name: 'Library',
- components: { SvgIcon, CoverRow, TrackList, MvRow },
+ components: { SvgIcon, CoverRow, TrackList, MvRow, ContextMenu },
data() {
return {
show: false,
@@ -160,6 +179,19 @@ export default {
lyric[lineIndex + 2].split(']')[1],
];
},
+ playlistFilter() {
+ return this.data.libraryPlaylistFilter || 'all';
+ },
+ filterPlaylists() {
+ const playlists = this.liked.playlists;
+ const userId = this.data.user.userId;
+ if (this.playlistFilter === 'mine') {
+ return playlists.filter(p => p.creator.userId === userId);
+ } else if (this.playlistFilter === 'liked') {
+ return playlists.filter(p => p.creator.userId !== userId);
+ }
+ return playlists;
+ },
},
created() {
NProgress.start();
@@ -199,9 +231,7 @@ export default {
return;
}
this.currentTab = tab;
- document
- .getElementById('liked')
- .scrollIntoView({ block: 'start', behavior: 'smooth' });
+ window.scrollTo({ top: 375, behavior: 'smooth' });
},
goToLikedSongsList() {
this.$router.push({ path: '/library/liked-songs' });
@@ -224,6 +254,13 @@ export default {
value: true,
});
},
+ openPlaylistTabMenu(e) {
+ this.$refs.playlistTabMenu.openMenu(e);
+ },
+ changePlaylistFilter(type) {
+ this.updateData({ key: 'libraryPlaylistFilter', value: type });
+ window.scrollTo({ top: 375, behavior: 'smooth' });
+ },
},
};
@@ -358,6 +395,25 @@ h1 {
opacity: 0.88;
background-color: var(--color-secondary-bg);
}
+ .tab.dropdown {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ overflow: hidden;
+ .text {
+ padding: 8px 3px 8px 14px;
+ }
+ .icon {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 8px 0 3px;
+ .svg-icon {
+ height: 16px;
+ width: 16px;
+ }
+ }
+ }
}
button.add-playlist {