yizhizan-pc/src/views/enterpriseList/info.vue

<template>
	<div style="padding-bottom: 40px;">
		<!-- 顶部公司信息 -->
		<div class="topInfo flex align-center justify-center">
			<div class="topInfo-box flex align-center justify-between">
				<div class="topInfo-box-l flex align-center">
					<el-image class="topInfo-box-logo"
						:src="companyInfo.companyLogo?companyInfo.companyLogo:'/public/default.jpg'" fit="cover" />
					<div class="topInfo-box-l-info">
						<div class="topInfo-box-l-info-name">
							{{ companyInfo?.companyName || companyInfo?.companyAllName || '匿名公司' }}
						</div>
						<div class="topInfo-box-l-info-tips">
							{{companyInfo.city?companyInfo.city:''}}
							<el-divider v-if="companyInfo.city" direction="vertical" />
							{{companyInfo.companyScope}}
							<el-divider direction="vertical" />
							{{companyInfo.companyPeople}}
						</div>
						<div class="topInfo-box-l-info-tips" style="margin: 5px 0;">
							{{companyInfo.companyAddress || '暂无地址信息'}}
						</div>
						<div class="topInfo-box-l-info-tips">
							{{ companyInfo.workTime }} · {{ companyInfo.welfare }}
						</div>
					</div>
				</div>
				<div class="topInfo-box-r">
					<div class="topInfo-box-r-num">
						{{JobList.length}}
					</div>
					<div class="topInfo-box-r-tips">
						正在招聘
					</div>
				</div>
			</div>
		</div>
		<!-- 招聘岗位 -->
		<div class="jobList flex align-center justify-center">
			<div class="jobList-box">
				<div class="jobList-box-title">
					招聘职位
				</div>
				<div class="jobList-box-list flex justify-between flex-wrap">
					<template v-if="JobList.length > 0">
						<div @click="goJobInfo(item)" v-for="(item, index) in JobList" :key="index"
							class="jobList-box-list-item">
							<div class="jobList-box-list-itemt flex align-center justify-between">
								<div class="jobList-box-list-item-name">
									{{ item.stationName }}-{{ item.ruleClassifyName }}
								</div>
								<div class="jobList-box-list-item-price">
									{{ item.salaryRange }}
								</div>
							</div>
							<div class="jobList-box-list-itemt-tips flex flex-wrap">
								<div class="jobList-box-list-itemt-tipss" v-if="item.city">
									{{ item.city }}
								</div>
								<div class="jobList-box-list-itemt-tipss" v-if="item.experience">
									{{ item.experience }}
								</div>
								<div class="jobList-box-list-itemt-tipss" v-if="item.education">
									{{ item.education }}
								</div>
								<div class="jobList-box-list-itemt-tipss" v-for="(ite, ind) in item.positionWelfare"
									:key="ind">
									{{ ite }}
								</div>
							</div>
						</div>
					</template>
					<view class="no-more" v-else>暂无招聘职位</view>
					<div class="jobList-box-list-item" style="height: 0px;border: none;padding: 0 16px;"></div>
				</div>
			</div>
		</div>
		<!-- 公司介绍/推荐岗位 -->
		<div class="introduce flex align-center justify-center">
			<div class="introduce-box flex justify-between">
				<div class="introduce-box-l">
					<div class="introduce-box-l-title">
						公司介绍
					</div>
					<div class="introduce-box-l-contont">
						{{ companyInfo.companyContent || '暂无公司介绍' }}
					</div>
					<div class="introduce-box-l-title">
						HR介绍
					</div>
					<div class="introduce-box-l-contont">
						<div class="hr-list flex flex-wrap" v-if="companyInfo.hr && companyInfo.hr.length > 0">
							<div class="hr-item" v-for="(hr, index) in companyInfo.hr" :key="index">
								<div class="hr-content flex align-center">
									<div class="hr-avatar-container">
										<div class="hr-avatar" :style="{ backgroundColor: hr.color }">
											<span class="avatar-text">{{ hr.name.charAt(0) }}</span>
										</div>
										<div class="online-dot">
										</div>
									</div>
									<div class="hr-text">
										<div class="hr-name">{{ hr.name }}
										</div>
										<div class="hr-position">{{ hr.hrPosition }}</div>
									</div>
								</div>
							</div>
						</div>
						<view class="hr-desc" v-else>暂无HR信息</view>
					</div>
					<div class="introduce-box-l-title">
						人才发展
					</div>
					<div class="talent-tags flex flex-wrap" style="margin: 20px 0;">
						<div class="talent-tag" v-for="(talent, index) in companyInfo.companyPeopleDevelop"
							:key="index">
							{{ talent }}
						</div>
					</div>
					<div class="introduce-box-l-title">
						公司风采
					</div>
					<div class="introduce-box-l-contont flex flex-wrap" v-if="companyInfo.photos" style="gap: 16px;">
						<div class="photo flex flex-wrap" v-for="(talent, index) in companyInfo.photos" :key="index">
							<img mode="widthFix" :src="talent" class="photoImage"></img>
						</div>
					</div>
					<div class="introduce-box-l-title">
						工商信息
					</div>
					<div style="margin: 20px 0;">
						<div class="gsInfo-box-c-item">公司全称：{{ companyInfo.companyAllName ?
							companyInfo.companyAllName :
							'' }}</div>
						<div class="gsInfo-box-c-item">成立时间：{{ companyInfo.companyCreateTime ?
							companyInfo.companyCreateTime : '' }}
						</div>
						<div class="gsInfo-box-c-item">注册资本：{{ companyInfo.companyRegisteredFund ?
							companyInfo.companyRegisteredFund :
							'' }}万人民币</div>
						<div class="gsInfo-box-c-item">法人代表：{{ companyInfo.companyLegalPerson ?
							companyInfo.companyLegalPerson : '未知'
							}}</div>
					</div>
				</div>
				<div class="introduce-box-r">
					<recommend :city="city" @goDetails="goDetails" />
				</div>
			</div>
		</div>
		<resumeTipsComp v-if="shoModal" :show="shoModal" @close="shoModal = false" @addResume="addResume" />
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import recommend from '../../components/recommend/recommend.vue';
	import resumeTipsComp from '../../components/resumeTipsComp/resumeTipsComp.vue'
	export default {
		components: {
			recommend,
			resumeTipsComp
		},
		data() {
			return {
				companyId: '',
				companyInfo: {},
				city: '',
				JobList: [],
				isResume: false,
				shoModal: false,
			}
		},
		mounted() {
			if (localStorage.getItem('token')) {
				//简历详情
				this.getJlInfo();
			}
			this.city = localStorage.getItem('city')
			this.companyId = this.$route.query.companyId;
			if (this.companyId) {
				this.getCompanyInfo()
				this.getCompanyList()
			}
		},
		methods: {
			addResume() {
				this.shoModal = false
				this.$router.push({
					name: 'addResume'
				})
			},
			goJobInfo(item) {
				if (this.isResume) { //有简历
					this.$router.push({
						name: 'postInfo',
						query: {
							postPushId: item.postPushId
						}
					})
				} else { //无简历
					this.shoModal = true
				}
			},
			//获取简历
			getJlInfo() {
				this.$Request.get("/app/userFirst/getUserResumes").then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.isResume = true
							//缓存简历id
							localStorage.setItem('resumeId', res.data.resumeList.resumesId)
						} else {
							this.isResume = false
						}

					} else {
						this.isResume = false
					}
				})
			},
			/**
			 * @param {Object} item 详情参数
			 * 去详情
			 */
			goDetails(item) {
				if (localStorage.getItem('token')) {
					if (this.isResume) { //有简历
						this.$router.push({
							name: 'postInfo',
							query: {
								postPushId: item.postPushId
							}
						})
					} else { //无简历
						this.shoModal = true
					}
				} else {
					this.$router.push({
						name: 'login'
					})
				}

			},
			//企业信息
			getCompanyInfo() {
				let data = {
					companyId: this.companyId
				}
				this.$Request.get('/app/company/selectCompanyByCompanyId', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						let color = ['#4A90E2', '#7ED321', '#F5A623']
						if (res.data.hr) {
							res.data.hr.forEach(function (item, index) {
								if (item) {
									item.name = '匿名'
									item.color = color[index % 3]
									for (const user of res.data.userEntities) {
										if (item.userId == user.userId) {
											item.name = user.userName;
											break; // 直接跳出循环
										}
									}
								}
							})
						}
						this.companyInfo = res.data;
						this.companyInfo.photos = this.companyInfo.photos ? this.companyInfo.photos.split(',') : []
						this.companyInfo.companyPeopleDevelop = this.companyInfo.companyPeopleDevelop ? this.companyInfo.companyPeopleDevelop.split(',') : [];
						console.log(this.companyInfo)
					} else {
						ElMessage.error(res.msg)
					}
				})
			},
			//岗位列表
			getCompanyList() {
				let data = {
					companyId: this.companyId
				}
				this.$Request.get('/app/postPush/listPostPushByCompanyId', {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.JobList = res.data
						if (this.JobList.length > 0) {
							this.JobList.map((item, index) => {
								if (item.positionWelfare) {
									item.positionWelfare = item.positionWelfare.split(',')
								}
							})
						}

					} else {
						ElMessage.error(res.msg)
					}
				})
			},
		}

	}
</script>
<style lang="scss" scoped>
	$marginTop-60: 120px;
	$boxWidth: calc(100% - $marginTop-60 * 2);

	.topInfo {
		width: 100%;
		height: auto;
		margin-top: 35px;

		.topInfo-box {
			width: calc($boxWidth - 52px);
			height: 100%;
			background-color: #ffffff;
			border-radius: 20px;
			padding: 30px 26px;
		}

		.topInfo-box-logo {
			width: 100px;
			height: 100px;
			border-radius: 20px;
		}

		.topInfo-box-l-info {
			margin-left: 18px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// height: 80px
		}

		.topInfo-box-l-info-name {
			color: #1C1C1C;
			font-size: 18px;
			font-weight: bold;
		}

		.topInfo-box-l-info-tips {
			color: #999999;
			font-size: 14px;
		}

		.topInfo-box-r {
			text-align: center;
			margin-right: 80px;

			.topInfo-box-r-num {
				color: #262626;
				font-size: 34px;
				font-weight: bold;
			}

			.topInfo-box-r-tips {
				color: #999999;
				font-size: 14px;
			}
		}
	}

	.jobList {
		width: 100%;
		height: auto;
		margin-top: 20px;

		.jobList-box {
			width: calc($boxWidth - 52px);
			height: 100%;
			background-color: #ffffff;
			border-radius: 20px;
			padding: 30px 26px;
		}

		.jobList-box-title {
			color: #1C1C1C;
			font-size: 18px;
			font-weight: bold;
		}

		.jobList-box-list {
			width: 100%;
			// margin-top: 10px;
		}

		.jobList-box-list-item {
			width: calc(100% / 3 - 20px - 32px);
			border: 1px solid #CCCCCC;
			border-radius: 14px;
			padding: 16px;
			margin-top: 20px;
			cursor: pointer;

			.jobList-box-list-item-name {
				color: #1C1C1C;
				font-size: 14px;
				font-weight: 500;
			}

			.jobList-box-list-item-price {
				font-size: 18px;
				color: #FF2929;
			}

			.jobList-box-list-itemt-tipss {
				background-color: #F5F5F5;
				border-radius: 4px;
				font-size: 13px;
				margin-right: 10px;
				padding: 3px 8px;
				color: #6E6E6E;
				margin-top: 10px;
			}
		}

	}

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

		.introduce-box {
			width: $boxWidth;
			height: fit-content;
		}

		.introduce-box-l {
			width: calc(65% - 40px);
			height: fit-content;
			background-color: #ffffff;
			border-radius: 20px;
			padding: 20px;
		}

		.introduce-box-l-title {
			color: #333333;
			font-size: 18px;
			font-weight: bold;
		}

		.introduce-box-l-contont {
			color: #333333;
			font-size: 15px;
			margin: 20px 0;
			line-height: 42px;
			white-space: pre-wrap;
		}

		.introduce-box-r {
			width: calc(35% - 20px);
			height: fit-content;
			background-color: #ffffff;
			border-radius: 20px;
		}
	}
	.gsInfo-box-c-item {
		color: rgba(153, 153, 153, 1);
		font-size: 12px;
		font-weight: 400;
		margin-bottom: 5px;
	}
	.talent-tag {
		background: rgba(153, 153, 153, 0.1);
		border-radius: 6px;
		padding: 3px 6px;
		color: rgba(102, 102, 102, 1);
		font-size: 12px;
		font-weight: 400;
		box-sizing: border-box;
		margin-right: 10px;
	}
	.hr-list {
		padding: 0 0 30rpx 0;
		gap: 20px;
		.hr-item {
			//flex: 1;

			.hr-content {
				align-items: center;

				.hr-avatar-container {
					position: relative;
					margin-right: 8px;

					.hr-avatar {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						.avatar-text {
							color: #ffffff;
							font-size: 16px;
							font-weight: 600;
						}
					}

					.online-dot {
						position: absolute;
						bottom: 2px;
						right: 2px;
						width: 10px;
						height: 10px;
						background-color: #7ED321;
						border-radius: 50%;
						border: 1px solid #ffffff;
					}
				}

				.hr-text {
					.hr-name {
						color: rgba(34, 37, 42, 1);
						font-family: DM Sans;
						font-size: 14px;
						font-weight: 500;
						line-height: 20px;
						margin-bottom: 2px;
					}

					.hr-position {
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 12px;
						font-weight: 400;
						line-height: 16px;
					}
				}
			}
		}
	}
	.no-more{
		color: #333333;
		font-size: 15px;
		margin-top: 20px;
		line-height: 42px;
	}
	.photoImage{
		width: 300px;
	}
</style>