You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
7.5 KiB
329 lines
7.5 KiB
<template>
|
|
<view class="filter-wrapper"
|
|
:style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }"
|
|
@touchmove.stop.prevent="discard">
|
|
<view class="inner-wrapper">
|
|
<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
|
|
<view class="navs">
|
|
<view class="c-flex-align" :class="{ 'c-flex-center': index > 0, actNav: index === actNav }"
|
|
v-for="(item, index) in navData" :key="index" @click="navClick(index)">
|
|
<view v-for="(child, childx) in item" :key="childx" v-if="child.select">{{ child.text }}</view>
|
|
<u-icon class="icon-triangle se-ml-10" color="#FF7A31" v-if="index === actNav" name="arrow-up"></u-icon>
|
|
<u-icon class="icon-triangle se-ml-10" v-else name="arrow-down"></u-icon>
|
|
|
|
</view>
|
|
<view class="c-flex-align date" @click="intellectClick()">
|
|
<view>智能推荐</view>
|
|
<u-icon class="icon-triangle se-ml-10" name="arrow-down"></u-icon>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
|
|
<view class="item-opt c-flex-align" :class="item.select ? 'actOpt' : ''"
|
|
v-for="(item, index) in navData[actNav]" :key="index" @click="handleOpt(index)">
|
|
{{ item.text }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<u-popup :show="show" :custom-style="{alignItems:'center'}" mode="center" bg-color="transparent">
|
|
<view class="se-w-600 se-bgc-white se-br-40 se-p-40">
|
|
<view class="se-mb-30" v-for="(items,indexs) in intellectArr" :key="indexs">
|
|
<view class="se-flex se-flex-ai-c">
|
|
<view class="line-orange"></view>
|
|
<view class="se-ml-10">
|
|
{{items.name}}
|
|
</view>
|
|
</view>
|
|
<view class="se-flex se-flex-ai-c se-flex-ff-rw se-pt-10">
|
|
<view class="se-py-10 se-px-20 se-fs-22 se-br-10 se-ml-15 se-mt-10" :class="item.select ? 'se-bgc-orange se-c-white se-b-orange' : 'se-b se-c-text'" @click="handleIntellect(indexs,index)" v-for="(item,index) in items.arr" :key="index">
|
|
{{item.text}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="se-flex se-flex-h-sb se-mt-40">
|
|
<view @click="onCancel" class="se-br-20 se-flex-1 se-flex-h-c se-h-60 se-lh-60 se-ta-c se-fs-26 se-c-66 se-bgc-f5">
|
|
<text>取消</text>
|
|
</view>
|
|
<view @click="onSubmit" class="se-br-20 se-ml-20 se-flex-1 se-flex-h-c se-h-60 se-lh-60 se-ta-c se-fs-26 se-c-white se-bgc-orange">
|
|
<text class="se-ml-10">提交</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
height: {
|
|
type: Number,
|
|
default: 80
|
|
},
|
|
top: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
filterData: {
|
|
//必填
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
// default: () => {
|
|
// return [
|
|
// [{ text: '全部状态', value: '' }, { text: '状态1', value: 1 }, { text: '状态2', value: 2 }, { text: '状态3', value: 3 }],
|
|
// [{ text: '全部类型', value: '' }, { text: '类型1', value: 1 }, { text: '类型2', value: 2 }, { text: '类型3', value: 3 }]
|
|
// ];
|
|
// }
|
|
},
|
|
defaultIndex: {
|
|
//默认选中条件索引,超出一类时必填
|
|
type: Array,
|
|
default: () => {
|
|
return [0];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
navData: [],
|
|
popupShow: false,
|
|
showMask: false,
|
|
actNav: null,
|
|
selDate: '选择日期',
|
|
selIndex: [] ,//选中条件索引
|
|
intellectArr:[
|
|
{
|
|
name:"您希望从事的工种",
|
|
arr:[
|
|
{
|
|
text:"全部",
|
|
value:"all",
|
|
select:true
|
|
},
|
|
{
|
|
text:"测试1",
|
|
value:"1",
|
|
select:false
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name:"您希望从事的工作性质",
|
|
arr:[
|
|
{
|
|
text:"全部",
|
|
value:"all",
|
|
select:true
|
|
},
|
|
{
|
|
text:"测试1",
|
|
value:"1",
|
|
select:false
|
|
}
|
|
]
|
|
}
|
|
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
this.navData = this.filterData;
|
|
this.selIndex = this.defaultIndex;
|
|
this.keepStatus();
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
keepStatus() {
|
|
this.navData.forEach(itemnavData => {
|
|
itemnavData.map(child => {
|
|
child.select = false;
|
|
});
|
|
return itemnavData;
|
|
});
|
|
for (let i = 0; i < this.selIndex.length; i++) {
|
|
let selindex = this.selIndex[i];
|
|
this.navData[i][selindex].select = true;
|
|
}
|
|
},
|
|
navClick(index) {
|
|
if (index === this.actNav) {
|
|
this.tapMask();
|
|
return;
|
|
}
|
|
this.popupShow = true;
|
|
this.showMask = true;
|
|
this.actNav = index;
|
|
},
|
|
handleOpt(index) {
|
|
this.selIndex[this.actNav] = index;
|
|
this.keepStatus();
|
|
setTimeout(() => {
|
|
this.tapMask();
|
|
}, 100);
|
|
let data = [];
|
|
let res = this.navData.forEach(item => {
|
|
let sel = item.filter(child => child.select);
|
|
data.push(sel);
|
|
});
|
|
this.$emit('onSelected', data);
|
|
},
|
|
handleIntellect(indexs,index){
|
|
this.intellectArr[indexs].arr[index].select = !this.intellectArr[indexs].arr[index].select
|
|
},
|
|
tapMask() {
|
|
this.showMask = false;
|
|
this.popupShow = false;
|
|
this.actNav = null;
|
|
},
|
|
discard() {},
|
|
intellectClick(){
|
|
this.show=true
|
|
},
|
|
onCancel(){
|
|
this.show=false
|
|
},
|
|
onSubmit(){
|
|
this.show=false
|
|
let data = [];
|
|
let res = this.intellectArr.forEach(item => {
|
|
let sel = item.arr.filter(child => child.select);
|
|
data.push(sel);
|
|
});
|
|
this.$emit('onIntellect', data);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.c-flex-align {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.c-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-wrapper {
|
|
position: sticky;
|
|
background-color: #f5f5f5;
|
|
left: 0;
|
|
width: 750rpx;
|
|
z-index: 999;
|
|
|
|
.inner-wrapper {
|
|
|
|
// position: relative;
|
|
.navs {
|
|
position: relative;
|
|
height: 80rpx;
|
|
padding: 0 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// background-color: #fff;
|
|
border-bottom: 2rpx solid #f5f6f9;
|
|
color: #000;
|
|
// font-weight: bold;
|
|
z-index: 999;
|
|
box-sizing: border-box;
|
|
|
|
&>view {
|
|
flex: 1;
|
|
height: 100%;
|
|
flex-direction: row;
|
|
z-index: 999;
|
|
}
|
|
|
|
.date {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.actNav {
|
|
color: #FF7A31;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
z-index: 666;
|
|
position: fixed;
|
|
top: calc(var(--status-bar-height) + 44px);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #f5f5f5;
|
|
transition: background-color 0.15s linear;
|
|
|
|
&.show {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
position: relative;
|
|
max-height: 500rpx;
|
|
background-color: #f5f5f5;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
overflow: scroll;
|
|
z-index: 999;
|
|
transition: all 1s linear;
|
|
opacity: 0;
|
|
display: none;
|
|
|
|
.item-opt {
|
|
height: 100rpx;
|
|
padding: 0 40rpx;
|
|
color: #111111;
|
|
border-bottom: 2rpx solid #f6f6f6;
|
|
}
|
|
|
|
.actOpt {
|
|
color: #FF7A31;
|
|
font-weight: bold;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '✓';
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
position: absolute;
|
|
right: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popupShow {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.icon-triangle {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
</style>
|