Vue3从0到1组件开发-业务组件：城市选择器

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

分析一下

这类组件的话常见于服务性质或者商业性质类的项目上，例如美团、饿了么、去哪儿等项目，这类项目为客户提供的服务需要直接用户当前的位置，如果用户有其他的需求的，则可以选择当前所在的城市以及位置。

所以这时候，除了基础的授权定位意外，就有两类服务是必须的啦， 一是城市选择器，一是地图。

地图的话通常都是用市面上现成的地图项目，毕竟自己搞一个那可太牛了。

而城市选择器的话，一般城市肯定是找现成的了，主要是渲染这一块可以用组件库当中的，也可以自己搞。

这篇文章就是讲讲自己搞的城市选择器了。

重点：结构

效果图如上，这里可以看到主要是两个大类（大陆及港澳台的分类是公司内部项目需要，这里不提。）

主要是热门城市，以及按拼字首拼排序的全部城市。

第一步当然是找到一个城市的json列表了，这里小伙伴可以自己找下哦，这里写下json结构

{
  hot: [
    {
      "cityName": '北京市',
      "pinYin": 'beijing',
      "py": 'bj',
      "code": 'PEK'
    }
  ],
  citys: [ // 同上
    {
      
    }
  ]
}

有了所有城市的接口之后，就可以渲染列表了

<!-- 热门城市 -->
<view v-if="searchValue == '' && tabCur === 0">
  <view class="letter-header" style="font-size: 30rpx;height: 70upx;">热门</view>
  <view class="grid col-4 text-center padding-right">
    <view class="padding-tb" v-for="(city, i) in hotCities" :key="i" @click="back_city(city, 1)">
      <text>{{ city.cityName }}</text>
    </view>
  </view>
</view>
<!-- 按字母排序之后的城市 -->
<view v-if="searchValue == ''" v-for="(item, index) in list[tabCur]" :id="getId(index)" :key="index">
  <view class="letter-header">{{ getId(index) }}</view>
  <view class="city-view" v-for="(city, i) in item" :key="i" @click="back_city(city, 1)">
    <text class="city">
      <!-- <span v-if="tabCur == 1" style="margin-right:10rpx;">{{ city.py }}</span> -->
      {{ city.cityName }}
    </text>
  </view>
</view>

import Citys from './city.js';
computed: {
  //中国热门城市
  hotCities() {
    return Citys.hotCities;
  },
  citys() {
    return Citys.cities;
  }
},
onMounted(){
  //获取city.js 的程序字母
  let mu = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'w', 'x', 'y', 'z'];
  let tmp = [];
  let tmp1 = [];
  //中国城市数据源原处理this.citys
  for (let i in mu) {
    let item = mu[i];
    for (let j in this.citys) {
      let py = this.citys[j].py;
      if (py.substring(0, 1) == item) {
        if (JSON.stringify(tmp).indexOf(JSON.stringify(item)) == -1) {
          this.list[0][i] = [this.citys[j]];
          tmp.push(item);
          this.letter[0].push(item.toUpperCase());
        } else {
          this.list[0][i].push(this.citys[j]);
        }
      }
    }
  }
}