<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"></text> </view> <view class="tags"> <view class="out" @click="go('/pages/job/position/classification')"> <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 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 } }, data() { return { type: 0, positionName: '不限', positionId: '', 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以上' }] }; }, 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', { experience: this.experience .filter((item) => item.check && item.name != '不限') .map((item) => item.name) .toString() || '', salary: this.salary .filter((item) => item.check) .map((item) => item.name) .toString() || '', positionId: this.positionId || '' }); }, go(url) { uni.navigateTo({ url: url }); }, clear() { this.salary.forEach((i) => (i.check = false)); this.experience.forEach((i) => (i.check = false)); this.positionName = '不限'; this.positionId = ''; this.$forceUpdate(); this.$emit('confirm', { experience: '', 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; font-size: 20px; } } .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>