VueMusic-13歌手列表

Posted 2022-09-15 xiao-peng-ji

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>