clsd/app/components/filters/filters.vue

<template>
	<u-popup :show="value" @close="close()" round="15" :closeable="true" :mask-close-able="true">
		<view class="ppopup">
			<u-divider text="条件筛选" style="margin-top: 25px; margin-bottom: -5px"></u-divider>
			<scroll-view scroll-y="true" style="height: 450px">
				<view class="item">
					<view class="title" @click="go('/pages/job/position/classification')">
						<text>职位分类</text>
						<text class="icon">&#xe631;</text>
					</view>
					<view class="tags">
						<view class="out">
							<view class="int" :class="{ active: positionName != '不限' }">{{ positionName }}</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">薪资待遇</view>
					<view class="tags" v-for="(item, index) in salary" :key="item.name" @click="select('salary', item, index)">
						<view class="out">
							<view class="int" :class="{ active: item.check }">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">经验要求</view>
					<view class="tags" v-for="(item, index) in experiences" :key="item.name" @click="select('experiences', item, index)">
						<view class="out">
							<view class="int" :class="{ active: item.check }">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="flex">
				<view class="f">
					<button class="btn ex" @click="clear()">重置</button>
				</view>
				<view class="f">
					<button class="btn" @click="confirm()">确认</button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'filters',
	props: {
		value: {
			type: Boolean,
			default: true
		},
		list: {
			type: Array
		}
	},
	data() {
		return {
			type: 0,
			positionName: '不限',
			positionId: '',
			experiences: [{ name: '不限' }, { name: '1年以内' }, { name: '1-3年' }, { name: '3-5年' }, { name: '5-10年' }, { name: '10年以上' }],
			salary: [{ name: '不限' }, { name: '1-3k' }, { name: '3-5k' }, { name: '5-10k' }, { name: '10-20k' }, { name: '20-50k' }, { name: '50k以上' }]
		};
	},
	mounted() {
		uni.$on('select_position', (res) => {
			this.positionName = res.title;
			this.positionId = res.id;
			this.$forceUpdate();
		});
	},
	methods: {
		select(tag, item, index) {
			if (tag == 'salary') {
				this.salary.forEach((i) => (i.check = false));
				item.check = true;
			} else {
				if (index == 0) {
					this[tag].forEach((i) => (i.check = false));
					item.check = true;
				} else {
					this[tag][0].check = false;
					item.check = !item.check;
				}
			}
			this.$forceUpdate();
		},
		confirm(item) {
			this.$emit('input', false);
			this.$emit('confirm', {
				experiences: this.experiences.filter((item) => item.check && item.name != '不限'),
				salary: this.salary.filter((item) => item.check),
				positionId: this.positionId
			});
		},
		go(url) {
			uni.navigateTo({ url: url });
		},
		clear() {
			this.salary.forEach((i) => (i.check = false));
			this.experiences.forEach((i) => (i.check = false));
			this.positionName = '不限';
			this.positionId = '';
			this.$forceUpdate();
			this.$emit('confirm', { experiences: [], salary: '', positionId: '' });
			this.$emit('input', false);
		},
		close() {
			this.$emit('input', false);
		}
	}
};
</script>

<style lang="scss">
.ppopup {
	padding: 10px;
	.title {
		font-size: 17px;
		margin-top: 12px;
		margin-bottom: 12px;
		font-weight: bold;
		padding-left: 5px;
		.icon {
			float: right;
		}
	}
	.item {
		overflow: hidden;
		.tags {
			width: 33.33%;
			.int {
				&.active {
					background-color: $main-color;
					color: white;
				}
			}
		}
	}
	.f {
		margin: 7px;
		.btn {
			margin-top: 10px;
			padding: 0px;
		}
		.ex {
			background-color: #f3f3f3;
			color: #6b6b6b;
		}
	}
}
</style>