提交 a8f74658 编写于 作者: Z Zachary

update

* add playlist detail page
* add DetailInfoCard component
上级 2c43d270
......@@ -14,9 +14,6 @@ a {
color: #000;
text-decoration: none;
}
a:hover {
color: #31c27c;
}
li {
list-style: none;
......
......@@ -852,7 +852,7 @@ img .playlist__pic {
.data_info__item {
float: left;
line-height: 27px;
width: 166px;
width: 200px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
......
<template>
<div class="mod_data">
<span class="data__cover" id="logo">
<!-- 头像 S-->
<img
class="data__photo"
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' : ''"
/>
<i class="data__cover_mask" v-if="cardType == 'album'"></i>
</span>
<div class="data__cont">
<div class="data__name js_box">
<h1 id="p_name_show" class="data__name_txt" :title="obj.name">
{{ obj.name }}
</h1>
</div>
<!-- 名字 -->
<div class="data__singer" v-if="cardType != 'songer'">
<i class="icon_singer sprite"></i>
<a class="data__singer_txt" v-if="obj.creator" :title="obj.creator">{{
obj.creator
}}</a>
<a
class="data__singer_txt"
v-if="obj.artistsText"
:title="obj.artistsText"
>{{ obj.artistsText }}</a
>
</div>
<!-- 描述信息 -->
<div class="data__desc" id="singer_desc" v-if="cardType == 'songer'">
<div class="data__desc_txt" id="short_desc">
{{ obj.desc }}
</div>
<a href="javascript:;" class="js_desc" @click="moreClick">[更多]</a>
</div>
<!-- Info -->
<ul class="data__info" v-if="cardType != 'songer'">
<li class="data_info__item js_box" style="display: ">
<div class="data_tag_box" v-if="obj.tags">
标签:<span id="choosebox1">
<a
class="data_info__tags js_jump"
v-for="tag in obj.tags"
:key="tag"
>{{ tag }}
</a>
</span>
</div>
</li>
<li class="data_info__item" v-if="obj.albumName">
专辑:<a class="js_album" :title="obj.albumName">{{
obj.albumName
}}</a>
</li>
<li class="data_info__item" v-if="obj.type">分类:{{ obj.type }}</li>
<li class="data_info__item" v-if="obj.version">
类型:{{ obj.version }}
</li>
<li class="data_info__item" v-if="obj.durationText">
时长:{{ obj.durationText }}
</li>
<!--li class="data_info__item">创建时间:2018-03-29</li-->
<li class="data_info__item" v-if="obj.playCount">
播放量:{{ obj.playCount }}
</li>
<li class="data_info__item" v-if="obj.shareCount">
收藏量:{{ obj.subscribedCount }}
</li>
<li class="data_info__item" v-if="obj.shareCount">
分享量:{{ obj.shareCount }}
</li>
<li class="data_info__item" v-if="obj.company">
唱片公司:<span>{{ obj.company }}</span>
</li>
<li class="data_info__item" v-if="obj.publishTime">
发行时间:{{ obj.publishTime }}
</li>
</ul>
<ul class="mod_data_statistic" v-if="cardType == 'songer'">
<li class="data_statistic__item">
<a class="js_goto_tab">
<span class="data_statistic__tit">单曲</span>
<strong class="data_statistic__number">{{ obj.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">{{ obj.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">{{ obj.mvSize }}</strong>
</a>
</li>
</ul>
<div class="data__actions" v-if="cardType != 'songer'">
<a class="mod_btn_green js_all_play" @click="btnClick('all')">
<i class="mod_btn_green__icon_play"></i>
{{ cardType == "song" ? "播放" : "播放全部" }}
</a>
<a class="mod_btn js_fav_taoge" @click="btnClick('collection')">
<i class="mod_btn__icon_like"></i>收藏
</a>
<a
class="mod_btn js_into_comment"
href="#comment_box"
@click="btnClick('comment')"
>
<i class="mod_btn__icon_comment"></i>评论()
</a>
<a
href="javascript:;"
class="mod_btn js_more"
@click="btnClick('more')"
>
<i class="mod_btn__icon_menu"></i>更多
</a>
</div>
<div class="data__actions" v-if="cardType == 'songer'">
<a class="mod_btn_green js_singer_radio" @click="btnClick('hot')">
<i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
obj: {
type: Object,
default: {},
},
cardType: {
type: String,
default: "song",
},
},
methods: {
btnClick(v) {
this.$emit("btnClick", v);
},
moreClick() {
this.$emit("moreClick", true);
},
},
};
</script>
<style scoped>
h1,
h2,
h3,
h4,
h5,
h6,
li,
ul {
margin: 0;
margin-right: 0px;
padding: 0;
}
.songer__photo {
border-radius: 999px;
}
.data_statistic__item {
display: inline-block;
border-right: solid 1px #c9c9c9;
text-align: center;
padding-right: 20px;
margin-right: 20px;
font-size: 18px;
}
.data_statistic__item--last {
border-right: 0 none;
}
</style>
......@@ -51,10 +51,11 @@
hidefocus="true"
class="f-thide name fc1 f-fl"
:title="currentSong.name"
@click="gotoSongDetail(currentSong.id)"
>{{ currentSong.name }}</a
>
<span class="by f-thide f-fl">
<span title="Santa_SA/马也_Crabbit">
<span :title="currentSong.artistsText">
<a v-if="hasCurrentSong" class="" hidefocus="true">
{{ currentSong.artistsText }}
</a>
......@@ -110,17 +111,9 @@
></span>
</div>
</div>
<a hidefocus="true" class="icn icn-vol" @click="clickVolBtn"></a>
<a
href="javascript:;"
hidefocus="true"
data-action="volume"
class="icn icn-vol"
@click="clickVolBtn"
></a>
<a
href="javascript:;"
hidefocus="true"
data-action="mode"
class="icn"
:class="currentMode.icon"
:title="currentMode.name"
......@@ -128,12 +121,7 @@
></a>
<span class="add f-pr">
<span class="tip" style="display: none">已添加到播放列表</span>
<a
href="javascript:;"
title="播放列表"
hidefocus="true"
data-action="panel"
class="icn icn-list s-fc3"
<a title="播放列表" hidefocus="true" class="icn icn-list s-fc3"
>{{ playlist.length }}
</a>
</span>
......@@ -294,6 +282,14 @@ export default {
this.$store.commit("music/setPlayingState", true);
}
},
gotoSongDetail(id) {
console.log(id);
this.$router.push({
path: "/musicLibrary/songDetail",
query: { id: id },
});
},
gotoSongerDetail(id) {},
},
computed: {
audio() {
......
......@@ -25,9 +25,9 @@
/>
</a>
<h4 class="">
<span class=""
><a href="">{{ item.name }}</a></span
>
<span class="">
<a @click="gotoPlaylistDetail(item.id)">{{ item.name }}</a>
</span>
</h4>
<div class="">播放量:{{ processCount(item.playCount) }}</div>
</li>
......@@ -126,6 +126,12 @@ export default {
});
});
},
gotoPlaylistDetail(id) {
this.$router.push({
path: "/musicLibrary/playlistDetail",
query: { id: id },
});
},
},
};
</script>
......@@ -201,4 +207,7 @@ export default {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#4C000000', endColorstr='#4C000000');
background-color: rgba(0, 0, 0, 0.3);
}
a:hover {
color: #31c27c;
}
</style>
......@@ -11,6 +11,7 @@ const MV = () => import("views/musicLibrary/MV");
const SongerDetail = () => import("views/musicLibrary/SongerDetail");
const SongDetail = () => import("views/musicLibrary/SongDetail");
const AlbumDetail = () => import("views/musicLibrary/AlbumDetail");
const PlaylistDetail = () => import("views/musicLibrary/PlaylistDetail");
const My = () => import("views/My");
......@@ -33,7 +34,8 @@ const routes = [
{ path: "mv", component: MV },
{ path: "songerDetail", name: "songerDetail", component: SongerDetail },
{ path: "songDetail", component: SongDetail },
{ path: "albumDetail", component: AlbumDetail }
{ path: "albumDetail", component: AlbumDetail },
{ path: "playlistDetail", component: PlaylistDetail }
]
},
{
......
<template>
<div class="main">
<div
class="mod_data"
itemscope=""
itemtype="http://schema.org/MusicRecording"
>
<span class="data__cover">
<img
id="albumImg"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:src="album.img"
:alt="album.name"
class="data__photo"
/>
<i class="data__cover_mask"></i>
</span>
<div class="data__cont">
<div class="data__name">
<h1 class="data__name_txt" :title="album.name">{{ album.name }}</h1>
</div>
<div class="data__singer">
<i class="icon_singer sprite"></i
><a
class="js_singer data__singer_txt"
itemprop="byArtist"
:title="album.artists"
>{{ album.artists }}</a
>
</div>
<ul class="data__info">
<li class="data_info__item">类型:{{ album.type }}</li>
<li class="data_info__item data_info__item--even">语种:国语</li>
<li class="data_info__item">发行时间:2021-02-13</li>
<li class="data_info__item data_info__item--even">
唱片公司:<span>{{ album.company }}</span>
</li>
</ul>
<detail-info-card :obj="album" :cardType="'album'" @btnClick="cardClick" />
<div class="data__actions" role="toolbar">
<a class="mod_btn_green js_all_play" @click="playAll">
<i class="mod_btn_green__icon_play"></i>播放全部
</a>
<a
href="javascript:;"
class="mod_btn js_fav_album"
data-stat="y_new.album.header.love"
data-status="0"
><i class="mod_btn__icon_like"></i>收藏</a
>
<a
class="mod_btn js_into_comment"
data-stat="y_new.album.gotocomment"
href="#comment_box"
><i class="mod_btn__icon_comment"></i>评论(15)</a
>
<a
href="javascript:;"
class="mod_btn js_more"
data-mid="000QQkw74FD8iE"
data-id="17519496"
data-stat="y_new.album.header.more"
><i class="mod_btn__icon_menu"></i>更多</a
>
</div>
</div>
</div>
<div class="detail_layout">
<div class="detail_layout__main">
<div class="mod_songlist">
......@@ -269,9 +200,10 @@
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import ModListMenu from "components/common/ModListMenu";
import { getAlbum } from "api";
import { createSong, playSonglist } from "common/utils";
import { createSong, playSonglist, formatDate } from "common/utils";
export default {
data() {
......@@ -294,11 +226,11 @@ export default {
name: ds.album.name,
img: ds.album.picUrl,
desc: ds.album.description,
artists: ds.album.artist.name,
artistsText: ds.album.artist.name,
type: ds.album.type,
version: ds.album.subType,
company: ds.album.company,
publishTime: ds.album.publishTime,
publishTime: formatDate(ds.album.publishTime, "yy-MM-dd"),
};
this.album = album;
console.log(album);
......@@ -321,8 +253,14 @@ export default {
playAll() {
playSonglist(this.songs);
},
cardClick(v) {
if (v == "all") {
this.playAll();
}
},
},
components: {
DetailInfoCard,
ModListMenu,
},
};
......
<template>
<div class="playlist-main">
<detail-info-card
:obj="playlist"
:cardType="'playlist'"
@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>
<div class="detail_layout__other">
<div class="mod_about js_box" id="album_desc" style="display: ">
<h3 class="about__tit">简介</h3>
<div class="about__cont">
<p>
{{ playlist.desc }}
</p>
</div>
<!-- <a
href="javascript:;"
class="about__more"
data-stat="y_new.gedan.moreinfo"
data-left="0"
data-top="-187"
data-target="popup_data_detail"
style="display: "
>[更多]</a
> -->
<a href="javascript:;" class="btn_edit js_edit" style="display: none"
><i class="icon_txt">编辑</i></a
>
</div>
<div class="other_part" id="similaralbum" style="display: none">
<h3 class="other_part__tit">相似歌单</h3>
<div class="mod_playlist">
<ul class="playlist__list"></ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import ModListMenu from "components/common/ModListMenu";
import { getPlayList, getPlaylistDetial, getSongDetail } from "api";
import { processCount, createSong, playSonglist } from "common/utils";
export default {
data() {
return {
id: this.$route.query.id,
playlist: {},
songs: [],
};
},
created() {
this.init();
},
methods: {
init() {
getPlaylistDetial(this.id).then((res) => {
console.log(res);
let d = res.data.playlist;
this.playlist = {
id: d.id,
name: d.name,
img: d.coverImgUrl,
desc: d.description,
creator: d.creator.nickname,
creatorId: d.creator.userId,
tags: d.creator.expertTags,
playCount: processCount(d.playCount),
subscribedCount: processCount(d.subscribedCount),
shareCount: processCount(d.shareCount),
};
console.log(this.playlist);
let trackIds = res.data.playlist.trackIds.map(({ id }) => id);
let songDetails = getSongDetail(trackIds.slice(0, 500)).then((res) => {
let songs = res.data.songs.map(({ id, name, al, ar, mv, dt }) => {
return createSong({
id,
name,
artists: ar,
duration: dt,
mvId: mv,
albumName: al.name,
img: al.picUrl,
});
});
this.songs = songs;
console.log(songs);
});
});
},
playAll() {
playSonglist(this.songs);
},
cardClick(v) {
if (v == "all") this.playAll();
},
},
components: {
DetailInfoCard,
ModListMenu,
},
};
</script>
<style scoped>
.playlist-main,
.section_inner {
z-index: 2;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.mod_songlist {
font-size: 14px;
overflow: hidden;
}
.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>
<template>
<div class="main">
<div
class="mod_data"
itemscope=""
itemtype="http://schema.org/MusicRecording"
style="display: "
v-if="song"
>
<span class="data__cover">
<img
:src="song.img"
:alt="song.name"
onerror="this.src='//y.gtimg.cn/mediastyle/music_v11/extra/default_300x300.jpg?max_age=31536000';this.onerror=null;"
class="data__photo"
/>
</span>
<div class="data__cont">
<div class="data__name">
<h1 class="data__name_txt" :title="song.name">{{ song.name }}</h1>
</div>
<div class="data__singer" :title="song.artistsText">
<i class="icon_singer sprite"></i>
<a
href="//y.qq.com/n/yqq/singer/001JDzPT3JdvqK.html"
:title="song.artistsText"
class="data__singer_txt js_singer"
data-stat="y_new.song.header.singername"
itemprop="byArtist"
>
{{ song.artistsText }}
</a>
</div>
<ul class="data__info">
<li class="data_info__item data_info__item--even">
专辑:<a
href="//y.qq.com/n/yqq/album/002Zwh5p4HgecI.html"
itemprop="inAlbum"
class="js_album"
:title="song.albumName"
>{{ song.albumName }}</a
>
</li>
<li class="data_info__item js_lan" style="">语种:未知</li>
<li class="data_info__item js_genre data_info__item--even" style="">
时长:{{ song.durationText }}
</li>
<li class="data_info__item js_company" style="">
唱片公司:<span>未知</span>
</li>
<li
class="data_info__item js_public_time data_info__item--even"
style=""
>
发行时间:{{ song.publishTime }}
</li>
</ul>
<div class="data__actions" role="toolbar">
<a class="mod_btn_green js_all_play"
><i class="mod_btn_green__icon_play"></i>播放</a
>
<a href="javascript:;" class="mod_btn js_all_like"
><i class="mod_btn__icon_like"></i>收藏</a
>
<a
class="mod_btn js_into_comment"
data-stat="y_new.song.gotocomment"
href="#comment_box"
><i class="mod_btn__icon_comment"></i>评论(5182)</a
>
<a
href="javascript:;"
class="mod_btn js_more"
data-id="102193483"
data-songtype="0"
><i class="mod_btn__icon_menu"></i>更多</a
>
</div>
</div>
</div>
<detail-info-card :obj="song" @btnClick="cardClick" />
<div class="detail_layout">
<div class="detail_layout__main">
......@@ -195,8 +117,9 @@
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import { getSongDetail, getSongLiyric, getSimiSong, getMvDetail } from "api";
import { createSong, formatDate } from "common/utils";
import { createSong, formatDate, playTheSong } from "common/utils";
export default {
data() {
......@@ -297,6 +220,15 @@ export default {
query: { id: id },
});
},
play() {
playTheSong(this.song);
},
cardClick(v) {
if (v == "all") this.play();
},
},
components: {
DetailInfoCard,
},
};
</script>
......
<template>
<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>
<a href="javascript:;" class="js_desc" @click="toggleShowMoreInfo"
>[更多]</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>
</div>
</div>
</div>
<detail-info-card
:obj="songer"
:cardType="'songer'"
@btnClick="playHotSongs"
@moreClick="toggleShowMoreInfo"
/>
<div id="index_tab" class="js_tab">
<div class="mod_part">
......@@ -284,6 +216,7 @@
</template>
<script>
import DetailInfoCard from "components/common/DetailInfoCard";
import ModListMenu from "components/common/ModListMenu";
import {
getUserDetail,
......@@ -414,6 +347,7 @@ export default {
},
},
components: {
DetailInfoCard,
ModListMenu,
},
};
......@@ -460,10 +394,6 @@ ul {
position: relative;
}
/* add extra */
.data__photo {
border-radius: 999px;
}
/*overwrite*/
.data__cont {
padding-top: 31px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册