Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 22a629e6 编写于 作者: Z Zachary
浏览文件
操作

feat: add DetailSonglist component 

* Complete the search results Click to jump function
* Album page details add click to show more features
* You can scroll when you add too much details
上级 a8f74658
隐藏空白更改
内联 并排
Showing with 271 addition and 392 deletion
src/assets/css/fakeqqmusic.css
浏览文件 @ 22a629e6
......@@ -1121,13 +1121,6 @@ img .playlist__pic {
border: 1px solid #ddd;
z-index: 99;
}
.popup_data_detail__cont {
max-height: 400px;
font-size: 14px;
line-height: 22px;
margin: 30px 5px 30px 10px;
overflow-y: auto;
}
.popup_data_detail__cont p,
.popup_data_detail__tit {
margin: 0 24px 0 19px;
......
src/components/common/DetailInfoCard.vue
浏览文件 @ 22a629e6
......@@ -7,7 +7,7 @@
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
:src="obj.img"
:alt="obj.name"
:class="isSonger ? 'songer__photo' : ''"
:class="cardType == 'songer' ? 'songer__photo' : ''"
/>
<i class="data__cover_mask" v-if="cardType == 'album'"></i>
</span>
......
src/components/common/DetailSonglist.vue 0 → 100644
浏览文件 @ 22a629e6
<template>
<div class="mod_songlist">
<ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" />
</li>
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li>
<li class="songlist__header_album" v-if="listType == 'playlist'">专辑</li>
<li class="songlist__header_time">时长</li>
</ul>
<ul class="songlist__list">
<li v-for="(song, idx) in songs" :key="song.id">
<div
class="songlist__item"
:claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
>
<div class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</div>
<div class="songlist__number">{{ idx + 1 }}</div>
<div class="songlist__songname">
<span class="songlist__songname_txt">
<a :title="song.name" @click="gotoSongDeail(song.id)">
{{ song.name }}<span class="songlist__song_txt"></span>
</a>
</span>
<!-- mod list menu -->
<mod-list-menu :song="song" />
</div>
<div class="songlist__artist">
<a
class="singer_name"
:title="song.artistsText"
@click="gotoSongerDetail(song.artists[0].id)"
>
{{ song.artistsText }}
</a>
</div>
<div class="songlist__album" v-if="listType == 'playlist'">
<a
class="album_name"
:title="song.albumName"
@click="gotoAlbumDetail(song.albumId)"
>
{{ song.albumName }}
</a>
</div>
<div class="songlist__time">{{ song.durationText }}</div>
<div class="songlist__other"></div>
</div>
</li>
</ul>
</div>
</template>
<script>
import ModListMenu from "components/common/ModListMenu";
export default {
props: {
songs: {
type: Array,
default: [],
},
listType: {
type: String,
default: "",
},
},
methods: {
gotoSongDeail(id) {
if (id && id != 0)
this.$router.push({
path: "/musicLibrary/songDetail",
query: { id: id },
});
},
gotoSongerDetail(id) {
if (id && id != 0)
this.$router.push({
path: "/musicLibrary/songerDetail",
query: { id: id },
});
},
gotoAlbumDetail(id) {
if (id && id != 0)
this.$router.push({
path: "/musicLibrary/albumDetail",
query: { id: id },
});
},
},
components: {
ModListMenu,
},
};
</script>
<style scoped>
h1,
h2,
h3,
h4,
h5,
h6,
hr,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
margin-right: 0px;
padding: 0;
}
.songlist__header {
background-color: #fbfbfd;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
/*overwrite*/
.songlist__songname {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*overwrite*/
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
padding-left: 15px;
width: 25.5%;
box-sizing: border-box;
}
/*overwrite*/
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__time {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.songlist__item--even {
background-color: rgba(0, 0, 0, 0.01);
}
a:hover {
color: #31c27c;
}
</style>
src/components/common/SearchInput.vue
浏览文件 @ 22a629e6
......@@ -53,7 +53,32 @@ export default {
});
},
handleSelect(item) {
console.log("handleSelect", item);
if (item.id && item.id != 0) {
switch (item.type) {
case "歌曲":
this.$router.push({
path: "/musicLibrary/songDetail",
query: { id: item.id },
});
break;
case "歌手":
this.$router.push({
path: "/musicLibrary/songerDetail",
query: { id: item.id },
});
break;
case "专辑":
this.$router.push({
path: "/musicLibrary/albumDetail",
query: { id: item.id },
});
break;
default:
console.log(item.type);
}
} else {
console.log("handleSelect", item);
}
},
querySearchAsync(queryString, cb) {
console.log(queryString);
......
src/views/musicLibrary/AlbumDetail.vue
浏览文件 @ 22a629e6
......@@ -4,50 +4,7 @@
<div class="detail_layout">
<div class="detail_layout__main">
<div class="mod_songlist">
<ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" />
</li>
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li>
<li class="songlist__header_time">时长</li>
</ul>
<ul class="songlist__list" id="song_box">
<li v-for="(song, idx) in songs" :key="song.id">
<div
class="songlist__item"
:claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
>
<div class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</div>
<div class="songlist__number">{{ idx + 1 }}</div>
<div class="songlist__songname">
<!-- <i
class="songlist__icon songlist__icon_exclusive sprite"
title="独家"
></i> -->
<span class="songlist__songname_txt">
<a :title="song.name">{{ song.name }}</a>
</span>
<!-- mod list menu -->
<mod-list-menu :song="song" />
</div>
<div class="songlist__artist">
<a :title="song.artistsText" class="singer_name">{{
song.artistsText
}}</a>
</div>
<div class="songlist__time">{{ song.durationText }}</div>
<div class="songlist__other"></div>
</div>
</li>
</ul>
</div>
<detail-songlist :songs="songs" :listType="'album'" />
</div>
<div class="detail_layout__other">
......@@ -56,16 +13,7 @@
<div class="about__cont">
<p>{{ album.desc }}</p>
</div>
<!-- <a
href="javascript:;"
data-stat="y_new.album.moreinfo"
class="about__more"
data-left="0"
data-top="-187"
data-target="popup_data_detail"
style="display: "
>[更多]</a
> -->
<a class="about__more" @click="toggleShowMoreInfo">[更多]</a>
</div>
<div class="other_part">
......@@ -196,11 +144,30 @@
</div>
</div>
</div>
<div
class="popup_data_detail"
id="popup_data_detail"
data-aria="popup"
style="z-index: 2147483647"
:style="{ display: moreInfo ? '' : 'none' }"
v-if="album.desc"
>
<div class="popup_data_detail__cont">
<h3 class="popup_data_detail__tit">歌手简介</h3>
<p v-for="(line, idx) in album.desc.split('\n')" :key="idx">
{{ line }}
</p>
<p></p>
</div>
<i class="popup_data_detail__arrow"></i>
</div>
</div>
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import DetailSonglist from "components/common/DetailSonglist";
import ModListMenu from "components/common/ModListMenu";
import { getAlbum } from "api";
import { createSong, playSonglist, formatDate } from "common/utils";
......@@ -208,9 +175,10 @@ import { createSong, playSonglist, formatDate } from "common/utils";
export default {
data() {
return {
moreInfo: false,
id: this.$route.query.id,
album: {},
songs: {},
songs: [],
};
},
mounted() {
......@@ -219,7 +187,7 @@ export default {
methods: {
init() {
getAlbum(this.id).then((res) => {
console.log(res);
//console.log(res);
let ds = res.data;
let album = {
id: ds.album.id,
......@@ -233,7 +201,7 @@ export default {
publishTime: formatDate(ds.album.publishTime, "yy-MM-dd"),
};
this.album = album;
console.log(album);
//console.log(album);
this.songs = ds.songs.map(
({ id, name, ar, dt, al, mv, publishTime }) => {
return createSong({
......@@ -250,6 +218,9 @@ export default {
console.log(this.songs);
});
},
toggleShowMoreInfo() {
this.moreInfo = !this.moreInfo;
},
playAll() {
playSonglist(this.songs);
},
......@@ -261,6 +232,7 @@ export default {
},
components: {
DetailInfoCard,
DetailSonglist,
ModListMenu,
},
};
......@@ -305,54 +277,22 @@ ul {
margin-right: 0px;
padding: 0;
}
.songlist__header {
background-color: #fbfbfd;
}
.songlist__header {
height: 50px;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.01);
color: #999;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
.about__tit {
font-size: 20px;
font-weight: 400;
line-height: 46px;
}
.songlist__songname {
line-height: 50px;
height: 50px;
.about__cont {
max-height: 88px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
padding-left: 15px;
width: 25.5%;
box-sizing: border-box;
font-size: 14.3px;
}
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__time {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.popup_data_detail__cont {
max-height: 400px;
font-size: 14px;
}
.songlist__song_txt,
.songlist__time {
color: #999;
line-height: 22px;
margin: 30px 5px 30px 10px;
overflow-y: auto;
}
</style>
src/views/musicLibrary/PlaylistDetail.vue
浏览文件 @ 22a629e6
<template>
<div class="playlist-main">
<detail-info-card
:obj="playlist"
:cardType="'playlist'"
@btnClick="cardClick"
/>
<detail-info-card :obj="playlist" :cardType="'pl'" @btnClick="cardClick" />
<div class="detail_layout">
<div class="detail_layout__main js_main">
<div class="mod_songlist">
<ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" />
</li>
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li>
<li class="songlist__header_album">专辑</li>
<li class="songlist__header_time">时长</li>
</ul>
<ul class="songlist__list">
<li v-for="(song, idx) in songs" :key="song.id">
<div
onmouseover="this.className=(this.className+' songlist__item--hover')"
onmouseout="this.className=this.className.replace(/ songlist__item--hover/, '')"
class="songlist__item"
:claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
>
<div class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</div>
<div class="songlist__number">{{ idx + 1 }}</div>
<div class="songlist__songname">
<span class="songlist__songname_txt"
><a class="js_song" :title="song.name"
>{{ song.name
}}<span class="songlist__song_txt"></span></a
></span>
<!-- mod list menu -->
<mod-list-menu :song="song" />
</div>
<div class="songlist__artist" title="Dan Gibson's Solitudes">
<a class="singer_name" :title="song.artistsText">{{
song.artistsText
}}</a>
</div>
<div class="songlist__album">
<a class="album_name" :title="song.albumName">{{
song.albumName
}}</a>
</div>
<div class="songlist__time">{{ song.durationText }}</div>
<div class="songlist__other"></div>
<a
href="javascript:;"
class="songlist__delete js_delete"
data-confirm="1"
title="删除"
><span class="icon_txt">删除</span></a
>
</div>
</li>
</ul>
</div>
<div class="detail_layout__main">
<detail-songlist :songs="songs" :listType="'playlist'" />
</div>
<div class="detail_layout__other">
<div class="mod_about js_box" id="album_desc" style="display: ">
<h3 class="about__tit">简介</h3>
......@@ -102,6 +43,7 @@
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import DetailSonglist from "components/common/DetailSonglist";
import ModListMenu from "components/common/ModListMenu";
import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
import { processCount, createSong, playSonglist } from "common/utils";
......@@ -138,6 +80,7 @@ export default {
let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
console.log(res.data.songs);
let songs = res.data.songs.map(({ id, name, al, ar, mv, dt }) => {
return createSong({
id,
......@@ -146,11 +89,11 @@ export default {
duration: dt,
mvId: mv,
albumName: al.name,
albumId: al.id,
img: al.picUrl,
});
});
this.songs = songs;
console.log(songs);
});
});
},
......@@ -163,6 +106,7 @@ export default {
},
components: {
DetailInfoCard,
DetailSonglist,
ModListMenu,
},
};
......@@ -184,121 +128,4 @@ export default {
.mod_songlist {
padding-bottom: 60px;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
.songlist__header {
height: 50px;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.01);
color: #999;
}
.songlist__header {
background-color: #fbfbfd;
}
.songlist__header_name,
.songlist__songname {
float: left;
width: 47.685185%;
position: relative;
white-space: normal;
}
.songlist__header_name,
.songlist__songname {
width: 54%;
}
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
padding-left: 15px;
width: 25.5%;
box-sizing: border-box;
}
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
width: 20%;
}
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
padding-left: 15px;
width: 25.5%;
box-sizing: border-box;
}
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
width: 20%;
}
.songlist__header_time,
.songlist__time {
position: absolute;
top: 0;
right: 38px;
width: 50px;
}
.songlist__list {
overflow: hidden;
clear: both;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
.songlist__item {
clear: both;
font-size: 0;
overflow: hidden;
}
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__time {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.songlist__number {
position: absolute;
top: 0;
left: 10px;
color: #999;
width: 36px;
}
.songlist__songname {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.songlist__header_name,
.songlist__songname {
float: left;
width: 47.685185%;
position: relative;
white-space: normal;
}
.songlist__header_name,
.songlist__songname {
width: 54%;
}
</style>
src/views/musicLibrary/SongerDetail.vue
浏览文件 @ 22a629e6
......@@ -12,59 +12,12 @@
<div class="part__hd">
<h2 class="part__tit">热门歌曲</h2>
<a
href="//y.qq.com/n/yqq/singer/001xvjTU1ICL8Z.html#tab=song&amp;"
class="part__more js_goto_tab"
>
<a class="part__more js_goto_tab">
全部<i class="icon_part_arrow sprite"></i>
</a>
</div>
<div class="mod_songlist">
<ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</li>
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_album">专辑</li>
<li class="songlist__header_time">时长</li>
</ul>
<ul class="songlist__list">
<li v-for="(song, idx) in hotSongs" :key="song.id">
<div
class="songlist__item"
:class="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
>
<div class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</div>
<div class="songlist__number">{{ idx + 1 }}</div>
<div class="songlist__songname">
<!-- <i
class="songlist__icon songlist__icon_exclusive sprite"
title="独家"
></i> -->
<span class="songlist__songname_txt">
<a class="js_song" :title="song.name">
{{ song.name }}
<span class="songlist__song_txt"></span>
</a>
</span>
<!-- mod list menu -->
<mod-list-menu :song="song" />
</div>
<div class="songlist__album">
<a :title="song.albumName">{{ song.albumName }}</a>
</div>
<div class="songlist__time">{{ song.durationText }}</div>
<div class="songlist__other"></div>
</div>
</li>
</ul>
</div>
<detail-songlist :songs="hotSongs" :listType="'songer'" />
</div>
<div class="mod_part" v-if="albums.length > 0">
......@@ -106,11 +59,9 @@
</span>
</h4>
<div class="playlist__other">{{ album.publishTime }}</div>
<a
href="javascript:;"
class="btn_operate_menu js_albumlist_more"
><span class="icon_txt">更多</span></a
>
<a class="btn_operate_menu js_albumlist_more">
<span class="icon_txt">更多</span>
</a>
</div>
</li>
</ul>
......@@ -120,10 +71,9 @@
<div class="mod_part" v-if="mvs.length > 0">
<div class="part__hd">
<h2 class="part__tit">MV</h2>
<a class="part__more js_goto_tab"
>全部<i class="icon_part_arrow sprite"></i
></a>
<a class="part__more js_goto_tab">
全部<i class="icon_part_arrow sprite"></i>
</a>
</div>
<div class="mod_mv">
<ul class="mv_list__list" id="mvlist">
......@@ -204,7 +154,6 @@
>
<div class="popup_data_detail__cont">
<h3 class="popup_data_detail__tit">歌手简介</h3>
<p v-for="(line, idx) in songer.desc.split('\n')" :key="idx">
{{ line }}
</p>
......@@ -217,7 +166,7 @@
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import ModListMenu from "components/common/ModListMenu";
import DetailSonglist from "components/common/DetailSonglist";
import {
getUserDetail,
getSongerDetail,
......@@ -348,7 +297,7 @@ export default {
},
components: {
DetailInfoCard,
ModListMenu,
DetailSonglist,
},
};
</script>
......@@ -413,46 +362,6 @@ ul {
.data__actions {
bottom: 30px;
}
.songlist__header {
background-color: #fbfbfd;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
/*overwrite*/
.songlist__songname {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*overwrite*/
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
padding-left: 15px;
width: 25.5%;
box-sizing: border-box;
}
/*overwrite*/
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__time {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.data_statistic__item {
display: inline-block;
border-right: solid 1px #c9c9c9;
......@@ -509,6 +418,16 @@ ul {
padding: 25px 0;
overflow: hidden;
}
.singer_list__title {
font-size: 16px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
zoom: 1;
*width: 100%;
margin: 20px 30px 4px;
}
.mod_mv {
height: 183px;
......@@ -518,4 +437,11 @@ ul {
top: 128px;
right: 85px;
}
.popup_data_detail__cont {
max-height: 250px;
font-size: 14px;
line-height: 22px;
margin: 30px 5px 30px 10px;
overflow-y: auto;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或