import { mapMutations, mapActions, mapState } from "vuex";
-import NProgress from "nprogress";
+import { getArtistAlbum } from "@/api/artist";
import { getTrackDetail } from "@/api/track";
import { playAlbumByID } from "@/utils/play";
import { getAlbum } from "@/api/album";
+import NProgress from "nprogress";
import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
import TrackList from "@/components/TrackList.vue";
+import CoverRow from "@/components/CoverRow.vue";
import Cover from "@/components/Cover.vue";
export default {
@@ -91,6 +104,7 @@ export default {
ButtonTwoTone,
TrackList,
ExplicitSymbol,
+ CoverRow,
},
data() {
return {
@@ -104,24 +118,11 @@ export default {
tracks: [],
showFullDescription: false,
show: false,
+ moreAlbums: [],
};
},
created() {
- getAlbum(this.$route.params.id)
- .then((data) => {
- this.album = data.album;
- this.tracks = data.songs;
- NProgress.done();
- this.show = true;
- return this.tracks;
- })
- .then((tracks) => {
- // to get explicit mark
- let trackIDs = tracks.map((t) => t.id);
- getTrackDetail(trackIDs.join(",")).then((data) => {
- this.tracks = data.songs;
- });
- });
+ this.loadData(this.$route.params.id);
},
computed: {
...mapState(["player"]),
@@ -130,6 +131,12 @@ export default {
this.tracks.map((t) => (time = time + t.dt));
return time;
},
+ filteredMoreAlbums() {
+ let moreAlbums = this.moreAlbums.filter((a) => a.id !== this.album.id);
+ let realAlbums = moreAlbums.filter((a) => a.type === "专辑");
+ let restItems = moreAlbums.filter((a) => a.type !== "专辑");
+ return [...realAlbums, ...restItems].slice(0, 5);
+ },
},
methods: {
...mapMutations(["appendTrackToPlayerList"]),
@@ -140,6 +147,32 @@ export default {
}
playAlbumByID(id, trackID);
},
+ loadData(id) {
+ getAlbum(id).then((data) => {
+ this.album = data.album;
+ this.tracks = data.songs;
+ NProgress.done();
+ this.show = true;
+
+ // to get explicit mark
+ let trackIDs = this.tracks.map((t) => t.id);
+ getTrackDetail(trackIDs.join(",")).then((data) => {
+ this.tracks = data.songs;
+ });
+
+ // get more album by this artist
+ getArtistAlbum({ id: this.album.artist.id, limit: 200 }).then(
+ (data) => {
+ this.moreAlbums = data.hotAlbums;
+ }
+ );
+ });
+ },
+ },
+ beforeRouteUpdate(to, from, next) {
+ NProgress.start();
+ this.loadData(to.params.id);
+ next();
},
};
@@ -245,7 +278,8 @@ export default {
.extra-info {
margin-top: 36px;
- font-size: 14px;
+ margin-bottom: 36px;
+ font-size: 12px;
color: rgba(0, 0, 0, 0.48);
div {
margin-bottom: 8px;
@@ -254,4 +288,15 @@ export default {
color: rgba(0, 0, 0, 0.68);
}
}
+
+.more-by {
+ border-top: 1px solid rgba(0, 0, 0, 0.08);
+ padding-top: 22px;
+ .section-title {
+ font-size: 22px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.88);
+ margin-bottom: 8px;
+ }
+}
From 67db925bfe45700f903a8c177f1f7d1f8a373f19 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Fri, 23 Oct 2020 20:11:19 +0800
Subject: [PATCH 2/2] fix: some bugs
---
src/components/ButtonTwoTone.vue | 2 +-
src/components/CoverRow.vue | 15 +++++++++++----
src/views/album.vue | 20 ++++++++++++++++----
3 files changed, 28 insertions(+), 9 deletions(-)
diff --git a/src/components/ButtonTwoTone.vue b/src/components/ButtonTwoTone.vue
index ccc2239..576116c 100644
--- a/src/components/ButtonTwoTone.vue
+++ b/src/components/ButtonTwoTone.vue
@@ -39,7 +39,7 @@ export default {
return {
borderRadius: this.shape === "round" ? "50%" : "8px",
padding: `8px ${this.horizontalPadding}px`,
- height: "38px",
+ // height: "38px",
width: this.shape === "round" ? "38px" : "auto",
};
},
diff --git a/src/components/CoverRow.vue b/src/components/CoverRow.vue
index df5667b..66f7d1f 100644
--- a/src/components/CoverRow.vue
+++ b/src/components/CoverRow.vue
@@ -97,10 +97,17 @@ export default {
return new Date(item.publishTime).getFullYear();
if (this.subText === "artist")
return `
${item.artist.name}`;
- if (this.subText === "albumType+releaseYear")
- return `${item.size === 1 ? "Single" : "EP"} · ${new Date(
- item.publishTime
- ).getFullYear()}`;
+ if (this.subText === "albumType+releaseYear") {
+ let albumType = item.type;
+ if (item.type === "EP/Single") {
+ albumType = item.size === 1 ? "Single" : "EP";
+ } else if (item.type === "Single") {
+ albumType = "Single";
+ } else if (item.type === "专辑") {
+ albumType = "Album";
+ }
+ return `${albumType} · ${new Date(item.publishTime).getFullYear()}`;
+ }
if (this.subText === "appleMusic") return "by Apple Music";
},
},
diff --git a/src/views/album.vue b/src/views/album.vue
index d23cccb..4c9f472 100644
--- a/src/views/album.vue
+++ b/src/views/album.vue
@@ -56,7 +56,12 @@
-
More by {{ album.artist.name }}
+
+ More by
+ {{ album.artist.name }}
+
a.id !== this.album.id);
let realAlbums = moreAlbums.filter((a) => a.type === "专辑");
- let restItems = moreAlbums.filter((a) => a.type !== "专辑");
- return [...realAlbums, ...restItems].slice(0, 5);
+ let eps = moreAlbums.filter(
+ (a) => a.type === "EP" || (a.type === "EP/Single" && a.size > 1)
+ );
+ let restItems = moreAlbums.filter(
+ (a) =>
+ realAlbums.find((a1) => a1.id === a.id) === undefined &&
+ eps.find((a1) => a1.id === a.id) === undefined
+ );
+ return [...realAlbums, ...eps, ...restItems].slice(0, 5);
},
},
methods: {
@@ -161,7 +173,7 @@ export default {
});
// get more album by this artist
- getArtistAlbum({ id: this.album.artist.id, limit: 200 }).then(
+ getArtistAlbum({ id: this.album.artist.id, limit: 100 }).then(
(data) => {
this.moreAlbums = data.hotAlbums;
}