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>
	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
				}
			}
		},
		methods: {
			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;
				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(this.result)
				this.$emit("onParent",this.result)
			}
		}
	}
</script>

<style>
</style>