realty/virgo.wzfrontend/yui_wx/components/common/projectDropDown.vue

<template>
	<view class="project-drop-down">
		<uv-drop-down ref="dropDown" sign="dropDown" text-active-color="#08979c" text-active-size="28rpx"
			text-color="#1f1f1f" text-size="28rpx" :extra-icon="{name:'arrow-down-fill',color:'#1f1f1f',size:'26rpx'}"
			:extra-active-icon="{name:'arrow-up-fill',color:'#08979c',size:'26rpx'}" :defaultValue="defaultValue"
			:custom-style="{padding: '0 30rpx'}" :is-sticky="false" @click="selectMenu" v-if="dropItem('item').label">
			<uv-drop-down-item name="item" type="2" :label="dropItem('item').label" :value="dropItem('item').value">
			</uv-drop-down-item>
			<uv-drop-down-item name="target" type="2" :label="dropItem('target').label"
				:value="dropItem('target').value">
			</uv-drop-down-item>
			<uv-drop-down-item name="room" type="2" :label="dropItem('room').label" :value="dropItem('room').value">
			</uv-drop-down-item>
		</uv-drop-down>
		<uv-drop-down-popup sign="dropDown" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
			@clickItem="clickItem" v-if="currentDropItem.value">
		</uv-drop-down-popup>
	</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 {
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [],
				activeName: 'item',
				item: {
					label: '建筑楼宇',
					value: 'all',
					activeIndex: 0,
					color: '#1f1f1f',
					activeColor: '#08979c',
					size: '28rpx',
					activeSize: '28rpx',
					child: [{
						label: '全部楼宇',
						value: 'all'
					}, {
						label: '1号楼',
						value: '1'
					}]
				},
				target: {
					label: '楼层位置',
					value: 'all',
					activeIndex: 0,
					color: '#1f1f1f',
					activeColor: '#08979c',
					size: '28rpx',
					activeSize: '28rpx',
					child: [{
						label: '全部楼层',
						value: 'all'
					}, {
						label: '1层',
						value: '1'
					}]
				},
				room: {
					label: '区域位置',
					value: 'all',
					activeIndex: 0,
					color: '#1f1f1f',
					activeColor: '#08979c',
					size: '28rpx',
					activeSize: '28rpx',
					child: [{
						label: '全部区域',
						value: 'all'
					}, {
						label: '办公室101',
						value: '1'
					}, {
						label: '办公室102',
						value: '2'
					}, {
						label: '办公室103',
						value: '3'
					}]
				},
			}
		},
		methods: {
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				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);
				this.$emit('change', {
					name: this.activeName,
					label,
					value
				});
			}
		}
	}
</script>
<style lang="scss">
	.project-drop-down {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>