mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2024-11-22 13:36:20 +08:00
合并likeSongs页面和playlist页面
This commit is contained in:
qier222
parent
14a22ccf1e
commit
c860745bfe
|
|
@ -17,19 +17,18 @@
|
|||
</div>
|
||||
<div class="controls">
|
||||
<div class="playing">
|
||||
<router-link :to="`/album/${currentTrack.al.id}`"
|
||||
><img :src="currentTrack.al.picUrl | resizeImage" />
|
||||
</router-link>
|
||||
<img :src="currentTrack.al.picUrl | resizeImage" @click="goToAlbum" />
|
||||
<div class="track-info">
|
||||
<div class="name">
|
||||
<router-link
|
||||
:to="'/' + player.listInfo.type + '/' + player.listInfo.id"
|
||||
>{{ currentTrack.name }}</router-link
|
||||
>
|
||||
<div class="name" @click="goToList">
|
||||
{{ currentTrack.name }}
|
||||
</div>
|
||||
<div class="artist">
|
||||
<span v-for="(ar, index) in currentTrack.ar" :key="ar.id">
|
||||
<router-link :to="`/artist/${ar.id}`">{{ ar.name }}</router-link>
|
||||
<span
|
||||
v-for="(ar, index) in currentTrack.ar"
|
||||
:key="ar.id"
|
||||
@click="goToArtist(ar.id)"
|
||||
>
|
||||
{{ ar.name }}
|
||||
<span v-if="index !== currentTrack.ar.length - 1">, </span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -175,7 +174,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
"updatePlayerList",
|
||||
"turnOnShuffleMode",
|
||||
"turnOffShuffleMode",
|
||||
"updatePlayerState",
|
||||
|
|
@ -263,6 +261,20 @@ export default {
|
|||
}
|
||||
});
|
||||
},
|
||||
goToList() {
|
||||
if (this.player.listInfo.id === this.settings.user.likedSongPlaylistID)
|
||||
this.$router.push({ path: "/library/liked-songs" });
|
||||
else
|
||||
this.$router.push({
|
||||
path: "/" + this.player.listInfo.type + "/" + this.player.listInfo.id,
|
||||
});
|
||||
},
|
||||
goToAlbum() {
|
||||
this.$router.push({ path: "/album/" + this.currentTrack.al.id });
|
||||
},
|
||||
goToArtist(id) {
|
||||
this.$router.push({ path: "/artist/" + id });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -307,6 +319,7 @@ export default {
|
|||
height: 46px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.16);
|
||||
cursor: pointer;
|
||||
}
|
||||
.track-info {
|
||||
height: 46px;
|
||||
|
|
@ -337,7 +350,7 @@ export default {
|
|||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
a {
|
||||
span {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ const routes = [
|
|||
{
|
||||
path: "/library/liked-songs",
|
||||
name: "likedSongs",
|
||||
component: () => import("@/views/likedSongs"),
|
||||
component: () => import("@/views/playlist"),
|
||||
meta: {
|
||||
requireLogin: true,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,235 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>
|
||||
<img class="head" :src="settings.user.avatarUrl | resizeImage" />{{
|
||||
settings.user.nickname
|
||||
}}'s Liked Songs
|
||||
</h1>
|
||||
|
||||
<TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions, mapState } from "vuex";
|
||||
import NProgress from "nprogress";
|
||||
import { getPlaylistDetail } from "@/api/playlist";
|
||||
import { playPlaylistByID } from "@/utils/play";
|
||||
import { getTrackDetail } from "@/api/track";
|
||||
import { mapTrackPlayableStatus } from "@/utils/common";
|
||||
|
||||
import TrackList from "@/components/TrackList.vue";
|
||||
|
||||
export default {
|
||||
name: "Playlist",
|
||||
components: {
|
||||
TrackList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playlist: {
|
||||
trackIds: [],
|
||||
},
|
||||
tracks: [],
|
||||
loadingMore: false,
|
||||
lastLoadedTrackIndex: 9,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.id = this.settings.user.likedSongPlaylistID;
|
||||
getPlaylistDetail(this.id)
|
||||
.then((data) => {
|
||||
this.playlist = data.playlist;
|
||||
this.tracks = data.playlist.tracks;
|
||||
this.tracks = mapTrackPlayableStatus(this.tracks);
|
||||
NProgress.done();
|
||||
if (this.playlist.trackCount > this.tracks.length) {
|
||||
window.addEventListener("scroll", this.handleScroll, true);
|
||||
}
|
||||
return data;
|
||||
})
|
||||
.then(() => {
|
||||
if (this.playlist.trackCount > this.tracks.length) {
|
||||
this.loadingMore = true;
|
||||
this.loadMore();
|
||||
}
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.handleScroll, true);
|
||||
},
|
||||
computed: {
|
||||
...mapState(["player", "settings"]),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
"updatePlayerList",
|
||||
"appendTrackToPlayerList",
|
||||
"shuffleTheList",
|
||||
]),
|
||||
...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
|
||||
playPlaylistByID(trackID = "first") {
|
||||
playPlaylistByID(this.playlist.id, trackID);
|
||||
},
|
||||
shufflePlay() {
|
||||
this.playPlaylistByID();
|
||||
this.shuffleTheList();
|
||||
},
|
||||
loadMore() {
|
||||
let trackIDs = this.playlist.trackIds.filter((t, index) => {
|
||||
if (
|
||||
index > this.lastLoadedTrackIndex &&
|
||||
index <= this.lastLoadedTrackIndex + 50
|
||||
)
|
||||
return t;
|
||||
});
|
||||
trackIDs = trackIDs.map((t) => t.id);
|
||||
getTrackDetail(trackIDs.join(",")).then((data) => {
|
||||
this.tracks.push(...data.songs);
|
||||
this.tracks = mapTrackPlayableStatus(this.tracks);
|
||||
this.lastLoadedTrackIndex += trackIDs.length;
|
||||
this.loadingMore = false;
|
||||
});
|
||||
},
|
||||
handleScroll(e) {
|
||||
let dom = document.querySelector("html");
|
||||
let scrollHeight = Math.max(dom.scrollHeight, dom.scrollHeight);
|
||||
let scrollTop = e.target.scrollingElement.scrollTop;
|
||||
let clientHeight =
|
||||
dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
|
||||
if (clientHeight + scrollTop + 200 >= scrollHeight) {
|
||||
if (
|
||||
this.lastLoadedTrackIndex + 1 === this.playlist.trackIds.length ||
|
||||
this.loadingMore
|
||||
)
|
||||
return;
|
||||
this.loadingMore = true;
|
||||
this.loadMore();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
.head {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
vertical-align: -7px;
|
||||
border-radius: 50%;
|
||||
border: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
display: flex;
|
||||
width: 78vw;
|
||||
margin-bottom: 72px;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
margin-left: 56px;
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.artist {
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-top: 24px;
|
||||
}
|
||||
.date-and-count {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.68);
|
||||
margin-top: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transition: color 0.3s;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
background-color: rgba(51, 94, 234, 0.1);
|
||||
color: #335eea;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.shuffle {
|
||||
padding: 8px 11px;
|
||||
.svg-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shade {
|
||||
background: rgba(255, 255, 255, 0.38);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.description-full {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
padding: 32px;
|
||||
border-radius: 12px;
|
||||
width: 50vw;
|
||||
margin: auto 0;
|
||||
font-size: 14px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.close {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
color: #335eea;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div v-show="show">
|
||||
<div class="playlist-info">
|
||||
<div class="playlist-info" v-if="!isLikeSongsPage">
|
||||
<Cover
|
||||
:url="playlist.coverImgUrl | resizeImage(1024)"
|
||||
:showPlayButton="true"
|
||||
|
|
@ -60,6 +60,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-info" v-else>
|
||||
<h1>
|
||||
<img class="avatar" :src="settings.user.avatarUrl | resizeImage" />{{
|
||||
settings.user.nickname
|
||||
}}'s Liked Songs
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<TrackList :tracks="tracks" :type="'playlist'" :id="playlist.id" />
|
||||
|
||||
<transition name="fade">
|
||||
|
|
@ -114,7 +122,11 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.loadData(this.$route.params.id);
|
||||
if (this.$route.name === "likedSongs") {
|
||||
this.loadData(this.settings.user.likedSongPlaylistID);
|
||||
} else {
|
||||
this.loadData(this.$route.params.id);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("scroll", this.handleScroll, true);
|
||||
|
|
@ -124,13 +136,12 @@ export default {
|
|||
isLoggedIn() {
|
||||
return isLoggedIn();
|
||||
},
|
||||
isLikeSongsPage() {
|
||||
return this.$route.name === "likedSongs";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
"updatePlayerList",
|
||||
"appendTrackToPlayerList",
|
||||
"shuffleTheList",
|
||||
]),
|
||||
...mapMutations(["appendTrackToPlayerList"]),
|
||||
...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
|
||||
playPlaylistByID(trackID = "first") {
|
||||
let trackIDs = this.playlist.trackIds.map((t) => t.id);
|
||||
|
|
@ -291,6 +302,19 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
.avatar {
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
vertical-align: -7px;
|
||||
border-radius: 50%;
|
||||
border: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user