mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-18 06:07:48 +00:00
chore: format codes
This commit is contained in:
qier222
parent
6922c716e2
commit
9351f6bc89
73 changed files with 2321 additions and 2321 deletions
|
|
@ -1,46 +1,46 @@
|
|||
<template>
|
||||
<div class="artist" v-show="show">
|
||||
<div v-show="show" class="artist">
|
||||
<div class="artist-info">
|
||||
<div class="head">
|
||||
<img :src="artist.img1v1Url | resizeImage(1024)" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">{{ artist.name }}</div>
|
||||
<div class="artist">{{ $t("artist.artist") }}</div>
|
||||
<div class="artist">{{ $t('artist.artist') }}</div>
|
||||
<div class="statistics">
|
||||
<a @click="scrollTo('popularTracks')"
|
||||
>{{ artist.musicSize }} {{ $t("common.songs") }}</a
|
||||
>{{ artist.musicSize }} {{ $t('common.songs') }}</a
|
||||
>
|
||||
·
|
||||
<a @click="scrollTo('seeMore', 'start')"
|
||||
>{{ artist.albumSize }} {{ $t("artist.withAlbums") }}</a
|
||||
>{{ artist.albumSize }} {{ $t('artist.withAlbums') }}</a
|
||||
>
|
||||
·
|
||||
<a @click="scrollTo('mvs')"
|
||||
>{{ artist.mvSize }} {{ $t("artist.videos") }}</a
|
||||
>{{ artist.mvSize }} {{ $t('artist.videos') }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<ButtonTwoTone @click.native="playPopularSongs()" :iconClass="`play`">
|
||||
{{ $t("common.play") }}
|
||||
<ButtonTwoTone :icon-class="play" @click.native="playPopularSongs()">
|
||||
{{ $t('common.play') }}
|
||||
</ButtonTwoTone>
|
||||
<ButtonTwoTone @click.native="followArtist" color="grey">
|
||||
<span v-if="artist.followed">{{ $t("artist.following") }}</span>
|
||||
<span v-else>{{ $t("artist.follow") }}</span>
|
||||
<ButtonTwoTone color="grey" @click.native="followArtist">
|
||||
<span v-if="artist.followed">{{ $t('artist.following') }}</span>
|
||||
<span v-else>{{ $t('artist.follow') }}</span>
|
||||
</ButtonTwoTone>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="latest-release">
|
||||
<div class="section-title">{{ $t("artist.latestRelease") }}</div>
|
||||
<div class="section-title">{{ $t('artist.latestRelease') }}</div>
|
||||
<div class="release">
|
||||
<div class="container">
|
||||
<Cover
|
||||
:imageUrl="latestRelease.picUrl | resizeImage"
|
||||
type="album"
|
||||
:id="latestRelease.id"
|
||||
:fixedSize="128"
|
||||
:playButtonSize="30"
|
||||
:image-url="latestRelease.picUrl | resizeImage"
|
||||
type="album"
|
||||
:fixed-size="128"
|
||||
:play-button-size="30"
|
||||
/>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
|
|
@ -53,60 +53,60 @@
|
|||
</div>
|
||||
<div class="type">
|
||||
{{ latestRelease.type | formatAlbumType(latestRelease) }} ·
|
||||
{{ latestRelease.size }} {{ $t("common.songs") }}
|
||||
{{ latestRelease.size }} {{ $t('common.songs') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="popular-tracks" id="popularTracks">
|
||||
<div class="section-title">{{ $t("artist.popularSongs") }}</div>
|
||||
<div id="popularTracks" class="popular-tracks">
|
||||
<div class="section-title">{{ $t('artist.popularSongs') }}</div>
|
||||
<TrackList
|
||||
:tracks="popularTracks.slice(0, showMorePopTracks ? 24 : 12)"
|
||||
:type="'tracklist'"
|
||||
/>
|
||||
|
||||
<div class="show-more" id="seeMore">
|
||||
<div id="seeMore" class="show-more">
|
||||
<button @click="showMorePopTracks = !showMorePopTracks">
|
||||
<span v-show="!showMorePopTracks">{{ $t("artist.showMore") }}</span>
|
||||
<span v-show="showMorePopTracks">{{ $t("artist.showLess") }}</span>
|
||||
<span v-show="!showMorePopTracks">{{ $t('artist.showMore') }}</span>
|
||||
<span v-show="showMorePopTracks">{{ $t('artist.showLess') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="albums" id="albums" v-if="albums.length !== 0">
|
||||
<div class="section-title">{{ $t("artist.albums") }}</div>
|
||||
<div v-if="albums.length !== 0" id="albums" class="albums">
|
||||
<div class="section-title">{{ $t('artist.albums') }}</div>
|
||||
<CoverRow
|
||||
:type="'album'"
|
||||
:items="albums"
|
||||
:subText="'releaseYear'"
|
||||
:showPlayButton="true"
|
||||
:sub-text="'releaseYear'"
|
||||
:show-play-button="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mvs" id="mvs" v-if="mvs.length !== 0">
|
||||
<div v-if="mvs.length !== 0" id="mvs" class="mvs">
|
||||
<div class="section-title"
|
||||
>MVs
|
||||
<router-link v-show="hasMoreMV" :to="`/artist/${this.artist.id}/mv`">{{
|
||||
$t("home.seeMore")
|
||||
$t('home.seeMore')
|
||||
}}</router-link>
|
||||
</div>
|
||||
<MvRow :mvs="mvs" subtitle="publishTime" />
|
||||
</div>
|
||||
<div class="eps" v-if="eps.length !== 0">
|
||||
<div class="section-title">{{ $t("artist.EPsSingles") }}</div>
|
||||
<div v-if="eps.length !== 0" class="eps">
|
||||
<div class="section-title">{{ $t('artist.EPsSingles') }}</div>
|
||||
<CoverRow
|
||||
:type="'album'"
|
||||
:items="eps"
|
||||
:subText="'albumType+releaseYear'"
|
||||
:showPlayButton="true"
|
||||
:sub-text="'albumType+releaseYear'"
|
||||
:show-play-button="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="similar-artists" v-if="similarArtists.length !== 0">
|
||||
<div v-if="similarArtists.length !== 0" class="similar-artists">
|
||||
<div class="section-title">相似艺人</div>
|
||||
<CoverRow
|
||||
type="artist"
|
||||
:columnNumber="6"
|
||||
:column-number="6"
|
||||
gap="36px 28px"
|
||||
:items="similarArtists.slice(0, 12)"
|
||||
/>
|
||||
|
|
@ -115,42 +115,48 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapActions, mapState } from "vuex";
|
||||
import { mapMutations, mapActions, mapState } from 'vuex';
|
||||
import {
|
||||
getArtist,
|
||||
getArtistAlbum,
|
||||
artistMv,
|
||||
followAArtist,
|
||||
similarArtists,
|
||||
} from "@/api/artist";
|
||||
import { isAccountLoggedIn } from "@/utils/auth";
|
||||
import NProgress from "nprogress";
|
||||
} from '@/api/artist';
|
||||
import { isAccountLoggedIn } from '@/utils/auth';
|
||||
import NProgress from 'nprogress';
|
||||
|
||||
import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
|
||||
import TrackList from "@/components/TrackList.vue";
|
||||
import CoverRow from "@/components/CoverRow.vue";
|
||||
import Cover from "@/components/Cover.vue";
|
||||
import MvRow from "@/components/MvRow.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';
|
||||
import MvRow from '@/components/MvRow.vue';
|
||||
|
||||
export default {
|
||||
name: "Artist",
|
||||
name: 'Artist',
|
||||
components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow },
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
NProgress.start();
|
||||
this.artist.img1v1Url =
|
||||
'https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg';
|
||||
this.loadData(to.params.id, next);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
artist: {
|
||||
img1v1Url:
|
||||
"https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg",
|
||||
'https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg',
|
||||
},
|
||||
popularTracks: [],
|
||||
albumsData: [],
|
||||
latestRelease: {
|
||||
picUrl: "",
|
||||
picUrl: '',
|
||||
publishTime: 0,
|
||||
id: 0,
|
||||
name: "",
|
||||
type: "",
|
||||
size: "",
|
||||
name: '',
|
||||
type: '',
|
||||
size: '',
|
||||
},
|
||||
showMorePopTracks: false,
|
||||
mvs: [],
|
||||
|
|
@ -159,73 +165,16 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["player"]),
|
||||
...mapState(['player']),
|
||||
albums() {
|
||||
return this.albumsData.filter((a) => a.type === "专辑");
|
||||
return this.albumsData.filter(a => a.type === '专辑');
|
||||
},
|
||||
eps() {
|
||||
return this.albumsData.filter((a) =>
|
||||
["EP/Single", "EP", "Single"].includes(a.type)
|
||||
return this.albumsData.filter(a =>
|
||||
['EP/Single', 'EP', 'Single'].includes(a.type)
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["appendTrackToPlayerList"]),
|
||||
...mapActions(["playFirstTrackOnList", "playTrackOnListByID"]),
|
||||
loadData(id, next = undefined) {
|
||||
getArtist(id).then((data) => {
|
||||
this.artist = data.artist;
|
||||
this.popularTracks = data.hotSongs;
|
||||
if (next !== undefined) next();
|
||||
NProgress.done();
|
||||
this.show = true;
|
||||
});
|
||||
getArtistAlbum({ id: id, limit: 200 }).then((data) => {
|
||||
this.albumsData = data.hotAlbums;
|
||||
this.latestRelease = data.hotAlbums[0];
|
||||
});
|
||||
artistMv({ id }).then((data) => {
|
||||
this.mvs = data.mvs;
|
||||
this.hasMoreMV = data.hasMore;
|
||||
});
|
||||
similarArtists(id).then((data) => {
|
||||
this.similarArtists = data.artists;
|
||||
});
|
||||
},
|
||||
goToAlbum(id) {
|
||||
this.$router.push({
|
||||
name: "album",
|
||||
params: { id },
|
||||
});
|
||||
},
|
||||
playPopularSongs(trackID = "first") {
|
||||
let trackIDs = this.popularTracks.map((t) => t.id);
|
||||
this.$store.state.player.replacePlaylist(
|
||||
trackIDs,
|
||||
this.artist.id,
|
||||
"artist",
|
||||
trackID
|
||||
);
|
||||
},
|
||||
followArtist() {
|
||||
if (!isAccountLoggedIn()) {
|
||||
this.showToast("此操作需要登录网易云账号");
|
||||
return;
|
||||
}
|
||||
followAArtist({
|
||||
id: this.artist.id,
|
||||
t: this.artist.followed ? 0 : 1,
|
||||
}).then((data) => {
|
||||
if (data.code === 200) this.artist.followed = !this.artist.followed;
|
||||
});
|
||||
},
|
||||
scrollTo(div, block = "center") {
|
||||
document.getElementById(div).scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block,
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.loadData(this.$route.params.id);
|
||||
},
|
||||
|
|
@ -238,11 +187,62 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
NProgress.start();
|
||||
this.artist.img1v1Url =
|
||||
"https://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg";
|
||||
this.loadData(to.params.id, next);
|
||||
methods: {
|
||||
...mapMutations(['appendTrackToPlayerList']),
|
||||
...mapActions(['playFirstTrackOnList', 'playTrackOnListByID']),
|
||||
loadData(id, next = undefined) {
|
||||
getArtist(id).then(data => {
|
||||
this.artist = data.artist;
|
||||
this.popularTracks = data.hotSongs;
|
||||
if (next !== undefined) next();
|
||||
NProgress.done();
|
||||
this.show = true;
|
||||
});
|
||||
getArtistAlbum({ id: id, limit: 200 }).then(data => {
|
||||
this.albumsData = data.hotAlbums;
|
||||
this.latestRelease = data.hotAlbums[0];
|
||||
});
|
||||
artistMv({ id }).then(data => {
|
||||
this.mvs = data.mvs;
|
||||
this.hasMoreMV = data.hasMore;
|
||||
});
|
||||
similarArtists(id).then(data => {
|
||||
this.similarArtists = data.artists;
|
||||
});
|
||||
},
|
||||
goToAlbum(id) {
|
||||
this.$router.push({
|
||||
name: 'album',
|
||||
params: { id },
|
||||
});
|
||||
},
|
||||
playPopularSongs(trackID = 'first') {
|
||||
let trackIDs = this.popularTracks.map(t => t.id);
|
||||
this.$store.state.player.replacePlaylist(
|
||||
trackIDs,
|
||||
this.artist.id,
|
||||
'artist',
|
||||
trackID
|
||||
);
|
||||
},
|
||||
followArtist() {
|
||||
if (!isAccountLoggedIn()) {
|
||||
this.showToast('此操作需要登录网易云账号');
|
||||
return;
|
||||
}
|
||||
followAArtist({
|
||||
id: this.artist.id,
|
||||
t: this.artist.followed ? 0 : 1,
|
||||
}).then(data => {
|
||||
if (data.code === 200) this.artist.followed = !this.artist.followed;
|
||||
});
|
||||
},
|
||||
scrollTo(div, block = 'center') {
|
||||
document.getElementById(div).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue