discounts-minapp/hotel/cityList.vue

<template>
	<view class="cityList">
		<view class="search-box">
			 <input class="search" v-model="value" type="text" placeholder="搜索城市名称" />
		</view>
		<zs-list class="list" mt="120rpx" :status="status">
			<view class="item" v-for="item in list" :key="item.code" @click="handleCity(item.name)">
				{{item.name}}
			</view>
		</zs-list>
		
	</view>
</template>

<script>
	import {getCityList} from '@/api/common'
	export default {
		data() {
			return {
				value:'',
				list:[],
				status:'more',
				backUrl:'',
				checkInDate:'',
				checkOutDate:'',
				key:''
			}
		},
		methods: {
			handleCity(name){
				let city = name.replace('市','')
				if(this.backUrl){
					uni.navigateTo({
						url:`${this.backUrl}?cityName=${city}&key=${this.key}&checkInDate=${this.checkInDate}&checkOutDate=${this.checkOutDate}`
					})
				}else{
					uni.navigateTo({
						url:'/hotel/index?cityName='+city
					})
				}
				
			},
			getCityList() {
				this.status = 'loading'
				getCityList().then(res=>{
					if(res.state == 'Success'){
						this.list = res.content.content
						this.status = 'noMore'
					}
				})
			}
		},
		onLoad(options) {
			this.backUrl = options.backUrl
			this.checkInDate=options.checkInDate,
			this.checkOutDate=options.checkOutDate,
			this.key=options.key
			this.getCityList()
		}
	}
</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;
		}
	}
	.zs-list{
		.item{
			padding: 28rpx 0;
			font-size: 24rpx;
			color: #222222;
			border-bottom: 1rpx solid #F0F0F0;
			margin: 0 24rpx;
		}
	}
}
</style>