<template>
<div class="singer">
<!--<list-view :data="singers"></list-view>-->
<listview :data="singers"></listview>
</div>
</template>
<script type="text/ecmascript-6">
import {getSingerList} from 'api/singer'
import {ERR_OK} from 'api/config'
import Singer from 'common/js/singer'
// import ListView from 'base/listview/listview'
import Listview from 'base/listview/listview'
const HOT_NAME = '热门'
const HOT_SINGER_LEN = 10
export default {
data () {
return {
singers: []
}
},
created () {
this._getSingerList()
},
methods: {
_getSingerList () {
getSingerList().then((res) => {
if (res.code === ERR_OK) {
this.singers = this._normalizeSinger(res.data.list)
console.log(this.singers)
}
})
},
_normalizeSinger (list) {
// map分为hot和key
let map = {
hot: {
title: HOT_NAME,
items: []
}
}
list.forEach((item, index) => {
// 前10名放在热门里面
if (index < HOT_SINGER_LEN) {
map.hot.items.push(new Singer({
id: item.Fsinger_mid,
name: item.Fsinger_name
}))
// {
// id: item.Fsinger_mid,
// name: item.Fsinger_name,
// avatar: `https://y.gtimg.cn/music/photo_new/T001R150x150M00${item.Fsinger_mid}.jpg?max_age=2592000`
// }
}
const key = item.Findex
if (!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push(new Singer({
id: item.Fsinger_mid,
name: item.Fsinger_name
}))
})
// 为了得到有序列表,我们需要处理 map
let hot = []
let ret = []
for (let key in map) {
let val = map[key]
if (val.title.match(/[a-zA-Z]/)) {
ret.push(val)
} else if (val.title === HOT_NAME) {
hot.push(val)
}
}
// 从小到大排列
ret.sort((a, b) => {
return a.title.charCodeAt(0) - b.title.charCodeAt(0)
})
return hot.concat(ret)
}
},
components: {
// ListView
Listview
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.singer
position: fixed
top: 88px
bottom: 0
width: 100%
</style>
请大家看list-view的对应写法