cbz/page_index/pages/index/changeCity.vue

<template>
	<view class="content">
		<u-index-list @select="select">
			<view class="top">
				<u-search placeholder="请输入城市名" v-model="searchCity" :showAction="false" @search="search"></u-search>
			</view>
			<view class="title">
				<view class="title_text">定位城市</view>
				<view class="hflex acenter jcenter city_box active" @click="selectCity(city)">
					<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">
					<block v-for="(item2,index) in history" :key="index">
						<view class="city_box hflex acenter jcenter"@click="selectCity(item2)">{{item2}}</view>
					</block>
				</view>
			</view>
			<view class="title vflex fwrap">
				<view class="title_text">
					热门
				</view>
				<view class="hflex acenter fwrap">
					<block v-for="(item2,index) in hotList" :key="index">
						<view class="city_box hflex acenter jcenter"@click="selectCity(item2.name)">{{item2.name}}</view>
					</block>
				</view>
			</view>
		
			<template v-for="(item,index) in itemArr">
				<u-index-item>
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<view class="list-cell" v-for="(cell, index2) in item.child" :key="index2">
						<view @click="selectCity(cell.title)">{{cell.title}}</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				city: '',
				searchCity: '',
				history: [],
				hotList: [],
				indexList: ["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'],
				itemArr: []

			}
		},
		onLoad(options) {
			that = this
			that.city = uni.getStorageSync('locationCity')
			that.history = uni.getStorageSync('historyCity')
			console.log(that.history);
			if(that.history == '') {
				that.history = []
			}
			this.getCity()
		},
		methods: {
			// 获取城市信息
			getCity() {
				$api.req({
					url: '/data/api.Area/sort',
					data: {
						level: 2,
						hot: 1
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.hotList = res.data.hot
						that.itemArr = res.data.areas
					}
				})
			},
			// 搜索城市
			search(e) {
				var is_some = 0
				console.log(e);
				that.searchCity = e
				$api.req({
					url: '/data/api.Area/name',
					data: {
						name: that.searchCity
					}
				}, function(res) {
					if(res.code == 1) {
						if(res.data != null) {
							/* if (that.history.length > 0) {
								for(var i=0;i<that.history.length;i++) {
									if(that.history[i] == that.searchCity) {
										is_some = 1;
									}
								}
								if(is_some == 0) {
									that.history.unshift(that.searchCity)
								}
							} else {
								that.history.unshift(that.searchCity)
							}
							console.log(that.history);
							if(that.history.length > 9) {
								that.history.pop()
							}
							uni.setStorageSync("historyCity",that.history) */
							that.selectCity(res.data.name)
						} else {
							$api.info(res.info)
						}
					}
				})
			},
			// 选择索引
			select(e) {
				console.log("select",e);
			},
			// 选择城市
			selectCity(city) {
				console.log("City",city);
				var is_some = 0
				if (that.history.length > 0) {
					for(var i=0;i<that.history.length;i++) {
						if(that.history[i] == city) {
							is_some = 1;
						}
					}
					if(is_some == 0) {
						that.history.unshift(city)
					}
				} else {
					that.history.unshift(city)
				}
				if(that.history.length > 9) {
					that.history.pop()
				}
				uni.setStorageSync("historyCity",that.history)
				// that.search(city)
				var pages = getCurrentPages();// 获取所有的页面栈
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.city = city;
				$api.jump(-1)
				uni.setStorageSync('city',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 {
				margin-bottom: 20rpx;
			}
			.city_box {
				margin: 0 16rpx 20rpx 0;
				width: 212rpx;
				height: 72rpx;
				background: #f5f5f5;
				border-radius: 5rpx;
				font-size: 28rpx;
				color: #555;
				text-align: center;
			}
			.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 0;
			.u-index-anchor {
				border: none !important;
				background-color: #fff !important;
			}
		}
		// .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>