cbz/page_index/pages/index/changeCity.vue

<template>
	<view class="content">
		<u-index-list @select="selectList">
			<view class="top">
				<u-search placeholder="请输入城市名" v-model="searchCity" :showAction="false" @change="search"></u-search>
				<view class="result" v-show="show">
					<view @click="selectCity(result.name)">{{result.name}}</view>
				</view>
			</view>
			
			<view class="title">
				<view class="title_text">定位城市</view>
				<view class=" hflex acenter">
					<view class="hflex acenter jcenter city_box " :class="select ? 'active' : ''" @click="selectCity(city)">
						<u-icon name="map-fill" color="#fff" size="14" v-if="select"></u-icon>
						<u-icon name="map-fill" color="#506DFF" size="14" v-else></u-icon>
						<view style="margin-left: 8rpx;">{{city}}</view>
					</view>
					<view class="hflex acenter jcenter city_box" :class="select ? '' : 'active'" @click="selectCity('全国')">
						<!-- <u-icon name="map-fill" color="#fff" size="14"></u-icon> -->
						<view style="margin-left: 8rpx;">全国</view>
					</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 v-if="item.child.length > 0">
					<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'
	const app = getApp().globalData
	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: [],
				show: false,
				result: {},
				select: true,
			}
		},
		onLoad(options) {
			that = this
			that.city = uni.getStorageSync('locationCity')
			if(uni.getStorageSync('city') == '全国') {
				that.select = false
			} else {
				that.select = true
			}
			that.history = uni.getStorageSync('historyCity')
			if(that.history == '') {
				that.history = []
			}
			if(!uni.getStorageSync('locationCity')) {
				this.getLocation()
			}
			this.getCity()
		},
		onPageScroll(e) {
			console.log(e);
			// this.scrollTop = e.scrollTop;
		},
		methods: {
			getLocation() {
				return new Promise((resolve, reject) => {
					app.getLoca().then(res=> {
						console.log('getLoaction',res);
						that.city = res[0].regeocodeData.addressComponent.city
						uni.setStorageSync('city',that.city)
						uni.setStorageSync('locationCity',that.city)
					})
				})
			},
			// 获取城市信息
			getCity() {
				$api.req({
					url: '/data/api.Area/sort',
					data: {
						level: 2,
						hot: 1,
						name: that.searchCity
					}
				}, function(res) {
					if(res.code == 1) {
						that.hotList = res.data.hot
						that.itemArr = res.data.areas
					}
				})
			},
			// 搜索城市
			search(e) {
				that.searchCity = e
				that.getCity()
				/* if(e == "") {
					that.show = false
				} else {
					that.show = true
				} */
				/* $api.req({
					url: '/data/api.Area/name',
					data: {
						name: that.searchCity
					}
				}, function(res) {
					if(res.code == 1) {
						if(res.data != null) {
							
							that.result = res.data
							// that.selectCity(res.data.name)
						} else {
							$api.info(res.info)
						}
					}
				}) */
			},
			// 选择索引
			selectList(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 40rpx 0 30rpx;
			box-sizing: border-box;
			position: relative;
			.u-search {
				padding-bottom: 30rpx !important;
			}
			// margin-top: ;
			.result {
				position: absolute;
				left: 0;
				bottom: -181rpx;
				// border: 1rpx solid #ddd;
				width: 100%;
				min-height: 200rpx;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 40rpx;
				background-color: #ffffff;
				z-index: 999;
				box-shadow: 0px 9px 8px 0px rgba(215,215,215,0.5);
			}
		}
		
		.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>