clsd/app/components/sift/sift.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>
			<view class="item">
				<view class="title">年龄范围</view>
				<view class="form_group" style="display: flex">
					<view class="start">
						<input type="number" placeholder="开始" v-model="item.min" maxlength="2" />
					</view>
					<view class="hor">至</view>
					<view class="start">
						<input type="number" placeholder="结束" v-model="item.max" maxlength="2" />
					</view>
				</view>
			</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
		}
	},
	data() {
		return {
			item: {}
		};
	},
	methods: {
		confirm() {
			if (parseInt(this.item.max) < parseInt(this.item.min)) {
				uni.showModal({ content: '结束年龄不能小于开始年龄', showCancel: false });
				return false;
			}
			this.$emit('input', false);
			this.$emit('confirm', this.item);
		},
		clear() {
			this.item = { min: '', max: '' };
			this.$forceUpdate();
			this.$emit('confirm', this.item);
			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;
		input {
			text-align: center;
		}
	}
	.f {
		margin: 7px;
		.btn {
			margin-top: 10px;
			padding: 0px;
		}
		.ex {
			background-color: #f3f3f3;
			color: #6b6b6b;
		}
	}
}
</style>