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 flex">
					<text>{{ userName }}</text>
					<view class="badge" v-if="browseTag">{{ browseTag }}</view>
				</view>
				<view class="avatar-box">
					<image :src="avatarUrl ? avatarUrl : '/static/images/logo.jpg'" class="avatar" mode="aspectFill"></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>
				<template v-if="currentCompanyName">{{ currentCompanyName }} <template v-if="currentPositionName">· {{ currentPositionName }}</template></template>
				<template v-else>--</template>
			</view>
			<view class="sub-info">{{ jobStatusName }}</view>
			<view class="tags">
				<template v-for="(tag, index) in baseInfoList">
					<view class="tag" v-if="tag" :key="index">{{ tag }}</view>
				</template>
			</view>
			<view class="advantages">
				<text>{{ adv }}</text>
			</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" v-if="showWrokExpList && showWrokExpList.length">
				<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">
								<text>{{ item.workContent }}</text>
							</view>
						</view>
						<view class="content">
							<view class="content-title">工作业绩</view>
							<view class="content-text">
								<text>{{ item.workPerformance }}</text>
							</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">
					<text>{{ item.detail }}</text>
				</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 {
		props: {
			// 简历id，如果有就查id的数据，如果没有就查自己的
			resumesId: {
				type: String | Number,
				default: '',
			},
			postPushId: {
				type: String | Number,
				default: ''
			},
		},
		data() {
			return {
				userName: '',
				sex: '',
				avatarUrl: '',
				currentCompanyName: '',
				currentPositionName: '',
				jobStatus: '',
				baseInfoList: [], // 工作年限、学历、年龄
				adv: '', // 个人优势
				intentions: [], // 求职期望
				workExpList: [], // 工作经历
				eduList: [], // 教育经历
				certificates: [], // 资质证书
				toggle: false,
				browseTag: '',
			};
		},
		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() {
			if (this.resumesId) {
				const resumeDetailData = this.$queue.getData('resumeDetailData')
				if (resumeDetailData) {
					this.setDetail(resumeDetailData)
					return
				}
				this.getOhterResume()
			} else {
				this.getData()
			}
		},
		methods: {
			// 获取数据
			getData() {
				this.$Request
					.getT('/app/userFirst/getUserResumes')
					.then((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 && data.userEntity.age) {
								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
							})
							
							// 教育经历
							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
							
							if (data?.resumeList?.resumesId) {
								// 将简历id回传给父页面
								uni.$emit('getResumeIdByComponent', data.resumeList.resumesId)
							}
						}
					})
			},
			// 格式化薪资
			formatSalary(min, max) {
				if (min && max) {
					return `${min / 1000}-${max / 1000}K`
				}
				return '--'
			},
			// 格式化标签
			formatTag(text) {
				return text.replace(/\//g, '|')
			},
			// 展示所有工作经历
			handleShowAll() {
				this.toggle = true
			},
			// 获取别人简历
			getOhterResume() {
				uni.showLoading({ title: '加载中' })
				this.$Request.get('/app/resumes/selectResumesByResumesId', {
					resumesId: this.resumesId,
					postPushId: this.postPushId,
					userId: uni.getStorageSync('userId') || 0,
					companyId: uni.getStorageSync('companyId'),
				}).then(res => {
					if (res.code == 0) {
						this.setDetail(res.data)
					} else {
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '用户简历不存在',
							showCancel: false,
							complete(ret) {
								uni.navigateBack()
							}
						})
					}
				}).finally(() => {
					uni.hideLoading()
				})
			},
			
			// 设置请求的数据
			setDetail(data) {
				this.userName = data.resumesListDtoList?.userName
				this.sex = data.resumesListDtoList?.userSex
				this.avatarUrl = data.resumesListDtoList?.userAvatar
				this.jobStatus = data.resumesStatus
				if (data.workExpList?.length) {
					this.currentCompanyName = data.workExpList[0]?.companyName
				}
				this.currentPositionName = data.industryName
				// 添加工作年限
				if (data.resumesWorkExperience) {
					this.baseInfoList.push(data.resumesWorkExperience)
				}
				// 添加学历
				if (data.eduList) {
					this.baseInfoList.push(this.$queue.getHighestEducation(data.eduList))
				}
				// 添加年龄
				if (data.resumesListDtoList) {
					this.baseInfoList.push(`${data.resumesListDtoList.userAge}岁`)
				}
				this.adv = data.resumesListDtoList?.adv
				
				// 求职期望
				this.intentions = data.intentionList.map(item => {
					item.industry = data.resumesListDtoList.intentIndustry
					return item
				})
				
				// 工作经历
				this.workExpList = data?.workExpList.map(work => {
					// 判断是否是跨境公司
					let isCrossCompany = false
					if (work.type && JSON.parse(work.type)?.[0] == 0) {
						isCrossCompany = true
					}
					work.isCrossCompany = isCrossCompany
					
					work.workExpDetailList = work.workExpDetailList.map(item => {
						item.startTime = item.startTime?.slice(0, 10)
						item.endTime = item.endTime?.slice(0, 10)
						item.skills = JSON.parse(item.skills)
						return item
					})
					return work
				})
				
				// 教育经历
				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
				
				// 观看记录
				this.browseTag = data.resumesListDtoList?.browseTag
			}
		}
	}
</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;
				text {
					flex: 1;
				}
				.badge {
					height: 18px;
					border-radius: 4px;
					background: rgba(213, 255, 231, 1);
					padding: 8rpx;
					color: rgba(29, 209, 104, 1);
					font-size: 8px;
					font-weight: 400;
					line-height: 10px;
					margin-left: 20rpx;
				}
			}
			.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;
				word-wrap: break-word;
			}
			.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);
				word-break: break-all;
			}
		}
	}
</style>