首页新歌速递模块

src/app/index.vue

@@ -46,5 +46,5 @@ export default {
 </script>
 
 <style lang="scss">
-    @import "./style"
+@import "./style"
 </style>

src/app/router.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Index from 'pages/Index'
 import Profile from 'pages/Profile'
 import Discover from 'pages/Discover'
+import Album from 'pages/Album'
 
 Vue.use(Router)
 
@@ -19,6 +20,10 @@ const router = new Router({
         path: '/discover',
         name: 'Discover',
         component: Discover
+    }, {
+        path: '/album',
+        name: 'Album',
+        component: Album
     }]
 })
 

src/pages/Album/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="album-list-container">
+        专辑列表页
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'album-list'
+}
+
+</script>

src/pages/Index/album.vue

@@ -0,0 +1,47 @@
+<template>
+
+<div class="album-container">
+    <div class="album-header">
+        <div class="title">新歌速递</div>
+        <router-link to="/album" class="link">
+            <span class="arrow"></span>
+        </router-link>
+    </div>
+    <div class="album-body">
+        <div class="album-item-box" v-for="item in albumList">
+            <router-link to="/">
+                <div class="album-cover" :style="item.album_cover_style"></div>
+                <div class="info-mask">
+                    <div class="album-name">{{ item.album_name }}</div>
+                    <div class="singer">{{ item.singer_name }}</div>
+                </div>
+            </router-link>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script>
+import * as request from 'utils/request'
+
+export default {
+    name: 'album',
+    data () {
+        return {
+            albumList: []
+        }
+    },
+    mounted () {
+        request.getAlbumList({ cmd: 'get_album_info', pagesize: 6 }).then(resp => {
+            this.albumList = resp.albumlist.map(item => {
+                item.album_cover_style = {
+                    backgroundImage: `url(https://y.gtimg.cn/music/photo_new/T002R300x300M000${item.album_mid}.jpg)`
+                }
+                return item
+            })
+        })
+    }
+}
+
+</script>

src/pages/Index/index.vue

@@ -2,9 +2,7 @@
 
 <div class="page-wrap">
     <slider :pages="focus"></slider>
-    <div class="title">this is a test component.</div>
-    <div class="test">{{ message }}</div>
-    <div class="counter">{{ counter }}</div>
+    <album></album>
 </div>
 
 
@@ -13,6 +11,7 @@
 <script>
 import * as request from 'utils/request'
 import slider from 'components/slider'
+import album from './album'
 
 export default {
     name: 'index',
@@ -25,7 +24,7 @@ export default {
             toplist: [] // 排行榜
         }
     },
-    components: { slider },
+    components: { slider, album },
     computed: {
         counter () {
             return 20 + 30
@@ -45,15 +44,11 @@ export default {
             this.shoubomv = resp.shoubomv
             this.toplist = resp.toplist
         })
-
-        request.getAlbumList().then(resp => {
-            console.log(resp)
-        })
     }
 }
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import './style'
 </style>

src/pages/Index/style.scss

@@ -0,0 +1,45 @@
+.album-container {
+    margin-top: 20px;
+
+    .album-header {
+        height: 40px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 10px;
+    }
+    .link {
+        display: block;
+        width: 20px;
+        height: 20px;
+        background-color: #ccc;
+    }
+
+    .album-body {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .album-item-box {
+        width: 33%;
+        margin-bottom: 20px;
+    }
+
+    .album-cover {
+        height: 100px;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+    .info-mask {
+        padding-left: 10px;
+        font-size: 12px;
+        margin-top: 5px;
+    }
+
+    .album-name {
+        font-size: 14px;
+        color: #000;
+    }
+}

src/utils/request.js

@@ -40,16 +40,18 @@ const defaultConfig = {
     year: 1,
     pay: 0,
     type: -1,
-    company: -1
+    company: -1,
+    sort: 1
 }
-export const getAlbumList = (options = defaultConfig) => {
+export const getAlbumList = (options) => {
+    options = { ...defaultConfig, ...options }
     return jsonp(API.albumList, {
         params: {
             jsonpCallback: 'GetAlbumListJsonCallback',
             cmd: options.cmd,
             page: options.page,
             pagesize: options.pagesize || 20,
-            sort: 1,
+            sort: options.sort,
             language: options.language,
             genre: options.genre,
             year: options.year,

static/apis/albumList 专辑列表获取.md

@@ -100,3 +100,8 @@ JSONP https://c.y.qq.com/v8/fcg-bin/album_library
   2067: 林暐哲音乐   
   16800: NHN BUGS   
   1431: Genie Music  
+
++ `sort` 排序
+
+  1: 最新  
+  2: 最热