feat: 最新歌曲页面

sl1673495 · Jul 26, 2019 · e0e2aaf · e0e2aaf
1 parent fa197b6
commit e0e2aaf
Show file tree

Hide file tree

Showing 18 changed files with 269 additions and 68 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,8 @@
 
 <head>
   <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="renderer" content="webkit" /> 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_777085_pk0u28fv7cl.css">
   <title>vue-netease-muisc</title>

diff --git a/src/api/song.js b/src/api/song.js
@@ -5,3 +5,6 @@ export const getSongUrl = id => request.get(`/song/url?id=${id}`)
 
 // 获取音乐详情
 export const getSongDetail = ids => request.get(`/song/detail?ids=${ids}`)
+
+// 新歌速递
+export const getTopSongs = (type) => request.get(`/top/song?type=${type}`)
diff --git a/src/base/tabs.vue b/src/base/tabs.vue
@@ -4,11 +4,12 @@
     :class="{[align]: true}"
   >
     <div
-      v-for="(tab, index) in tabs"
+      v-for="(tab, index) in normalizedTabs"
       :key="index"
       class="tab-item"
       :class="getActiveCls(tab, index)"
       @click="onChangeTab(tab, index)"
+      :style="getTabItemStyle(tab, index)"
     >
       <span class="title">
         {{tab.title}}
@@ -21,6 +22,13 @@
 const ACTIVE_PROP = 'active'
 const ACTIVE_CHANGE = 'tabChange'
 
+const typeStyleMap = {
+  small: {
+    itemStyle: { fontSize: '12px' },
+    activeItemStyle: { color: '#d33a31' }
+  }
+}
+
 export default {
   created() {
     this.ACTIVE_PROP = ACTIVE_PROP
@@ -37,6 +45,17 @@ export default {
     align: {
       type: String,
       default: 'left'
+    },
+    itemStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    activeItemStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    type: {
+      type: String,
     }
   },
   model: {
@@ -51,38 +70,67 @@ export default {
         this.$emit(ACTIVE_CHANGE, index)
       }
     },
+    isActive(tab, index) {
+      if (
+        // 路由模式
+        (this.isRouteMode && this.$route.path === tab.to) ||
+        // 非路由模式
+        (!this.isRouteMode && index === this[ACTIVE_PROP])
+      ) {
+        return true
+      }
+      return false
+    },
     getActiveCls(tab, index) {
       const ACTIVE_CLS = 'active'
-      // 路由模式
-      if (this.isRouteMode) {
-        if (this.$route.path === tab.to) {
-          return ACTIVE_CLS
-        }
-      } else if (index === this[ACTIVE_PROP]) {
-        return ACTIVE_CLS
-      }
+      return this.isActive(tab, index) ? ACTIVE_CLS : ''
+    },
+    getTabItemStyle(tab, index) {
+      return Object.assign(
+        {},
+        (typeStyleMap[this.type] || {}).itemStyle,
+        this.itemStyle,
+        this.isActive(tab, index)
+          ? Object.assign(
+            {},
+            (typeStyleMap[this.type] || {}).activeItemStyle,
+            this.activeItemStyle
+          )
+          : null
+      )
     }
   },
   computed: {
     isRouteMode() {
       return this.tabs.length && !!this.tabs[0].to
-    }
-  }
+    },
+    normalizedTabs() {
+      return typeof this.tabs[0] === 'string'
+        ? this.tabs.map(tab => ({ title: tab }))
+        : this.tabs
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 .tab-wrap {
   // padding: 12px;
   display: flex;
+  flex-wrap: wrap;
 
   &.center {
     justify-content: center;
   }
 
+  &.right {
+    justify-content: flex-end;
+  }
+
   .tab-item {
     padding: 12px;
     color: var(--tab-item-color);
+    font-size: $font-size-medium;
     cursor: pointer;
 
     &.active {
@@ -96,10 +144,6 @@ export default {
     &:hover {
       color: var(--tab-item-hover-color);
     }
-
-    .title {
-      font-size: $font-size-medium;
-    }
   }
 }
 </style>
diff --git a/src/components/mini-player.vue b/src/components/mini-player.vue
@@ -7,7 +7,7 @@
     <div class="song">
       <template v-if="hasCurrentSong">
         <div class="img-wrap">
-          <img :src="currentSong.img" />
+          <img :src="$utils.genImgUrl(currentSong.img, 80)" />
         </div>
         <div class="content">
           <div class="top">

diff --git a/src/components/playlist.vue b/src/components/playlist.vue
@@ -32,7 +32,7 @@
         >
           <SongTable
             :songs="dataSource"
-            :hideColumns="['index', 'albumName']"
+            :hideColumns="['index', 'img', 'albumName']"
             :showPromptOnPlay="false"
           />
         </div>
@@ -50,7 +50,6 @@
 
 <script type="text/ecmascript-6">
 import { mapState, mapMutations, mapActions } from 'vuex'
-import Tabs from '@/base/tabs'
 import LeaveHide from '@/base/leave-hide'
 import SongTable from './song-table'
 export default {
@@ -101,7 +100,6 @@ export default {
   components: {
     SongTable,
     LeaveHide,
-    Tabs
   }
 }
 </script>

diff --git a/src/components/song-card.vue b/src/components/song-card.vue
@@ -45,10 +45,7 @@ export default {
     }
 
     .play-icon {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
+      @include abs-center;
     }
   }
 

diff --git a/src/components/song-table.vue b/src/components/song-table.vue
@@ -1,5 +1,6 @@
 <template>
   <el-table
+    v-bind="$attrs"
     v-if="songs.length"
     :data="songs"
     @row-click="onRowClick"
@@ -9,13 +10,14 @@
     <template v-for="(column, index) in showColumns">
       <!-- 需要自定义渲染的列 -->
       <el-table-column
-        v-if="['index', 'durationSecond'].includes(column.prop)"
+        v-if="['index', 'img', 'durationSecond'].includes(column.prop)"
         :key="index"
         :label="column.label"
         :prop="column.prop"
         v-bind="column"
       >
         <template slot-scope="scope">
+          <!-- 序号 -->
           <template v-if="column.prop === 'index'">
             <Icon
               class="horn"
@@ -25,9 +27,19 @@
             />
             <span v-else>{{scope.$index + 1}}</span>
           </template>
+
+          <!-- 时长 -->
           <template v-else-if="column.prop === 'durationSecond'">
             <span>{{ $utils.formatTime(scope.row.durationSecond) }}</span>
           </template>
+
+          <!-- 图片 -->
+          <template v-else-if="column.prop === 'img'">
+            <div class="song-table-img-wrap">
+              <img :src="$utils.genImgUrl(scope.row.img, 120)" />
+              <PlayIcon class="song-table-play-icon" />
+            </div>
+          </template>
         </template>
 
       </el-table-column>
@@ -45,6 +57,8 @@
 
 <script>
 import { mapMutations, mapActions, mapState } from "vuex"
+import PlayIcon from '@/base/play-icon'
+
 export default {
   props: {
     hideColumns: {
@@ -67,6 +81,10 @@ export default {
         prop: 'index',
         label: '',
         width: '50'
+      }, {
+        prop: 'img',
+        label: ' ',
+        width: '100',
       }, {
         prop: 'name',
         label: '音乐标题',
@@ -81,7 +99,7 @@ export default {
       }, {
         prop: 'durationSecond',
         label: '时长',
-        width: '100'
+        width: '100',
       }]
     }
   },
@@ -106,12 +124,19 @@ export default {
   },
   computed: {
     showColumns() {
+      const hideColumns = this.hideColumns.slice()
+      const reference = this.songs[0]
+      const { img } = reference
+      if (!img) {
+        hideColumns.push('img')
+      }
       return this.columns.filter(column => {
         return !this.hideColumns.find((prop) => prop === column.prop)
       })
     },
     ...mapState(['currentSong'])
-  }
+  },
+  components: { PlayIcon }
 }
 </script>
 
@@ -123,4 +148,16 @@ export default {
 .song-active {
   color: $theme-color;
 }
+
+.song-table-img-wrap {
+  position: relative;
+  @include img-wrap(60px);
+
+  img {
+    border-radius: 4px;
+  }
+  .song-table-play-icon {
+    @include abs-center;
+  }
+}
 </style>
diff --git a/src/components/top-playlist-card.vue b/src/components/top-playlist-card.vue
@@ -76,9 +76,8 @@ export default {
 
       .desc {
         @include text-ellipsis-multi(5);
-
         font-size: $font-size-sm;
-        color: #708b90;
+        color: $font-color-transparent;
       }
     }
   }

diff --git a/src/layout/header.vue b/src/layout/header.vue
@@ -27,7 +27,6 @@
 <script type="text/ecmascript-6">
 import logo from "@/assets/logo.png"
 import Theme from '@/components/theme'
-import Tabs from '@/base/tabs'
 import Search from '@/components/search'
 export default {
   created() {
@@ -41,10 +40,10 @@ export default {
         title: '歌单',
         to: '/playlists',
       },
-      // {
-      //   title: '音乐',
-      //   to: '/songs'
-      // }
+      {
+        title: '最新音乐',
+        to: '/songs'
+      }
     ]
   },
   data() {
@@ -57,7 +56,7 @@ export default {
       this.$router.push("/discovery")
     }
   },
-  components: { Theme, Search, Tabs }
+  components: { Theme, Search }
 }
 </script>
 

diff --git a/src/layout/index.vue b/src/layout/index.vue
@@ -16,6 +16,7 @@
 <script type="text/ecmascript-6">
 import LayoutHeader from "./header"
 import LayoutMenu from "./menu"
+import { topRoutes } from '@/router'
 
 export default {
   data() {
@@ -27,7 +28,9 @@ export default {
   },
   computed: {
     routerViewCls() {
-      return ['/discovery', '/playlists'].includes(this.$route.path) ? 'router-view-center' : ''
+      return topRoutes.find(({ path }) => path === this.$route.path)
+        ? 'router-view-center'
+        : ''
     }
   }
 }
@@ -46,11 +49,10 @@ export default {
       overflow-y: auto;
       margin-bottom: $mini-player-height;
       padding-bottom: 32px;
-      display: flex;
-      justify-content: center;
 
       .router-view-center {
         max-width: $center-content-width;
+        margin: auto;
       }
     }
   }

diff --git a/src/page/discovery/index.vue b/src/page/discovery/index.vue
@@ -22,6 +22,10 @@ export default {
 
 <style lang="scss" scoped>
 .discovery {
-  padding: 0 36px;
+  padding: 0 32px;
+
+  .discovery-content {
+    padding-bottom: 36px;
+  }
 }
 </style>