yizhizan-h5/components/resume/preview-resume.vue

<template>
	<view class="preview-resume-container">
		<view class="user-info">
			<view class="flex justify-between align-center">
				<view class="name">{{ userName }}</view>
				<view class="avatar-box">
					<image :src="avatarUrl ? avatarUrl : '/static/images/logo.jpg'" class="avatar"></image>
					<image src="@/static/images/svg/male.svg" class="sex-tag" v-if="sex == 1"></image>
					<image src="@/static/images/svg/female.svg" class="sex-tag" v-else-if="sex == 2"></image>
				</view>
			</view>
			<view class="flex sub-info">
				<image src="@/static/images/svg/gray-briefcase.svg" class="icon"></image>
				{{ currentCompanyName }} · {{ currentPositionName }}
			</view>
			<view class="sub-info">{{ jobStatusName }}</view>
			<view class="tags">
				<view class="tag" v-for="(tag, index) in baseInfoList" :key="index">{{ tag }}</view>
			</view>
			<view class="advantages">{{ adv }}</view>
			<view class="resume-tag">
				<image src="@/static/images/svg/file.svg" class="resume-icon"></image>
				已上传附件简历
			</view>
		</view>
		
		<!-- 求职期望 -->
		<view class="job-expect-container">
			<view class="job-expect-title">求职期望</view>
			<view class="job-expect" v-for="(item, index) in intentions" :key="index">
				<view class="flex justify-between align-center">
					<view class="text">
						<text>{{ item.ruleClassifyName }}</text>
						<text>{{ item.citys }}</text>
					</view>
					<view class="salary">{{ formatSalary(item.minSalary, item.maxSalary) }}</view>
				</view>
				<view class="skills">{{ formatTag(item.industry) }}</view>
			</view>
		</view>
		
		<!-- 工作经历 -->
		<view class="work-exprience-container">
			<view class="title-bar flex align-center">
				<image src="@/static/images/svg/toolbox.svg" class="title-icon"></image>
				工作经历
			</view>
			
			<view class="common-section">
				<view class="work-item" v-for="work in showWrokExpList" :key="work.workExpId">
					<view class="company-name-title">
						<view class="company-name">{{ work.companyName }}</view>
						<view class="company-tag" v-if="work.isCrossCompany">跨境</view>
					</view>
					<view class="position-item" v-for="(item, index) in work.workExpDetailList" :key="index">
						<view class="position-info">{{ item.position }} &nbsp; {{ item.startTime }}-{{ item.endTime }}</view>
						<view class="content">
							<view class="content-title">工作内容</view>
							<view class="content-text">{{ item.workContent }}</view>
						</view>
						<view class="content">
							<view class="content-title">工作业绩</view>
							<view class="content-text">{{ item.workPerformance }}</view>
						</view>
						<view class="tags">
							<view class="tag" v-for="(skill, i) in item.skills" :key="i">{{ skill }}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="show-all-btn" v-if="workExpList.length > 1 && !toggle" @click="handleShowAll">展开全部工作经历</view>
		</view>
		
		<!-- 教育经历 -->
		<view class="common-section">
			<view class="title">教育经历</view>
			<view class="edu-item" v-for="item in eduList" :key="item.eduId">
				<view class="school-name">{{ item.school }}</view>
				<view class="edu-base-info">{{ item.degree }} • {{ item.profession }} • {{ item.time }}</view>
				<view class="desc">{{ item.detail }}</view>
			</view>
		</view>
		
		<!-- 资质证书 -->
		<view class="common-section">
			<view class="title">资质证书</view>
			<view class="tags">
				<view class="tag" v-for="item in certificates" :key="item.certificateId">{{ item.certificateName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { jobStatus as jobStatusList } from '@/constants/userInfo'

	export default {
		data() {
			return {
				userName: '',
				sex: '',
				avatarUrl: '',
				currentCompanyName: '',
				currentPositionName: '',
				jobStatus: '',
				baseInfoList: [], // 工作年限、学历、年龄
				adv: '', // 个人优势
				intentions: [], // 求职期望
				workExpList: [], // 工作经历
				eduList: [], // 教育经历
				certificates: [], // 资质证书
				toggle: false
			};
		},
		computed: {
			jobStatusName() {
				return jobStatusList[this.jobStatus]?.text
			},
			showWrokExpList() {
				if (!this.toggle) {
					return this.workExpList.filter((wrok, index) => {
						if (index < 1) {
							return wrok
						}
					})
				}
				return this.workExpList
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$Request
					.getT('/app/userFirst/getUserResumes')
					.then((res) => {
						console.log(res)
						if (res.code === 0) {
							const data = res.data
							this.userName = data.userEntity.userName
							this.sex = data.userEntity.sex
							this.avatarUrl = data.userEntity.avatar
							this.jobStatus = data.resumeList.resumesStatus
							if (data.workExpList.length) {
								this.currentCompanyName = data.workExpList[0].companyName
								this.currentPositionName = data.workExpList[0].position
							}
							// 添加工作年限
							if (data.resumeList?.resumesWorkExperience) {
								this.baseInfoList.push(data.resumeList.resumesWorkExperience)
							}
							// 添加学历
							if (data.eduList) {
								this.baseInfoList.push(this.$queue.getHighestEducation(data.eduList))
							}
							// 添加年龄
							if (data.userEntity) {
								this.baseInfoList.push(`${data.userEntity.age}岁`)
							}
							this.adv = data.resumeList.adv
							
							// 求职期望
							this.intentions = data.intentions
							
							// 工作经历
							this.workExpList = data.workExps.map(work => {
								let workExpDetailList = []
								let isCrossCompany = false
								data.workExpList.forEach(item => {
									if (work.workExpId == item.workExpId) {
										item.skills = JSON.parse(item.skills)
										
										workExpDetailList.push(item)
									}
								})
								
								// 判断是否是跨境公司
								if (work.type && JSON.parse(work.type)?.[0] == 0) {
									isCrossCompany = true
								}
								
								work.workExpDetailList = workExpDetailList
								work.isCrossCompany = isCrossCompany
								return work
							})
							console.log(this.workExpList);
							
							// 教育经历
							this.eduList = data.eduList.map(edu => {
								let time = ''
								if (edu.startTime && edu.endTime) {
									time = `${edu.startTime.split('-')[0]}-${edu.endTime.split('-')[0]}`
								}
								edu.time = time
								return edu
							})
							
							// 资质证书
							this.certificates = data.certificates
						}
					})
			},
			// 格式化薪资
			formatSalary(min, max) {
				if (min && max) {
					return `${min / 1000}-${max / 1000}K`
				}
				return '--'
			},
			// 格式化标签
			formatTag(text) {
				return text.replace(/\//g, '|')
			},
			// 展示所有工作经历
			handleShowAll() {
				this.toggle = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.preview-resume-container {
		font-family: DM Sans;
		padding: 20rpx 40rpx 40rpx;
		background: #fff;

		// 个人基本信息
		.user-info {
			.name {
				font-size: 48rpx;
				font-weight: 700;
				line-height: 60rpx;
			}
			.avatar-box {
				position: relative;
				.avatar {
					display: block;
					width: 72rpx;
					height: 72rpx;
					border-radius: 72rpx;
					border: 1px solid rgba(240, 240, 240, 1);
				}
				.sex-tag {
					position: absolute;
					top: 0;
					right: 0;
					width: 22rpx;
					height: 22rpx;
					border-radius: 22rpx;
					background: #fff;
				}
			}
			.sub-info {
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgba(156, 164, 171, 1);
				margin: 20rpx 0;
				.icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
			.advantages {
				font-size: 28rpx;
				line-height: 36rpx;
				color: rgba(97, 110, 124, 1);
				margin-top: 20rpx;
			}
			.resume-tag {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				line-height: 32rpx;
				color: rgba(1, 107, 246, 1);
				padding: 16rpx 0;
				margin-top: 20rpx;
				.resume-icon {
					display: block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}

		// 求职期望
		.job-expect-container {
			margin-top: 20rpx;
			.job-expect-title {
				font-size: 32rpx;
				line-height: 48rpx;
				color: rgba(34, 37, 42, 1);
				margin-bottom: 20rpx;
			}
			.job-expect {
				margin-bottom: 20rpx;
				.text {
					width: 500rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					color: rgba(153, 153, 153, 1);
					padding: 6rpx 0;
					margin-bottom: 12rpx;
					text {
						margin-right: 8rpx;
					}
				}
				.salary {
					font-size: 32rpx;
					line-height: 40rpx;
					font-weight: 700;
					color: rgba(1, 107, 246, 1);
				}
				.skills {
					font-size: 20rpx;
					line-height: 24rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		// 工作经历
		.work-exprience-container {
			.title-bar {
				border-radius: 110rpx;
				box-shadow: 0px 16rpx 300rpx 0px rgba(0, 0, 0, 0.06);
				background: rgba(1, 107, 246, 0.1);
				padding: 12rpx 24rpx;
				color: rgba(1, 107, 246, 1);
				font-size: 32rpx;
				line-height: 44rpx;
				margin-bottom: 20rpx;
				.title-icon {
					display: block;
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}

			.work-item {
				margin-bottom: 40rpx;
				&:last-child {
					margin-bottom: 0;
				}
			}

			.company-name-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;
				.company-name {
					flex: 1;
					font-size: 28rpx;
					color: rgba(23, 23, 37, 1);
					line-height: 32rpx;
					padding: 6rpx 0;
				}
				.company-tag {
					height: 32rpx;
					font-size: 20rpx;
					line-height: 1;
					color: #fff;
					border-radius: 8rpx;
					background: linear-gradient(90.00deg, rgba(13, 39, 247, 0.75) 0%,rgba(19, 193, 234, 0.75) 100%);
					padding: 6rpx 7rpx;
					margin-top: 6rpx;
					margin-left: 20rpx;
					box-sizing: border-box;
				}
			}

			.position-item {
				padding-bottom: 36rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(227, 231, 236, 0.55);

				.position-info {
					color: rgba(102, 102, 102, 1);
					font-size: 24rpx;
					line-height: 32rpx;
					margin-bottom: 8rpx;
				}
				.content {
					margin-bottom: 20rpx;
					.content-title {
						font-size: 28rpx;
						line-height: 36rpx;
						color: #000;
						margin-bottom: 8rpx;
					}
					.content-text {
						font-size: 28rpx;
						line-height: 36rpx;
						color: rgba(120, 130, 138, 1);
					}
				}

				&:last-child {
					padding-bottom: 0;
					margin-bottom: 0;
					border-bottom: none;
				}
			}

			.show-all-btn {
				font-size: 20rpx;
				line-height: 26rpx;
				color: rgba(1, 107, 246, 1);
				margin-bottom: 20rpx;
			}
		}

		.common-section {
			padding: 32rpx;
			border:  1px solid rgba(227, 231, 236, 1);
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			.title {
				font-size: 32rpx;
				font-weight: 700;
				line-height: 48rpx;
				color: rgba(23, 23, 37, 1);
				margin-bottom: 24rpx;
			}
			.edu-item {
				margin-bottom: 56rpx;

				.school-name {
					font-size: 28rpx;
					line-height: 44rpx;
					color: rgba(23, 23, 37, 1);
					margin-bottom: 6rpx;
				}

				.edu-base-info {
					font-size: 24rpx;
					line-height: 40rpx;
					font-weight: 500;
					color: rgba(120, 130, 138, 1);
				}
				.desc {
					font-size: 28rpx;
					line-height: 36rpx;
					color: rgba(120, 130, 138, 1);
					margin-top: 6rpx;
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// tag样式
		.tags {
			display: flex;
			flex-wrap: wrap;
			gap: 8rpx;
			.tag {
				padding: 8rpx;
				border-radius: 8rpx;
				background: rgba(198, 198, 198, 0.1);
				font-size: 20rpx;
				line-height: 1;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
</style>