vant 拼音排序 城市列表

template>

  <div>

    <van-index-bar class="indexBar" :sticky="false" highlight-color="#AE853A">

      <van-index-anchor v-for="(item,index) in this.cityData" :key="index" :index=item.id>

       <span class="indexWord"  @click="chooseCity(item)">{{item.first}}</span><br>

         <router-link to="/bibing"><span class="indexWord"  @click="chooseCity(item)">{{item.vlaue}}</span><br></router-link>

       

      </van-index-anchor>

    </van-index-bar>

  </div>

</template>

<script>

import { Toast, Col, Row } from "vant";

import { platform } from "@/api/getData";

 

export default {

  data() {

    return {

      indexList: [],cityData:[],copycityData:[],

      list: {},

      FirstPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],

    };

  },

  methods: {

    getdate() {

      let arr = [],

        newarr = [],

 

        newArrs = [];

      let data = { types: [1, 8] };

      platform(data).then((res) => {  //axios 封装的方法 从后台拿到的数据

        arr = res.data.data;

        for (let i = 0; i < arr.length; i++) {

          newarr.push({

            vlaue: arr[i].name,

            id: arr[i].id,

          });

        }

          this.indexList = newarr;

          // console.log( this.indexList)

          let firstName = {};

        

          var pinyin = require("pinyin");

         

          console.log("wordName",this.indexList)

          for (let i = 0; i < this.indexList.length; i++) {

            //获取每条数据里的名称

            let wordName = this.indexList[i].vlaue;

            // console.log("wordName",wordName)

            //获取所有名称的首字母，并且大写

            let fristName = pinyin(wordName, {

              style: pinyin.STYLE_NORMAL,

              heteronym: true,

            })[0][0]

              .substring(0, 1)

              .toUpperCase();

            // console.log("fristName",fristName)

            // 进行判断，给原始json数据添加新的键值对

            if (this.FirstPin.includes(fristName) == true) {

              this.indexList[i].first = fristName;

            } else {

              this.indexList[i].first = "#";

            }

            // 选种状态

            this.indexList[i].isSelect = false;

            //放入新的数组中

            newArrs.push(this.indexList[i]);

            // console.log("newArrs",newArrs)

          }

           let wordJson = [];

        for (let i = 0; i < this.FirstPin.length; i++) {

          newArrs.forEach((el) => {

            if (this.FirstPin[i] === el.first) {

              wordJson.push(el);

            }

          });

        }

        this.cityData  = wordJson;

        // if (this.cityData.length > 0) {

        //   this.cityData[0].isSelect = true;  // 默认选种第一条数据

        // }

 

 

        });