goufangtong3/components/gf-search/gf-search.vue

<template>
	<view class="gf-search">
		<u-popup v-model="show" mode="right">
			<view class="search-popup">
				<view class="search-item">
					<view class="search-title">
						区域筛选
					</view>
					<view class="u-flex">
						<view class="select-box0 u-flex u-row-between" @click="showsheng = true">
							<text class="text u-line-1">{{shengname || '选择省'}}</text>
							<u-icon name="arrow-down" color="#D8D8D8" size="26"></u-icon>
						</view>
						<view class="select-box0 u-flex u-row-between" @click="showshi = true">
							<text class="text u-line-1">{{shiname || '选择市'}}</text>
							<u-icon name="arrow-down" color="#D8D8D8" size="26"></u-icon>
						</view>
						<view class="select-box0 u-flex u-row-between" @click="showqu = true">
							<text class="text u-line-1">{{quname || '选择区'}}</text>
							<u-icon name="arrow-down" color="#D8D8D8" size="26"></u-icon>
						</view>
					</view>

				</view>
				<view class="search-item">
					<view class="search-title">
						价格筛选
					</view>
					<view class="select-box1 u-flex">
						<text :class="price == 1 ? 'text1 text1_active' : 'text1'" @click="price = 1">从低到高</text>
						<text :class="price == 2 ? 'text1 text1_active' : 'text1'" @click="price = 2">从高到低</text>
					</view>
				</view>
				<view class="search-item">
					<view class="search-title">
						面积筛选
					</view>
					<view class="select-box2 u-flex">
						<view class="text1 u-flex">
							<input type="number" placeholder="请输入" v-model="mianji1">
							<text>㎡</text>
						</view>
						<text class="xian"></text>
						<view class="text1 u-flex">
							<input type="number" placeholder="请输入" v-model="mianji2">
							<text>㎡</text>
						</view>
					</view>
				</view>
				<view class="search-item">
					<view class="search-title">
						户型筛选
					</view>
					<view class="select-box u-flex u-row-between" @click="showhuxing = true">
						<text class="text">{{huxingname || '请选择'}}</text>
						<u-icon name="arrow-down" color="#D8D8D8" size="26"></u-icon>
					</view>
				</view>
				<view class="search-item">
					<view class="search-title">
						类别筛选
					</view>
					<view class="select-box u-flex u-row-between" @click="showleibie = true">
						<text class="text">{{leibiename || '请选择'}}</text>
						<u-icon name="arrow-down" color="#D8D8D8" size="26"></u-icon>
					</view>
				</view>
				<view class="u-flex search-btn u-row-between">
					<text @click="chongzhi">重置</text>
					<text @click="shaixuan">确定</text>
				</view>
			</view>
		</u-popup>
		<u-select v-model="showsheng" :list="shenglist" label-name="name" value-name="id" @confirm="changesheng"></u-select>
		<u-select v-model="showshi" :list="shilist" label-name="name" value-name="id" @confirm="changeshi"></u-select>
		<u-select v-model="showqu" :list="qulist" label-name="name" value-name="id" @confirm="changequ"></u-select>
		<u-select v-model="showhuxing" :list="huxinglist" label-name="title" value-name="id" @confirm="changehuxing"></u-select>
		<u-select v-model="showleibie" :list="leibielist" label-name="title" @confirm="changeleibie"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,

				showsheng: false,
				shenglist: [],
				shengname: '',
				shengid: '',

				showshi: false,
				shilist: [],
				shiname: '',
				shiid: '',

				showqu: false,
				qulist: [],
				quname: '',
				quid: '',

				price: '',
				mianji1: '',
				mianji2: '',
				showhuxing: false,
				huxinglist: [],
				huxingname: '',
				huxingid: '',
				showleibie: false,
				leibielist: [],
				leibiename: '',
			}
		},
		created() {
			this.getconfig()
		},
		methods: {
			shaixuan() {
				if(this.shengid && !this.quid){
					this.$u.toast("请选择完整区域")
					return
				}
				if ((this.mianji1 && this.mianji2) || (!this.mianji1 && !this.mianji2)) {
					this.$emit('shaixuan', {
						area_id: this.quid,
						price_sort: this.price,
						min_area: this.mianji1,
						max_area: this.mianji2,
						house_type_id: this.huxingid,
						property_class: this.leibiename
					})
					this.show = false
				} else {
					this.$u.toast("面积有误")
				}

			},
			chongzhi() {
				this.shengid = ''
				this.shengname = ''
				this.shiid = ''
				this.shiname = ''
				this.quid = ''
				this.quname = ''
				this.price = ''
				this.mianji1 = ''
				this.mianji2 = ''
				this.huxingid = ''
				this.huxingname = ''
				this.leibiename = ''
				this.show = false
			},
			changeleibie(e) {
				this.leibiename = e[0].label
			},
			changehuxing(e) {
				this.huxingname = e[0].label
				this.huxingid = e[0].value
			},
			changesheng(e) {
				this.shengname = e[0].label
				this.shengid = e[0].value
				this.shilist = []
				this.shiname = ''
				this.shiid = ''
				this.qulist = []
				this.quname = ''
				this.quid = ''
				this.$u.post('/api/Data/area_list', {
					level: 2,
					province_id: this.shengid
				}).then(res => {
					this.shilist = res.data
				})
			},
			changeshi(e) {
				this.shiname = e[0].label
				this.shiid = e[0].value
				this.qulist = []
				this.quname = ''
				this.quid = ''
				this.$u.post('/api/Data/area_list', {
					level: 3,
					city_id: this.shiid
				}).then(res => {
					this.qulist = res.data
				})
			},
			changequ(e) {
				this.quname = e[0].label
				this.quid = e[0].value
			},
			getconfig() {
				this.$u.post('/api/Data/area_list', {
					level: 1
				}).then(res => {
					this.shenglist = res.data
				})
				this.$u.post('/api/Index/house_type_list').then(res => {
					this.huxinglist = res.data
				})
				this.$u.post('/api/Index/property_class_list').then(res => {
					this.leibielist = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.gf-search {
		.search-popup {
			width: 448rpx;
			background: #FFFFFF;
			padding: 0 24rpx;

			.search-btn {
				margin-top: 40rpx;

				text:first-child {
					width: 188rpx;
					line-height: 76rpx;
					background: #FFA120;
					border-radius: 8rpx;
					text-align: center;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				text:last-child {
					width: 188rpx;
					line-height: 76rpx;
					background: #1F7EFF;
					border-radius: 8rpx;
					text-align: center;
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.search-item {
				padding: 40rpx 0 24rpx 0;
				border-bottom: 1rpx solid #F5F5F5;

				.select-box2 {
					.text1 {
						width: 128rpx;
						height: 52rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 2rpx solid #CCCCCC;
						padding: 0 10rpx;

						input {
							flex: 1;
							text-align: center;
							font-size: 24rpx;
						}

						text {
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #CCCCCC;
						}
					}

					.xian {
						width: 32rpx;
						height: 2rpx;
						background: #CCCCCC;
						border-radius: 8rpx;
						margin: 0 10rpx;
					}
				}

				.select-box1 {
					.text1 {
						width: 128rpx;
						line-height: 52rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 2rpx solid #CCCCCC;
						text-align: center;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #CCCCCC;
						margin-right: 20rpx;
					}

					.text1_active {
						border: 2rpx solid #1F7EFF;
						color: #1F7EFF;
					}
				}

				.search-title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.select-box0 {
					flex: 1;
					height: 52rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #CCCCCC;
					padding: 0 5rpx;
					margin-right: 10rpx;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						flex: 1;
					}
				}

				.select-box {
					width: 312rpx;
					height: 52rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #CCCCCC;
					padding: 0 14rpx;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						flex: 1;
					}
				}
			}


		}
	}
</style>