cbz/page_index/pages/index/changeCity.vue

<template>
	<view class="content">
		<u-index-list :index-list="indexList" @select="select" >
			<view class="top">
				<u-input v-model="searchCity" type="text" :border="true" placeholder="请输入城市名" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
				</u-input>
			</view>
			<view class="title">
				<view class="title_text">定位城市</view>
				<view class="hflex acenter jcenter city_box active">
					<u-icon name="map-fill" color="#fff" size="14"></u-icon>
					<view style="margin-left: 8rpx;">{{city}}</view>
				</view>
			</view>
			<view class="title vflex fwrap" v-if="history.length > 0">
				<view class="title_text">历史</view>
				<view class="hflex acenter fwrap city_box">
					<block v-for="(item,index) in history" :key="index">
						<view @click="selectCity(item)">{{item}}</view>
					</block>
				</view>
			</view>
			<view class="title vflex fwrap">
				<view class="title_text">
					热门
				</view>
				<view class="hflex acenter fwrap jbetween">
					<block v-for="(item2,index) in hotList">
						<view class="city_box hflex acenter jcenter"@click="selectCity(item2)">{{item2}}</view>
					</block>
				</view>
			</view>
		
			<template v-for="(item, index) in itemArr">
				<u-index-item>
					<view class="list-cell" v-for="(cell, index) in item">
						<view @tap="selectCity(cell)">{{cell.city}}</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	import cityList from './cityList.json'
	export default {
		data() {
			return {
				city: '',
				searchCity: '',
				history: [],
				hotList: [
					"北京市",
					"南京市",
					"重庆市",
					"成都市",
					"西安市",
					"广州市",
					"苏州市",
					"杭州市",
					"武汉市",
				],
				indexList: ["A", "B", "C","D","E","F","G","H","J","K","L","M","N","P",'Q','R','S','T','W','X','Y','Z'],
				itemArr: []

			}
		},
		onLoad(options) {
			this.city = options.city
			this.itemArr = cityList.city_list;
			console.log(this.itemArr);
		},
		methods: {
			// 选择索引
			select(e) {
				console.log(e);
			},
			// 选择城市
			selectCity(city) {
				console.log(city);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		// padding: 0 30rpx;
		background-color: #f5f5f5;
		.top {
			width: 100%;
			background: #fff;
			padding: 36rpx 30rpx 36rpx;
			box-sizing: border-box;
			// margin-top: ;
		}
		.title {
			width: 100%;
			background: #fff;
			padding: 32rpx 30rpx 32rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #222;
			
			.title_text {
				
			}
			.city_box {
				margin-top:20rpx ;
				width: 212rpx;
				height: 72rpx;
				background: #f5f5f5;
				border-radius: 5rpx;
				font-size: 28rpx;
				color: #555
			}
			.active {
				background: #506DFF;
				font-size: 28rpx;
				color: #fff
			}
		}
		.u-index-list {
			width: 100%;
			box-sizing: border-box;
			padding: 32rpx 0;
			// background-color: #fff;
		}
		.u-input {
			background: #f5f5f5 !important;
		}
		.u-index-item {
			width: 100%;
			background: #fff;
			margin: 10rpx 0;
			padding: 32rpx 30rpx 0;
		}
		// .list-cell {
		// 	font-size: 30rpx;
		// 	color: #222;
		// 	padding-bottom: 32rpx;
		// }
		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #222;
			font-size: 30rpx;
			line-height: 24px;
			background-color: #fff;
		}

	}
</style>