更新 - 榜单页面

Author: lbwa

src/api/config.js

@@ -25,7 +25,9 @@ export const LYRIC_URL = '/api/getLyric'
 export const RECOMMEND_ITEM_URL = '/api/getRecommendItem'
 
 // 移动端 ranking-list url
-export const RANKING_LIST = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
+export const RANKING_LIST_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg'
 
 // 桌面端 ranking-list url
-// export const RANKING_LIST = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_opt.fcg'
+// export const RANKING_LIST_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_opt.fcg'
+
+export const FULL_RANKING_LIST_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'

src/api/the-ranking.js

@@ -1,6 +1,8 @@
-import { RANKING_LIST, options } from './config'
+import { RANKING_LIST_URL, FULL_RANKING_LIST_URL, options, commonParams } from './config'
 import jsonp from 'common/js/jsonp'
 
+// start
+
 // 桌面端 toplist jsonp 配置
 
 /**
@@ -16,7 +18,7 @@ export function getRankingList () {
  v8debug: 1
  }
 
- return jsonp(RANKING_LIST, data, {
+ return jsonp(RANKING_LIST_URL, data, {
  ...options,
  prefix: '',
  name: 'jsonCallback'
@@ -43,3 +45,28 @@ export function getRankingList () {
 // name: 'jsonCallback'
 // })
 // }
+
+// end
+
+export function getFullRankingList (id) {
+ const data = {
+ ...commonParams,
+ tpl: 3,
+ page: 'detail',
+ // data: 歌单更新日期，
+ topid: id,
+ type: 'top',
+ song_begin: 0,
+ song_num: 30,
+ loginUin: 0,
+ hostUin: 0,
+ platform: 'yqq',
+ needNewCode: 0
+ }
+
+ return jsonp(FULL_RANKING_LIST_URL, data, {
+ ...options,
+ prefix: '',
+ name: 'MusicJsonCallbacktoplist'
+ })
+}

src/components/parts-ranking-item/parts-ranking-item.vue

@@ -0,0 +1,74 @@
+<template>
+ <transition name="slide">
+ <PartsMusicList
+ :bgImage="selectedTopList.picUrl"
+ :title="selectedTopList.topTitle"
+ :songs="songList"
+ />
+ </transition>
+</template>
+
+<script>
+import PartsMusicList from 'components/parts-music-list/parts-music-list'
+import { getFullRankingList } from 'api/the-ranking'
+import { mapGetters } from 'vuex'
+import { ERR_OK } from 'api/config'
+import { createSong } from 'common/js/normalize-song'
+
+export default {
+ data () {
+ return {
+ songList: [] // 格式化后的歌曲容器
+ }
+ },
+
+ methods: {
+ _getFullRankingList (id) {
+ if (!this.selectedTopList.id) {
+ this.$router.push({ path: '/ranking' })
+ return
+ }
+ getFullRankingList(id).then(res => {
+ if (res.code === ERR_OK) {
+ this.songList = this._normalizeSong(res.songlist)
+ } else {
+ throw new Error('Check ERR_OK failed.')
+ }
+ })
+ },
+
+ _normalizeSong (list) {
+ let ret = []
+ list.forEach(musicData => {
+ if (musicData.data.songmid && musicData.data.albumid) {
+ ret.push(createSong(musicData.data))
+ }
+ })
+ return ret
+ }
+ },
+
+ created () {
+ this._getFullRankingList(this.selectedTopList.id)
+ },
+
+ computed: {
+ ...mapGetters([
+ 'selectedTopList'
+ ])
+ },
+
+ components: {
+ PartsMusicList
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.slide-enter, .slide-leave-to {
+ transform: translateX(100%);
+}
+.slide-enter-active, .slide-leave-active {
+ transition: all .3s ease;
+}
+</style>

src/components/the-ranking/ranking.vue

@@ -5,6 +5,7 @@
  <li
  class="ranking-item"
  v-for="(list, listIndex) of topList" :key="listIndex"
+ @click="selectList(list)"
  >
  <div class="ranking-icon">
  <img v-lazy="list.picUrl" width="100" height="100" alt="ranking-icon">
@@ -35,6 +36,7 @@ import BaseLoading from 'base/base-loading/base-loading'
 import { getRankingList } from 'api/the-ranking'
 import { ERR_OK } from 'api/config'
 import { playlistMixin } from 'common/js/mixin'
+import { mapMutations } from 'vuex'
 
 export default {
  mixins: [playlistMixin],
@@ -45,13 +47,22 @@ export default {
  },
 
  methods: {
+ selectList (list) {
+ this.selectedTopList(list)
+ this.$router.push({ path: `/ranking/${list.id}` })
+ },
+
  handlePlaylist (playlist) {
  const bottom = this.playlist.length > 0 ? '60px' : ''
 
  this.$refs.list.style.bottom = bottom
  this.$refs.scroll.refresh()
  },
 
+ ...mapMutations({
+ selectedTopList: 'SET_SELECTED_TOPLIST'
+ }),
+
  _getRankingList () {
  getRankingList().then(res => {
  if (res.code === ERR_OK) {

src/router/index.js

@@ -5,6 +5,7 @@ import RecommendItem from 'components/parts-recom-item/parts-recom-item'
 import Artist from 'components/the-artist/artist'
 import ArtistItem from 'components/parts-artist-item/parts-artist-item'
 import Ranking from 'components/the-ranking/ranking'
+import RankingItem from 'components/parts-ranking-item/parts-ranking-item'
 import Search from 'components/the-search/search'
 
 Vue.use(Router)
@@ -37,7 +38,13 @@ export default new Router({
  },
  {
  path: '/ranking',
- component: Ranking
+ component: Ranking,
+ children: [
+ {
+ path: ':id',
+ component: RankingItem
+ }
+ ]
  },
  {
  path: '/search',

src/store/getters.js

@@ -17,3 +17,5 @@ export const currentSong = state => { // 经试验，修改 playlist 不会导
 }
 
 export const recommendItem = state => state.recommendItem
+
+export const selectedTopList = state => state.selectedTopList

src/store/mutation-types.js

@@ -14,3 +14,5 @@ export const SET_PLAY_MODE = 'SET_PLAY_MODE'
 export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'
 
 export const SET_RECOMMEND_ITEM = 'SET_RECOMMEND_ITEM'
+
+export const SET_SELECTED_TOPLIST = 'SET_SELECTED_TOPLIST'

src/store/mutations.js

@@ -31,6 +31,10 @@ const mutations = {
 
  [types.SET_RECOMMEND_ITEM] (state, recommendItem) {
  state.recommendItem = recommendItem
+ },
+
+ [types.SET_SELECTED_TOPLIST] (state, selectedTopList) {
+ state.selectedTopList = selectedTopList
  }
 }
 

src/store/state.js

@@ -8,7 +8,8 @@ const state = { // 只保留最基础的数据，由基础数据可计算得到
  sequenceList: [], // 播放列表的播放顺序列表
  mode: playMode.sequence, // 语义化值，而不是直接写属性值
  currentIndex: -1, // 当前播放歌曲的索引，驱动歌曲的播放行为
- recommendItem: []
+ recommendItem: [], // 用户点击的推荐歌单项
+ selectedTopList: [] // 用户点击的排行榜
 }
 
 export default state