选择城市，按城市的首字母进行排序

最新推荐文章于 2023-07-27 14:53:12 发布

如果会御剑

最新推荐文章于 2023-07-27 14:53:12 发布

阅读量1.4w

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_44694389/article/details/122299119

版权

这篇博客介绍了如何使用Vue.js和ElementUI创建一个选择城市的功能，通过引入pinyin.js工具将城市按首字母排序。步骤包括创建父组件choiceCity.vue，子组件index.vue，以及在子组件中处理中文城市名的字母排序逻辑。由于后端未提供热门城市数据，作者注释了这部分代码，但指出可以根据需要请求后端返回热门城市。

摘要由CSDN通过智能技术生成

1.新建父组件choiceCity.vue

<template>
	<view class="choiceCity">
		<view class="nav-top">
			<view class="searchBox">
				<u-icon name="search" size="35" color="#888"></u-icon>
				<input class="searchInput" type="text" value="" placeholder="城市名/拼音首字母" v-model="keyWorld"/>
			</view>
		</view>
		<ss-select-city
		  v-model="value"
			:hot-citys="hotCitys"
		  @on-select="City"
			:value = "value"
		/>
	</view>
</template>

<script>
	import ssSelectCity from '@/components/ss-select-city/index.vue'
	export default {
		components:{
			ssSelectCity
		},
		data() {
			return {
				value: '广州',
				keyWorld:'',
				hotCitys: ['杭州','天津','北京','上海','深圳','广州','成都','重庆','厦门'],
			}
		},
		onLoad(options) {
			this.value = options.city
			// this.value = uni.getStorageSync('city')
		},
		methods: {
			City(e) {
				console.log(e);
			  // uni.setStorageSync('city',e);
			}
		}
	}
</script>

<style scoped>
.nav-top{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 120upx;
	/* background: whitesmoke; */
	/* background: #ececec; */
	background: #FFFFFF;
}
.searchBox{
	display: flex;
	align-items: center;
	width: 702upx;
	height: 90upx;
	border-radius: 10upx;
	padding: 0 24upx;
	box-sizing: border-box;
	background: #ececec;
}
.searchInput{
	width: 100%;
	padding: 0 10upx;
	box-sizing: border-box;
	font-size: 28upx;
	color: #333333;
}
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}
/deep/.u-index-anchor {
	top: 0 !important;
	color: #333333;
}
/deep/.u-index-anchor--active{
	background: whitesmoke;
}
.anchor-text{
	/* color: #FFFFFF; */
}
</style>

2.新建子组件index.vue，名称自己定义，把子组件放在components里面，路径可以看父组件引入的路径。

<template>
  <view class="select-city-wrap">
    <view class="select-city">
      <view class="index">
        <view class="index-item" @click="scrollTo('#')">#</view>
        <view
          :class="['index-item',scrollIntoId==item.title?'currentItem':'']"
          v-for="item in cityData"
          :key="item.title"
          @click="scrollTo(item.title)"
          >{
  { item.title }}</view
        >
      </view>
      <scroll-view
        :scroll-into-view="scrollIntoId"
        :scroll-y="true"
        :scroll-with-animation="true"
        :style="{ height: windowHeight }"
      >
        <view class="content">
          <view class="section" id="current" v-if="current">
            <view class="city-title">当前城市</view>
            <view class="city-list">
              <view class="city-item">{
  { current }}</view>
            </view>
          </view>
          <!-- <view class="section" id="hot" v-if="hotCitys.length">
            <view class="city-title">热门城市</view>
            <view class="city-list">
              <view
                class="city-item"
                :class="{ active: current === city }"
                v-for="(city, index) in hotCitys"
                :key="index"
                @click="onSelect(city)"
                >{
  { city }}</view
              >
            </view>
          </view> -->
          <view
            class="section"
            :id="item.title"
            v-for="(item,index) in cityData"
            :key="item.title"
          >
            <view :class="['letter','btns'+index]">{
  { item.title }}</view>
            <view class="city-list">
              <view
                class="city-item"
                :class="{ active: current === city.name }"
                v-for="(city, i) in item.datas"
                :key="i"
                @click="onSelect(city.name)"
                >{
  { city.name }}</view
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
// import cityData from './cityData'
var timer = null;
import Pinyin from '../../utils/pinyin'
export default {
  props: {
    hotCitys: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: String
    }
  },
  data() {
    return {
      cityData:[],
      windowHeight: '',
      scrollIntoId: '',
			// elementList:[],
			// actIndex:0,
			// zmList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
    }
  },
  computed: {
    current: {
      get() {
        return this.value
      },
      set(val) {
        return val
      }
    }
  },
  mounted() {
    this.getSystemInfo();
		this.getAddressList();
  },
  methods: {
		//获取元素到顶部距离
		getTop(Array){
			let arr = [];
			Array.map((cur,index)=>{
				uni.createSelectorQuery().select(".btns"+index).boundingClientRect((res)=>{
				  // console.log(res)
					let tops = res.top - 60;
					arr.push(tops);
				}).exec()
			})
			// console.log(arr);
			this.elementList = arr;
		},
		//滚动触发事件
		ScrollEvent(e){
			clearTimeout(timer)
			timer = setTimeout(()=>{
				let nowIndex = 0;
				for(let i=0;i<this.elementList.length;i++){
					if(i==0){
						if(this.elementList[i]<=e.detail.scrollTop){
							nowIndex = 0;
						}
					}else{
						if(this.elementList[i]<=e.detail.scrollTop){
							nowIndex = i;
						}
					}
				}
				this.scrollIntoId = this.zmList[nowIndex];
			},100)
		},
		//城市列表
		getAddressList(){
			return new Promise((resolve,reject)=>{
				this.$u.api.AreaList().then(res=>{
					// console.log(res.data.list.s2);
					let cityData = res.data.list.s2
					resolve(cityData);
				})
			}).then(data=>{
				this.cityData = this.pinyinSort(data);
				return this.cityData;
			}).then(res=>{
				this.getTop(res);
			})
		},
		//按城市首字母分组
		pinyinSort(name) {
			// console.log(name);
		    //name数组
		  var pinyinArray = new Array()
		  for (var bukn = 0; bukn < name.length; bukn++) {
		    var o = new Object()
		    var ken = Pinyin.getSpell(name[bukn].name, function (charactor, spell) {
		      // console.log(charactor, spell);
		      return spell[1];
		    });
				// console.log(name[bukn].name);
		    o.name = name[bukn].name;
				o.id = name[bukn].id;
				o.pid = name[bukn].pid;
		    o.pinyin = ken.split(',').join('');
		    pinyinArray.push(o)
		  }
		  // console.log("pinyinArray")
		  // console.log(pinyinArray)
		  // pinyinArray = pinyinArray.sort(compare("pinyin"))
		  let map = {
		    title: '',
		    datas: []
		  }
		  pinyinArray.forEach((item, index) => {
		    if (!map[item.pinyin[0].toUpperCase()]) {
		      map[item.pinyin[0].toUpperCase()] = {
		        title: item.pinyin[0].toUpperCase(),
		        datas: []
		      }
		    }
		    map[item.pinyin[0].toUpperCase()].datas.push({
		      name: item.name,
		      pinyin: item.pinyin,
					id:item.id,
					pid:item.pid
		    })
		  }
		  )
		  // console.log("map")
		  // console.log(map)
		  var turn = new Array()
		  var letters = "*ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
		  for (var i = 1; i < letters.length; i++) {
		    if (map[letters[i]]) {
		      var obj = new Object()
		      //自己改改命名改成自己需要的
		      obj.title = letters[i]
		      obj.datas = map[letters[i]].datas
		      turn.push(obj)
		    }
		  }
		  // console.log("trun")
		  // console.log(turn)
		  return turn;
		},
    getSystemInfo() {
      uni.getSystemInfo().then(([error, data]) => {
        this.windowHeight = `${data.windowHeight}px`
      })
    },
    scrollTo(letter) {
      this.scrollIntoId = letter === '#' ? 'current' : letter
    },
    onSelect(city) {
      this.current = city
      this.$emit('input', city)
      this.$emit('on-select', city)
			let pages = getCurrentPages();  //获取所有页面栈实例列表
			let nowPage = pages[ pages.length - 1];  //当前页页面实例
			let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
			prevPage.$vm.City = city; //上一页需要的数据在这里赋值
			//返回上一页事件
			uni.navigateBack({
				delta:1
			})
    }
  }
}
</script>

<style lang="scss" scoped>
.select-city-wrap {
  position: relative;
  padding: 0 30upx;
  background-color: #fff;
  .select-city {
    .index {
      position: absolute;
      right: 0;
      top: 50upx;
      z-index: 999;
      color: #333333;
      font-size: 32upx;
      .index-item {
        width: 40upx;
        height: 42upx;
        line-height: 42upx;
        text-align: center;
				// color: #2f9bfe;
      }
			.currentItem{
				color: #2f9bfe;
			}
    }
    .section {
      margin-bottom: 19upx;
      .city-title {
        color: #333;
        font-size: 28upx;
        margin-bottom: 28upx;
      }
      .letter {
        width: 44upx;
        height: 44upx;
        color: #fff;
        border-radius: 100%;
        background-color: #2f9bfe;
        font-size: 28upx;
        line-height: 44upx;
        text-align: center;
        margin-bottom: 30upx;
      }
      .city-list {
        display: flex;
        flex-wrap: wrap;
        .city-item {
          width: 190upx;
          height: 55upx;
          margin-right: 36upx;
          margin-bottom: 28upx;
          line-height: 55upx;
          text-align: center;
          border: 1px solid #dcdcdc;
          border-radius: 6upx;
          color: #999;
          font-size: 28upx;
          &.active {
            background-color: #d5ebff;
            border-color: #2f9bfe;
            color: #2f9bfe;
          }
        }
      }
    }
  }
}
</style>

3.在子组件引入import Pinyin from '../../utils/pinyin'，这是码表，用途是把中文的城市名称转化按字母排序，当然是在后端返回来的数据来说，如果后端帮你排序好的那就不用这步。

pinyin.js文件

/*!
author:kooboy_li@163.com
MIT licensed
*/

let base = 19968,
    middle = (40896 - base) / 2;
let EMPTY = '';
let COMA = ',';
let chars = (() => {
    let a = [];
    for (let i = 33; i < 127; i++) {
        if (i != 34 && i != 92 && i != 45) {
            a.push(String.fromCharCode(i));
        }
    }
    return a.join(EMPTY);
})();
let SDB = {
    "a": {
        "yi": "!]#R$!$q(3(p)[*2*g+6+d.C.q0[0w1L2<717l8B8E9?:8;V;[;e;{<)<+<S<]=9>.>4??@~A`BbC:CGC^CiDMDjDkF!H/H;JaL?M.M2MoNCN|OgO|P$P)PBPyQ~R%R.S.T;T<TBTqT|UQUXU}V[WCXgYCYDY_YdYuZ9Zs];]j]p]q^.^@^S^w^x_,_T`H`J`ga)a8aQb9budJddgoh9hqi2itj&jEjRj]jzk>k^l$l<mLmdnDoEoMoQoop3p5pWp`qSr.u'uLv]wIxXy_y~{z}`~r-$=-$X-$Y-%!-%0-%j-&^-&s-'t-(<-)2-*n-+6-+f-/M-/N-0.-2|-3u-4b-4c-4m-5E-5N-5Z-5l-6&-6+-7*-70-73-8F-8R-8g-:*-:5",
        "ding": "!2%%&_&x'u=:=h@NC`H?LQNkQ3Xo^Gn?osrUsNvAwKxKy9-!T-$6-$v-%O-&b-(+-9%-9(",
        "zheng": "!S#(#D/]031$456+=L?OIzYM[']I^g_.eUl}m~qJsHulwuxU-!?-,d-3D",
        "kao": "<dLWr5x7-!J-,7-/Y-/s-2'",
        "qiao": "#+$4&.&1'7'Y'z($(),B,{0c7y8<:H<8<YE{F0GdKYMCZP]Y_8_zd.d/d{e5fGfHfUmKmrmvp#t>t?uJv$vMyE|R}a-!}-#&-#8-#L-#b-$Q-%?-+q-,6-,8",
        "yu": "#V$l%S&9&I('(7(=)))m*#*$*B+2+F+v,0,b,i.W0.1F232L2a3(384>6P8n;';i;y<1>(>)>]@iB<B?BDBEC'C*CoCpELE^HIHJHTIpJIJ`KXL&L1LxMbMqNXNqPdPsQ<RFT?U(URV7WnX:Z?ZT[6[H]!]~_7_J_``Za#eXg;h#hVhuiyj!j#k9kDkMl#lClUlmmUnFoAp(pzqnrSsSt0vJwszp{_|N}!}$}I}t~(~,~.~w-$D-$]-%^-&j-';-'k-(3-(H-(v-*1-*Z-+#-+d-+{-.1-.2-.<-.K-.[-.e-/d-0=-0P-1:-1m-39-3`-3b-3e-41-5e-5}-6/-6;-6p-7:-7Z-:(-:2-:F",
        "qi": "!8%&%>&X&m&s'2'X'd'f(9(c(i(j)@)l+'+M.).+1y1{2=3K4c6&6'6)606<6B6`9`9{:a<g>`?`AgCLCuD%D2F2GyH&H1I;K~LkLuM&MYO0O3O9P8PbPcQqR5S2SCU0U~V%XYY&Z}[G^P`7cUc}dEeNgOj$j)l?m:n4p,sOuRv.y'{/|i}1~P-$B-%Y-)|-)}-*K-+G-+H-,m-.@-.M-/|-0y-2D-2c-4W-4`-4h-7a-7p-9c-9i",
        "shang": ")Y6V9cJvR8UqXJXa])asbQc,s,uSvz-#+-.;",
        "xia": "#Y#w&,&;'''I)1.u/j7=:[<'B[ByCtL'NmNyQOR([0`(cLh[iRkVt/t_u4uezFzM|W|{~d-&)-*4-.}-0a-5;-8S",
        "han": "#,.m/h:l<P>MFrGXJqNrOUPCPqPrQ|]@`+`2h1lBlZnXp*r;rWrkz9{4{B}x-#c-#y-$;-$l-$y-%Q-%n-(i-(x-)i-/!-3*-5B-9V",
        "wan": "#=$0&o.]0F4@5X5b6*628u9p<K?e?h@IChFqG!G7H2HHJzL=O5Q'RQ`;a:b<bGeHh&h)rMr^s'slu!-$E-%V",
        "mo": "!`#$#&#y$%%P'e(T*N3v5$517`8R=6?XA5E6FZF~JLM;MgP+RTRcU6]'](_j`s`x`y`za+qkuDyR|G-!e-'g-($-(U-*R-+k-,(-.U-.k-.{-8/-80-8K-8L",
        "zhang": "#~(#.:2o3N>k@,JhR`b$b`knmtujz'z0}<-#+-'I-*Q-16-7m",
        "san": "3T3q3w3x7~uJuwzA-'n-([-,s",
        "ji": "#r%''l'y)3)d)o*Z+'+9+G+M+T+Z+^+g+x._.c/R090d1S1W2;43484J4R5C5w6)6C6`7f7s878H8t8w9J9X9Z9{;8;<;B;C=(=2>6?YA$B+CHD0D8DbE:EQF2I*I|JEJnKKL)L:LkLzMdN'N5N:NiQ6QyRrUWVcVnWPWQWtX6XEXYXuY(ZAZ|[/]O]e^F^J^U^~`)b#b0c*ckc}dee!e$e9e>eyf+fXfrg)hFhriMjZlrqmr)sRt%uov3vevw|@};}N}g~!~+~F~{-!&-!u-#N-$%-&a-'u-(,-*x-+]-,W-.?-.V-._-.d-.g-/+-0$-0H-1%-1/-10-1^-1o-2/-2@-3'-4)-4o-5>-5H-5U-6,-6J-7/-7P-9e-9g-9h-9i-9j-:l",
        "bu": "0$192,FKJgT=UYZ^e+hhjmm8mFoGpGp}sjw]w{-'7-'E-/m-3#-4.-6=",
        "fou": "4I:L:O:Q~1-3:",
        "mian": "!G!d#4$U$W$]3Y5X6A6_6o9g9w@qB/CkG!H_Q;-!L-!M-!P-/_-7y-7z-8'-8,-8q-8r",
        "gai": "):5=5LD,ErI!J1Z'_/`TaYaac!lnpcw[|O}1",
        "chou": "!+#n$N+0/y0}2:4e5/6#9jB*B.GNLfUmZ+^3^5_4e%e4fWkan]nbo.o6oU}u~$~*-.X-/>",
        "zhuan": "%H'S'V.K0k1B1H1r2?7Z<r@RA7IDRsVk[J]Tb3b<c8gThai'mp-%+-%u-'p-(]-14",
        "qie": "%>+7+f,8.#.|0K0p2O>#DNE1P.ccd]eMlpt8y>-0&",
        "ju": "!Z$L$w%R*W,c,l/e1~3&3J8#:t=#=`=k@FBGC0DlD}FeGAIaIkJbMrN[OVP`RDTlU|W>Y`[$^Z`Ua*ccc{dWd]dae#e@eFeff8fSg*g<guh~l'lXmIoOq(rps%vXw_x|y;zb|m}o-#/-#:-&4-&Q-)<-)?-)d-*z-+0-/.-/:-3[-48-4S-4k-5.-9H-9K-9x-:@",
        "pi": "#M%D'C(5(6)L*F*K+;.n1C4M8}:y;/;2;A<,<{>a@'@2@KA%C|DQO+O]O^PvR!REScU'UfZw]m`l`na'i[l_m;p<pYpyqCqyr*s1s;trx4{8|*|=|p}F-!!-#,-)@-,H-.p-/#-/3-2#-3>-4F-6'-63-91",
        "shi": "!E!Q!e#?$p%$&+'$([(](q*^.&/5/n0[1w204z<gBNBQG)I:ISIUJ3NlN{Q>QQR9VYW2W@W^X2XNYxY{ZI[:[<[v]X^l^{^}_p`DaDbmgqi8ixjdk!kNkpl(lkntoMo^ocoeofp5ppq%q&q*q4qbr=t9x/-&^-&_-&}-'<-'@-(*-(8-)!-)H-+,-/<-0?-0d-0o-0p-2:-2O-3+-38-57-6M-9C-9E",
        "qiu": "*6*7+a0r3k4D5]6j>7CaCeF`HEJXMhNgNjONP;QMQ_RfSWUUX?XUXqXrajc$d'jpjskXl]n@o.oup:r?-#5-#6-$8-/'-/k-0W-0X-1,-2Z-4v-7&-9U-:Y-:Z-:]",
        "bing": "!n)F*4+/,>.75@DsOcZ7l`puqar||>-!:-!q-#,-#G-''-'C-(D-/O",
        "ye": "$>$E(0,a6g=;@?HfSb[]_]lUlfn(oip=rmtDtTtevTx?-!O-!R-$5-%N-'F-'e-(T-*o-4Y-61",
        "cong": "$'&Y1>8==g=l=p=vDIE=I2JUK0LsRZZk]$a}a~sKtBuKu_-*)-*V-+Y",
        "dong": "&&.r0b5D?7?C@JD|G;I#KwQ([&jV~^-)T-/=-0)-4g-5/-6T-9,",
        "si": "'?(b)^)g)p*+.</#40415O6i8l9~;.<|<}>+>0KxL+NLP7PiQnReS&W_`tp1pvp{qTqnr8r`tIuzyB-&6-&R-&^-&c-&s-&{-(:-)L-)q-*8-+.-0.-5j-6`-9N-:o",
        "cheng": "#0$,$P&W*O*[*w+A+{,O,v/l5[7#:`?}FQOoS(UKZV_#cHcJk#m$nhrxtkuxv@vWx=xB|2-!A-$h-'w-)o-*>-+B-/u",
        "diu": "r2xL-&&",
        "liang": "3A3D3{6K@0CRF{Q%Up[,_Oe1h!h2hCiBiHojss-!=-)h-.J-.O",
        "you": "(r)O*I7o8W;L;f=5=M>VDKFoFsFwG/KaOOOSPSQLY8ZN_;`qh%hMjWjnk6kPlYmEn3n>ncodp~r3x&x<-),-.y-/1-1p-1z-7N-8P-9D",
        "yan": "##%F%L&%&F&T&v(Z,j/u1?2$5t7V;!;h?<@@AsCVCYCZD3FmGpH.JlN_PVQAT$UxV9WUX/XkXmXnY?Z3[U^1^C^E_e_~`B`C`RbDbPc;g/g7kIm#mNmsn5nHnsnyoPoVo`x+z7zkzmzn{A{`{e|}}2}b-%'-%,-%B-%v-'0-(#-)~-*$-*F-*j-*s-+C-.4-.H-.Y-0V-3$-3*-3B-3n-5#-5G-5u-7K-7r-8T-8W-8_-8`-8a-8d-8j-9L-9Q-9w-:1-:N",
        "sang": "'EVNts-%2-%{",
        "gun": "#<&#'U6F6z9dJ>JpTFTwUu]4h<iF-/2-/g-2<",
        "jiu": "+E,*42464]8mB:BCBHBMH7cQnGz){Z-#}-#~-,l-./-01-3!-5w-6I-79-7c-:$",
        "ge": "&!/30*4?8r>:?B@}AbB3BwECHxJ1NwOrP'U9UPXM[X[hhLhmq`tetlu.xSyUzTzU{W}4-!S-!s-#F-#`-#j-%f-(A-*%-+t-.3-/K-/U-1u-3T-3z-6g",
        "ya": "#B%C&{'I*{,a.g=UDEKqO;T1WEWGY.^[g=i!j4lUp=s=v7x;}f-3C-3c-4U-6O-6V-9o-:;",
        "pan": "!&!>!?!H!o'L'x2A76=F>R?$AIH<IrRoT{WBY[d[e{f0rvtpw=zx-#E-$J-4D",
        "zhong": "#%(n*8+>+m/V2T4{6b99>j@`BnEkK*O:OBP^R2RKSzTKTNTO[@e^f>ohparHtQv5wbyF-3_-9@",
        "jie": "#S%@&{(.*d+=.G0e4J5,599D;k=(@/CfD,G#G`J[LzOFP&P:PTQ=SKSQSqT/TITPTlU4U7UPVQXOXSX}Z%ZWZh]/^K^~_5ckdve=j^qGtNtXz,|1}.-!m-!u-$U-%c-&v-+i-.l-/@-2&-4{-5$",
        "feng": "!@%N'40m5v7R:3C$FdHnN.PFSaWI[R^c`?b.c5k'n+n;r[u5uXxs-!$-!4-&%-&J-&L-(w-3(-3,-3F-8)",
        "guan": "!'$b$j$k(W)B,Y/f0E6:9&:]:gBVFqIEWSW{X+X.a?bifMh?kmsUu>w7zOzS{,{2}{-'K-(N-0q-1N-1j-2e-2z-6D-7A",
        "kuang": "!Y!z$Y%1%r%w(G+}/O/z5'538V8vZ<ZG^y_=aNbpgHgRgXg`j+lHlhn/qUrevy-4>-8>",
        "chuan": ",40jA7BYB`BhBxEvale[hIkJp%wQ-5+",
        "chan": "&6'W)K)q1N6D7$8*8A8[8_:6;xCODJIHKQQ2RGR_R{S1UeW!W`X3ZMZy]B^+^7_N_bfbi|n2n6o@rTr]uWw3xYz%ze{7{g-#Q-%D-%~-(%-(S-+Z",
        "lin": "$B&['t0:393O5{8!<WA?B%GsKEMOaWb{fEf]fgfxhlh}iVk{lgn$utzg|9}C~[-*a-1G-2t-7_-7n",
        "zhuo": "#'&Q)a+l,%,V,]102E2`8?:J;&=NE.HtJ:L|SJSsZx[+]6_Fd!nArfvLvOy|-4J-5d-:x",
        "zhu": "!a$6$h%^%v'f)!)/*h,@.4.S.T.[.w/P/o0]0n141=1a4n4q5.9+:s;W<EBrD/DVDpE_EmFYHtJQKZMMO`O{QTS>S]SrU;V<YLYoZ;[S_$_B`[aCbhdVdjfRggjMjrk1ljq6q{r}vbwExIx`|x-&r-(~-)=-)]-+2-/H-0E-11-3s-6(-7T-7V-8x",
        "ba": "%#.a3#:y;2;N<z>sD5E4GTO$WNYk`LdDdNgjozp?wr~~-!a-&.-.D-.`-/&-/0-1t-1v-1}-9=",
        "dan": "!K%$%5)r,S0N1h4V8A=A=B=H=~>q@9ATAVH*JDOkPUTLV?VoXGX~ZK_'a|bBc3f{mHn&nKn~~t-$I-'G-'s-)*-)a-,C-3Z-8H-8b-8i",
        "wei": "#o$M%}&0'#'D'M6/6p6r7+8y9f;6>n@gC+D!DOE+FCGBH)I&I(I4INJ]K$KJL7LdMDN0PwQ$QDQHR?T3T6V`WkX$Z)[#[^^*^4_I_^e;fefig@hbj>k<k[m}nvs~t4uGzz{G}&}'}7}Y~n-!#-#Z-#a-#i-#q-#v-#z-$T-&7-'J-'X-'z-+a-+b-+c-.P-/,-/F-/P-0N-0O-2(-2W-2p",
        "jing": "#C*?*u,2.8.9.A.E.P.R042v3F3Q5(5q6!9@=_>g?:?k@<E;EtExFiG8HlS/Z`]ge(jTjwrhuYyi|+-!=-!@-!C-!D-!F-$N-$m-%b-*m-03-2M-4:-4a-4d-7e-7o-9I",
        "li": "!!!0#A#E%7%_%m%q'|(K(L(Q(^)u)y*%*H,&.$.J.{/c1.1:2Z3$303G3b4)5}7T8Q8g:7;4@*C%DPDbEEF%FDFWF[GUI[I`JFKIM1MKN4OWOnP#PNPlQaR[S*S:STSVS_ULU_VWXhYY]&^,`9`}cPdbf`hzh{i5jDk+l7l;m6n=oBoNogokqAqururzs3tludvuxjyU}V}W}X~&~8-!+-!5-*}-+A-,^-.3-/p-/v-07-1W-1b-1k-26-29-2x-2~-3Q-4X-5I-6F-6l-7f-7k-8A-8Z",

最低0.47元/天解锁文章

如果会御剑

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
选择城市，按城市的首字母进行排序

1.新建父组件choiceCity.vue<template> <view class="choiceCity"> <view class="nav-top"> <view class="searchBox"> <u-icon name="search" size="35" color="#888"></u-icon> <input class="searchInput" type="text"
复制链接

扫一扫