clsd/app/pages/job/position/city.vue

<template>
	<view>
		<u-index-list :index-list="indexList" activeColor="#4581fb">
			<view class="list">
				<view class="search">
					<u-search placeholder="搜索城市名/拼音" v-model="title" bgColor="white" :showAction="false" @clear="show = false"></u-search>
				</view>
				<!-- #ifdef APP-PLUS-->
				<view class="bbv animated fadeInDown" v-if="item.title">
					<view class="title">定位城市</view>
					<view class="item" @click="getLocation()">
						<view class="tags" @click="select(item)">
							<view class="out">
								<view class="int">{{ item.title }}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<view class="bbv">
					<view class="title">热门城市</view>
					<view class="item">
						<view class="tags" v-for="(item, index) in hot_city" :key="item.id" @click="select(item)">
							<view class="out">
								<view class="int omit">{{ item.title }}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-for="(item, index) in list" :key="index" class="item">
					<u-index-item>
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<view class="tags" v-for="(child, i) in item" :key="child.title" @click="select(child)">
							<view class="out">
								<view class="int omit">{{ child.title }}</view>
							</view>
						</view>
					</u-index-item>
				</view>
				<view class="loading" v-if="loading"><u-loadmore :status="loading ? 'loading' : 'nomore'" /></view>
			</view>
		</u-index-list>
		<view class="search_view" v-if="show">
			<view class="list">
				<view class="item" v-for="(item, index) in search_list" :key="item.id" @click="select(item)">
					<view class="title">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			item: {},
			eventName: 'select_city',
			search_list: [], //搜索列表
			show: false,
			title: '',
			indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
			hot_city: [{ title: '不限' }, { id: '3288', title: '南宁市' }, { id: '1215', title: '北京市' }, { id: '2003', title: '上海市' }, { id: '3169', title: '深圳市' }, { id: '2131', title: '杭州市' }, { id: '3146', title: '广州市' }],
			list: [],
			all: []
		};
	},
	watch: {
		title(val) {
			if (val) {
				this.show = true;
				this.search_list = this.all.filter((item) => item.level == 2 && (item.title.indexOf(val) != -1 || item.pinyin.indexOf(val) != -1));
			} else {
				this.show = false;
				this.search_list = [];
			}
		}
	},
	onLoad(e) {
		if (e.eventName) {
			this.eventName = e.eventName;
		}
		setTimeout(() => {
			this.getData();
		}, 500);
	},
	methods: {
		getData() {
			this.all = uni.getStorageSync('city_all');
			this.indexList.forEach((i) => {
				this.list.push(this.all.filter((item) => item.level == 2 && i == item.pin));
			});
			this.loading = false;
		},
		//定位城市
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					// 创建地图坐标对象
					let point = new plus.maps.Point(res.longitude, res.latitude);
					//静态方法，反向地理编码
					plus.maps.Map.reverseGeocode(point, {}, (event) => {
						let reg = /.+?(省|市|自治区|自治州|县|区)/g;
						let addressList = event.address.match(reg).toString().split(',');
						//注意区分直辖市;
						let city = addressList.length >= 3 ? addressList[1] : addressList[0];
						this.item = this.all.filter((item) => item.level == 2 && item.title == city)[0];
						this.$forceUpdate();
					});
				},
				fail: (err) => {
					uni.showModal({ content: '定位失败,请检查是否允许地位', showCancel: false });
				}
			});
		},
		//选择
		select(item) {
			uni.$emit(this.eventName, item);
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.list {
	padding: 10px 25px 10px 25px;
	.search {
		padding: 0px 10px 15px 10px;
	}
	.title {
		padding-left: 7px;
		font-weight: bold;
		margin-bottom: 7px;
	}
	.bbv {
		margin-top: 15px;
	}
	.item {
		overflow: hidden;
		margin-top: 10px;
	}
	.tags {
		width: 33.3333%;
		.int {
			background-color: white;
		}
	}
}

.search_view {
	/* #ifdef H5 */
	top: 100px;
	height: 88%;
	/* #endif */
	/* #ifdef APP-PLUS||MP-WEIXIN */
	top: 60px;
	height: 92%;
	/* #endif */
}
.u-index-item {
	display: block !important;
}
.u-index-anchor {
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 3px;
	margin-bottom: 10px;
}
</style>