ipdate

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <HeaderComponent :searchQuery="searchQueryValue" ></HeaderComponent>
-    <router-view />    
+    <router-view :key="key" />    
   </div>
 </template>
 
@@ -21,6 +21,11 @@ export default {
     searchQueryValue(data) {
       this.searchQ = data
     }
+  },
+  computed:{
+    key() {
+      return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
+    }
   }
 }
 </script>

src/assets/css/style.scss

@@ -64,7 +64,7 @@ body {
 .smallTitle{
     font-size: $font-size;
     border-bottom: 1px solid darken($grey, 10%);
-    padding:5px 0;
+    padding:8px 0;
 }
 .container {
     display: flex;

src/components/AlbumComponent.vue

@@ -2,10 +2,12 @@
     <div id="AlbumComponent">
         <ul class="searchsingerList albumList" v-if="albumData" >
             <li v-for="(itemx,idx) in albumData" :key="idx">
-                <img :src="itemx.picUrl | filterImg"  />   
-                <span class="msk"></span>         
-                <p>{{itemx.name}}</p>
-                <p class="artistName">{{itemx.artist.name}}</p>
+                <router-link :to="`/albumDetail?id=${itemx.id}`">
+                    <img :src="itemx.picUrl | filterImg"  />   
+                    <span class="msk"></span>         
+                    <span>{{itemx.name}}</span>
+                    <span class="artistName">{{itemx.artist.name}}</span>                
+                </router-link>
             </li>
         </ul>
     </div>
@@ -29,4 +31,21 @@
     }
 </script>
 <style lang="scss">
+@import "../assets/css/variables.scss";
+#AlbumComponent{
+    .albumList {
+        .msk {
+            margin:0;
+            padding:0;
+        }
+        span {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-top: 5px;
+            font-size: $font-size - 2;
+        }
+    }
+}
 </style>

src/components/SongListComponent.vue

@@ -0,0 +1,55 @@
+<template>
+    <div id="SongListComponent" v-if="songlistData">
+        <div class="songlistTitle">
+            <h3>歌曲列表</h3>
+            <span>{{songlistData.trackCount}}首歌</span>
+            <p>播放：<span class="red">{{songlistData.playCount}}</span> 次</p>
+        </div>
+        <ul class="searchList">
+            <li v-for="(i,idxs) in songlistData.tracks" :key="idxs">
+                <router-link :to="`/songDetail?id=${i.id}`">
+                    <span class="number">{{idxs + 1}}</span>
+                    <span class="name"><img :src="i.al.picUrl" class="pic">{{i.name}}</span>
+                    <span>{{i.dt | transformTime}}</span>
+                    <span>{{i.ar[0].name}}</span>
+                </router-link>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+    import filter from '../filter.js'
+    export default {
+        name:"SongListComponent",
+        props:['songlistData'],
+        data () {
+            return {
+                pagename:'歌曲列表'
+            }
+        },
+        computed:{
+    
+        },
+        methods: {
+            
+        }
+    }
+</script>
+<style lang="scss">
+@import "../assets/css/variables.scss";
+    .songlistTitle {
+        display: flex;
+        border-bottom:2px solid $red;
+        padding:20px 0 10px 0;
+        font-size: $font-size - 2;
+        align-items: center;
+        h3 {
+            font-weight: normal;
+            margin-right: 20px;
+            font-size:$font-size + 4;
+        }
+        span {
+            flex:1;
+        }
+    }
+</style>

src/components/SongsComponent.vue

@@ -2,14 +2,14 @@
     <div id="SongsComponent">
         <ul class="searchList songsList" v-if="songsData" >
             <li v-for="(itemx,idx) in songsData" :key="idx">
-                <a>
+                <router-link :to="`/songlistDetail?id=${itemx.id}`">
                     <img :src="itemx.coverImgUrl" class="pic">
                     <span class="name">{{itemx.name}}</span>
                     <span class="count">{{itemx.trackCount}}首</span>
                     <span class="nickname">by {{itemx.creator.nickname}}</span>
                     <span class="bookcount">收藏: {{itemx.bookCount | transformNumber}}</span>
                     <span class="playcount">收听: {{itemx.playCount | transformNumber}}</span>
-                </a>
+                </router-link>
             </li>
         </ul>
     </div>

src/pages/AlbumDetail.vue

@@ -0,0 +1,197 @@
+<template>
+    <div id="AlbumDetail" class="area">
+        <div class="container">
+            <div class="containerRight">
+                <div class="songarea">
+                    <div class="sl" v-if="albumdetailJson">
+                        <div class="u-cover">
+                            <img :src="albumdetailJson.album.picUrl | filterImg" alt="">
+                            <div class="msk"></div>
+                        </div>
+                    </div>
+                    <div class="sr">
+                        <div class="songdetail" v-if="albumdetailJson">
+                            <h3>{{albumdetailJson.album.name}}</h3>
+                            <p>歌手:{{albumdetailJson.album.artist.name}}</p>
+                            <p>发行公司：{{albumdetailJson.album.company}}</p>
+                            <p class="description" :class="{collapse:isCollapse}">
+                                介绍：{{albumdetailJson.album.description}}
+                            </p>
+                            <p class="collapseBtn" @click="collapse()">
+                                <span v-if="isCollapse">展开<i class="el-icon-arrow-down"></i></span>
+                                <span v-else>收缩<i class="el-icon-arrow-up"></i></span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="songlistbox">
+                    <div class="songlistTitle">
+                        <h3>歌曲列表</h3>
+                    </div>
+                    <ul class="searchList">
+                        <li v-for="(i,key) in albumdetailJson.songs" :key="key">
+                            <router-link :to="`/songDetail?id=${i.id}`">
+                                <span class="number">{{key + 1}}</span>
+                                <span class="name">{{i.name}}</span>
+                                <span>{{i.ar[0].name}}</span>
+                            </router-link>
+                        </li>
+                    </ul>
+                </div>
+                <div class="commentbox">
+                    <CommentComponent :commentData="albumcommentJson.topComments" name="最热评论"></CommentComponent>
+                    <CommentComponent :commentData="albumcommentJson.hotComments" name="精彩评论"></CommentComponent>
+                    <CommentComponent :commentData="albumcommentJson.comments" name="评论"></CommentComponent>
+                </div>
+            </div>
+            <div class="containerLeft">
+                <div class="margin">
+                    <div class="simisongbox">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import {filter} from '../filter.js'
+    import CommentComponent from '@/components/CommentComponent'
+    export default {
+        name:"AlbumDetail",
+        components:{
+            CommentComponent,
+        },
+        data () {
+            return {
+                pagename: '专辑详情',
+                isCollapse: true,
+            }
+        },
+        methods: {
+            ...mapActions([
+                'getAlbumDetailData',
+                'getAlbumCommentData'
+            ]),
+            collapse(){
+                this.isCollapse = !this.isCollapse;
+            }
+        },
+        computed: {
+            ...mapState({
+                'albumdetailJson': state => state.songlist.albumdetail,
+                'albumcommentJson': state => state.songlist.albumcomment,
+            })
+        },
+        mounted(){
+            let id = this.$route.query.id;
+            this.getAlbumDetailData({id});
+            this.getAlbumCommentData({id});
+        }
+    }
+</script>
+<style lang="scss">
+@import "../assets/css/variables.scss";
+#AlbumDetail{
+    .songarea {
+        display: flex;
+        .sl{
+            width:230px;
+        }
+        .sr{
+            flex:1;
+            overflow: hidden;
+        }
+    }
+    .creatorbox {
+        display: flex;
+        align-items: center;
+        img {
+            width: 50px;
+            height:50px;
+            border:1px solid $grey;
+            margin-right: 10px;
+        }
+    }
+    .tagsbox {
+        span{
+            border:1px solid $grey;
+            border-radius: 14px;
+            margin-right: 7px;
+            padding: 1px 9px;
+        }
+    }
+    .songdetail {
+        margin-top: 30px;
+        p {
+            line-height: 25px;
+            font-size: $font-size - 2;
+            margin-top: 5px;
+        }
+    }
+    .songlistbox {
+        margin-top: 20px;
+        ul {
+            border:1px solid $grey;
+            margin-top: 10px;
+            padding:0;
+        }
+    }
+    .u-cover {
+        position: relative;
+        margin-top: 30px;
+        img {
+            width: 177px;
+            height: 177px;
+        }
+        .msk {
+            position: absolute;
+            width: 209px;
+            height: 177px;
+            top: 0;
+            left: 0;
+            background:url('../assets/images/coverall.png') no-repeat 0 -986px;
+        }
+    }
+    .simisongbox {
+        li {
+            margin-right:5px;
+            width: 102px;
+            margin-top: 10px;
+            a {
+                padding:0;
+            }
+            span {
+                display: block;
+                line-height:20px;
+            }
+            .name {
+                color:$font-detail-color;
+            }
+            .pic {
+                height:102px;
+                margin-right: 0;
+            }
+            .count,
+            .bookcount,
+            .playcount {
+                display: none;
+            }
+        }
+    }
+    .description {
+        &.collapse {
+            max-height: 200px;
+            overflow: hidden;
+        }
+    }
+    .collapseBtn {
+        text-align: right;
+        span {
+            cursor: pointer;
+        }
+    }
+}
+</style>

src/pages/Artist.vue

@@ -11,7 +11,7 @@
                         <div v-if="item.name==='songs'" class="songs">
                             <ul class="searchList">
                                 <li v-for="(i,idx) in songsJson.hotSongs" :key="idx">
-                                    <router-link to="/songDetail">
+                                    <router-link :to="`/songDetail?id=${i.id}`">
                                         <span class="name">{{i.name}}<b v-if="i.alia.length>0">-{{i.alia[0]}}</b></span>
                                         <span>{{i.dt | transformTime}}</span>
                                         <span>{{i.al.name}}</span>