首页添加筛选

src/views/index/indexCompany.vue

@@ -3,7 +3,8 @@
 		<!-- 搜索 -->
 		<el-affix @change="change" :offset="60" z-index="2001" style="width: 100%;">
 			<div :style="isTop==true?'background:#ffffff;box-shadow: 0 10px 8px rgba(153, 153, 153, 0.1);':''"
-				class="search flex align-center justify-center">
+				class="search flex align-center justify-center flex-direction">
+				<!-- 搜索 -->
 				<div class="search-box flex align-center justify-between">
 					<div class="search-box-l flex align-center" @click="openCityDialog">
 						<el-image style="width: 16px; height: 18px;margin-right: 5px;"
@@ -43,21 +44,73 @@
 						</div>
 					</div>
 				</div>
-			</div>
-		</el-affix>
-		<!-- 切换类型 -->
-		<div class="tabs flex align-center justify-center">
-			<div class="tabs-box">
-				<div @click="selectTabs(index)" :class="tabsCurr == index?'tabs-box-item-active':''"
-					class="tabs-box-item" v-for="(item,index) in tabs" :key="index">
-					{{ item?.ruleClassifyName }}
+				
+				<div class="flex justify-between align-center aaa">
+					<!-- 岗位 -->
+					<div class="tabs flex align-center justify-center">
+						<div class="tabs-box">
+							<div @click="selectTabs(index)" :class="tabsCurr == index ? 'tabs-box-item-active' : ''"
+								class="tabs-box-item" v-for="(item, index) in tabs" :key="index">
+								{{ item?.ruleClassifyName }}
+							</div>
+						</div>
+					</div>
+					<!-- 筛选 -->
+					<div class="filter">
+						<div class="searchCondizione flex align-center">
+							<div v-on:mouseover="mouseovermy(item)" v-on:mouseout="mouseoutmy(item)"
+								 v-for="(item, index) in searchCondizione" :key="index" class="searchCondizione-item">
+								<el-popover placement="bottom-start" width="auto" trigger="hover" hide-after="0">
+									<template #reference>
+										<div class="searchCondizione-itemt flex align-center">
+											<span>{{ item.name }}</span>
+											<el-icon :size="14" style="margin-left: 4px;" v-if="item.isUp == false">
+												<CaretBottom />
+											</el-icon>
+											<el-icon :size="14" style="margin-left: 4px;" v-else>
+												<CaretTop />
+											</el-icon>
+										</div>
+									</template>
+									<div v-if="index === 0">
+										<div class="searchCondizione-item-c-list" 
+										:style="experience == item.value ? 'color:#00DD9A' : ''" @click="selectCondition(item, '工作经验')"
+										v-for="item in experienceList" :key="item">
+											{{ item.value }}
+										</div>
+									</div>
+									<div v-if="index === 1">
+										<div class="searchCondizione-item-c-list" @click="selectCondition(item, '薪资待遇')" v-for="item in moneyList" :key="item">
+											{{ item.value }}
+										</div>
+									</div>
+									<div  v-if="index === 2">
+										<div @click="selectCondition(item, '学历要求')"
+											class="searchCondizione-item-c-list" v-for="item in schoolList"
+											:key="item">
+											{{ item.value }}
+										</div>
+									</div>
+								</el-popover>
+							</div>
+						</div>
+					</div>
 				</div>
+				<!-- 跨境标签 -->
 			</div>
-		</div>
+		</el-affix>
 		<!-- banner/类型 -->
 		<div v-if="bannerType.length>0" class="typeBanner flex align-center justify-center">
-			<div @mouseleave="mouseLeave" class="typeBanner-box flex align-center justify-center">
-				<div class="typeBanner-box-l ">
+			<div class="typeBanner-box-r">
+				<el-carousel :interval="6000" trigger="click" style="height: 400px;" autoplay>
+					<el-carousel-item v-for="item in bannerListuser" style="height: 400px;" :key="item">
+						<el-image style="width: 100%; height: 400px;border-radius: 24px;" :src="item.imageUrl"
+							fit="fill" />
+					</el-carousel-item>
+				</el-carousel>
+			</div>
+			<!-- <div @mouseleave="mouseLeave" class="typeBanner-box flex align-center justify-center"> -->
+				<!-- <div class="typeBanner-box-l ">
 					<div :class="shotypeCurr == index && isShoType ?'typeBanner-box-l-item-active':''"
 						@mouseenter="mouseEnter(index)" class="typeBanner-box-l-item flex align-center justify-between"
 						v-for="(item,index) in bannerType" :key="index">
@@ -78,17 +131,9 @@
 							</el-icon>
 						</div>
 					</div>
-				</div>
-				<div class="typeBanner-box-r" v-if="isShoType == false">
-					<el-carousel :interval="6000" trigger="click" style="height: 470px;" autoplay>
-						<el-carousel-item v-for="item in bannerListuser" style="height: 470px;" :key="item">
-							<el-image style="width: 100%; height: 470px;border-radius: 0 24px 24px 0;"
-								:src="item.imageUrl" fit="fill" />
-						</el-carousel-item>
-					</el-carousel>
-
-				</div>
-				<div class="typeBanner-box-r typeBanner-box-c" v-else>
+				</div> -->
+				
+				<!-- <div class="typeBanner-box-r typeBanner-box-c">
 					<div class="typeBanner-box-c-title">
 						{{bannerType[shotypeCurr]?.ruleClassifyName}}
 					</div>
@@ -104,9 +149,8 @@
 							</div>
 						</div>
 					</div>
-
-				</div>
-			</div>
+				</div> -->
+			<!-- </div> -->
 		</div>
 		<!-- 推荐 -->
 		<div class="tuijian flex align-center justify-center">
@@ -318,6 +362,7 @@
 	import axios from 'axios';
 	import jsonp from 'axios-jsonp'
 	import VueQrcode from 'vue-qrcode'
+	import { CaretBottom, Delete } from '@element-plus/icons-vue'
 	export default {
 		components: {
 			VueQrcode
@@ -352,7 +397,19 @@
 				search: '', //城市搜索关键字
 				cityGroupList: [], //按字母分组的城市列表
 				rmCity: [], //热门城市列表
-				companyId:''//企业id
+				companyId:'',//企业id
+			//筛选条件相关
+			experience: '', //工作经验
+			salaryRange: '', //薪资范围
+			education: '', //学历
+			experienceList: [],
+			moneyList: [],
+			schoolList: [],
+			searchCondizione: [
+				{name: '工作经验', isUp: false},
+				{name: '薪资待遇', isUp: false},
+				{name: '学历要求', isUp: false}
+			]
 			}
 		},
 		mounted() {
@@ -374,32 +431,118 @@
 			this.getBannerList();
 			//所有城市的列表
 			// this.getAllCityList();
-
+			this.getschoolList();
+			this.getjyList();
+			this.getMoneyList();
 
 		},
 		methods: {
+			mouseovermy(item) {
+				this.mouseoutmy()
+				item.isUp = true
+			},
+			mouseoutmy() {
+				this.searchCondizione.map(item => {
+					item.isUp = false
+				})
+			},
+			/**
+			 * schoolList
+			 * 学历列表
+			 */
+			getschoolList() {
+				let data = {
+					type: '学历'
+				}
+				this.$Request.get('/app/dict/list', {
+					params: data
+				}).then(res => {
+					if (res.code == 0) {
+						this.schoolList = [{ value: '不限', code: '不限' }, ...res.data]
+					}
+				})
+			},
+			/**
+			 * experienceList
+			 * 工作经验
+			 */
+			getjyList() {
+				let data = {
+					type: '工作经验'
+				}
+				this.$Request.get('/app/dict/list', {
+					params: data
+				}).then(res => {
+					if (res.code == 0) {
+						this.experienceList = [{ value: '不限', code: '不限' }, ...res.data]
+					}
+				})
+			},
+			/**
+			 * 薪资
+			 */
+			getMoneyList() {
+				let data = {
+					type: '薪资'
+				}
+				this.$Request.get('/app/dict/list', {
+					params: data
+				}).then(res => {
+					if (res.code == 0) {
+						this.moneyList = [{ value: '不限', code: '不限' }, ...res.data]
+					}
+				})
+			},
 			parseSkills(str) {
 				if (!str) return [];
-				// 统一替换中文逗号为英文逗号
+				try {
+					const parsed = JSON.parse(str);
+					if (Array.isArray(parsed)) {
+						return parsed;
+					}
+				} catch (e) {
+
+				}
 				str = str.replace(/，/g, ',');
-				// 先判断用什么分隔符
+				// 判断分隔符
 				if (str.includes('/')) {
 					return str.split('/').filter(Boolean);
 				} else if (str.includes(',')) {
 					return str.split(',').filter(Boolean);
 				}
-				// 没有分隔符，直接返回数组
 				return [str];
 			},
 			//获取app下载地址
-			getAppDown() {
-				this.$Request.get('/app/common/type/423').then(res => {
-					if (res.code == 0) {
-						this.options = res.data.value
-					}
-				})
+		getAppDown() {
+			this.$Request.get('/app/common/type/423').then(res => {
+				if (res.code == 0) {
+					this.options = res.data.value
+				}
+			})
 
-			},
+		},
+		//选择筛选条件
+		selectCondition(item, type) {
+			switch (type) {
+				case '工作经验':
+					this.experience = item.value
+					this.searchCondizione[0].name = item.value
+					break;
+				case '薪资待遇':
+					this.salaryRange = item.value
+					this.searchCondizione[1].name = item.value
+					break;
+				case '学历要求':
+					this.education = item.value
+					this.searchCondizione[2].name = item.value
+					break;
+				default:
+					break;
+			}
+			//重新获取简历
+			this.getRecommendJob(1)
+			this.getRecommendJob(2)
+		},
 			//选择热门搜索并跳转
 			selectLabel(item) {
 				this.keyWord = item
@@ -438,42 +581,42 @@
 				})
 			},
 			//获取简历
-			getRecommendJob(type) {
-				let data = {}
-				if (Number(type) === 1) {
-					this.loading = true
-					data = {
-						page: 1,
-						limit: 9,
-						postType: '', //工作性质
-						expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
-						screen: 1, //1推荐 2最新
-						city: this.city == '全国' ? '' : this.city, //城市
-						salaryRange: '', //薪资范围
-						eduRange: '', //学历
-						expRange: '', //经验
-						// industryName: '', //行业
-						lng: this.longitude,
-						lat: this.latitude,
-						companyId: this.companyId
-					}
-				} else {
-					this.loadings = true
-					data = {
-						page: 1,
-						limit: 9,
-						postType: '', //工作性质
-						expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
-						screen: 2, //1推荐 2最新
-						city: this.city == '全国' ? '' : this.city, //城市
-						salaryRange: '', //薪资范围
-						eduRange: '', //学历
-						expRange: '', //经验
-						lng: this.longitude,
-						lat: this.latitude,
-						companyId: this.companyId
-					}
+		getRecommendJob(type) {
+			let data = {}
+			if (Number(type) === 1) {
+				this.loading = true
+				data = {
+					page: 1,
+					limit: 9,
+					postType: '', //工作性质
+					expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
+					screen: 1, //1推荐 2最新
+					city: this.city == '全国' ? '' : this.city, //城市
+					salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
+					eduRange: this.education == '不限' ? '' : this.education, //学历
+					expRange: this.experience == '不限' ? '' : this.experience, //经验
+					// industryName: '', //行业
+					lng: this.longitude,
+					lat: this.latitude,
+					companyId: this.companyId
+				}
+			} else {
+				this.loadings = true
+				data = {
+					page: 1,
+					limit: 9,
+					postType: '', //工作性质
+					expectedPosition: this.tabs[this.tabsCurr]?.ruleClassifyName, //岗位名称
+					screen: 2, //1推荐 2最新
+					city: this.city == '全国' ? '' : this.city, //城市
+					salaryRange: this.salaryRange == '不限' ? '' : this.salaryRange, //薪资范围
+					eduRange: this.education == '不限' ? '' : this.education, //学历
+					expRange: this.experience == '不限' ? '' : this.experience, //经验
+					lng: this.longitude,
+					lat: this.latitude,
+					companyId: this.companyId
 				}
+			}
 				this.$Request.post('/app/resumes/selectResumesList', data,{type: 'json'}).then(res => {
 					if (res.code == 0) {
 						if (res.data && res.data.records) {
@@ -673,6 +816,7 @@
 		},
 	}
 </script>
+
 <style lang="scss" scoped>
 	$marginTop-60: 120px;
 	:deep(.el-affix--fixed) {
@@ -784,7 +928,7 @@
 
 	.search {
 		width: 100%;
-		height: 110px;
+		padding: 30px 0;
 		background-color: #F5F5F5;
 
 
@@ -885,13 +1029,16 @@
 			}
 		}
 	}
+	.aaa{
+		width: calc(1600px - $marginTop-60 * 2);
+		padding: 20px 0 10px;
+	}
 
 	.tabs {
 		width: 100%;
 		height: 40px;
-
 		.tabs-box {
-			width: calc(100% - $marginTop-60 * 2);
+			width: 100%;
 			height: 100%;
 			overflow-x: auto;
 			white-space: nowrap;
@@ -944,31 +1091,30 @@
 	.typeBanner {
 		width: 100%;
 		height: auto;
-		margin-top: 50px;
 
-		.typeBanner-box {
-			width: calc(100% - $marginTop-60 * 2);
-			height: 450px;
-			background-color: #ffffff;
-			border-radius: 24px;
-		}
-
-		.typeBanner-box-l {
-			width: 550px;
-			height: 100%;
-			background-color: #ffffff;
-			border-radius: 24px 0 0 24px;
-			align-content: space-around;
-			padding: 10px 0;
-			overflow: hidden;
-			overflow-y: scroll;
-		}
+		// .typeBanner-box {
+		// 	height: 450px;
+		// 	background-color: #ffffff;
+		// 	border-radius: 24px;
+		// }
+
+		// .typeBanner-box-l {
+		// 	width: 550px;
+		// 	height: 100%;
+		// 	background-color: #ffffff;
+		// 	border-radius: 24px 0 0 24px;
+		// 	align-content: space-around;
+		// 	padding: 10px 0;
+		// 	overflow: hidden;
+		// 	overflow-y: scroll;
+		// }
 
 		.typeBanner-box-r {
-			width: calc(100% - 550px);
+			width: calc(1600px - $marginTop-60 * 2);
+			// width: calc(100% - 550px);
 			height: calc(100% + 20px);
 			background-color: #ffffff;
-			border-radius: 0 24px 24px 0;
+			border-radius: 24px;
 		}
 
 		.typeBanner-box-c::-webkit-scrollbar {
@@ -1346,4 +1492,73 @@
 			color: #FFFFFF;
 		}
 	}
+	/* 筛选条件样式 */
+	.filter {
+		flex-shrink: 0;
+		border-radius: 8px;
+		// margin-top: 10px;
+		// padding: 0 20px;
+	}
+
+	.searchCondizione {
+		display: flex;
+		align-items: center;
+		// padding: 10px 0;
+	}
+
+	.searchCondizione-item {
+		position: relative;
+		// margin-right: 40px;
+		cursor: pointer;
+	}
+
+	.searchCondizione-itemt {
+		padding: 6px 12px;
+		// background-color: #f8f8f8;
+		font-weight: 400;
+		font-size: 14px;
+		color: #222222;
+		cursor: pointer;
+		border-radius: 4px;
+		// margin-bottom: 10px;
+	}
+	.searchCondizione-itemt:hover {
+		color: #00DD9A;
+	}
+
+	.transform-180 {
+		transform: rotate(180deg);
+		transition: transform 0.3s;
+	}
+
+
+	.searchCondizione-item-c-list {
+		text-align: center;
+		line-height: 38px;
+		cursor: pointer;
+	}
+	.searchCondizione-item-c-list:hover {
+		background-color: #f8f8f8;
+		border-radius: 4px;
+		color: #00DD9A;
+	}
+
+	.searchCondizione-item-c-list-i {
+		padding: 5px 15px;
+		font-size: 14px;
+		color: #606266;
+		transition: all 0.3s;
+	}
+	.clean {
+		margin-left: auto;
+		padding: 5px 10px;
+		cursor: pointer;
+		color: #909399;
+		transition: all 0.3s;
+		font-size: 14px;
+	}
+
+	.clean:hover {
+		color: #00DD9A;
+	}
 </style>

src/views/jilu/myCollect.vue

@@ -113,15 +113,21 @@
 		methods: {
 			parseSkills(str) {
 				if (!str) return [];
-				// 统一替换中文逗号为英文逗号
+				try {
+					const parsed = JSON.parse(str);
+					if (Array.isArray(parsed)) {
+						return parsed;
+					}
+				} catch (e) {
+
+				}
 				str = str.replace(/，/g, ',');
-				// 先判断用什么分隔符
+				// 判断分隔符
 				if (str.includes('/')) {
 					return str.split('/').filter(Boolean);
 				} else if (str.includes(',')) {
 					return str.split(',').filter(Boolean);
 				}
-				// 没有分隔符，直接返回数组
 				return [str];
 			},
 			goDetailst(item) {

src/views/search/searchCom.vue

@@ -168,7 +168,7 @@
 								</div>
 							</div>
 							<div class="content-l-item-info flex align-center flex-wrap">
-								<div class="content-l-item-infolabel" v-for="skillname in (item.intentPostSkill? item.intentPostSkill.split('/'):[])" :key="skillname">
+								<div class="content-l-item-infolabel" v-for="skillname in parseSkills(item.intentPostSkill)" :key="skillname">
 									{{ skillname}}
 								</div>
 							</div>
@@ -389,6 +389,25 @@
 			this.getTabsList();
 		},
 		methods: {
+			parseSkills(str) {
+				if (!str) return [];
+				try {
+					const parsed = JSON.parse(str);
+					if (Array.isArray(parsed)) {
+						return parsed;
+					}
+				} catch (e) {
+
+				}
+				str = str.replace(/，/g, ',');
+				// 判断分隔符
+				if (str.includes('/')) {
+					return str.split('/').filter(Boolean);
+				} else if (str.includes(',')) {
+					return str.split(',').filter(Boolean);
+				}
+				return [str];
+			},
 			selectTabs(index) {
 				this.tabsCurr = index;
 				//重新获取简历