Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

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

提交 203ee223 编写于 作者: Z Zachary
浏览文件
操作

feat: add songer detail page.

上级 0a38dd10
隐藏空白更改
内联 并排
Showing with 997 addition and 549 deletion
src/api/songer.js
浏览文件 @ 203ee223
......@@ -60,3 +60,18 @@ export const getSongers = (initial, type, area, page) => {
};
return requset.get("/artist/list", { params: params });
};
export const getSongerTop50 = id => requset.get(`/artist/top/song?id=${id}`);
export const getSongerAllSong = id => requset.get(`/artist/songs?id=${id}`);
export const getSongerDesc = id => requset.get(`/artist/desc?id=${id}`);
export const getSongerDetail = id => requset.get(`/artist/detail?id=${id}`);
export const getSimiSongers = id => requset.get(`/simi/artist?id=${id}`);
export const getSongerAlbums = params =>
requset.get(`/artist/album`, { params: params });
export const getSongerMvs = id => requset.get(`/artist/mv?id=${id}`);
src/assets/css/base.css
浏览文件 @ 203ee223
......@@ -2,6 +2,7 @@ body,
html {
padding: 0;
margin: 0;
line-height: 1.5;
}
a,
......
src/assets/css/fakeqqmusic.css
浏览文件 @ 203ee223
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn_green {
border: 1px solid #31c27c;
background-color: #31c27c;
color: #fff;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn_green__icon_play {
width: 13px;
height: 16px;
background-position: -80px -220px;
vertical-align: -3px;
}
.mod_btn__icon_like {
width: 16px;
height: 16px;
background-position: -60px 0;
vertical-align: -4px;
}
.mod_btn__icon_comment {
width: 16px;
height: 16px;
background-position: -140px -120px;
vertical-align: -3px;
}
.mod_btn__icon_menu {
width: 16px;
height: 16px;
background-position: -20px -80px;
}
.mod_btn__icon_more {
width: 16px;
height: 16px;
background-position: -40px -80px;
vertical-align: -2px;
}
.mod_btn__icon_add {
width: 16px;
height: 16px;
background-position: -20px 0;
}
.mod_btn__icon_down {
width: 16px;
height: 16px;
background-position: -40px -220px;
}
.mod_btn__icon_batch {
width: 16px;
height: 16px;
background-position: -120px 0;
}
.mod_btn__icon_add,
.mod_btn__icon_batch,
.mod_btn__icon_comment,
.mod_btn__icon_copy,
.mod_btn__icon_delete,
.mod_btn__icon_down,
.mod_btn__icon_edit,
.mod_btn__icon_input,
.mod_btn__icon_less,
.mod_btn__icon_like,
.mod_btn__icon_manage,
.mod_btn__icon_menu,
.mod_btn__icon_more,
.mod_btn__icon_new,
.mod_btn__icon_no,
.mod_btn__icon_play,
.mod_btn__icon_qr,
.mod_btn__icon_recovery,
.mod_btn__icon_upload,
.mod_btn__icon_yes,
.mod_btn_green__icon_add,
.mod_btn_green__icon_clear,
.mod_btn_green__icon_delete,
.mod_btn_green__icon_down,
.mod_btn_green__icon_like,
.mod_btn_green__icon_more,
.mod_btn_green__icon_play,
.mod_btn_green__icon_radio {
display: inline-block;
margin-right: 6px;
background-image: url(../img/icon_sprite.png);
background-repeat: no-repeat;
}
.list_menu__item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.list_menu__icon_add,
.list_menu__icon_delete,
.list_menu__icon_down,
.list_menu__icon_down_vip,
.list_menu__icon_edit,
.list_menu__icon_pause,
.list_menu__icon_play,
.list_menu__icon_share {
display: block;
width: 36px;
height: 36px;
background-image: url(../img/icon_list_menu.png);
}
.list_menu__icon_play {
background-position: 0 0;
}
.list_menu__icon_pause {
background-position: 0 -200px;
}
.list_menu__icon_share {
background-position: 0 -40px;
}
.list_menu__icon_add {
background-position: 0 -80px;
}
.list_menu__icon_down {
background-position: 0 -120px;
}
.list_menu__icon_down_vip {
background-position: 0 -280px;
}
.list_menu__icon_edit {
background-position: 0 -240px;
}
.list_menu__icon_delete {
background-position: 0 -160px;
}
.list_menu__item:hover .list_menu__icon_play {
background-position: -40px 0;
}
.list_menu__item:hover .list_menu__icon_pause {
background-position: -40px -200px;
}
.list_menu__item:hover .list_menu__icon_share {
background-position: -40px -40px;
}
.list_menu__item:hover .list_menu__icon_add {
background-position: -40px -80px;
}
.list_menu__item:hover .list_menu__icon_down {
background-position: -40px -120px;
}
.list_menu__item:hover .list_menu__icon_down_vip {
background-position: -40px -280px;
}
.list_menu__item:hover .list_menu__icon_edit {
background-position: -40px -240px;
}
.list_menu__item:hover .list_menu__icon_delete {
background-position: -40px -160px;
}
/* **************
* 歌手列表 css */
.singer_list_txt {
......@@ -116,6 +283,13 @@
font-size: 24px;
font-weight: 400;
line-height: 58px;
font-family: 微软雅黑;
}
.part__more {
position: absolute;
top: 20px;
right: 0;
font-size: 14px;
}
/* *****************
......@@ -330,29 +504,6 @@
.mod_songlist {
margin-bottom: 60px;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn_green {
border: 1px solid #31c27c;
background-color: #31c27c;
color: #fff;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
text-align: left;
}
.mod_songlist_toolbar .mod_btn {
min-width: 122px;
text-align: center;
......@@ -363,12 +514,6 @@
background-color: rgba(0, 0, 0, 0.01);
color: #999;
}
.songlist__header {
height: 50px;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.01);
color: #999;
}
.songlist__edit {
display: none;
}
......@@ -383,10 +528,6 @@
position: relative;
white-space: normal;
}
.songlist__header_name,
.songlist__songname {
width: 72%;
}
.songlist__header_time,
.songlist__time {
position: absolute;
......@@ -394,41 +535,30 @@
right: 38px;
width: 50px;
}
.songlist__list {
overflow: hidden;
clear: both;
}
.songlist__header,
.songlist__item {
padding-left: 122px;
}
.songlist__item {
height: 80px;
clear: both;
font-size: 0;
overflow: hidden;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 122px;
padding-right: 95px;
}
.songlist__list {
overflow: hidden;
clear: both;
}
.songlist__item {
clear: both;
font-size: 0;
overflow: hidden;
}
.songlist__item--even {
background-color: rgba(0, 0, 0, 0.01);
}
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__rank,
.songlist__songname,
.songlist__time {
line-height: 80px;
height: 80px;
}
.songlist__number {
position: absolute;
top: 0;
......@@ -447,17 +577,6 @@
white-space: nowrap;
font-size: 14px;
}
.songlist__number {
width: 50px;
top: 2px;
left: 0;
text-align: left;
font-size: 24px;
color: #333;
}
.songlist__number--top {
color: #ff4222;
}
.songlist__rank {
position: absolute;
top: 0;
......@@ -579,69 +698,6 @@
font-size: 0;
height: 36px;
}
.list_menu__item {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.list_menu__icon_play {
background-position: 0 0;
}
.list_menu__icon_add {
background-position: 0 -80px;
}
.list_menu__icon_down_vip {
background-position: 0 -280px;
}
.list_menu__icon_share {
background-position: 0 -40px;
}
.list_menu__icon_add,
.list_menu__icon_delete,
.list_menu__icon_down,
.list_menu__icon_down_vip,
.list_menu__icon_edit,
.list_menu__icon_pause,
.list_menu__icon_play,
.list_menu__icon_share {
display: block;
width: 36px;
height: 36px;
background-image: url(../img/icon_list_menu.png);
}
.mod_btn__icon_add,
.mod_btn__icon_batch,
.mod_btn__icon_comment,
.mod_btn__icon_copy,
.mod_btn__icon_delete,
.mod_btn__icon_down,
.mod_btn__icon_edit,
.mod_btn__icon_input,
.mod_btn__icon_less,
.mod_btn__icon_like,
.mod_btn__icon_manage,
.mod_btn__icon_menu,
.mod_btn__icon_more,
.mod_btn__icon_new,
.mod_btn__icon_no,
.mod_btn__icon_play,
.mod_btn__icon_qr,
.mod_btn__icon_recovery,
.mod_btn__icon_upload,
.mod_btn__icon_yes,
.mod_btn_green__icon_add,
.mod_btn_green__icon_clear,
.mod_btn_green__icon_delete,
.mod_btn_green__icon_down,
.mod_btn_green__icon_like,
.mod_btn_green__icon_more,
.mod_btn_green__icon_play,
.mod_btn_green__icon_radio {
display: inline-block;
margin-right: 6px;
background-image: url(../img/icon_sprite.png);
background-repeat: no-repeat;
}
.popup__icon_close,
.popup__icon_close.sprite,
.popup__icon_tips,
......@@ -828,51 +884,6 @@ img .playlist__pic {
padding: 0 18px;
font-family: 微软雅黑;
}
.mod_btn_green {
border: 1px solid #31c27c;
background-color: #31c27c;
color: #fff;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn_green__icon_play {
width: 13px;
height: 16px;
background-position: -80px -220px;
vertical-align: -3px;
}
.mod_btn__icon_like {
width: 16px;
height: 16px;
background-position: -60px 0;
vertical-align: -4px;
}
.mod_btn__icon_comment {
width: 16px;
height: 16px;
background-position: -140px -120px;
vertical-align: -3px;
}
.mod_btn__icon_menu {
width: 16px;
height: 16px;
background-position: -20px -80px;
}
.detail_layout {
padding-right: 343px;
......@@ -1019,3 +1030,82 @@ img .playlist__pic {
color: #fff;
font-weight: 400;
}
/*
*
*
*
*
*
*
*
* songer page */
.data__desc {
font-size: 14px;
height: 50px;
line-height: 50px;
margin-bottom: 4px;
}
.data__desc_txt {
float: left;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 2px;
}
.mod_data_statistic {
height: 23px;
line-height: 23px;
overflow: hidden;
font-size: 0;
}
.data_statistic__number {
font-size: 25px;
font-weight: 400;
margin-left: 10px;
}
.icon_part_arrow {
display: inline-block;
width: 7px;
height: 12px;
background-position: -120px -40px;
margin-left: 6px;
vertical-align: -1px;
}
.songlist__song_txt,
.songlist__time {
color: #999;
}
.songlist__song_txt {
margin-left: 10px;
}
.singer_list__cover {
margin-left: auto;
margin-right: auto;
}
.singer_list__cover,
.singer_list__pic {
display: block;
width: 140px;
height: 140px;
border-radius: 126px;
}
.singer_list__cover,
.singer_list__pic {
display: block;
width: 140px;
height: 140px;
border-radius: 126px;
}
.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;
}
src/common/apiHelper.js 0 → 100644
浏览文件 @ 203ee223
export function createSong(song) {
const {
id,
name,
img,
artists,
duration,
albumId,
albumName,
mvId,
...rest
} = song;
return {
id,
name,
img,
artists,
duration,
albumName,
url: genSongPlayUrl(song.id),
artistsText: genArtistisText(artists),
durationSecond: duration / 1000,
durationText: formatTime(duration / 1000),
albumId,
mvId,
...rest
};
}
export function createAlbum(album) {
const { id, name, img, artists, publishTime, ...rest } = album;
return {
id,
name,
img,
artists,
publishTime: formatDate(publishTime, "yyyy-MM-dd"),
...rest
};
}
export function createMv(mv) {
const { id, name, img, duration, publishTime, playCount, ...rest } = mv;
return {
id,
name,
img,
duration,
publishTime,
durationSecond: duration / 1000,
durationText: formatTime(duration / 1000),
playCount: processCount(playCount),
...rest
};
}
export function createSonger(songer) {
return {
id: songer.artist.id,
name: songer.artist.name,
img: songer.artist.cover,
desc: songer.artist.briefDesc,
musicSize: songer.artist.musicSize,
albumSize: songer.artist.albumSize,
mvSize: songer.artist.mvSize
};
}
export function createSimiSonger(songer) {
return {
id: songer.id,
name: songer.name,
img: songer.picUrl
};
}
export function createUser(user) {}
export function prcessSuggest(rest) {
let results = [];
if (rest.songs) {
for (let song of rest.songs) {
results.push({
value: song.name + "-" + genArtistisText(song.artists),
id: song.id,
type: "歌曲",
typeId: 0
});
}
}
if (rest.artists) {
for (let artist of rest.artists) {
results.push({
value: artist.name,
id: artist.id,
type: "歌手",
typeId: 1
});
}
}
if (rest.albums) {
for (let album of rest.albums) {
results.push({
value: album.name + "-" + album.artist.name,
id: album.id,
type: "专辑",
typeId: 2
});
}
}
return results;
}
export function genSongPlayUrl(id) {
return `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
}
export function genArtistisText(artists) {
return (artists || []).map(({ name }) => name).join("/");
}
export function pad(num, n = 2) {
let len = num.toString().length;
while (len < n) {
num = "0" + num;
len++;
}
return num;
}
export function formatTime(interval) {
interval = interval | 0;
const minute = pad((interval / 60) | 0);
const second = pad(interval % 60);
return `${minute}:${second}`;
}
export function formatDate(date, fmt = "yyyy-MM-dd hh:mm:ss") {
date = date instanceof Date ? date : new Date(date);
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
let o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + "";
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : padLeftZero(str)
);
}
}
return fmt;
}
function padLeftZero(str) {
return ("00" + str).substr(str.length);
}
export function processCount(count) {
if (count > 10000000) {
return (count / 10000000).toFixed(2) + "亿";
} else if (count > 1000) {
return (count / 1000).toFixed(2) + "万";
}
return count;
}
src/common/utils.js
浏览文件 @ 203ee223
export * from "./storeHelper";
export function processCount(count) {
if (count > 10000000) {
return (count / 10000000).toFixed(2) + "亿";
} else if (count > 1000) {
return (count / 1000).toFixed(2) + "万";
}
return count;
}
export * from "./apiHelper";
export function isDef(v) {
return v !== undefined && v !== null;
}
export function createSong(song) {
const {
id,
name,
img,
artists,
duration,
albumId,
albumName,
mvId,
...rest
} = song;
return {
id,
name,
img,
artists,
duration,
albumName,
url: genSongPlayUrl(song.id),
artistsText: genArtistisText(artists),
durationSecond: duration / 1000,
durationText: formatTime(duration / 1000),
albumId,
mvId,
...rest
};
}
export function createAlbum(album) {
const { id, name, img, artists, publishTime, ...rest } = album;
return {
id,
name,
img,
artists,
publishTime: formatDate(publishTime, "yyyy-MM-dd"),
...rest
};
}
export function genSongPlayUrl(id) {
return `https://music.163.com/song/media/outer/url?id=${id}.mp3`;
}
export function genArtistisText(artists) {
return (artists || []).map(({ name }) => name).join("/");
}
export function pad(num, n = 2) {
let len = num.toString().length;
while (len < n) {
num = "0" + num;
len++;
}
return num;
}
export function formatTime(interval) {
interval = interval | 0;
const minute = pad((interval / 60) | 0);
const second = pad(interval % 60);
return `${minute}:${second}`;
}
export function prcessSuggest(rest) {
let results = [];
if (rest.songs) {
for (let song of rest.songs) {
results.push({
value: song.name + "-" + genArtistisText(song.artists),
id: song.id,
type: "歌曲",
typeId: 0
});
}
}
if (rest.artists) {
for (let artist of rest.artists) {
results.push({
value: artist.name,
id: artist.id,
type: "歌手",
typeId: 1
});
}
}
if (rest.albums) {
for (let album of rest.albums) {
results.push({
value: album.name + "-" + album.artist.name,
id: album.id,
type: "专辑",
typeId: 2
});
}
}
return results;
}
export function formatDate(date, fmt = "yyyy-MM-dd hh:mm:ss") {
date = date instanceof Date ? date : new Date(date);
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
let o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + "";
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : padLeftZero(str)
);
}
}
return fmt;
}
function padLeftZero(str) {
return ("00" + str).substr(str.length);
}
src/views/musicLibrary/AlbumDetail.vue
浏览文件 @ 203ee223
......@@ -421,6 +421,22 @@ ul {
padding-left: 46px;
padding-right: 95px;
}
.songlist__songname {
line-height: 50px;
height: 50px;
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;
}
.songlist__album,
.songlist__artist,
......
src/views/musicLibrary/Ranking.vue
浏览文件 @ 203ee223
......@@ -380,4 +380,44 @@ th {
font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
font-family: Tahoma, Arial, 微软雅黑, sans-serif/9;
}
/*overwrite*/
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
text-align: left;
}
.songlist__item {
height: 80px;
}
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__rank,
.songlist__songname,
.songlist__time {
line-height: 80px;
height: 80px;
}
.songlist__number {
width: 50px;
top: 2px;
left: 0;
text-align: left;
font-size: 24px;
color: #333;
}
.songlist__number--top {
color: #ff4222;
}
</style>
src/views/musicLibrary/SongerDetail.vue
浏览文件 @ 203ee223
<template>
<div class="g-bd">
<div class="g-wrap p-prf" v-if="userObj">
<dl class="m-proifo f-cb" id="head-box">
<dt class="f-pr" id="ava">
<img :src="userObj.profile.avatarUrl" />
</dt>
<dd>
<div class="name f-cb">
<div class="f-cb">
<h2 id="j-name-wrap" class="wrap f-fl f-cb wrap-3">
<span class="tit f-ff2 s-fc0 f-thide">{{
userObj.profile.artistName
}}</span>
</h2>
</div>
<p class="djp f-fs1 s-fc3">{{ userObj.identify.imageDesc }}</p>
<div class="songer-main">
<div class="mod_data">
<span class="data__cover">
<a
class="js_goto_tab js_none_index"
data-stat="y_new.singer.thistab.singer_pic"
data-tab="index"
style=""
><img
class="data__photo"
:src="songer.img"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.onerror=null;"
:alt="songer.name"
/></a>
</span>
<div class="data__cont">
<div class="data__name">
<h1 class="data__name_txt js_none_index" style="">
<a class="js_goto_tab" :title="songer.name">{{ songer.name }}</a>
</h1>
<h1
class="data__name_txt js_index"
style="display: none"
:title="songer.name"
>
{{ songer.name }}
</h1>
</div>
<div class="data__desc" id="singer_desc">
<div class="data__desc_txt" id="short_desc">
{{ songer.desc }}
</div>
<ul class="data s-fc3 f-cb" id="tab-box">
<li class="fst">
<a href="/user/event?id=97137413">
<strong id="event_count">{{
userObj.profile.eventCount
}}</strong>
<span>动态</span>
</a>
<a href="javascript:;" class="js_desc">[更多]</a>
</div>
<ul class="mod_data_statistic">
<li class="data_statistic__item">
<a class="js_goto_tab">
<span class="data_statistic__tit">单曲</span>
<strong class="data_statistic__number">{{
songer.musicSize
}}</strong>
</a>
</li>
<li class="data_statistic__item">
<a class="js_goto_tab">
<span class="data_statistic__tit">专辑</span>
<strong class="data_statistic__number">{{
songer.albumSize
}}</strong>
</a>
</li>
<li class="data_statistic__item data_statistic__item--last">
<a class="js_goto_tab">
<span class="data_statistic__tit">MV</span>
<strong class="data_statistic__number">{{
songer.mvSize
}}</strong>
</a>
</li>
</ul>
<div class="data__actions" role="toolbar">
<a class="mod_btn_green js_singer_radio" @click="playHotSongs">
<i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
</a>
<a href="javascript:;" class="mod_btn js_follow">
<i class="mod_btn__icon_more"> </i>关注 1.7万
</a>
</div>
</div>
</div>
<div id="index_tab" class="js_tab">
<div class="mod_part">
<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"
>
全部<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>
<div class="mod_list_menu">
<a
class="list_menu__item list_menu__play js_play"
title="播放"
>
<i class="list_menu__icon_play"></i>
<span class="icon_txt">播放</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__add js_fav"
title="添加到歌单"
aria-haspopup="true"
>
<i class="list_menu__icon_add"></i>
<span class="icon_txt">添加到歌单</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__down js_down"
title="VIP下载"
aria-haspopup="true"
>
<i class="list_menu__icon_down_vip"></i>
<span class="icon_txt">VIP下载</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__share js_share"
title="分享"
aria-haspopup="true"
>
<i class="list_menu__icon_share"></i>
<span class="icon_txt">分享</span>
</a>
</div>
</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>
<li>
<a href="/user/follows?id=97137413">
<strong id="follow_count">{{ userObj.profile.follows }}</strong>
<span>关注</span>
</a>
</ul>
</div>
</div>
<div class="mod_part" v-if="albums">
<div class="part__hd">
<h2 class="part__tit">专辑</h2>
</div>
<div class="mod_playlist">
<ul class="playlist__list" id="albumlist">
<li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
v-for="album in albums"
:key="album.id"
>
<div class="playlist__item_box">
<div class="playlist__cover mod_cover">
<a class="js_album">
<img
class="playlist__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:src="album.img"
:alt="album.name"
/>
<i class="mod_cover__icon_play js_play"></i>
</a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a :title="album.name" class="js_album">{{
album.name
}}</a></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
>
</div>
</li>
<li>
<a href="/user/fans?id=97137413">
<strong id="fan_count">{{ userObj.profile.followeds }}</strong>
<span>粉丝</span>
</a>
</ul>
</div>
</div>
<div class="mod_part" v-if="mvs">
<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>
</div>
<div class="mod_mv">
<ul class="mv_list__list" id="mvlist">
<li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
<div class="mv_list__item_box">
<a class="mv_list__cover mod_cover js_mv" hidefocus="true">
<img
class="mv_list__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
:src="mv.img"
:alt="mv.name"
/>
<i class="mod_cover__icon_play"></i>
</a>
<h3 class="mv_list__title">
<a class="js_mv" :title="mv.name">{{ mv.name }}</a>
</h3>
<div class="mv_list__info">
<span class="mv_list__listen"
><i class="mv_list__listen_icon sprite"></i
>{{ mv.playCount }}</span
>
</div>
</div>
</li>
</ul>
<div class="inf s-fc3">
<span>签名：{{ userObj.profile.signature }} </span>
</div>
</dd>
</dl>
</div>
</div>
<div class="mod_part" id="similar" style="" v-if="simiSongers">
<div class="part__hd">
<h2 class="part__tit">相似歌手</h2>
</div>
<div class="mod_singer_list">
<ul class="singer_list__list">
<li
class="singer_list__item"
v-for="songer in simiSongers"
:key="songer.id"
>
<div class="singer_list__item_box">
<a
class="singer_list__cover js_singer"
:title="songer.name"
hidefocus="true"
>
<img
class="singer_list__pic"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.onerror=null;"
:src="songer.img"
:alt="songer.name"
/>
</a>
<h3 class="singer_list__title">
<a class="js_singer" :title="songer.name">{{
songer.name
}}</a>
</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<ul id="m_tabs" class="m-tabs f-cb">
<li class="fst">
<a href="/artist?id=5781" class="z-slt"><em>热门作品</em></a>
</li>
<li>
<a href="/artist/album?id=5781"><em>所有专辑</em></a>
</li>
<li>
<a href="/artist/mv?id=5781"><em>相关MV</em></a>
</li>
<li>
<a href="/artist/desc?id=5781"><em>艺人介绍</em></a>
</li>
</ul>
</div>
</template>
<script>
import { getUserDetail } from "api";
import {
getUserDetail,
getSongerDetail,
getSongerTop50,
getSimiSongers,
getSongerAlbums,
getSongerMvs,
} from "api";
import {
createSonger,
createSimiSonger,
createUser,
createSong,
createAlbum,
createMv,
playSonglist,
} from "common/utils";
export default {
data() {
return {
activeName: "first",
userObj: null,
id: null,
songer: {},
simiSongers: null,
hotSongs: [],
songs: [],
albums: null,
mvs: null,
};
},
created() {
this.id = this.$route.query.id;
this.accountId = this.$route.query.accountId;
getUserDetail(this.accountId).then((res) => {
console.log(res);
this.userObj = res.data;
});
this.init();
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
async init() {
// Get songer detail
const res1 = await getSongerDetail(this.id);
this.songer = createSonger(res1.data.data);
// Get songer top 50
const res2 = await getSongerTop50(this.id);
this.hotSongs = res2.data.songs.map((song) => {
return createSong({
id: song.id,
name: song.name,
artists: song.ar,
duration: song.dt,
albumName: song.al.name,
img: song.al.picUrl,
});
});
// Get simi songer
const res3 = await getSimiSongers(this.id);
let simiSongers = res3.data.artists.map((songer) => {
return createSimiSonger(songer);
});
this.simiSongers =
simiSongers.length > 5 ? simiSongers.slice(0, 5) : simiSongers;
// Get songer album
const res4 = await getSongerAlbums({ id: this.id, limit: 5, offset: 0 });
this.albums = res4.data.hotAlbums.map(
({ id, name, publishTime, artists, picUrl }) => {
return createAlbum({
id,
name,
img: picUrl,
artists,
publishTime,
});
}
);
console.log(this.albums);
// Get songer mv
const res5 = await getSongerMvs(this.id);
let mvs = res5.data.mvs.map(
({ id, name, imgurl, duration, playCount, publishTime }) => {
return createMv({
id,
name,
img: imgurl,
duration,
playCount,
publishTime,
});
}
);
this.mvs = mvs.length > 5 ? mvs.slice(0, 5) : mvs;
console.log(this.mvs);
},
playHotSongs() {
playSonglist(this.hotSongs);
},
},
};
</script>
<style scoped>
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
hr,
html,
input,
lengend,
li,
dl,
dt,
dd,
header,
menu,
section,
ol,
p,
input,
pre,
td,
textarea,
th,
ins {
padding: 0;
ul {
margin: 0;
margin-right: 0px;
padding: 0;
}
.g-bd,
.g-bd1,
.g-bd2,
.g-bd3,
.g-bd4,
.g-bd5,
.g-bd6,
.g-bd7 {
width: 980px;
min-height: 700px;
_height: 700px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #d3d3d3;
border-width: 0 1px;
}
.g-wrap {
padding: 40px;
}
.m-proifo {
margin-bottom: 43px;
}
.m-proifo dt {
float: left;
width: 188px;
margin-right: 40px;
.songer-main {
z-index: 2;
}
.f-pr {
.songer-main,
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
zoom: 1;
}
.m-proifo dt img {
display: block;
width: 180px;
height: 180px;
padding: 3px;
background: #fff;
border: 1px solid #d5d5d5;
}
.m-proifo dd {
float: left;
width: 670px;
/* add extra */
.data__photo {
border-radius: 999px;
}
.m-proifo .name {
padding-bottom: 12px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
/*overwrite*/
.data__cont {
padding-top: 31px;
}
.m-proifo .name .wrap {
padding-bottom: 3px;
}
.f-fl {
/*overwrite*/
.data__name_txt {
float: left;
font-size: 38px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
margin-right: 10px;
}
.m-proifo .name .wrap-3 .tit {
max-width: 260px;
/*overwrite*/
.data__actions {
bottom: 30px;
}
.m-proifo .name .tit {
float: left;
margin-top: 3px;
font-size: 22px;
font-weight: normal;
line-height: 30px;
.songlist__header {
background-color: #fbfbfd;
}
.s-fc0,
a.s-fc0:hover {
color: #000;
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
.f-thide {
/*overwrite*/
.songlist__songname {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.f-ff2 {
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.m-proifo .name .btn {
/*overwrite*/
.songlist__album,
.songlist__artist,
.songlist__header_album,
.songlist__header_author {
float: left;
margin: 4px 0 0 15px;
}
.u-btn-6,
.u-btn-ygz {
width: 70px;
height: 31px;
background-position: 0 -919px;
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;
}
.u-btn {
.data_statistic__item {
display: inline-block;
border-right: solid 1px #c9c9c9;
text-align: center;
padding-right: 20px;
margin-right: 20px;
font-size: 18px;
}
.u-btn-5 {
width: 81px;
height: 31px;
background-position: 0 -955px;
}
.u-btn-8 {
width: 40px;
height: 31px;
padding-left: 30px;
background-position: 0 -720px;
color: #fff;
line-height: 30px;
}
.m-proifo .name .djp:first-of-type {
margin-top: 8px;
}
.m-proifo .name .djp {
margin-top: 6px;
line-height: 20px;
float: left;
.data_statistic__item--last {
border-right: 0 none;
}
.f-fs1 {
font-size: 14px;
.mod_part .mv_list__item,
.mod_part .singer_list__item {
width: 20%;
}
.m-proifo .data {
height: 41px;
margin-bottom: 15px;
.mod_part .mv_list__item,
.mod_part .playlist__item {
padding-bottom: 0;
}
.m-proifo .data a {
display: inline-block;
*display: inline;
position: relative;
.mv_list__list {
margin-right: -20px;
zoom: 1;
color: #666;
}
.m-proifo .data a:hover {
color: #31c27c;
}
.m-proifo .data strong {
display: block;
margin-top: -4px;
font-size: 24px;
font-weight: normal;
cursor: pointer;
}
.m-proifo .data .fst {
padding-left: 0;
border-left: none;
}
.m-proifo .data li {
.mv_list__item {
float: left;
padding: 0 40px 0 20px;
border-left: 1px solid #ddd;
width: 25%;
padding-bottom: 44px;
overflow: hidden;
}
.f-cb::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
.mod_singer_list {
overflow: hidden;
text-align: center;
}
.singer_list__list {
margin-right: -20px;
overflow: hidden;
zoom: 1;
margin-bottom: -24px;
}
.m-proifo .inf {
margin-bottom: 5px;
line-height: 21px;
.singer_list__item {
float: left;
font-size: 12px;
width: 20%;
margin-bottom: 20px;
overflow: hidden;
}
li,
s {
list-style: none;
.singer_list__item_box {
position: relative;
margin-right: 20px;
background-color: #fbfbfd;
min-height: 195px;
padding: 25px 0;
overflow: hidden;
}
a {
color: #333;
.mod_mv {
height: 183px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或