yizhizan-h5/package/screen/screen.vue

<template>
	<view class="flex flex-direction" style="height: 100vh;">
		<navBar title="筛选" color="#000" />
		<!-- 列表 -->
		<view class="list flex justify-between">
			<!-- 右侧列表 -->
			<view class="list-r">
				<scroll-view scroll-y="true" @scroll="scrolls" scroll-with-animation="true"
					:scroll-into-view="'bottomView' + current" style="width: 100%; height: 100%; padding-bottom: 20rpx">
					<block v-if="type">
						<view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0 && index != 3"
							v-for="(item, index) in list" :key="index">
							<view class="list-r-item-title">
								{{ item.name }}
							</view>
							<view class="list-r-item-childs flex justify-around align-center flex-wrap">
								<view class="list-r-item-childs-i flex justify-center align-center"
									v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
									@click="selectHyList(index, item.name, ite, ind)" :key="ind">
									{{ ite.value }}
								</view>
								<view class="list-r-item-childs-i flex justify-center align-center"
									style="height: 0; padding: 0">
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="list-r-item" :id="'bottomView' + index" v-if="list.length > 0"
							v-for="(item, index) in list" :key="index">
							<view class="list-r-item-title">
								{{ item.name }}
							</view>
							<view class="list-r-item-childs flex justify-around align-center flex-wrap">
								<view class="list-r-item-childs-i flex justify-center align-center"
									v-for="(ite, ind) in item.list" :class="ite.select == true ? 'activeRight' : ''"
									@click="selectHyList(index, item.name, ite, ind)" :key="ind">
									{{ ite.value }}
								</view>
								<view class="list-r-item-childs-i flex justify-center align-center"
									style="height: 0; padding: 0">
								</view>
							</view>
						</view>
					</block>
					<empty v-if="list.length == 0" />
				</scroll-view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom flex justify-center">
			<view class="bottom-box flex justify-between">
				<view @click="cleanSe()" class="bottom-box-left flex justify-center align-center">
					清除
				</view>
				<view @click="submitSe()" class="bottom-box-right flex justify-center align-center">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "../../components/empty.vue";
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		components: {
			empty,
			navBar
		},
		data() {
			return {
				current: 0,
				currents: 0,
				list: [],
				top_list: [],
				selectArr: [],
				type: "",
				isBrowse: false, //是否是从用户浏览记录里过来的
				isCompyBrowse: false, //是否是从企业浏览记录过来的
				isCompyHistory: false, //是否是从企业的投递记录过来的
			};
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type;
			}
			if (option.isBrowse) {
				this.isBrowse = true;
			} else {
				this.isBrowse = false;
			}
			if (option.isCompyBrowse) {
				this.isCompyBrowse = true;
			} else {
				this.isCompyBrowse = false;
			}
			if (option.isCompyHistory) {
				this.isCompyHistory = true;
			} else {
				this.isCompyHistory = false;
			}
			this.getSchools();
		},
		methods: {
			/**
			 * 清空筛选条件并清空缓存
			 */
			cleanSe() {
				this.list.map((item) => {
					item.list.map((ite) => {
						ite.select = false;
					});
				});
				if (this.isBrowse) {
					uni.removeStorageSync("browse");
				} else if (this.isCompyBrowse) {
					uni.removeStorageSync("isCompyBrowse");
				} else if (this.isCompyHistory) {
					uni.removeStorageSync("isCompyHistory");
				} else {
					uni.removeStorageSync("filter");
				}
			},
			/**
			 * 处理选中的条件
			 */
			submitSe() {
				let arr = JSON.parse(JSON.stringify(this.list));
				arr =
					arr &&
					arr.map((item) => {
						item.list =
							item.list &&
							item.list.filter((val) => {
								if (val.select) return val;
							});
						if (item.list.length > 0) {
							return item;
						}
					});
				arr = arr.filter((val) => {
					if (val) return val;
				});

				if (this.isBrowse) {
					uni.setStorageSync("browse", arr);
				} else if (this.isCompyBrowse) {
					uni.setStorageSync("isCompyBrowse", arr);
				} else if (this.isCompyHistory) {
					uni.setStorageSync("isCompyHistory", arr);
				} else {
					uni.setStorageSync("filter", arr);
				}
				uni.$emit('updateScreenFilterRecord')
				uni.navigateBack();
			},
			/**
			 * @param {Object} index 外层下标
			 * @param {Object} name 外层名称
			 * @param {Object} info 内层对象
			 * @param {Object} ind 内层下标
			 * 选择右侧的筛选
			 * 学历、薪资、经验单选，其余可以多选
			 */
			selectHyList(index, name, info, ind) {
				// 定义需要单选的类型
				const singleSelectTypes = ['学历要求', '薪资范围（单选）', '经验要求'];

				if (singleSelectTypes.includes(name)) {
					// 单选逻辑：先取消当前分类下所有选项的选中状态，再选中当前点击的选项
					this.list[index].list.forEach(item => {
						item.select = false;
					});
					info.select = true;
				} else {
					// 其余多选逻辑保持不变
					if (info.value == "不限") {
						this.list[index].list.forEach(item => {
							item.select = false;
						});
						info.select = true;
					} else {
						this.list[index].list.forEach(item => {
							if (item.value == "不限") {
								item.select = false;
							}
						});
						info.select = !info.select;
					}
				}
				this.$forceUpdate();
			},
			/**
			 * @param {Object} index
			 * 点击切换分类
			 */
			change_click_index(index) {
				this.current = index;
				//解决最后一个 ***来回*** 问题
				uni.setStorageSync("resolve", "last");
				setTimeout(() => {
					uni.removeStorageSync("resolve");
				}, 400);
			},
			scrolls(e) {
				if (!uni.getStorageSync("resolve")) {
					// this.get_node_details(e);
				}
			},
			/**
			 * @param {Object} options
			 * 获取节点信息
			 */
			get_node_details(options) {
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll(".list-r-item")
					.boundingClientRect((data) => {
						this.top_list = data.map((item) => {
							return Math.ceil(item.top);
						});
						this.async_detail_msg(options);
					})
					.exec();
			},
			/**
			 * @param {Object} options
			 * 设置滚动的位置
			 */
			async_detail_msg(options) {
				let top_page = options.detail.scrollTop + this.top_list[0];
				for (let i = 0; i < this.top_list.length; i++) {
					let node1 = this.top_list[i];
					let node2 = this.top_list[i + 1];
					if (node2 && top_page >= node1 && top_page < node2) {
						this.current = i;
						break;
					} else if (node2 && top_page === node2) {
						this.current = i + 1;
						break;
					}
				}
			},
			/**
			 * 获取学历列表
			 */
			getSchools() {
				this.$Request
					.get("/app/dict/list", {
						type: "学历",
					})
					.then((res) => {
						if (res.code == 0) {
							let list = [{
								value: "不限",
							}, ];
							let obj = {
								name: "学历要求",
								list: [...list, ...res.data],
							};
							this.getMoney(obj);
						}
					});
			},
			/**
			 * 获取薪资 列表
			 */
			getMoney(obj1) {
				this.$Request
					.get("/app/dict/list", {
						type: "薪资 ",
					})
					.then((res) => {
						if (res.code == 0) {
							let list = [{
								value: "不限",
							}, ];
							let obj = {
								name: "薪资范围（单选）",
								list: [...list, ...res.data],
							};
							this.getJy(obj1, obj);
						}
					});
			},
			/**
			 * 获取工作经验列表
			 */
			getJy(obj1, obj2) {
				this.$Request
					.get("/app/dict/list", {
						type: "工作经验 ",
					})
					.then((res) => {
						if (res.code == 0) {
							let list = [{
								value: "不限",
							}, ];
							let obj = {
								name: "经验要求",
								list: [...list, ...res.data],
							};
							this.getGm(obj1, obj2, obj);
						}
					});
			},
			/**
			 * 获取公司规模列表
			 */
			getGm(obj1, obj2, obj3) {
				this.$Request
					.get("/app/dict/list", {
						type: "公司规模 ",
					})
					.then((res) => {
						if (res.code == 0) {
							let list = [{
								value: "不限",
							}, ];
							let obj = {
								name: "公司规模",
								list: [...list, ...res.data],
							};
							this.getIndustryList(obj1, obj2, obj3, obj);
						}
					});
			},
			/**
			 * 获取行业列表
			 */
			getIndustryList(obj1, obj2, obj3, obj4) {
				this.$Request.get("/app/industry/getIndustryList").then((res) => {
					if (res.code == 0) {
						let list = [{
							value: "不限",
						}, ];
						let arrAy = [];
						res.data.map((item) => {
							arrAy = [...arrAy, ...item.childrenList];
						});
						let arrs = JSON.parse(JSON.stringify(arrAy).replace(/industryName/g, "value"));
						let obj = {
							name: "行业",
							list: [...list, ...arrs],
						};
						let arr = [];
						arr[0] = obj1;
						arr[1] = obj2;
						arr[2] = obj3;
						arr[3] = obj4;
						//arr[4] = obj;
						arr.map((item) => {
							item.list.map((ite) => {
								ite.select = false;
							});
						});

						this.list = arr;
						// 从缓存加载选中状态
						const storageKeys = [{
								key: 'filter',
								condition: !this.isBrowse && !this.isCompyBrowse && !this.isCompyHistory
							},
							{
								key: 'browse',
								condition: this.isBrowse
							},
							{
								key: 'isCompyBrowse',
								condition: this.isCompyBrowse
							},
							{
								key: 'isCompyHistory',
								condition: this.isCompyHistory
							}
						];

						for (const {
								key,
								condition
							}
							of storageKeys) {
							if (condition && uni.getStorageSync(key)) {
								const storedData = uni.getStorageSync(key);
								const selectedValues = [];
								storedData.forEach(item => {
									item.list.forEach(ite => {
										selectedValues.push(ite.value);
									});
								});

								this.list.forEach(item => {
									item.list.forEach(ite => {
										if (selectedValues.includes(ite.value)) {
											ite.select = true;
										}
									});
								});
								break;
							}
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	/* 样式保持不变 */
	page {
		background-color: #ffffff;
	}

	.activeRight {
		color: rgba(1, 107, 246, 1) !important;
		background-color: rgba(153, 196, 250, 0.4) !important;
		border-radius: 18rpx !important;
		border: 0.5px solid rgba(1, 107, 246, 1);
	}

	.active {
		border-left: 8rpx solid #016bf6 !important;
		color: #016bf6 !important;
	}

	.list {
		width: 100%;
		flex: 1;
		overflow: auto;
		.list-l {
			width: 30%;
			height: 100%;

			.list-l-item {
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #121212;
				padding-left: 20rpx;
				border-left: 8rpx solid #ffffff;
			}
		}

		.list-r {
			width: 100%;
			height: 100%;
			border-left: 1rpx solid #f2f2f7;
			box-sizing: border-box;

			.list-r-item {
				width: 100%;
				margin-top: 40rpx;

				.list-r-item-title {
					width: 100%;
					color: #121212;
					font-size: 32rpx;
					font-weight: bold;
					padding-left: 30rpx;
				}

				.list-r-item-childs {
					width: 100%;

					.list-r-item-childs-i {
						width: calc((100% - 120rpx) / 2);
						margin-top: 20rpx;
						padding-top: 16rpx;
						padding-bottom: 16rpx;
						padding-left: 16rpx;
						padding-right: 16rpx;
						font-size: 26rpx;
						color: #121212;
						background: rgba(245, 248, 254, 1);
						text-align: center;
						border-radius: 18rpx;
					}
				}
			}
		}
	}

	.bottom {
		width: 100%;
		background-color: #ffffff;

		.bottom-box {
			width: 686rpx;
			height: 80rpx;
			margin: 20rpx 0 40rpx;

			.bottom-box-left {
				width: 40%;
				height: 80rpx;
				color: #ffffff;
				border-radius: 999rpx;
				background: rgba(153, 196, 250, 1);
			}

			.bottom-box-right {
				width: 57%;
				height: 80rpx;
				border-radius: 999rpx;
				background: var(--线性渐变,
						linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%));
				color: #ffffff;
			}
		}
	}
</style>