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?.companyName }}</view>
					<view class="row2">
						{{ companyInfo?.scale }}
					</view>
				</view>
			</view>
			<view class="conetent-info" :class="{ expanded: isExpanded }">
				<view class="info-title">公司介绍</view>
				<view class="info-desirption">{{
          companyInfo.companyIntroduction
        }}</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">
										简历投递
									</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 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((options) => {
		companyInfo.value = JSON.parse(options.job);
	});

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

	function deliverResume() {
		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", {}, "GET", 9100, {
						"Content-Type": "application/json"
					}).then((data) => {
						if (data && data.code === 200) {
							$api.msg("简历投递成功");
						} else {
							$api.msg((data && data.msg) || "简历投递失败");
						}
					});
				});
			} else {
				$api.msg('请先登录')
			}
		});

	}
</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>