能夠直接使用的城市選擇器

<template>
      <div>
          <!--頂部輸入框-->
          <div class="white">
              <div class="topinput">
                  <input type="text" placeholder="請輸入城市名稱" :value="inputName" @input="bindKeyInput">
                  <img src="/static/images/search.png" class="searchpic absolu">
                  <img src="/static/images/cancle.png" class="canclepic absolu" style="z-index:40" @click="bindBlur">
              </div>
          </div>
          <!--右側字母 左側列表-->
          <div class="container-inner">
              <div class="searchLetter touchClass">
                <div class="thishotText" @click="hotCity">
                  <div style="margin-top:0;">當前</div>
                  <div style="margin-top:0;">熱門</div>
                </div>
                <div v-for="(item, idx) in searchLetter" :key="idx" style="color:#ff6325;font-size:20rpx;" :data-letter="item" @click="clickLetter">
                  {{ item }}   
                </div>
              </div>
              <div class="container">
                  <scroll-view scroll-y="true" v-bind:style="{height: winHeight + 'px'}" :scroll-into-view="scrollTopId">
                  <!--定位當前城市-->
                  <div class="item mylocal" id="currentcity">定位當前城市</div>
                  <div class="itemlocat mylocal">
                      <div class="name">{{cityName}}</div>
                      <!-- <div class="chose" @click="choseCIty">
                        <img src="/static/images/can.png" class="can">
                        <text>從新定位</text>
                      </div> -->
                  </div>
                  
                    <div class="item">熱門城市</div>
                    <div class="flex-container cityhot">
                        <div class="name" v-for="item in hotCity" :key="item.id" :data-city="item.name"  @click="bindCity">{{item.name}}</div>
                    </div>
                    <!--搜索城市-->
                    <div class="citylist" v-for="(item,sindex) in searchlist" :key="sindex">
                        <div class="item" :id="item.initial">{{ item.initial }}</div>
                        <div style="padding:20rpx 30rpx;border-bottom:1rpx solid #f4f4f4"  :data-city="item.city" @click="bindCity">
                            {{item.city}}
                        </div>  
                    </div>
                    <!--城市列表-->
                      <div class="citylist" v-for="(item, idx) in citylist" :key="idx">
                        <div class="item" :id="item.initial">{{ item.initial }}</div>
                        <div style="padding:20rpx 30rpx;border-bottom:1rpx solid #f4f4f4" v-for="(cityItem, index) in item.cityInfo" :key="index" :data-code="cityItem.code" :data-city="cityItem.city" @click="bindCity">
                            {{cityItem.city}}
                        </div>
                      </div>
                  </scroll-view>
              </div>
          </div>
          
      </div>
    </template>
    
    <script>
    import "../../css/common.css";
    import "../../css/global.css";
    import { mapState, mapMutations } from "vuex"; //vuex輔助函數
    export default {
      onLoad(){
        this.setBarTitle();
        this.cityList()
      },
      data () {
        return {
            scrollTopId:"",//置頂id
            inputName:"",
            winHeight:"",
            searchLetter:['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
            citylist:[],//加載城市列表
            searchlist:[],//搜索城市的列表
            hotCity:[
                  {id:1,name:"深圳市"},
                  {id:2,name:"上海市"},
                  {id:3,name:"杭州市"},
                  {id:4,name:"廣州市"},
                  {id:5,name:"南京市"},
                  {id:6,name:"武漢市"},
                  {id:7,name:"成都市"},
                  {id:8,name:"北京市"},
                ],
            allCity: [
                  {'id': '35', 'provincecode': '150000', 'city': '阿拉善盟', 'code': '152900', 'initial': 'A', 'short': 'Alashanmeng'}, 
                  {'id': '38', 'provincecode': '210000', 'city': '鞍山市', 'code': '210300', 'initial': 'A', 'short': 'Anshan'}, 
                  {'id': '105', 'provincecode': '340000', 'city': '安慶市', 'code': '340800', 'initial': 'A', 'short': 'Anqing'},
                  {'id': '156', 'provincecode': '410000', 'city': '安陽市', 'code': '410500', 'initial': 'A', 'short': 'Anyang'}, 
                  {'id': '256', 'provincecode': '510000', 'city': '阿壩藏族羌族自治州', 'code': '513200', 'initial': 'A', 'short': 'Aba'},
                  {'id': '262', 'provincecode': '520000', 'city': '安順市', 'code': '520400', 'initial': 'A', 'short': 'Anshun'},
                  {'id': '289', 'provincecode': '540000', 'city': '阿里地區', 'code': '542500', 'initial': 'A', 'short': 'Ali'}, 
                  {'id': '299', 'provincecode': '610000', 'city': '安康市', 'code': '610900', 'initial': 'A', 'short': 'Ankang'}, 
                  {'id': '335', 'provincecode': '650000', 'city': '阿克蘇地區', 'code': '652900', 'initial': 'A', 'short': 'Akesu'}, 
                  {'id': '341', 'provincecode': '650000', 'city': '阿勒泰地區', 'code': '654300', 'initial': 'A', 'short': 'Aletai'}, 
                   {'id': '76', 'provincecode': '320000', 'city': '徐州市', 'code': '320300', 'initial': 'X', 'short': 'Xuzhou'},
                   {'id': '114', 'provincecode': '340000', 'city': '宣城市', 'code': '341800', 'initial': 'X', 'short': 'Xuancheng'}, 
                   {'id': '116', 'provincecode': '350000', 'city': '廈門市', 'code': '350200', 'initial': 'X', 'short': 'Xiamen'}, 
                   {'id': '128', 'provincecode': '360000', 'city': '新餘市', 'code': '360500', 'initial': 'X', 'short': 'Xinyu'},  
                   {'id': '173', 'provincecode': '420000', 'city': '襄樊市', 'code': '420600', 'initial': 'X', 'short': 'Xiangfan'}, {'id': '176', 'provincecode': '420000', 'city': '孝感市', 'code': '420900', 'initial': 'X', 'short': 'Xiaogan'}, {'id': '179', 'provincecode': '420000', 'city': '咸寧市', 'code': '421200', 'initial': 'X', 'short': 'Xianning'}, {'id': '185', 'provincecode': '430000', 'city': '湘潭市', 'code': '430300', 'initial': 'X', 'short': 'Xiangtan'},
                   {'id': '196', 'provincecode': '430000', 'city': '湘西土家族苗族自治州', 'code': '433100', 'initial': 'X', 'short': 'Xiangxi'}, {'id': '279', 'provincecode': '530000', 'city': '西雙版納傣族自治州', 'code': '532800', 'initial': 'X', 'short': 'Xishuangbanna'}, {'id': '291', 'provincecode': '610000', 'city': '西安市', 'code': '610100', 'initial': 'X', 'short': 'Xian'}, {'id': '294', 'provincecode': '610000', 'city': '咸陽市', 'code': '610400', 'initial': 'X', 'short': 'Xianyang'}, {'id': '315', 'provincecode': '630000', 'city': '西寧市', 'code': '630100', 'initial': 'X', 'short': 'Xining'},
                   {'id': '58', 'provincecode': '220000', 'city': '延邊朝鮮族自治州', 'code': '222400', 'initial': 'Y', 'short': 'Yanbian'}, {'id': '65', 'provincecode': '230000', 'city': '伊春市', 'code': '230700', 'initial': 'Y', 'short': 'Yichun'}, {'id': '82', 'provincecode': '320000', 'city': '鹽城市', 'code': '320900', 'initial': 'Y', 'short': 'Yancheng'}, {'id': '83', 'provincecode': '320000', 'city': '揚州市', 'code': '321000', 'initial': 'Y', 'short': 'Yangzhou'}, {'id': '188', 'provincecode': '430000', 'city': '岳陽市', 'code': '430600', 'initial': 'Y', 'short': 'Yueyang'},
                   {'id': '191', 'provincecode': '430000', 'city': '益陽市', 'code': '430900', 'initial': 'Y', 'short': 'Yiyang'}, {'id': '193', 'provincecode': '430000', 'city': '永州市', 'code': '431100', 'initial': 'Y', 'short': 'Yongzhou'}, {'id': '211', 'provincecode': '440000', 'city': '陽江市', 'code': '441700', 'initial': 'Y', 'short': 'Yangjiang'}, {'id': '8', 'provincecode': '130000', 'city': '張家口市', 'code': '130700', 'initial': 'Z', 'short': 'Zhangjiakou'}, {'id': '84', 'provincecode': '320000', 'city': '鎮江市', 'code': '321100', 'initial': 'Z', 'short': 'Zhenjiang'},
                   {'id': '95', 'provincecode': '330000', 'city': '舟山市', 'code': '330900', 'initial': 'Z', 'short': 'Zhoushan'}, {'id': '120', 'provincecode': '350000', 'city': '漳州市', 'code': '350600', 'initial': 'Z', 'short': 'Zhangzhou'}, {'id': '137', 'provincecode': '370000', 'city': '淄博市', 'code': '370300', 'initial': 'Z', 'short': 'Zibo'}, {'id': '138', 'provincecode': '370000', 'city': '棗莊市', 'code': '370400', 'initial': 'Z', 'short': 'Zaozhuang'}, {'id': '152', 'provincecode': '410000', 'city': '鄭州市', 'code': '410100', 'initial': 'Z', 'short': 'Zhengzhou'}, {'id': '167', 'provincecode': '410000', 'city': '周口市', 'code': '411600', 'initial': 'Z', 'short': 'Zhoukou'}, {'id': '168', 'provincecode': '410000', 'city': '駐馬店市', 'code': '411700', 'initial': 'Z', 'short': 'Zhumadian'}, {'id': '184', 'provincecode': '430000', 'city': '株洲市', 'code': '430200', 'initial': 'Z', 'short': 'Zhuzhou'}, {'id': '190', 'provincecode': '430000', 'city': '張家界市', 'code': '430800', 'initial': 'Z', 'short': 'Zhangjiajie'}, {'id': '200', 'provincecode': '440000', 'city': '珠海市', 'code': '440400', 'initial': 'Z', 'short': 'Zhuhai'}, {'id': '204', 'provincecode': '440000', 'city': '湛江市', 'code': '440800', 'initial': 'Z', 'short': 'Zhanjiang'}, {'id': '206', 'provincecode': '440000', 'city': '肇慶市', 'code': '441200', 'initial': 'Z', 'short': 'Zhaoqing'}, {'id': '214', 'provincecode': '440000', 'city': '中山市', 'code': '442000', 'initial': 'Z', 'short': 'Zhongshan'}, {'id': '239', 'provincecode': '510000', 'city': '自貢市', 'code': '510300', 'initial': 'Z', 'short': 'Zigong'}, {'id': '255', 'provincecode': '510000', 'city': '資陽市', 'code': '512000', 'initial': 'Z', 'short': 'Ziyang'}, {'id': '261', 'provincecode': '520000', 'city': '遵義市', 'code': '520300', 'initial': 'Z', 'short': 'Zunyi'}, {'id': '272', 'provincecode': '530000', 'city': '昭通市', 'code': '530600', 'initial': 'Z', 'short': 'Zhaotong'}, {'id': '307', 'provincecode': '620000', 'city': '張掖市', 'code': '620700', 'initial': 'Z', 'short': 'Zhangye'},
                   {'id': '327', 'provincecode': '640000', 'city': '中衛市', 'code': '640500', 'initial': 'Z', 'short': 'Zhongwei'}
                      ]
                }
      },
      watch:{
          inputName(){
            if(this.inputName.length== 0){
              this.searchlist=[]
              this.cityList()
            }
          }
      },
      components: {
        
      },
      computed:{
        ...mapState(["cityName","nowPlace","longitude","latitude"])
      },
      methods: {
        ...mapMutations(["update"]),
         bindBlur(e) {
          this.inputName = '';
          this.searchlist=[]
          this.cityList()
        },
        bindKeyInput(e){  //輸入搜索
          //console.log(e)
           this.inputName = e.mp.detail.value;
           // 空搜索框時 取消匹配顯示
            if (this.inputName.length < 1) {
              this.searchlist=[]
              this.cityList()
            }
            this.scrollTopId='citylist' 
            this.citylist=[]
            this.auto() 
            
        },
        auto(){
          let inputSd = this.inputName.trim();//去掉空格
          let sd = inputSd.toLowerCase();  //轉爲小寫
          let num = sd.length;
          let finalCityList = [];
          //拼音搜索
          let temp = this.allCity.filter(
            item => {
              let text = item.short.slice(0, num).toLowerCase(); //把拼音轉爲小寫
              // eslint-disable-next-line
              return (text && text == sd);
            }
          );
          //中文搜索
          let tempChinese = this.allCity.filter(
            itemChinese => {
              let textChinese = itemChinese.city.slice(0,num);
              return (textChinese && textChinese == sd)
            }
          )
          if (temp[0]) {
            temp.map(
              item=>{
                let testObj = {}
                testObj.city = item.city
                testObj.code = item .code 
                finalCityList.push(testObj)
              }
            );
            
            this.searchlist = finalCityList
          }else if(tempChinese[0]){
            tempChinese.map(
              item => {
                let testObj = {}
                testObj.city=item.city
                testObj.code=item.code
                finalCityList.push(testObj)
              }
            );
            console.log(finalCityList,"城市集合")
            this.searchlist=finalCityList
          }
        },
        clickLetter(e){
            //console.log(e)
            const showLetter=e.currentTarget.dataset.letter
            this.scrollTopId = showLetter;
        },
        bindCity(e){ //點擊城市
          //console.log(e)
          this.update({ cityName: e.currentTarget.dataset.city });
          this.scrollTopId=""  //清空
          this.scrollTopId= 'currentcity'
          this.searchlist=[]
          this.cityList()
          wx.navigateBack()
        },
        setBarTitle() {
          wx.setNavigationBarTitle({
            title: "選擇城市"
          });
        },
        // 對城市信息進行分組
        cityList(){
          this.citylist=[]
          this.searchLetter.map(
          initial => {
            let tempObj = {};
              // let cityInfo = [];
    
           tempObj.initial = initial;
             tempObj.cityInfo = this.allCity.filter(
               city => city.initial === initial
               );
    
               this.citylist.push(tempObj);
            }
         );
         //console.log(this.citylist)
            //this.citylist=JSON.stringify(this.citylist)  不用轉碼
            //console.log(this.citylist);
        //   //return tempArr;
        
        
        },
        
       
      },
    
      created () {
        // let app = getApp()
        const sysInfo = wx.getSystemInfoSync();
        //console.log(sysInfo); 獲取設備信息
        this.winHeight = sysInfo.windowHeight;
      }
    }
    </script>
    
    <style lang="scss" scoped>
      @import "./style";
      @import "../../css/common.css";
      .container-inner {
      display: flex;
      flex-direction: row-reverse;
    }
    .mylocal{
      width:100%;
    }
    .container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      padding: 10rpx;
    }
    
    .searchLetter {
      flex-shrink: 0;
      width: 80rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      color: #666;
    
    }
    
    .searchLetter div {
      margin-top: 20rpx;
    }
    
    .touchClass {
      background-color: #fff;
      color: #fff;
      padding-top: 16rpx;
      padding-bottom: 16rpx;
    }
    
    .showSlectedLetter {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 50%;
      left: 50%;
      margin: -100rpx;
      width: 200rpx;
      height: 200rpx;
      border-radius: 20rpx;
      font-size: 52rpx;
      z-index: 1;
    }
    .thisCityName {
      display: inline-block;
      border: 1rpx solid #ff6325;
      border-radius: 8rpx;
      padding: 10rpx 0;
      font-size: 24rpx;
      color: #ff6325;
      text-align: center;
      min-width: 149.5rpx;
      margin: 16rpx 0;
    }
    
    .thishotText {
      color: #ff6325;
      font-size: 20rpx;
      margin: 0 !important;
    }
    input {
      background-color: #eee;
    }
    
    </style>
複製代碼