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">
								互联网
							</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.jobInfoList.length != 0">
						<view v-for="job in companyInfo.jobInfoList" :key="job.id">
							<!-- @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)" -->
							<!--  :style="getItemBackgroundStyle('bj2.png')" -->
							<view class="cards">
								<view class="card-company">
									<text class="company">{{ job.jobTitle }}</text>
									<view class="salary"> ￥{{ job.salaryRange }}/月 </view>
								</view>
								<view class="card-tags">
									<view class="tag jy">
										<image :src="`${baseUrl}/jobfair/jy.png`" mode=""></image>
										{{ job.experienceRequirement }}
									</view>
									<view class="tag xl">
										<image :src="`${baseUrl}/jobfair/xx.png`" mode=""></image>
										{{ job.educationRequirement }}
									</view>
									<view class="tag yd" v-if="job.jobRequirement">
										<image :src="`${baseUrl}/jobfair/lx-1.png`" mode=""></image>
										{{ job.jobRequirement }}
									</view>
								</view>
								<view class="card-companyName">
									{{ job.jobDescription }}
								</view>
								<view class="deliver-box">
									<view class="deliver-btn" @click="deliverResume(job)">
										简历投递
									</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({
		jobInfoList: [],
	});
	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,
					jobInfoList: [] // 新数据格式中没有岗位列表，初始化为空数组
				};
				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,
					jobInfoList: []
				};
			}
		}).catch((error) => {
			console.error('API error when fetching company details:', error);
			// 错误情况下也设置默认值
			companyInfo.value = {
				name: '请求失败',
				scale: '-',
				description: '网络请求失败，请检查网络连接',
				isCollection: 0,
				jobInfoList: []
			};
		});
	}

	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 = { jobInfoList: [] };
	    // 加载字典数据
	    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 = { jobInfoList: [] };
	        }
	    // 处理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 = { jobInfoList: [] };
	    }
	});
	
	// 根据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 '-';
		}
	}
</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: #f2f8fc;

				.card-company {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					border-bottom: 1rpx solid #c2d7ea;

					.company {
						font-weight: 600;
						font-size: 32rpx;
						color: #207AC7;
					}

					.salary {
						font-weight: 600;
						font-size: 28rpx;
						color: #F83A3C;
						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 35rpx;

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

					.jy {
						background: #D9EDFF;
						color: #0086FF;
					}

					.xl {
						background: #FFF1D5;
						color: #FF7F01;
					}

					.yd {
						background: #FFD8D8;
						color: #F83A3C;
					}

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