<template>
<div class="home">
<div class="top"></div>
<van-index-bar v-for="(item,index) in allData" :key="index">
<!-- <van-index-anchor v-for="(item,index) in allData" :key="index" index="A" /> -->
<van-cell v-for="(item1,index1) in item" :key="index1" :title="item1.name" />
</van-index-bar>
</div>
</template>
<script>
import {pinyin} from '../../node_modules/js-pinyin/index'
export default {
name: 'Home',
components: {
},
data(){
return{
allData:[],
FristPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
}
},
mounted(){
this.get_data()
},
methods:{
get_data(params) {
let pinyin = require('js-pinyin');
pinyin.setOptions({checkPolyphone: false, charCase: 0});
return new Promise((resolve, reject) => {
this.$axios({
type: "get",
url: "http://120.79.162.149:3000/top/artists?limit=100",
}).then(res => {
res.data.artists.map(item=>{
item.firstCode = pinyin.getCamelChars(item.name).substring(0, 1);
})
let cityJson = {}
var that = this
for (let i = 0; i < this.FristPin.length; i++) {
cityJson[this.FristPin[i]] = res.data.artists.filter(function (value) {
return value.firstCode === that.FristPin[i];
})
this.allData.push(cityJson[this.FristPin[i]])
}
console.log(this.allData)
}).catch(error=>{
reject(error)
});
});
},
}
}
</script>
<style lang="scss">
.home {
.top{
width: 100%;
height: 150px;
background: #f5f5f5;
}
}
</style>
<template>
<div class="play">
<ul>
<li v-for="(item,index) in hotdata" :key="index" @click="getHotlist(item.first)">{{item.first}}</li>
</ul>
<div class="header">
<--input绑定 v-model name-->
<input type="text" @keyup="change" v-model="name">
</div>
</div>
</template>
<script>
export default {
name: "Home",
components: {},
data() {
return {
name:'',
hotdata:[]
};
},
mounted() {
//进来拿到热门数据,
this.get_hotdata()
},
methods: {
//在输入框绑定一个keyup事件
change(){
//每次输入框有输入就会触发 事件获取数据
this.get_data(this.name)
},
get_data(data) {
return new Promise((resolve, reject) => {
this.$axios({
type: "get",
url: `http://120.79.162.149:3000/search?keywords=${data}&offset=0`
})
.then(res => {
})
.catch(error => {
reject(error);
});
});
},
get_hotdata() {
return new Promise((resolve, reject) => {
this.$axios({
type: "get",
url: `http://120.79.162.149:3000/search/hot`
})
.then(res => {
this.hotdata = res.data.result.hots
console.log(res);
})
.catch(error => {
reject(error);
});
});
},
//获取到的热门歌曲 每一个绑定一个点击事件 ,把名字传过来,根据名字调用搜索接口
getHotlist(item){
this.get_data(item)
},
}
};
</script>
<style lang="scss">
.play{
li{
list-style: none;
}
}
</style>
城市数据处理
最新推荐文章于 2024-06-03 14:24:32 发布