fix some ui,and kugou api

master
Janx 2 years ago
parent 853ae0bc64
commit f082b887ef

@ -1,4 +1,9 @@
export default { export default {
server: {
netease: '网易云音乐',
tencent: 'QQ音乐',
kugou: '酷狗音乐',
},
common: { common: {
play: '播放', play: '播放',
songs: '首歌', songs: '首歌',

@ -60,6 +60,7 @@
> >
</ButtonTwoTone> </ButtonTwoTone>
<ButtonTwoTone <ButtonTwoTone
v-if="!$route.query.server"
icon-class="more" icon-class="more"
:icon-button="true" :icon-button="true"
:horizontal-padding="0" :horizontal-padding="0"
@ -148,6 +149,7 @@ import { mapMutations, mapActions, mapState } from 'vuex';
import { getArtistAlbum } from '@/api/artist'; import { getArtistAlbum } from '@/api/artist';
import { getTrackDetail } from '@/api/track'; import { getTrackDetail } from '@/api/track';
import { getAlbum, albumDynamicDetail, likeAAlbum } from '@/api/album'; import { getAlbum, albumDynamicDetail, likeAAlbum } from '@/api/album';
import { getPlaylistDetail } from '@/api/playlist';
import locale from '@/locale'; import locale from '@/locale';
import { splitSoundtrackAlbumTitle, splitAlbumTitle } from '@/utils/common'; import { splitSoundtrackAlbumTitle, splitAlbumTitle } from '@/utils/common';
import NProgress from 'nprogress'; import NProgress from 'nprogress';
@ -236,8 +238,28 @@ export default {
...mapMutations(['appendTrackToPlayerList']), ...mapMutations(['appendTrackToPlayerList']),
...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']), ...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']),
playAlbumByID(id, trackID = 'first') { playAlbumByID(id, trackID = 'first') {
if (this.$route.query.server) {
this.playThisListByTrack(id);
return;
}
this.$store.state.player.playAlbumByID(id, trackID); this.$store.state.player.playAlbumByID(id, trackID);
}, },
playThisListByTrack(id) {
// this.showToast('');
getPlaylistDetail(id, true, this.$route.query.server).then(data => {
console.log(data);
let playlist = data.playlist;
let tracks = playlist.tracks.filter(_track => {
return _track.playable == 1;
});
this.$store.state.player.replacePlaylist(
tracks,
tracks[0],
'artist',
tracks[0]
);
});
},
likeAlbum(toast = false) { likeAlbum(toast = false) {
if (!isAccountLoggedIn()) { if (!isAccountLoggedIn()) {
this.showToast(locale.t('toast.needToLogin')); this.showToast(locale.t('toast.needToLogin'));

@ -4,9 +4,16 @@
<span <span
><div class="dropdown"> ><div class="dropdown">
<font class="dropbtn" <font class="dropbtn"
>QQ音乐 <svg-icon icon-class="arrow-down" >{{ serverNameTable[server] }} <svg-icon icon-class="arrow-down"
/></font> /></font>
<div class="dropdown-content"> </div> <div class="dropdown-content">
<button
v-for="(val, key, i) in serverNameTable"
:key="{ val: val, i: i }"
@click="tranSearchType(undefined, key)"
>{{ serverNameTable[key] }}</button
>
</div>
</div> </div>
搜索 搜索
<div class="dropdown"> <div class="dropdown">
@ -17,7 +24,7 @@
<button <button
v-for="(val, key, i) in typeNameTable" v-for="(val, key, i) in typeNameTable"
:key="{ val: val, i: i }" :key="{ val: val, i: i }"
@click="tranSearchType(key)" @click="tranSearchType(key, undefined)"
>{{ typeNameTable[key] }}</button >{{ typeNameTable[key] }}</button
> >
</div> </div>
@ -81,6 +88,9 @@ export default {
type() { type() {
return camelCase(this.$route.query.type || 'tracks'); return camelCase(this.$route.query.type || 'tracks');
}, },
server() {
return camelCase(this.$route.query.server || 'tencent');
},
typeNameTable() { typeNameTable() {
return { return {
musicVideos: locale.t('search.mv'), musicVideos: locale.t('search.mv'),
@ -90,6 +100,13 @@ export default {
playlists: locale.t('search.playlist'), playlists: locale.t('search.playlist'),
}; };
}, },
serverNameTable() {
return {
netease: locale.t('server.netease'),
tencent: locale.t('server.tencent'),
kugou: locale.t('server.kugou'),
};
},
}, },
watch: { watch: {
$route: { $route: {
@ -112,8 +129,13 @@ export default {
this.player.replacePlaylist(tracks, tracks[0], 'artist', tracks[0]); this.player.replacePlaylist(tracks, tracks[0], 'artist', tracks[0]);
}); });
}, },
tranSearchType(type) { tranSearchType(type, server) {
this.$router.replace({ query: { ...this.$route.query, type } }); if (type) {
this.$router.replace({ query: { ...this.$route.query, type } });
}
if (server) {
this.$router.replace({ query: { ...this.$route.query, server } });
}
}, },
playTrack(id) { playTrack(id) {
this.player._replaceCurrentTrackByTrack(id, true); this.player._replaceCurrentTrackByTrack(id, true);
@ -231,11 +253,12 @@ export default {
} }
} }
.dropdown-content { .dropdown-content {
pointer-events: none;
font-size: 1em; font-size: 1em;
opacity: 0; opacity: 0;
transition: 0.5s; transition: 0.5s;
position: absolute; position: absolute;
background-color: #ffffff; background-color: var(--color-body-bg);
width: 100%; width: 100%;
padding: 8px; padding: 8px;
right: 0; right: 0;
@ -262,7 +285,11 @@ export default {
} }
.dropdown:hover, .dropdown:hover,
.dropdown:focus { .dropdown:focus {
.dropdown-content:hover {
pointer-events: auto;
}
.dropdown-content { .dropdown-content {
pointer-events: auto;
opacity: 1; opacity: 1;
transition: 0.5s; transition: 0.5s;
} }
@ -281,7 +308,7 @@ button {
color: var(--color-primary); color: var(--color-primary);
} }
&:hover { &:hover {
transform: scale(1.12); transform: scale(1.08);
} }
&:active { &:active {
transform: scale(0.96); transform: scale(0.96);

@ -68,6 +68,7 @@
> >
</ButtonTwoTone> </ButtonTwoTone>
<ButtonTwoTone <ButtonTwoTone
v-if="!$route.query.server"
icon-class="more" icon-class="more"
:icon-button="true" :icon-button="true"
:horizontal-padding="0" :horizontal-padding="0"
@ -420,6 +421,10 @@ export default {
...mapMutations(['appendTrackToPlayerList']), ...mapMutations(['appendTrackToPlayerList']),
...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']), ...mapActions(['playFirstTrackOnList', 'playTrackOnListByID', 'showToast']),
playPlaylistByID(trackID = 'first') { playPlaylistByID(trackID = 'first') {
if (this.$route.query.server) {
this.playThisListByTrack(this.playlist.id);
return;
}
let trackIDs = this.playlist.trackIds.map(t => t.id); let trackIDs = this.playlist.trackIds.map(t => t.id);
this.$store.state.player.replacePlaylist( this.$store.state.player.replacePlaylist(
trackIDs, trackIDs,
@ -428,6 +433,22 @@ export default {
trackID trackID
); );
}, },
playThisListByTrack(id) {
this.showToast('正在进行其他平台播放');
getPlaylistDetail(id, true, this.$route.query.server).then(data => {
console.log(data);
let playlist = data.playlist;
let tracks = playlist.tracks.filter(_track => {
return _track.playable == 1;
});
this.$store.state.player.replacePlaylist(
tracks,
tracks[0],
'artist',
tracks[0]
);
});
},
likePlaylist(toast = false) { likePlaylist(toast = false) {
if (!isAccountLoggedIn()) { if (!isAccountLoggedIn()) {
this.showToast(locale.t('toast.needToLogin')); this.showToast(locale.t('toast.needToLogin'));

Loading…
Cancel
Save