discounts-minapp/hotel/cityList.vue

<template>
	<view class="cityList">
		<view class="search-box">
			 <input class="search" v-model="query.name" type="text" placeholder="搜索城市名称" />
		</view>
		
		<view class="current-address" @click="handleCurrent">
			<image class="icon" src="@/static/blue-position.png" mode=""></image>
			<view class="city">
				{{city}}
			</view>
		</view>
		
		<zs-list class="list" mt="0" @load="loadMore" :status="status">
			<view class="item" v-for="item in list" :key="item.code" @click="handleCity(item.name,item.code)">
				{{item.name}}
			</view>
		</zs-list>
		
	</view>
</template>

<script>
	import {debounce} from '@/utils/tool.js'
	import {getCityList,queryFromLocation} from '@/api/common'
	export default {
		data() {
			return {
				query:{
					name:'',
					page:0,
					size:30,
				},
				list:[],
				status:'more',
				backUrl:'',
				checkInDate:'',
				checkOutDate:'',
				key:'',
				address:'定位中',
				city:'定位中',
			}
		},
		watch: {
			'query.name':debounce(function(val) {
				this.status = 'more'
				this.query.page = 0
				this.list = []
				this.getCityList()
			})
		},
		methods: {
			handleCurrent(){
				let code 
				this.list.map(item=>{
					if(item.name.indexOf(this.city) != -1){
						code = item.code
					}
				})
				
				if(this.backUrl){
					if(this.backUrl == '/pages/index/index'){
						uni.setStorageSync('HomeCity',this.city)
						uni.reLaunch({
							url:`${this.backUrl}?&regionCode=${code}`
						})
					}else{
						uni.reLaunch({
							url:`${this.backUrl}?cityName=${this.city}&key=${this.key}&checkInDate=${this.checkInDate}&checkOutDate=${this.checkOutDate}`
						})
					}
				}else{
					uni.reLaunch({
						url:'/hotel/index?cityName='+this.city
					})
				}
			},
			handleCity(name,code){
				
				let city = name.replace('市','')
				if(this.backUrl){
					if(this.backUrl == '/pages/index/index'){
						uni.setStorageSync('HomeCity',city)
						uni.reLaunch({
							url:`${this.backUrl}?&regionCode=${code}`
						})
					}else{
						uni.reLaunch({
							url:`${this.backUrl}?cityName=${city}&key=${this.key}&checkInDate=${this.checkInDate}&checkOutDate=${this.checkOutDate}`
						})
					}
				}else{
					uni.reLaunch({
						url:'/hotel/index?cityName='+city
					})
				}
				
			},
			loadMore(){
				this.getCityList()
			},
			getCityList() {
				this.status = 'loading'
				getCityList(this.query).then(res=>{
					if(res.state == 'Success'){
						this.list = this.list.concat(res.content.content) 
						if(this.list.length == res.content.totalElements){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.page++
						}
					}
				})
			},
			// 获取当前城市
			getCity(){
				let that = this
				that.city = '定位中...'
				return new Promise((resolve,reject)=>{
					uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								// 解析地址
								// that.query['location.lat'] = res.latitude
								// that.query['location.lon'] = res.longitude
								// 存储经纬度
								uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
								queryFromLocation({
											coordType:'gcj02ll',
											lat: res.latitude,
											lng: res.longitude
										}).then(res=>{
									console.log('解析结果',res);
									if(res.state == 'Success'){
										that.city = res.content.geoAddressComponent.city.replace('市','')
									}
								})
								
							},
							fail: () => {
								console.log("获取经纬度失败");
							},
						})
				})
			},
		},
		onLoad(options) {
			this.backUrl = options.backUrl
			this.checkInDate=options.checkInDate,
			this.checkOutDate=options.checkOutDate,
			this.key=options.key
			this.getCityList()
			this.getCity()
		}
	}
</script>

<style lang="scss" >
.cityList{
	background: #fff;
	.search-box{
		position: fixed;
		top: 0%;
		left: 0%;
		padding: 0 24rpx ;
		background: #fff;
		.search{
			width: 702rpx;
			height: 72rpx;
			text-indent: 20rpx;
			background: #F6F6F6;
			border-radius: 36rpx;
			box-sizing: border-box;
			padding: 0 40rpx;
		}
	}
	.current-address{
		display: flex;
		align-items: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F0F0F0;
		margin-top: 90rpx;
		line-height: 52rpx;
		padding: 0 20rpx;
		width: fit-content;
		margin-left: 24rpx;
		.icon{
			width: 30rpx;
			height: 30rpx;
		}
		.city{
			font-size: 28rpx;
			color: #222222;
			margin-left: 6rpx;
		}
	}
	.zs-list{
		.item{
			padding: 28rpx 0;
			font-size: 24rpx;
			color: #222222;
			border-bottom: 1rpx solid #F0F0F0;
			margin: 0 24rpx;
		}
	}
}
</style>