ks-app-employment-service/packageA/pages/UnitDetails/UnitDetails.vue

<template>
	<AppLayout title="" :use-scroll-view="false">
		<template #headerleft>
			<view class="btnback">
				<image src="@/static/icon/back.png" @click="navBack"></image>
			</view>
		</template>
		<template #headerright>
			<view class="btn mar_ri10">
				<image src="@/static/icon/collect3.png" v-if="!companyInfo?.isCollection"></image>
				<image src="@/static/icon/collect2.png" v-else></image>
			</view>
		</template>
		<view class="content">
			<view class="content-top">
				<view class="companyinfo-left">
					<image src="@/static/icon/companyIcon.png" mode=""></image>
				</view>
				<view class="companyinfo-right">
					<view class="row1">{{ companyInfo?.name || '未知公司' }}</view>
							<view class="row2">
								{{ getScaleLabel(companyInfo?.scale) }}
							</view>
				</view>
			</view>
			<view class="conetent-info" :class="{ expanded: isExpanded }">
				<view class="info-title">公司介绍</view>
				<view class="info-desirption">{{
          companyInfo?.description || '暂无公司介绍'
        }}</view>
				<!-- <view class="info-title title2">公司地址</view>
                <view class="locationCompany"></view> -->
			</view>
			<view class="expand" @click="expand">
				<text>{{ isExpanded ? "收起" : "展开" }}</text>
				<image class="expand-img" :class="{ 'expand-img-active': !isExpanded }" src="@/static/icon/downs.png">
				</image>
			</view>
			<scroll-view scroll-y class="Detailscroll-view">
				<view class="views">
				<view class="Detail-title"><text class="title">在招职位</text></view>
				<template v-if="companyInfo.jobList && companyInfo.jobList.length != 0">
					<view v-for="job in companyInfo.jobList" :key="job.jobId">
						<view class="cards" @click="navToJobDetail(job.jobId)">
							<view class="card-company">
								<text class="company">{{ job.jobTitle }}</text>
								<view class="salary"> ￥{{ job.minSalary }}-{{ job.maxSalary }}/月 </view>
							</view>
							<view class="card-tags">
								<view class="tag jy">
									{{ getExperienceLabel(job.experience) }}
								</view>
								<view class="tag xl">
									{{ getEducationLabel(job.education) }}
								</view>
								<view class="tag yd" v-if="job.vacancies">
									招聘{{ job.vacancies }}人
								</view>
							</view>
							<view class="card-info">
								<view class="company-address" v-if="job.jobLocation">
									<image class="point3" src="/static/icon/point3.png"></image>
									{{ job.jobLocation }}
								</view>
								<view class="push-time" v-if="job.postingDate">
									{{ formatPublishTime(job.postingDate) }}
								</view>
							</view>
						</view>
					</view>
				</template>
					<empty v-else pdTop="200"></empty>
				</view>
			</scroll-view>
		</view>
	</AppLayout>
</template>

<script setup>
	import {
		reactive,
		inject,
		watch,
		ref,
		onMounted,
		computed
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import dictLabel from "@/components/dict-Label/dict-Label.vue";
	import config from "@/config.js";
	import { storeToRefs } from "pinia";
	import useDictStore from '@/stores/useDictStore';
	const dictStore = useDictStore();
	import useLocationStore from "@/stores/useLocationStore";
	const {
		longitudeVal,
		latitudeVal
	} = storeToRefs(useLocationStore());
	const {
		$api,
		navTo,
		vacanciesTo,
		navBack
	} = inject("globalFunction");
	const isExpanded = ref(false);
	const pageState = reactive({
		page: 0,
		list: [],
		total: 0,
		maxPage: 1,
		pageSize: 10,
	});
	const companyInfo = ref({
		jobList: [],
	});
	const baseUrl = config.imgBaseUrl;
	const getItemBackgroundStyle = (imageName) => ({
		backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
		backgroundSize: "100% 100%", // 覆盖整个容器
		backgroundPosition: "center", // 居中
		backgroundRepeat: "no-repeat",
	});

	// 已移除重复的onLoad函数，保留下面的async版本
	
	// 根据公司ID获取公司详情
	function getCompanyDetailsById(companyId) {
		// 使用全局注入的$api调用接口
		$api.createRequest('/app/company/' + companyId, 'GET', 9100).then((resData) => {
			if (resData && resData.code === 200 && resData.data) {
				console.log('Company details:', resData.data);
				// 确保数据格式符合页面需求，并为关键字段提供默认值
				companyInfo.value = {
					...resData.data,
					name: resData.data.name || '未知公司',
					scale: resData.data.scale || '未知规模',
					description: resData.data.description || '暂无公司介绍',
					isCollection: resData.data.isCollection || 0,
					jobList: resData.data.jobList || [] // 使用正确的jobList字段
				};
				console.log('Company details loaded successfully');
			} else {
				console.error('Failed to load company details:', resData?.msg || 'Unknown error');
				// 设置默认值，避免页面白屏
				companyInfo.value = {
					name: '加载失败',
					scale: '-',
					description: '无法获取公司信息，请稍后重试',
					isCollection: 0,
					jobList: []
				};
			}
		}).catch((error) => {
			console.error('API error when fetching company details:', error);
			// 错误情况下也设置默认值
			companyInfo.value = {
				name: '请求失败',
				scale: '-',
				description: '网络请求失败，请检查网络连接',
				isCollection: 0,
				jobList: []
			};
		});
	}

	function expand() {
		isExpanded.value = !isExpanded.value;
	}

	function deliverResume(job) {
		const raw = uni.getStorageSync("Padmin-Token");
		const token = typeof raw === "string" ? raw.trim() : "";
		const headers = token ? {
			Authorization: raw.startsWith("Bearer ") ? raw : `Bearer ${token}`
		} : {};

		$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData1) => {
			if (resData1.code == 200) {
				$api.myRequest("/system/user/login/user/info", {}, "GET", 10100, headers).then((resData) => {
					$api.myRequest("/jobfair/public/job-fair-person-job/insert", {
						jobFairId: companyInfo.value?.jobFairId, // 招聘会id
						personId: resData.info.userId, // 当前登录用户id
						enterpriseId: companyInfo.value?.companyId, // 企业id
						jobId: job.jobId, // 岗位id
						idCard:resData.info.personCardNo
					}, "post", 9100, {
						"Content-Type": "application/json"
					}).then((data) => {
						if (data && data.code === 200) {
							$api.msg("简历投递成功");
						} else {
							$api.msg((data && data.msg) || "简历投递失败");
						}
					});
				});
			} else {
				$api.msg('请先登录')
			}
		});

	}
	
	// 获取企业规模字典数据
	onLoad(async (options) => {
	    // 初始化companyInfo
	    companyInfo.value = { jobList: [] };
	    // 加载字典数据
	    await dictStore.getDictData();
	    
	    if (options.job && typeof options.job === 'string') {
	        try {
	            companyInfo.value = JSON.parse(options.job);
	        } catch (error) {
	            console.error('Error parsing job data:', error);
	            companyInfo.value = { jobList: [] };
	        }
	    // 处理companyId参数
	    } else if (options.companyId) {
	        console.log('Getting company details by companyId:', options.companyId);
	        // 调用API获取公司详情
	        getCompanyDetailsById(options.companyId);
	    // 处理bussinessId参数（如果需要）
	    } else if (options.bussinessId) {
	        console.log('Handling bussinessId:', options.bussinessId);
	        // 这里可以根据需要处理bussinessId
	        // 目前先作为companyId处理
	        getCompanyDetailsById(options.bussinessId);
	    } else {
	        console.warn('No valid parameters provided');
	        companyInfo.value = { jobList: [] };
	    }
	});
	
	// 根据scale值获取对应的文本
	function getScaleLabel(scale) {
		// 处理空值、undefined、null等情况
		if (scale === undefined || scale === null || scale === '') return '-';
		
		try {
			// 调试日志，追踪scale值处理
			console.log('Processing scale value:', scale);
			// 确保scale是字符串类型
			const scaleStr = String(scale);
			// 使用dictStore获取企业规模标签
			const label = dictStore.dictLabel('scale', scaleStr);
			console.log('Retrieved scale label:', label, 'for scale:', scaleStr);
			// 如果字典中没有找到对应标签，使用预设的默认映射
			if (!label) {
				const defaultScaleMap = {
					'1': '少于50人',
					'2': '50-100人',
					'3': '100-500人',
					'4': '500-1000人',
					'5': '1000人以上'
				};
				const defaultLabel = defaultScaleMap[scaleStr];
				console.log('Using default label:', defaultLabel, 'for scale:', scaleStr);
				return defaultLabel || '-';
			}
			return label;
		} catch (error) {
			console.error('获取企业规模标签失败:', error);
			return '-';
		}
	}

	// 根据experience值获取对应的文本
	function getExperienceLabel(experience) {
		if (experience === undefined || experience === null || experience === '') return '经验不限';
		
		try {
			const experienceStr = String(experience);
			const label = dictStore.dictLabel('experience', experienceStr);
			if (!label) {
				const defaultExperienceMap = {
					'0': '经验不限',
					'1': '1年以内',
					'2': '1-3年',
					'3': '3-5年',
					'4': '5-10年',
					'5': '10年以上'
				};
				return defaultExperienceMap[experienceStr] || '经验不限';
			}
			return label;
		} catch (error) {
			console.error('获取经验标签失败:', error);
			return '经验不限';
		}
	}

	// 根据education值获取对应的文本
	function getEducationLabel(education) {
		if (education === undefined || education === null || education === '') return '学历不限';
		
		try {
			const educationStr = String(education);
			const label = dictStore.dictLabel('education', educationStr);
			if (!label) {
				const defaultEducationMap = {
					'-1': '学历不限',
					'1': '初中及以下',
					'2': '高中',
					'3': '中专',
					'4': '大专',
					'5': '本科',
					'6': '硕士',
					'7': '博士'
				};
				return defaultEducationMap[educationStr] || '学历不限';
			}
			return label;
		} catch (error) {
			console.error('获取学历标签失败:', error);
			return '学历不限';
		}
	}

	// 格式化发布时间为相对时间
	function formatPublishTime(publishTime) {
		if (!publishTime) return '';
		
		try {
			const date = new Date(publishTime);
			const now = new Date();
			const diffTime = Math.abs(now - date);
			const diffSeconds = Math.floor(diffTime / 1000);
			const diffMinutes = Math.floor(diffSeconds / 60);
			const diffHours = Math.floor(diffMinutes / 60);
			const diffDays = Math.floor(diffHours / 24);
			const diffWeeks = Math.floor(diffDays / 7);
			const diffMonths = Math.floor(diffDays / 30);
			const diffYears = Math.floor(diffDays / 365);
			
			if (diffSeconds < 60) {
				return '刚刚发布';
			} else if (diffMinutes < 60) {
				return `${diffMinutes}分钟前发布`;
			} else if (diffHours < 24) {
				return `${diffHours}小时前发布`;
			} else if (diffDays === 1) {
				return '昨天发布';
			} else if (diffDays < 7) {
				return `${diffDays}天前发布`;
			} else if (diffWeeks < 4) {
				return `${diffWeeks}周前发布`;
			} else if (diffMonths < 12) {
				return `${diffMonths}个月前发布`;
			} else {
				return `${diffYears}年前发布`;
			}
		} catch (error) {
			console.error('格式化发布时间失败:', error);
			return '';
		}
	}

	// 跳转到职位详情页面
	function navToJobDetail(jobId) {
		if (jobId) {
			navTo(`/packageA/pages/post/post?jobId=${encodeURIComponent(jobId)}`);
		}
	}
</script>

<style lang="stylus" scoped>
	.btnback {
		width: 64rpx;
		height: 64rpx;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 52rpx;
		height: 52rpx;
	}

	image {
		height: 100%;
		width: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;

		.content-top {
			padding: 28rpx;
			padding-top: 50rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.companyinfo-left {
				width: 96rpx;
				height: 96rpx;
				margin-right: 24rpx;
			}

			.companyinfo-right {
				.row1 {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.row2 {
					font-weight: 400;
					font-size: 28rpx;
					color: #6C7282;
					line-height: 45rpx;
				}
			}
		}

		.conetent-info {
			padding: 0 28rpx;
			overflow: hidden;
			max-height: 0rpx;
			transition: max-height 0.3s ease;

			.info-title {
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
			}

			.info-desirption {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #495265;
				text-align: justified;
			}

			.title2 {
				margin-top: 48rpx;
			}
		}

		.expanded {
			max-height: 1000rpx; // 足够显示完整内容
		}

		.expand {
			display: flex;
			flex-wrap: nowrap;
			white-space: nowrap;
			justify-content: center;
			margin-top: 20rpx;
			margin-bottom: 28rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #256BFA;

			.expand-img {
				width: 40rpx;
				height: 40rpx;
			}

			.expand-img-active {
				transform: rotate(180deg);
			}
		}
	}

	.Detailscroll-view {
		flex: 1;
		overflow: hidden;
		background: #F4F4F4;

		.views {
			padding: 28rpx;

			.Detail-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				position: relative;
				display: flex;
				justify-content: space-between;

				.title {
					position: relative;
					z-index: 2;
				}
			}

			.Detail-title::before {
				position: absolute;
				content: '';
				left: -14rpx;
				bottom: 0;
				height: 16rpx;
				width: 108rpx;
				background: linear-gradient(to right, #CBDEFF, #FFFFFF);
				border-radius: 8rpx;
				z-index: 1;
			}

			.cards {
				padding: 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 22rpx;
				padding-bottom: 18rpx;
				background: #FFFFFF;

				.card-company {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;

					.company {
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}

					.salary {
						// font-weight: 600;
						font-size: 28rpx;
						color: #1677FF;
						white-space: nowrap;
						line-height: 48rpx;
					}
				}

				.deliver-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 5rpx;

					.deliver-btn {
						padding: 10rpx 25rpx;
						background: #53ACFF;
						width: max-content;
						color: #fff;
					}
				}

				.card-companyName {
					font-weight: 400;
					font-size: 28rpx;
					margin-top: 23rpx;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.card-tags {
					display: flex;
					flex-wrap: wrap;
					margin: 25rpx 0 20rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					.jy {
						background: #F5F5F5;
						color: #333333;
					}

					.xl {
						background: #F5F5F5;
						color: #333333;
					}

					.yd {
						background: #F5F5F5;
						color: #333333;
					}

					.tag {
						width: fit-content;
						height: 30rpx;
						border-radius: 4rpx;
						padding: 6rpx 20rpx;
						line-height: 30rpx;
						font-weight: 400;
						font-size: 24rpx;
						text-align: center;
						white-space: nowrap;
						margin-right: 20rpx;
						display: flex;
						align-items: center;
					}
				}

				.card-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					flex-wrap: wrap;
					
					.point3 {
						width: 12rpx;
						height: 12rpx;
					}
					
					.company-address {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #6C7282;
						line-height: 34rpx;
						flex: 1;
						min-width: 0;
						margin-right: 20rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
							flex-shrink: 0;
						}
						
						text {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					.push-time {
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #6C7282;
						line-height: 34rpx;
						flex-shrink: 0;
						white-space: nowrap;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
							flex-shrink: 0;
						}
					}
				}

				.card-bottom {
					margin-top: 32rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #6C7282;
				}
			}
		}
	}
</style>