yizhizan-pc/src/views/jilu/myCollect.vue

<template>
	<div class="search" style="padding-bottom: 40px;">
		 <!-- tbas -->
		<div class="tab flex align-center justify-center">
			<div class="tab-box flex align-center">
				<div class="tab-box-item active">
					简历收藏
				</div>
			</div>
		</div>
		<!-- 岗位列表主体 -->
		<div class="content flex align-center justify-center">
			<div class="content-box flex justify-between">
				<div v-show="isNoList == false" class="content-l" v-loading="loading">
					<div class="content-l-item flex justify-between" @click="goDetailst(item,index)"
						v-for="(item,index) in jobDataList" :key="index">
						<template v-if="item.resumesListDto.length > 0">
						<div class="content-l-item-l">
							<div class="content-l-item-title flex align-center">
								<img style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;"
									:src="item.avatar?item.avatar:'/default.jpg'" alt="" />
								{{item.resumesListDto[0].userName }}
								<span>
									【{{item.resumesListDto[0].city }}】
								</span>
							</div>
							<div class="content-l-item-info flex align-center flex-wrap">
								<div class="content-l-item-infomoney">
									{{ item.resumesListDto[0].minSalary }}-{{ item.resumesListDto[0].maxSalary }}
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesListDto[0].resumesWorkExperience }}年
								</div>
								<div class="content-l-item-infolabel">
									{{item.resumesListDto[0].degree}}
								</div>
								<div class="content-l-item-infolabel">
									{{ item.resumesListDto[0].userAge }}岁
								</div>
							</div>
							<!-- <div class="content-l-item-btn flex align-center" v-if="item.resumesListDto[0].intentPostSkill">
								<div class="content-l-item-btn-item" v-for="(ite,ind) in parseSkills(item.resumesListDto[0].intentPostSkill)">
									{{ite}}<el-divider v-if="ind+1< item.resumesListDto[0].intentPostSkill.length" direction="vertical" />
								</div>
							</div> -->
							<div class="content-l-item-btn flex align-center">
								<div class="content-l-item-btn-item">求职期望：{{ item.resumesListDto[0].expectedPosition }}</div>
							</div>
						</div>
						<div class="content-l-item-r">
							<div class="content-l-item-r-title flex algin-center">
								<div class="content-l-item-r-title-r">
									<div class="content-l-item-r-title-r-t">
										{{item.resumesListDto[0].school }}
									</div>
									<div style="margin-top: 20px;" class="content-l-item-r-title-r-b flex align-center">
										<div class="content-l-item-r-title-r-b-i">
											{{ item.resumesListDto[0].profession }}
										</div>
										<div class="content-l-item-r-title-r-b-i">
											{{ item.resumesListDto[0].degree }}
										</div>
									</div>
								</div>
							</div>
							<div class="content-l-item-r-bom flex align-center">
								<div class="content-l-item-r-bomtxt">
									公司：{{item.resumesListDto[0].companyName }}
								</div>
							</div>
						</div>
						</template>
					</div>
					<!-- 分页 -->
					<div class="content-l-item-pag flex align-center justify-center">
						<el-pagination @current-change="currentChange" v-model="page" :page-count="pages"
							:default-page-size="limit" background layout="prev, pager, next" />
					</div>


				</div>
				<div class="content-l" v-if="isNoList">
					<el-empty description="暂无匹配岗位" />
				</div>
				<div class="content-r">
					<resume @goDetails="goDetails" />
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import resume from '../../components/resume/resume.vue'
	export default {
		components: {
			resume
		},
		data() {
			return {
				jobDataList: [], //岗位列表
				page: 1, //分页
				limit: 10, //每页条数
				pages: 1, //总页数
				loading: false, //加载工
				isNoList: false,
			}
		},
		mounted() {
			//获取简历列表
			this.getUserList()
		},
		methods: {
			parseSkills(str) {
				if (!str) return [];

				try {
					// ✅ 如果是多个 JSON 数组拼接：比如 ["A"],["B"]
					if (str.includes('],[')) {
						const wrapped = `[${str}]`; // 变成 [["A"],["B"]]
						const parsed = JSON.parse(wrapped);
						return [...new Set(parsed.flat())]; // 扁平化 + 去重
					}

					// ✅ 正常的单个 JSON 数组字符串
					const parsed = JSON.parse(str);
					if (Array.isArray(parsed)) {
						return [...new Set(parsed)];
					}
				} catch (e) {
					// 非 JSON 格式的情况继续往下处理
				}

				// ✅ 替换中文逗号
				str = str.replace(/，/g, ',');

				// ✅ 支持多种分隔符
				let arr = [];
				if (str.includes('/')) {
					arr = str.split('/');
				} else if (str.includes(',')) {
					arr = str.split(',');
				} else {
					arr = [str];
				}

				return [...new Set(arr.map(s => s.trim()).filter(Boolean))];
			},
			goDetailst(item) {
				if (localStorage.getItem('token')) {
					const routeUrl = this.$router.resolve({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId
						}
					});
					window.open(routeUrl.href, '_blank');
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (localStorage.getItem('token')) {
					const routeUrl = this.$router.resolve({
						name: 'resumeInfo',
						query: {
							resumesId: item.resumesId
						}
					});
					window.open(routeUrl.href, '_blank');
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},

			//分页
			currentChange(e) {
				this.page = e
				this.getUserList()
			},
			/**
			 * 获取简历列表
			 */
			getUserList() {
				this.loading = true
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.get('/app/myCollection/getCompanyCollectionList', {
					params: data
				}).then(res => {
					this.loading = false
					if (res.code == 0) {
						this.pages = res.data.pages
						this.jobDataList = res.data.records
						if (this.jobDataList.length > 0) {
							this.isNoList = false
						} else {
							this.isNoList = true
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$marginTop-60: 120px;

	.active {
		border-bottom: 4px solid #00DD9A !important;
		color: #00DD9A !important;
	}

	.tab {
		width: 100%;
		margin-top: 20px;

		.tab-box {
			width: calc(100% - $marginTop-60 * 2);
			background-color: #ffffff;
			border-radius: 12px;
		}

		.tab-box-item {
			border-bottom: 4px solid #ffffff;
			margin-left: 40px;
			padding: 20px 0;
			cursor: pointer;
			color: #666666;
		}
	}

	.content {
		width: 100%;
		margin-top: 20px;

		.content-box {
			width: calc(100% - $marginTop-60 * 2);

		}

		.content-l {
			width: 65%;
		}

		.content-l-item:hover {
			box-shadow: 0 10px 10px 0 rgba(153, 153, 153, 0.3);
		}

		.content-l-item {
			width: 100%;
			background-color: #ffffff;
			border-radius: 13px;
			margin-bottom: 20px;
			cursor: pointer;
			position: relative;
		}

		.content-l-item-isSee {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #00DD9A;
			color: #ffffff;
			font-size: 14px;
			padding: 6px 10px;
			border-radius: 0 13px 0 13px;
		}

		.content-l-item-pag {
			width: 100%;
			padding: 20px 0;
		}

		.content-l-item-l {
			width: 55%;
		}

		.content-l-item-r {
			width: 45%;
			position: relative;
		}

		.content-l-item-r-title {
			width: 100%;
			height: 54px;
			margin-top: 20px;

			img {
				width: 54px;
				height: 54px;
				border-radius: 12px;
			}

			.content-l-item-r-title-r {
				margin-left: 10px;
			}

			.content-l-item-r-title-r-t {
				color: #222222;
				font-size: 16px;
				font-weight: 500;
				margin-top: 10px;
			}

			.content-l-item-r-title-r-b-i {
				background-color: #f8f8f8;
				color: #666666;
				font-size: 13px;
				padding: 4px 10px;
				border-radius: 4px;
				margin-right: 10px;
				margin-top: 6px;
			}
		}

		.content-l-item-r-bom {
			width: calc(100% - 40px);
			height: 48px;
			background: linear-gradient(to bottom, #f5fcfc, #fcfbfa);
			padding: 0 20px;
			border-radius: 0 0 13px 0;
			position: absolute;
			bottom: 0%;

			.content-l-item-r-bomtxt {
				width: 340px;
				color: #666666;
				font-size: 13px;
				overflow: hidden;
				/* 添加省略号 */
				text-overflow: ellipsis;
				/* 防止文本换行 */
				white-space: nowrap;
			}
		}

		.content-l-item-title {
			font-weight: 500;
			font-size: 16px;
			color: #222222;
			padding: 20px 20px 10px 20px;
		}

		.content-l-item-info {
			padding: 0 20px;
			padding-bottom: 10px;

			.content-l-item-infomoney {
				color: #fe574a;
				font-size: 16px;
				font-weight: 500;
				margin-right: 10px;
				margin-bottom: 10px;
			}

			.content-l-item-infolabel {
				background-color: #f8f8f8;
				// margin-left: 10px;
				margin-right: 10px;
				border-radius: 4px;
				padding: 4px 10px;
				color: #666666;
				font-size: 13px;
				margin-bottom: 10px;
			}
		}

		.content-l-item-btn {
			width: calc(100% - 40px);
			height: 48px;
			background: linear-gradient(to bottom, #f5fcfc, #fcfbfa);
			padding: 0 20px;
			border-radius: 0 0 0 13px;

			.content-l-item-btn-item {
				color: #666666;
				font-size: 13px;

			}
		}

		.content-r {
			width: calc(35% - 20px);
			height: fit-content;
			border-radius: 13px;
			background-color: #ffffff;
		}

	}

	.jobType {
		.jobType-item {
			// width: 100%;
			text-align: center;
			line-height: 38px;
			cursor: pointer;
		}

		.jobType-item:hover {
			background-color: #f8f8f8;
			border-radius: 4px;
			color: #00DD9A;
		}
	}

	.zhiwei {
		width: 400px;
		max-height: 400px;
		overflow: hidden;
		overflow-y: scroll;

		.zhiwei-item {
			width: 100%;
		}

		.zhiwei-item-l {
			width: 40%;
			font-weight: 500;
		}

		.zhiwei-item-r {
			width: 60%;
		}

		.zhiwei-item-r-txt {
			width: 100%;
			font-weight: 500;
			color: #999999;
		}

		.zhiwei-item-r-i {

			margin-bottom: 10px;
		}

		.zhiwei-item-r-i-i {
			margin-top: 10px;
			margin-right: 10px;
			cursor: pointer;
			font-size: 14px;
		}

		.zhiwei-item-r-i-i:hover {
			color: #00DD9A;
		}
	}

	::-webkit-scrollbar {
		/* Chrome, Safari, Opera */
		width: 4px;
	}

	::-webkit-scrollbar-thumb {
		background-color: #cccccc;
		/* 滚动条颜色 */
	}

	::-webkit-scrollbar-track {
		background-color: #ffffff;
		/* 轨道颜色 */
	}

	.hangye {
		width: 400px;
		max-height: 400px;
		overflow: hidden;
		overflow-y: scroll;


		.hangye-item {

			.hangye-l {
				width: 40%;
				font-weight: 500;
			}

			.hangye-r {
				width: 60%;

				.hangye-r-item {
					margin-right: 10px;
					cursor: pointer;
					margin-bottom: 10px;
				}

				.hangye-r-item:hover {
					color: #00DD9A;
				}
			}
		}
	}

	:deep(.el-input__wrapper) {
		box-shadow: none;
		border: none;
	}

	.condizione {
		width: 100%;
		height: auto;


		.condizione-box {
			width: calc(100% - $marginTop-60 * 2);
			height: 100%;
			background-color: #ffffff;
			border-radius: 13px;

			.condizione-box-c {
				width: calc(100% - 60px);
			}

			.condizione-box-c-searchc {
				width: 100%;
				height: 48px;
				margin-top: 30px;
			}

			.condizione-box-c-search {
				width: 80%;
				height: 100%;
				background-color: #00DD9A;
				border-radius: 13px;
				align-items: center;
			}

			.condizione-box-c-search-in {
				width: calc(90% - 2px);
				height: 44px;
				background-color: #ffffff;
				margin-left: 2px;
				border-radius: 13px;
			}

			.condizione-box-c-search-ins {
				width: calc(100% - 4px);
			}

			.condizione-box-c-search-btn {
				width: 10%;
				height: 48px;
				align-items: center;
				color: #ffffff;
				cursor: pointer;
			}

			.condizione-box-c-downApp {
				color: #00DD9A;
				cursor: pointer;
				position: relative;
			}

			.condizione-box-c-downApp-rq {
				display: none;
				position: absolute;
				bottom: -240px;
				background-color: #ffffff;
				padding: 20px;
				border-radius: 13px;
				border: 1px solid #f5f5f5;
			}

			.condizione-box-c-downApp-rq-img-txt {
				text-align: center;
			}

			.condizione-box-c-downApp:hover {
				.condizione-box-c-downApp-rq {
					display: block;
				}
			}
		}

		.condizione-box-c-city {
			width: 100%;
			height: auto;
			margin-top: 10px;

			.condizione-box-c-city-title {
				width: fit-content;
				color: #00DD9A;
				border-bottom: 4px solid #00DD9A;
				font-weight: 500;
				cursor: pointer;
			}

			.condizione-box-c-city-s {
				margin-top: 18px;

				.condizione-box-c-city-s-i {
					font-weight: 400;
					font-size: 14px;
					color: #333;
					margin-left: 10px;
					margin-bottom: 10px;
					cursor: pointer;
				}

				.condizione-box-c-city-s-i:hover {
					color: #00DD9A;
				}
			}

			.condizione-box-c-city-d {
				background-color: #f8f8f8;
				border-radius: 4px;
				margin-top: 8px;
				padding: 8px 0 0 0;

				.condizione-box-c-city-d-i {
					font-weight: 400;
					font-size: 14px;
					color: #333;
					margin-left: 10px;
					margin-bottom: 10px;
					cursor: pointer;
				}

				.condizione-box-c-city-d-i:hover {
					color: #00DD9A;
				}
			}
		}

		.condizione-box-c-hy {
			margin-top: 18px;
			width: 100%;

			// height: 32px;
			.condizione-box-c-hy-l {

				.condizione-box-c-hy-l-i {
					padding: 6px 12px;
					background-color: #f8f8f8;
					font-weight: 400;
					font-size: 14px;
					color: #222222;
					cursor: pointer;
					margin-right: 18px;
					border-radius: 4px;
					margin-bottom: 10px;
				}

				.condizione-box-c-hy-l-i:hover {
					color: #00DD9A;
				}
			}

			.condizione-box-c-hy-r {
				margin-bottom: 10px;
				font-size: 14px;
				font-weight: 400;
				color: #999999;
				cursor: pointer;
			}

			.condizione-box-c-hy-r:hover {
				color: #00DD9A;
			}
		}

	}

	.showModal-img {
		width: 100%;
		height: 300px;

		img {
			width: 400px;
			height: 300px;

		}
	}

	.showModal-title {
		width: 100%;
		text-align: center;
		color: #333333;
		font-size: 20px;
		font-weight: 500;
		margin-top: 5px;
	}

	.showModal-content {
		width: 100%;
		height: auto;
		margin-top: 10px;

		.showModal-content-c {
			width: 80%;
			height: 100%;
			color: #999999;
			font-size: 16px;
		}
	}

	.showModal-btn {
		width: 100%;
		height: 44px;
		margin: 30px 0;

		.showModal-btn-c {
			width: 200px;
			height: 100%;
			background-color: #00DD9A;
			border-radius: 10px;
			color: #ffffff;
			cursor: pointer;
		}
	}
</style>