Skip to content

Commit

Permalink
new-songs
Browse files Browse the repository at this point in the history
  • Loading branch information
fudaosheng committed Oct 8, 2020
1 parent 726eb82 commit fb4de71
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 14 deletions.
26 changes: 23 additions & 3 deletions src/components/common/song-list/song-list.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
</b-table-head>
<b-table-body slot="body" class="table-body">
<b-table-tr
:class="[newsongs?'dance-music-table-tr-newsongs':'']"
v-for="(item, index) in musicList"
:key="index"
@dblclick.native="handleDbclick(index)"
Expand All @@ -41,9 +42,14 @@
:class="`${'v-' + theme}`"
></i>
</b-table-td>
<b-table-td width="60px" v-if="lines[1]"
><i class="iconfont icon-xihuan"></i
></b-table-td>
<b-table-td
width="60px"
v-if="lines[1]"
class="dance-music-table-tr-td-two"
>
<i class="iconfont icon-xihuan" v-if="!newsongs" />
<img v-lazy="item.pic" alt="" v-if="newsongs" />
</b-table-td>
<b-table-td v-if="lines[2]">{{ item.name }}</b-table-td>
<b-table-td v-if="lines[3]" class="table-list-body-artist">{{
item.artist
Expand Down Expand Up @@ -82,6 +88,11 @@ export default {
type: Boolean,
default: false,
},
/**是否是最新音乐页面使用 */
newsongs: {
type: Boolean,
default: false,
},
length: {
type: Number,
default: null,
Expand Down Expand Up @@ -145,4 +156,13 @@ export default {
color: var(--green-main-color);
}
}
.dance-music-table-tr-newsongs{
display: flex;
align-items: center;
}
.dance-music-table-tr-td-two {
img {
width: 100%;
}
}
</style>
2 changes: 1 addition & 1 deletion src/layout/Aside.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default {
},
{ link: "/mv-list", icon: "iconfont icon-MV", content: "全部MV" },
{
link: "",
link: "/new-songs",
icon: "iconfont icon-musicnoteeighth",
content: "最新音乐",
},
Expand Down
5 changes: 5 additions & 0 deletions src/router/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const ArtistDetail = () => import('views/artist-detail/artist-detail')
const MvCategory = () => import('views/mv/mv-category')
const MvDetail = () => import('views/mv/mv-detail')
const Mv = () => import('views/mv/mv')
const NewSongs = () => import('views/new-songs/new-songs')

const routes = [
{
Expand Down Expand Up @@ -50,5 +51,9 @@ const routes = [
path: '/mv',
component: Mv
},
{
path: '/new-songs',
component: NewSongs
},
]
export default routes
3 changes: 2 additions & 1 deletion src/views/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@

#### mv 所有MV、MV播放页面
> mv-category 所有MV的分类页面
>mv-detail MV详情、播放页面
>mv-detail MV详情、播放页面
>mv 最新MV、推荐MV、MV排行,可以跳转到mv-category页面
95 changes: 95 additions & 0 deletions src/views/new-songs/new-songs.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<template>
<scroll class="scroll" ref="scroll">
<div class="dance-music-newsongs">
<div class="newsongs-title">
<b-menu
class="newsongs-menu"
:menu="areas"
item-height="30px"
item-width="45px"
:active-color="getActiveColor"
@click="handleAreasClick"
/>
<split />
<song-list :music-list="musicList" newsongs @refresh="handleRefresh"/>
</div>
</div>
</scroll>
</template>
<script>
import { theme } from "mixin/global/theme";
import { _getTopSongs } from "network/discover";
import { _getSongsDetail, songDetail } from "network/detail";
import Scroll from "common/scroll/Scroll";
import Split from "common/split/split";
import SongList from "common/song-list/song-list"
export default {
name: "NewSongs",
mixins: [theme],
components: {
Scroll,
Split,
SongList
},
data() {
return {
areas: [
{ value: 0, content: "全部" },
{ value: 7, content: "华语" },
{ value: 96, content: "欧美" },
{ value: 16, content: "韩国" },
{ value: 8, content: "日本" },
],
currentArea: 0,
page: 1,
musicList: [],
};
},
created() {
this.getTopSongs();
},
computed: {},
methods: {
handleAreasClick(index) {
this.currentArea = this.areas[index].value;
this.getTopSongs();
},
handleRefresh() {
this.$refs.scroll.refresh();
},
getTopSongs() {
this.musicList = [];
_getTopSongs(this.currentArea).then((res) => {
let list = res.data.data;
for (let i in list) {
_getSongsDetail(list[i].id).then((res) => {
let song = new songDetail(res.data.songs);
this.musicList.push(song);
if (i == list.length - 1) {
this.$nextTick(()=>{
this.handleRefresh();
})
}
});
}
});
},
},
};
</script>
<style lang="less" scoped>
.scroll {
height: calc(100vh - 58px - 60px);
}
.dance-music-newsongs {
padding: 10px 50px 0px 50px;
}
::v-deep .vbestui-menu-item-container i {
margin-right: 0px !important;
}
.newsongs {
&-title {
font-size: 14px;
}
}
</style>
23 changes: 14 additions & 9 deletions src/views/rank-list/childComps/RankListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
</div>
<div class="update">{{ getUpdateTime }}</div>
</div>
<div class="right">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<div class="right">
<i class="iconfont icon-bofang"></i>
</div>
</div>
<div class="center">
Expand Down Expand Up @@ -98,8 +98,11 @@ export default {
let song = new songDetail(res.data.songs);
this.musiclist.push(song);
/**刷新scroll */
if(this.musiclist.length==8&&this.getTitleString.indexOf('')==0){
this.$emit('refresh')
if (
this.musiclist.length == 8 &&
this.getTitleString.indexOf("") == 0
) {
this.$emit("refresh");
}
});
}
Expand All @@ -111,9 +114,9 @@ export default {
let time = this.musicListDetail.playlist.updateTime;
return formatDate(new Date(time), "MM月dd日");
},
getTitleString(){
getTitleString() {
return this.title.toString();
}
},
},
methods: {
enterDetail() {
Expand Down Expand Up @@ -173,6 +176,7 @@ export default {
top: 0px;
bottom: 0px;
margin: auto;
color: #fff;
}
.iconfont {
font-size: 42px;
Expand All @@ -190,8 +194,9 @@ export default {
background-color: #2c2e32;
color: #fff;
}
&-light:hover,&-green:hover{
background:#ebeced !important;
&-light:hover,
&-green:hover {
background: #ebeced !important;
}
}
.active {
Expand Down

0 comments on commit fb4de71

Please sign in to comment.