From fb4de71c89ffb0afe515c6153309178a86b8957b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=A6=E9=81=93=E8=83=9C?= <2235066646@qq.com>
Date: Thu, 8 Oct 2020 12:42:34 +0800
Subject: [PATCH] new-songs

---
 src/components/common/song-list/song-list.vue | 26 ++++-
 src/layout/Aside.vue                          |  2 +-
 src/router/routes.js                          |  5 +
 src/views/README.md                           |  3 +-
 src/views/new-songs/new-songs.vue             | 95 +++++++++++++++++++
 .../rank-list/childComps/RankListItem.vue     | 23 +++--
 6 files changed, 140 insertions(+), 14 deletions(-)
 create mode 100644 src/views/new-songs/new-songs.vue

diff --git a/src/components/common/song-list/song-list.vue b/src/components/common/song-list/song-list.vue
index 550e762..055eead 100644
--- a/src/components/common/song-list/song-list.vue
+++ b/src/components/common/song-list/song-list.vue
@@ -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)"
@@ -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
@@ -82,6 +88,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**是否是最新音乐页面使用 */
+    newsongs: {
+      type: Boolean,
+      default: false,
+    },
     length: {
       type: Number,
       default: null,
@@ -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>
\ No newline at end of file
diff --git a/src/layout/Aside.vue b/src/layout/Aside.vue
index ae98a7a..9daefd4 100644
--- a/src/layout/Aside.vue
+++ b/src/layout/Aside.vue
@@ -43,7 +43,7 @@ export default {
         },
         { link: "/mv-list", icon: "iconfont icon-MV", content: "全部MV" },
         {
-          link: "",
+          link: "/new-songs",
           icon: "iconfont icon-musicnoteeighth",
           content: "最新音乐",
         },
diff --git a/src/router/routes.js b/src/router/routes.js
index b5b3916..6a2de4c 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -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 = [
     {
@@ -50,5 +51,9 @@ const routes = [
         path: '/mv',
         component: Mv
     },
+    {
+        path: '/new-songs',
+        component: NewSongs
+    },
 ]
 export default routes
\ No newline at end of file
diff --git a/src/views/README.md b/src/views/README.md
index f54c56f..191d80f 100644
--- a/src/views/README.md
+++ b/src/views/README.md
@@ -14,4 +14,5 @@
 
 #### mv                      所有MV、MV播放页面
 > mv-category                所有MV的分类页面
->mv-detail                   MV详情、播放页面
\ No newline at end of file
+>mv-detail                   MV详情、播放页面
+>mv                          最新MV、推荐MV、MV排行，可以跳转到mv-category页面
\ No newline at end of file
diff --git a/src/views/new-songs/new-songs.vue b/src/views/new-songs/new-songs.vue
new file mode 100644
index 0000000..b10b1b4
--- /dev/null
+++ b/src/views/new-songs/new-songs.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/rank-list/childComps/RankListItem.vue b/src/views/rank-list/childComps/RankListItem.vue
index fead71f..98b1dd8 100644
--- a/src/views/rank-list/childComps/RankListItem.vue
+++ b/src/views/rank-list/childComps/RankListItem.vue
@@ -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">
@@ -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");
             }
           });
         }
@@ -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() {
@@ -173,6 +176,7 @@ export default {
   top: 0px;
   bottom: 0px;
   margin: auto;
+  color: #fff;
 }
 .iconfont {
   font-size: 42px;
@@ -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 {