移动端城市搜索

<template>
	<u-popup mode="right" @open="open" :show="show" @close="close">
		<view style="width: 100vw;position: relative;">
			<u-navbar title="城市选择" @leftClick="close" :autoBack="false">
			</u-navbar>
			<u-search placeholder="搜索城市名称" style="margin: 100rpx 30rpx 30rpx;" :clearabled="true" :showAction='false'
				v-model="keyWord" shape="round"></u-search>
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, index) in item" @click="choseCity(cell)">
							{{cell.regionName}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
			<view v-if="selectData.length !== 0" class="search-flot-box">
				<u-list height="90%">
					<u-list-item
						v-for="(item, index) in selectData"
						:key="index"
					>
						<u-cell :title="item.regionName" @click="choseCity(item)">
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</u-popup>

</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				keyWord: undefined,
				indexList: [],
				selectData:[],
				itemArr: []
			}
		},
		watch:{
			keyWord(newVal, oldVal){
				this.getCity()
			}
		},
		methods: {
			open() {
				this.keyWord = undefined
				this.selectData = []
				this.indexList = []
				this.itemArr =[]
				getCityListApi().then(res => {
					this.indexList = res.data.letterList
					this.itemArr = res.data.regionList
				})
			},
			getCity(){
				selectCityListApi({regionName:this.keyWord}).then(res => {
					this.selectData = res.data
				})
			},
			choseCity(code) {
				this.$emit('selectCode', code)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>