goufangtong3/pages/index/change-city.vue

<template>
	<view class="change-city">
		<view class="change-header">
			<view class="header-top u-flex u-row-between">
				<view class="top-left u-flex">
					<u-icon name="search" color="#B0B0B0"></u-icon>
					<input type="text" placeholder="请输入地址" v-model="keyword" confirm-type="search" @confirm="tosearch">
				</view>
				<text class="quxiao" @click="quxiao">取消</text>
			</view>
			<view class="header-down u-flex">
				<view class="down-item u-flex-col u-col-center u-row-center" :class="{'down-item1' : current == 0}" @click="changeshengfen">
					<text>省楼盘</text>
					<text></text>
				</view>
				<view class="down-item u-flex-col u-col-center u-row-center" :class="{'down-item1' : current == 1}">
					<text>市楼盘</text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="city-item" v-for="(item,index) in list" :key="index" @click="changitem(item)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				sheng: [],
				shengdata: {},
				shi: [],
				list: [],
				keyword: ''
			}
		},
		onLoad() {
			this.getsheng()
		},
		methods: {
			quxiao() {
				this.keyword = ''
				if (this.current == 0) {
					this.list = JSON.parse(JSON.stringify(this.sheng))
				} else {
					this.list = JSON.parse(JSON.stringify(this.shi))
				}
			},
			tosearch() {
				if (this.current == 0) {
					if (this.keyword) {
						this.list = []
						this.sheng.forEach(val => {
							if (val.name.indexOf(this.keyword) > -1) {
								this.list.push(val)
							}
						})
					} else {
						this.list = JSON.parse(JSON.stringify(this.sheng))
					}
				} else {
					if (this.keyword) {
						this.list = []
						this.shi.forEach(val => {
							if (val.name.indexOf(this.keyword) > -1) {
								this.list.push(val)
							}
						})
					} else {
						this.list = JSON.parse(JSON.stringify(this.shi))
					}
				}
			},
			getsheng() {
				this.$u.post('/api/Data/area_list', {
					level: 1
				}).then(res => {
					this.sheng = res.data
					this.list = res.data
				})
			},
			changitem(item) {
				if (this.current == 0) {
					this.shengdata = item
					uni.showLoading({
						mask: true,
						title: "请稍后"
					})
					this.$u.post('/api/Data/area_list', {
						level: 2,
						province_id: item.id
					}).then(res => {
						this.list = res.data
						this.shi = res.data
						this.keyword = ''
						this.current = 1
					})
				} else {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('changecity', { sheng: this.shengdata, shi: item });
					uni.navigateBack()
				}
			},
			changeshengfen() {
				this.current = 0
				this.list = JSON.parse(JSON.stringify(this.sheng))
			}
		}
	}
</script>

<style lang="scss">
	.change-city {
		.city-item {
			line-height: 88rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			border-bottom: 2rpx solid #F5F5F5;
		}

		.change-header {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;
			width: 750rpx;
			height: 188rpx;
			background: #FFFFFF;
			padding: 0 24rpx;
			border-bottom: 12rpx solid #F5F5F5;

			.header-down {
				.down-item {
					margin-right: 60rpx;

					text:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					text:last-child {
						width: 84rpx;
						height: 8rpx;
						border-radius: 6rpx;
						margin-top: -12rpx;
						position: relative;
						z-index: -1;
					}
				}

				.down-item1 {
					text:first-child {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					text:last-child {
						background: #1677FF;
					}
				}
			}

			.header-top {
				padding: 20rpx 0;

				.quxiao {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.top-left {
					width: 612rpx;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #F2F2F2;
					padding: 0 22rpx;

					input {
						flex: 1;
						margin-left: 16rpx;
					}
				}
			}
		}
	}
</style>