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

<template>
	<view class="resume-card">
		<view class="top-section flex justify-between">
			<view class="flex user-info">
				<view class="avatar-container">
					<image :src="avatar ? avatar : '/static/images/logo.jpg'" class="avatar"></image>
					<image src="@/static/images/svg/male.svg" class="sex-icon" v-if="sex == 1"></image>
					<image src="@/static/images/svg/female.svg" class="sex-icon" v-else-if="sex == 2"></image>
				</view>
				<view class="user-info-box">
					<view class="flex">
						<text class="name">{{ userName }}</text>
						<view class="online-status" :class="{ online: lineValue == onlineStr, offline: lineValue == offlineStr }">{{ lineText }}</view>
					</view>
					<view class="base-info flex align-center">
						<text v-for="(item, index) in baseInfoArr" :key="index">{{ item }}</text>
					</view>
				</view>
			</view>
			<view class="salary">{{ salaryRange }}</view>
		</view>
		<view class="flex align-center justify-between company-info">
			<view class="flex align-center">
				<image src="@/static/images/svg/bag.svg" class="icon"></image>
				<text class="text">{{ companyName }} · {{ positionName }}</text>
				<view class="company-tag" v-if="isCrossCompany">跨境</view>
			</view>
			<view class="time">{{ companyTime }}</view>
		</view>
		<view class="tags">
			<view class="tag" v-for="(item, index) in skills" :key="index">{{ item }}</view>
		</view>
		<view class="bottom-section flex align-center">
			<image src="@/static/images/svg/heart.svg" class="expection-icon"></image>
			求职期望：{{ ruleClassifyName }}
		</view>
	</view>
</template>

<script>
	import { formatNumberToK } from '@/utils/util.js'
	
	export default {
		data() {
			return {
				avatar: '',
				sex: 0, // 1男、2女
				userName: '',
				baseInfoArr: [], // 基本信息
				companyName: '', // 公司
				positionName: '', // 职位
				salaryRange: '', // 薪资范围
				lineValue: '', // 在线状态
				isCrossCompany: false, // 是否是跨境
				companyTime: '', // 当前公司工作时间
				ruleClassifyName: '', // 期望岗位
				skills: [], // 技能标签
				onlineStr: 'ONLINE',
				offlineStr: 'OFFLINE'
			};
		},
		computed: {
			lineText() {
				if (this.lineValue === this.onlineStr) {
					return '在线'
				} else if (this.lineValue === this.offlineStr) {
					return '离线'
				}
				return ''
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$Request
					.getT('/app/resumes/getResumesReviewData')
					.then(res => {
						if (res.code === 0) {
							const data = res.data
							this.avatar = data.userAvatar
							this.sex = data.userSex
							this.userName = data.userName
							this.lineValue = data.onlineStatus
							
							// 设置薪资
							this.salaryRange = this.setSalaryRange(data.salaryRange)
							
							// 设置年龄、工龄、学历
							if (data.userAge) {
								this.baseInfoArr.push(`${data.userAge}岁`)
							}
							if (data.resumesWorkExperience) {
								this.baseInfoArr.push(data.resumesWorkExperience)
							}
							if (data.degree) {
								this.baseInfoArr.push(data.degree)
							}
							
							this.companyName = data.companyName
							this.positionName = data.position
							this.ruleClassifyName = data.ruleClassifyName
							// this.skills
						}
						console.log(res)
					})
			},
			setSalaryRange(value) {
				if (value && value.indexOf('-')) {
					const salaryValue = value.split('-')
					return `${formatNumberToK(salaryValue[0])}-${formatNumberToK(salaryValue[1])}`
				}
				return ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	.resume-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx 36rpx;

		.top-section {
			margin-bottom: 12rpx;
			.avatar-container {
				position: relative;
				margin-right: 20rpx;
				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 72rpx;
					border: 1px solid rgba(240, 240, 240, 1);
				}
				.sex-icon {
					position: absolute;
					top: 0;
					right: 0;
					width: 22rpx;
					height: 22rpx;
					background: #fff;
					border-radius: 22rpx;
				}
			}
			.user-info-box {
				.name {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 36rpx;
					color: rgba(51, 51, 51, 1);
					margin-right: 20rpx;
				}
				.online-status {
					font-size: 16rpx;
					line-height: 20rpx;
					padding: 8rpx 20rpx;
					border-radius: 8rpx;
				}
				.online {
					color: rgba(29, 209, 104, 1);
					background: rgba(213, 255, 231, 1);
				}
				.offline {
					color: #999;
					background: #ddd;
				}
				// .other {
				// 	color: #8858C5;
				// 	background: #ECE1FD;
				// }
				.base-info {
					margin-top: 6rpx;
					text {
						font-size: 24rpx;
						line-height: 32rpx;
						color: rgba(1, 107, 246, 1);
						margin-right: 12rpx;
					}
				}
			}
			.salary {
				font-size: 24rpx;
				font-weight: 700;
				line-height: 40rpx;
				background-image: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
				-webkit-background-clip: text;
				color: transparent;
				background-clip: text;
			}
		}

		.company-info {
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			.text {
				max-width: 420rpx;
				color: rgba(156, 164, 171, 1);
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.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-left: 20rpx;
				box-sizing: border-box;
			}
			.time {
				font-size: 20rpx;
				line-height: 40rpx;
				color: rgba(144.88, 87.8, 191.25, 1);
			}
		}
		// tag样式
		.tags {
			display: flex;
			flex-wrap: wrap;
			.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);
				margin-top: 8rpx;
				margin-right: 8rpx;
			}
		}
		.bottom-section {
			color: rgba(156, 164, 171, 1);
			font-size: 24rpx;
			line-height: 40rpx;
			margin-top: 12rpx;
			.expection-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>