clsd/app/components/filters/filters.vue

<template>
	<u-popup :show="value" @close="close()" round="15">
		<view class="ppopup">
			<u-divider text="条件筛选"></u-divider>
			<scroll-view scroll-y="true" style="height: 450px">
				<view class="item">
					<view class="title">薪资待遇</view>
					<view class="tags" v-for="(item, index) in salary" :key="item.index" @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 experience" :key="item.name" @click="select('experience', 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,
			show: true,
			experience: [{ 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以上' }]
		};
	},
	watch: {
		value(newValue) {
			this.show = newValue;
		}
	},
	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', {
				experience: this.experience.filter((item) => item.check && item.name != '不限'),
				salary: this.salary.filter((item) => item.check)
			});
		},
		clear() {
			this.salary.forEach((i) => (i.check = false));
			this.experience.forEach((i) => (i.check = false));
			this.$forceUpdate();
		},
		close() {
			this.show = false;
			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;
	}
	.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>