employ-front/pages/home/component/screen-work.vue

<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>