提交 a73f0849 编写于 作者: Z Zachary

feat: search result can play

* imporve components (DetailLists, ModListMenu)
上级 a651d824
...@@ -1049,6 +1049,21 @@ $black: #000; ...@@ -1049,6 +1049,21 @@ $black: #000;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mod_list_menu {
position: absolute;
left: 44%;
left: -9999px\9;
top: 19px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.playlist__item--current .mod_list_menu,
.playlist__item--hover .mod_list_menu {
opacity: 1;
left: 44%;
pointer-events: inherit;
}
} }
.mod_lyric_list, .mod_lyric_list,
......
...@@ -7,7 +7,13 @@ ...@@ -7,7 +7,13 @@
<li class="playlist__header_other">{{ titles[kind][2] }}</li> <li class="playlist__header_other">{{ titles[kind][2] }}</li>
</ul> </ul>
<ul class="playlist__list"> <ul class="playlist__list">
<li class="playlist__item" v-for="l in lists" :key="l.id"> <li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
v-for="l in lists"
:key="l.id"
>
<div class="playlist__cover" style="visibility: visible"> <div class="playlist__cover" style="visibility: visible">
<a class="js_album" <a class="js_album"
><img ><img
...@@ -20,9 +26,27 @@ ...@@ -20,9 +26,27 @@
</div> </div>
<h4 class="playlist__title"> <h4 class="playlist__title">
<span class="playlist__title_txt"> <span class="playlist__title_txt">
<a class="js_album" :title="l.name">{{ l.name }}</a> <a
class="js_album"
v-if="kind == 0"
:title="l.name"
@click="gotoAlbumDetail(l.id)"
>
{{ l.name }}
</a>
<a
class="js_album"
v-else-if="kind == 1"
:title="l.name"
@click="gotoPlaylistDetail(l.id)"
>
{{ l.name }}
</a>
</span> </span>
</h4> </h4>
<!-- 功能条 -->
<mod-list-menu :id="l.id" :kind="kind + 1" />
<div class="playlist__author"> <div class="playlist__author">
<a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{ <a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{
l.artistsText l.artistsText
...@@ -44,6 +68,9 @@ ...@@ -44,6 +68,9 @@
</template> </template>
<script> <script>
import ModListMenu from "components/common/ModListMenu";
import { gotoAlbumDetail, gotoPlaylistDetail } from "common/utils";
export default { export default {
data() { data() {
return { return {
...@@ -61,116 +88,18 @@ export default { ...@@ -61,116 +88,18 @@ export default {
// 0: album, 1: playlist // 0: album, 1: playlist
kind: { default: 0 }, kind: { default: 0 },
}, },
methods: {
gotoAlbumDetail,
gotoPlaylistDetail,
},
components: {
ModListMenu,
},
}; };
</script> </script>
<style scoped> <style scoped>
.mod_playlist_text { a:hover {
zoom: 1; color: #31c27c;
font-size: 14px;
}
.mod_lyric_list,
.mod_mv_list,
.mod_playlist_text,
.mod_songlist {
padding-bottom: 40px;
}
.mod_playlist_text .playlist__header {
height: 50px;
line-height: 50px;
background-color: #fbfbfd;
color: #999;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author,
.mod_playlist_text .playlist__header_name,
.mod_playlist_text .playlist__header_number,
.mod_playlist_text .playlist__number {
float: left;
padding-left: 20px;
}
.mod_playlist_text .playlist__header_name {
width: 57%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
width: 7.5%;
}
.mod_playlist_text .playlist__header_other,
.mod_playlist_text .playlist__other {
float: right;
padding-right: 20px;
text-align: right;
}
.mod_playlist_text .playlist__item {
position: relative;
height: 70px;
line-height: 70px;
zoom: 1;
overflow: hidden;
clear: both;
font-size: 0;
}
.mod_playlist_text .playlist__cover {
float: left;
width: 50px;
height: 50px;
overflow: hidden;
margin-top: 10px;
padding-left: 20px;
}
.mod_playlist_text .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist_text .playlist__pic {
display: block;
width: 100%;
min-height: 50px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.mod_playlist_text .playlist__title {
width: 52.66667%;
font-weight: 400;
text-indent: 15px;
overflow: hidden;
}
.mod_playlist_text .playlist__title_txt {
float: left;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__count,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__title {
float: left;
height: 70px;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__header_author {
width: 30%;
}
.mod_playlist_text .playlist__author,
.mod_playlist_text .playlist__number,
.mod_playlist_text .playlist__other,
.mod_playlist_text .playlist__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
} }
</style> </style>
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
class="list_menu__item list_menu__down js_down" class="list_menu__item list_menu__down js_down"
title="下载" title="下载"
aria-haspopup="true" aria-haspopup="true"
v-if="kind == 0"
> >
<i class="list_menu__icon_down"></i> <i class="list_menu__icon_down"></i>
<span class="icon_txt">下载</span> <span class="icon_txt">下载</span>
...@@ -36,20 +37,55 @@ ...@@ -36,20 +37,55 @@
</template> </template>
<script> <script>
import { playTheSong } from "common/utils"; import { playTheSong, playSonglist, createSongs } from "common/utils";
import { getPlaylistDetial, getSongDetail, getAlbum } from "api";
export default { export default {
props: { props: {
song: { song: {
type: Object, type: Object,
default: {}, default: {},
}, },
id: { default: 0 },
// 0: song, 1: album , 2: playlist
kind: { default: 0 },
}, },
methods: { methods: {
play() { play() {
if (this.song) { switch (this.kind) {
playTheSong(this.song); case 0:
if (this.song) {
playTheSong(this.song);
}
console.log(this.song);
break;
case 1:
this.playAlbum(this.id);
break;
case 2:
this.playTheList(this.id);
break;
default:
console.log(this.kind);
} }
console.log(this.song); },
playTheList(listId) {
getPlaylistDetial(listId).then((res) => {
let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
let songs = createSongs(res.data.songs);
//console.log(songs);
playSonglist(songs);
});
});
},
playAlbum(id) {
getAlbum(this.id).then((res) => {
let ds = res.data;
let songs = createSongs(ds.songs);
console.log(this.songs);
playSonglist(songs);
});
}, },
}, },
}; };
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册