[feat] perfect recommend

Author: telami

src/api/recommend.js

@@ -36,3 +36,24 @@ export function getDiscList() {
     return Promise.resolve(res.data)
   })
 }
+
+export function getSongList(disstid) {
+  const url = '/api/getSongList'
+
+  const data = Object.assign({}, commonParams, {
+    disstid,
+    type: 1,
+    json: 1,
+    utf8: 1,
+    onlysong: 0,
+    platform: 'yqq',
+    hostUin: 0,
+    needNewCode: 0,
+    g_tk: 67232076
+  })
+  return axios.get(url, {
+    params: data
+  }).then(res => {
+    return Promise.resolve(res.data)
+  })
+}

src/components/disc/disc.vue

@@ -0,0 +1,67 @@
+<template>
+  <transition name="slide">
+    <music-list :title="title" :bg-image="bgImage" :songs="songs"/>
+  </transition>
+</template>
+
+<script>
+  import MusicList from "../music-list/music-list";
+  import {mapGetters} from 'vuex'
+  import {getSongList} from 'api/recommend'
+  import {createSong} from 'common/js/song'
+  import {ERR_OK} from "api/config";
+
+  export default {
+    name: "disc",
+    components: {MusicList},
+    data() {
+      return {
+        songs: []
+      }
+    },
+    computed: {
+      title(){
+        return this.disc.dissname
+      },
+      bgImage() {
+        return this.disc.imgurl
+      },
+      ...mapGetters([
+        'disc'
+      ])
+    },
+    created() {
+      this._getSongList()
+    },
+    methods: {
+      _getSongList() {
+        if (!this.disc.dissid) {
+          this.$router.push('/recommend')
+          return
+        }
+        getSongList(this.disc.dissid).then((res) => {
+          if (res.code === ERR_OK) {
+            this.songs = this._normalizeSongs(res.cdlist[0].songlist)
+          }
+        })
+      },
+      _normalizeSongs(list) {
+        let ret = []
+        list.forEach((musicData) => {
+          if (musicData.songid && musicData.albummid) {
+            ret.push(createSong(musicData))
+          }
+        })
+        return ret
+      }
+    },
+  }
+</script>
+
+<style scoped lang="stylus" rel="stylesheet/stylus">
+  .slide-enter-active, .slide-leave-active
+    transition: all 0.3s
+
+  .slide-enter, .slide-leave-to
+    transform: translate3d(100%, 0, 0)
+</style>

src/components/recommend/recommend.vue

@@ -14,7 +14,7 @@
         <div class="recommend-list">
           <h1 class="list-title">热门歌单推荐</h1>
           <ul>
-            <li v-for="(item,index) in discList" :key="index" class="item">
+            <li @click="selectItem(item)" v-for="(item,index) in discList" :key="index" class="item">
               <div class="icon">
                 <img width="60" height="60" v-lazy="item.imgurl"/>
               </div>
@@ -30,6 +30,7 @@
         <loading></loading>
       </div>
     </scroll>
+    <router-view/>
   </div>
 </template>
 
@@ -40,10 +41,11 @@
   import Scroll from "base/scroll/scroll";
   import Loading from "base/loading/loading";
   import {playlistMixin} from "common/js/mixin";
+  import {mapMutations} from 'vuex'
 
   export default {
     name: "recommend",
-    mixins:[playlistMixin],
+    mixins: [playlistMixin],
     data() {
       return {
         recommends: [],
@@ -63,6 +65,12 @@
         this.$refs.recommend.style.bottom = bottom
         this.$refs.scroll.refresh()
       },
+      selectItem(item) {
+        this.$router.push({
+          path: `/recommend/${item.dissid}`
+        })
+        this.setDisc(item)
+      },
       _getRecommend() {
         getRecommend().then((res) => {
           if (res.code === ERR_OK) {
@@ -82,7 +90,10 @@
           this.$refs.scroll.refresh()
           this.checkLoaded = true
         }
-      }
+      },
+      ...mapMutations({
+        setDisc: 'SET_DISC'
+      })
     }
   }
 </script>

src/router/router.js

@@ -12,7 +12,14 @@ export default new Router({
     {
       path: '/recommend',
       name: 'recommend',
-      component: () => import( 'components/recommend/recommend.vue')
+      component: () => import( 'components/recommend/recommend.vue'),
+      children: [
+        {
+          path:':id',
+          name:'disc',
+          component: () => import( 'components/disc/disc.vue')
+        }
+      ]
     },
     {
       path: '/rank',

src/store/mutations.js

@@ -4,7 +4,7 @@ const mutations = {
   [types.SET_SINGER](state, singer) {
     state.singer = singer
   },
-  [types.SET_PLAYING_STATE](state,flag){
+  [types.SET_PLAYING_STATE](state, flag) {
     state.playing = flag
   },
   [types.SET_FULL_SCREEN](state, flag) {
@@ -21,6 +21,21 @@ const mutations = {
   },
   [types.SET_CURRENT_INDEX](state, index) {
     state.currentIndex = index
+  },
+  [types.SET_DISC](state, disc) {
+    state.disc = disc
+  },
+  [types.SET_TOP_LIST](state, topList) {
+    state.topList = topList
+  },
+  [types.SET_SEARCH_HISTORY](state, history) {
+    state.searchHistory = history
+  },
+  [types.SET_PLAY_HISTORY](state, history) {
+    state.playHistory = history
+  },
+  [types.SET_FAVORITE_LIST](state, list) {
+    state.favoriteList = list
   }
 }
 

src/store/state.js

@@ -7,6 +7,7 @@ const state = {
   playlist: [],
   sequenceList: [],
   mode: playMode.sequence,
-  currentIndex: -1
+  currentIndex: -1,
+  disc:{}
 }
 export default state

vue.config.js

@@ -16,8 +16,8 @@ module.exports = {
   },
   devServer: {
     before(app) {
-      var url = "https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg";
       app.get('/api/getDiscList', function (req, res) {
+        var url = "https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg";
         axios.get(url, {
           headers: {
             referer: 'https://c.y.qq.com/',
@@ -53,6 +53,30 @@ module.exports = {
           console.log(e)
         })
       })
+      app.get('/api/getSongList', function (req, res) {
+        var url = 'https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg'
+
+        axios.get(url, {
+          headers: {
+            referer: 'https://c.y.qq.com/',
+            host: 'c.y.qq.com'
+          },
+          params: req.query
+        }).then((response) => {
+          var ret = response.data
+          if (typeof ret === 'string') {
+            // var reg = /^\w+\(({[^()]+})\)$/
+            var reg = /{.*}/
+            var matches = ret.match(reg)
+            if (matches) {
+              ret = JSON.parse(matches[0])
+            }
+          }
+          res.json(ret)
+        }).catch((e) => {
+          console.log(e)
+        })
+      })
     }
   }
 }