城市数据处理

<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>