VueMusic-13歌手列表

标签：cat   justify   order   items   use   limits   this   list   rop   

1.歌手列表

<template>
<div class="artists">
<ul class="list">
<router-link tag="li" :to="{name:‘ArtistsDetails‘,params:{avatar:item.avatar_s500,name:item.name,ting_uid:item.ting_uid}}" :key="index" class="artist" v-for="(item,index) in artistsData">
<div class="pic">
<img :alt="item.name" :src="item.avatar_s500">
</div>
<div class="info">
<div>{{ item.name }}</div>
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default{
name:"artists",
data(){
return{
artistsArr:["2517","7994","1091","45561","2507","245815","1077","1204","1117","82366"],
artistsData:[]
}
},
mounted(){
for(var i =0;i<this.artistsArr.length;i++){
const artistsURL = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid="+ this.artistsArr[i];
this.$axios.get(artistsURL)
.then(res => {
this.artistsData.push({
avatar_s500:res.data.avatar_s500,
name:res.data.name,
ting_uid:res.data.ting_uid
})
})
.catch(error => {
console.log(error);
})
}
}
}
</script>

<style scoped>
.artists{
padding: 0 17px;
background: #fff;
}

.list li {
padding-left: 0;
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F2F2F2;
}

.pic{
width: 54px;
height: 54px;
margin-right: 15px;
}

.info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
font-size: 16px;
}

.pic img{
border-radius: 27px;
overflow: hidden;
}

</style>

2.歌手头部信息

<template lang="html">
<div class="art-list">
<ul class="list">
<router-link tag="li" :to="{name:‘MusicPlay‘,params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default {
name:"artlist",
data(){
return{
listArr:[]
}
},
props:{
ting_uid:{
type:String,
default:"0"
}
},
mounted(){
const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"
this.$axios.get(ArtList)
.then(res => {
this.listArr = res.data.songlist
})
.catch(error => {
console.log(error);
})
}
}
</script>

<style scoped>

.art-list{
padding: 0 17px;
}

.song{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #999;
}
.left{
font-size: 18;
}

</style>

3.歌手歌曲列表

<template lang="html">
<div class="art-list">
<ul class="list">
<router-link tag="li" :to="{name:‘MusicPlay‘,params:{songid:item.song_id}}" class="song" v-for="(item,index) in listArr" :key="index">
<div class="left">
{{ item.title }}
</div>
</router-link>
</ul>
</div>
</template>

<script>
export default {
name:"artlist",
data(){
return{
listArr:[]
}
},
props:{
ting_uid:{
type:String,
default:"0"
}
},
mounted(){
const ArtList = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+ this.ting_uid +"&limits=10&use_cluster=1&order=2"
this.$axios.get(ArtList)
.then(res => {
this.listArr = res.data.songlist
})
.catch(error => {
console.log(error);
})
}
}
</script>

<style scoped>

.art-list{
padding: 0 17px;
}

.song{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #999;
}
.left{
font-size: 18;
}

</style>

VueMusic-13歌手列表

标签：cat   justify   order   items   use   limits   this   list   rop   

原文地址：https://www.cnblogs.com/xiao-peng-ji/p/11439938.html