更新 - ranking-list 样式及数据

Author: lbwa

src/api/config.js

@@ -23,3 +23,9 @@ export const ARTIST_DETAIL_URL = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_tr
 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'
+
+// 桌面端 ranking-list url
+// export const RANKING_LIST = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_opt.fcg'

src/api/the-ranking.js

@@ -0,0 +1,45 @@
+import { RANKING_LIST, options } from './config'
+import jsonp from 'common/js/jsonp'
+
+// 桌面端 toplist jsonp 配置
+
+/**
+ * 原移动端 jsonp 方法改为了 ajax 请求（直接使用 jsonp 将导致格式错误），自己意外的以
+ * 桌面端配置请求移动端 url 返回了正确数据
+ */
+
+export function getRankingList () {
+ const data = {
+ page: 'index',
+ format: 'html',
+ tpl: 'macv4',
+ v8debug: 1
+ }
+
+ return jsonp(RANKING_LIST, data, {
+ ...options,
+ prefix: '',
+ name: 'jsonCallback'
+ })
+}
+
+// 移动端 toplist jsonp 配置
+// import { RANKING_LIST, commonParams, options } from './config'
+// import jsonp from 'common/js/jsonp'
+
+// export function getRankingList () {
+// const data = {
+// ...commonParams,
+// uin: 0,
+// format: 'json',
+// platform: 'h5',
+// needNewCode: 1,
+// _: +new Date()
+// }
+
+// return jsonp(RANKING_LIST, data, {
+// ...options,
+// prefix: '',
+// name: 'jsonCallback'
+// })
+// }

src/components/the-ranking/ranking.vue

@@ -1,13 +1,110 @@
 <template>
- <div class="ranking">Ranking area</div>
+ <div class="ranking-list">
+ <BaseScroll class="list-wrapper">
+ <ul>
+ <li
+ class="ranking-item"
+ v-for="(list, listIndex) of topList" :key="listIndex"
+ >
+ <div class="ranking-icon">
+ <img v-lazy="list.picUrl" width="100" height="100" alt="ranking-icon">
+ </div>
+
+ <ul class="ranking-info">
+ <li
+ class="info-song"
+ v-for="(song, songIndex) of list.songList"
+ :key="songIndex"
+ >
+ <span class="song-num">{{ songIndex + 1 }}</span>
+ <span class="song-text">{{ song.songname }} - {{ song.singername }}</span>
+ </li>
+ </ul>
+
+ </li>
+ </ul>
+ </BaseScroll>
+ </div>
 </template>
 
 <script>
+import BaseScroll from 'base/base-scroll'
+import { getRankingList } from 'api/the-ranking'
+import { ERR_OK } from 'api/config'
+
 export default {
+ data () {
+ return {
+ topList: []
+ }
+ },
 
+ methods: {
+ _getRankingList () {
+ getRankingList().then(res => {
+ if (res.code === ERR_OK) {
+ this.topList = res.data.topList
+ }
+ })
+ }
+ },
+
+ created () {
+ this._getRankingList()
+ },
+
+ components: {
+ BaseScroll
+ }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '~scss/variables';
+@import '~scss/mixin';
 
+.ranking-list {
+ position: fixed;
+ top: 88px;
+ bottom: 0;
+ width: 100%;
+ font-size: 0;
+ .list-wrapper {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ }
+ .ranking-item {
+ display: flex;
+ padding-top: 20px;
+ margin: 0 20px;
+ &:last-child {
+ padding: 20px 0;
+ }
+ .ranking-icon {
+ flex: 0 0 100px;
+ width: 100px;
+ height: 100px;
+ img {
+ width: 100px; // ios safari 不支持行内设置 img 宽高
+ height: 100px;
+ }
+ }
+ .ranking-info {
+ flex: 1;
+ display: flex;
+ padding: 0 20px;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ background-color: $color-highlight-background;
+ color: $color-text-d;
+ font-size: $font-size-small;
+ .info-song {
+ @include ellipsis();
+ line-height: 26px;
+ }
+ }
+ }
+}
 </style>