houserent-front/pages_subpack/category/component/search.vue

<template>
	<view>
		<view class="se-bgc-white se-pb-20 se-pt-30 se-px-40">
			<uv-search @search="onSearch()" placeholder="搜索租房信息" :showAction="false" v-model="keyword"></uv-search>
		</view>
		<view class="se-pb-10 se-px-40 se-bgc-white">
			<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#20CD7D"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
				:extra-active-icon="{name:'arrow-up-fill',color:'#20CD7D',size:'26rpx'}" :defaultValue="defaultValue"
				:custom-style="{padding: '0rpx 0rpx',borderBottom:'1rpx solid transparent'}" @click="selectMenu">
				
				<uv-drop-down-item name="region" type="2" :label="dropItem('region').label" :value="dropItem('region').value">
				</uv-drop-down-item>
				<uv-drop-down-item name="rent" type="2" :label="dropItem('rent').label" :value="dropItem('rent').value">
				</uv-drop-down-item>
				<uv-drop-down-item name="type" type="2" :label="dropItem('type').label" :value="dropItem('type').value">
				</uv-drop-down-item>
				<uv-drop-down-item name="duration" type="2" :label="dropItem('duration').label" :value="dropItem('duration').value">
				</uv-drop-down-item>
				<!-- <uv-drop-down-item name="vip_type" type="1" label='VIP文档' :value="dropItem('vip_type').value">
				</uv-drop-down-item> -->
			</uv-drop-down>
			<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
				@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
		</view>
	</view>
</template>

<script>
	import { houseArea,houseIconClass,housePrice,houseYear } from "@/common/api.js"
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				keyword: "",
				// 表示value等于这些值，就属于默认值
				defaultValue: ['all', 'all', 'all','all'],
				// 筛选结果
				result: [],
				region:{
					label: '区域',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#20CD7D',
					child: [
						// {
						// 	label: '全部区域',
						// 	value: 'all'
						// }, {
						// 	label: '湖南',
						// 	value: 'hunan'
						// }, {
						// 	label: '广州',
						// 	value: 'guangzhou'
						// },
					]
				},
				rent:{
					label: '租金',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#20CD7D',
					child: [
					// 	{
					// 	label: '全部',
					// 	value: 'all'
					// }, 
					// {
					// 	label: '0-2k',
					// 	value: '2000'
					// }, {
					// 	label: '2k-4k',
					// 	value: '4000'
					// }, {
					// 	label: '4k-6k',
					// 	value: '6000'
					// }, {
					// 	label: '6k+',
					// 	value: '6000+'
					// },
					]
				},
				type: {
					label: '类型',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#20CD7D',
					child: [
						// {
						// 	label: '全部',
						// 	value: 'all'
						// }, {
						// 	label: '闲置散居农房',
						// 	value: 'nongfang'
						// }, {
						// 	label: '鱼塘',
						// 	value: 'yutang'
						// }, {
						// 	label: '耕地',
						// 	value: 'gengdi'
						// },
					]
				},
				duration:{
					label: '年限',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#20CD7D',
					child: [
						// {
						// 	label: '全部',
						// 	value: 'all'
						// }, 
						// {
						// 	label: '5年内',
						// 	value: '0-5'
						// }, {
						// 	label: '5-10年',
						// 	value: '5-10'
						// }, {
						// 	label: '10-20年',
						// 	value: '10-20'
						// },
					]
				},
				activeName: 'region',
				
				vip_type: {
					label: 'VIP文档',
					value: 0,
					activeIndex: 0
				}
			}
		},
		mounted() {
			let that = this
			// setTimeout(()=>{
				that.onhouseArea()
				that.onhouseIconClass()
				that.onhousePrice()
				that.onhouseYear()
			// },2000)
			console.info('组件')
				// houseArea,houseIconClass,housePrice,houseYear
		},
		methods: {
			onhouseArea(){
				let that = this
				houseArea({}).then(response=>{
					let arr = [
						{
							label: '全部',
							value: 'all'
						}
					]
					response.result.forEach(items=>{
						let obj = {}
						obj.label=items.title;
						obj.value=items.id
						arr.push(obj)
					})
					that.region.child=arr
					console.info('houseArea',response.result)
				}).catch(error=>{
					
				})
			},
			onhouseIconClass(){
				let that = this
				houseIconClass({}).then(response=>{
					console.info(response.result)
					let arr = [
						{
							label: '全部',
							value: 'all'
						}
					]
					response.result.forEach(items=>{
						let obj = {}
						obj.label=items.title;
						obj.value=items.id
						arr.push(obj)
					})
					that.type.child=arr
				}).catch(error=>{
					
				})
			},
			onhousePrice(){
				let that = this
				housePrice({}).then(response=>{
					let arr = [
						{
							label: '全部',
							value: 'all'
						}
					]
					response.result.forEach(items=>{
						let obj = {}
						obj.label=items.title;
						obj.value=items.price
						arr.push(obj)
					})
					that.rent.child=arr
				}).catch(error=>{
					
				})
			},
			onhouseYear(){
				let that = this
				houseYear({}).then(response=>{
					console.info(response.result)
					let arr = [
						{
							label: '全部',
							value: 'all'
						}
					]
					response.result.forEach(items=>{
						let obj = {}
						obj.label=items.title;
						obj.value=items.timeGo
						arr.push(obj)
					})
					that.duration.child=arr
				}).catch(error=>{
					
				})
			},
			onSearch(){
				this.$emit("onSearch",this.keyword)
			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item
							.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				this.result.push({
					name: this.activeName,
					label,
					value
				});
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				// uni.showModal({
				// 	content: `筛选的值：${JSON.stringify(this.result)}`
				// })
				console.info('onParent',this.result)
				this.$emit("onParent",this.result)
			}
		}
	}
</script>

<style>
</style>