573 lines
16 KiB
Vue
573 lines
16 KiB
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" v-if="companyInfo?.industry || companyInfo?.scale">
|
||
<dict-tree-Label
|
||
v-if="companyInfo?.industry"
|
||
dictType="industry"
|
||
:value="companyInfo?.industry"
|
||
></dict-tree-Label>
|
||
<span v-if="companyInfo?.industry && companyInfo?.scale"> · </span>
|
||
<dict-Label
|
||
v-if="companyInfo?.scale"
|
||
dictType="scale"
|
||
:value="companyInfo?.scale"
|
||
></dict-Label>
|
||
</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.jobId" class="job-card-wrapper">
|
||
<view class="cards" @click="navTo(`/packageA/pages/post/post?jobId=${job.jobId}`)">
|
||
<view class="card-header">
|
||
<view class="card-title-row">
|
||
<text class="job-title">{{ job.jobTitle }}</text>
|
||
<view class="card-pay">
|
||
<view class="pay-text">
|
||
<text class="salary-amount">￥{{ formatSalary(job.minSalary, job.maxSalary) }}</text>
|
||
<text class="salary-unit">/月</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-tags" v-if="job.experience || job.education">
|
||
<view class="tag tag-experience" v-if="job.experience">
|
||
<image class="tag-icon" :src="`${baseUrl}/jobfair/jy.png`" mode="aspectFit"></image>
|
||
<view class="tag-text">
|
||
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
|
||
</view>
|
||
</view>
|
||
<view class="tag tag-education" v-if="job.education">
|
||
<image class="tag-icon" :src="`${baseUrl}/jobfair/xx.png`" mode="aspectFit"></image>
|
||
<view class="tag-text">
|
||
<dict-Label dictType="education" :value="job.education"></dict-Label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-location" v-if="job.jobLocation">
|
||
<image class="location-icon" src="/static/icon/point3.png" mode="aspectFit"></image>
|
||
<text class="location-text">{{ job.jobLocation }}</text>
|
||
</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, parseQueryParams } = inject("globalFunction");
|
||
const isExpanded = ref(false);
|
||
const pageState = reactive({
|
||
page: 0,
|
||
list: [],
|
||
total: 0,
|
||
maxPage: 1,
|
||
pageSize: 10,
|
||
});
|
||
const companyInfo = ref({
|
||
jobInfoList: [],
|
||
companyName: '',
|
||
scale: '',
|
||
industry: '',
|
||
description: '',
|
||
isCollection: false
|
||
});
|
||
|
||
const baseUrl = config.imgBaseUrl;
|
||
const companyIdRef = ref(null);
|
||
|
||
const getItemBackgroundStyle = (imageName) => ({
|
||
backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
|
||
backgroundSize: "100% 100%", // 覆盖整个容器
|
||
backgroundPosition: "center", // 居中
|
||
backgroundRepeat: "no-repeat",
|
||
});
|
||
|
||
// 获取公司详情
|
||
function getCompanyDetail(companyId) {
|
||
if (!companyId) {
|
||
console.error('companyId 不能为空');
|
||
return;
|
||
}
|
||
|
||
// 尝试获取公司详情，如果接口不存在，可能公司详情会包含在职位数据中
|
||
$api.createRequest(`/app/company/${companyId}`).then((resData) => {
|
||
if (resData && resData.data) {
|
||
const data = resData.data;
|
||
companyInfo.value = {
|
||
...companyInfo.value,
|
||
...data,
|
||
companyName: data.name || data.companyName || data.company?.name || '',
|
||
scale: data.scale || data.company?.scale || '',
|
||
industry: data.industry || data.company?.industry || '',
|
||
description: data.description || data.companyIntroduction || data.introduction || data.company?.introduction || '',
|
||
isCollection: data.isCollection || false,
|
||
// 如果接口直接返回了职位列表，也设置进去
|
||
jobInfoList: data.jobInfoList || data.jobs || data.list || companyInfo.value.jobInfoList || []
|
||
};
|
||
console.log('companyInfo',companyInfo.value);
|
||
}
|
||
// 获取在招职位列表
|
||
getCompanyJobs(companyId);
|
||
}).catch((error) => {
|
||
console.error('获取公司详情失败:', error);
|
||
// 如果获取公司详情失败，尝试通过职位列表接口获取公司信息
|
||
// 或者直接获取职位列表
|
||
getCompanyJobs(companyId);
|
||
});
|
||
}
|
||
|
||
// 获取公司在招职位列表
|
||
function getCompanyJobs(companyId) {
|
||
if (!companyId) {
|
||
return;
|
||
}
|
||
|
||
// 使用正确的 API 路径：/app/company/job/{companyId}
|
||
$api.createRequest(`/app/company/job/${companyId}`, {}, 'GET').then((resData) => {
|
||
console.log('获取职位列表返回数据:', resData);
|
||
if (resData) {
|
||
// 优先检查 rows 字段（根据实际返回的数据结构）
|
||
if (resData.rows && Array.isArray(resData.rows)) {
|
||
companyInfo.value.jobInfoList = resData.rows;
|
||
}
|
||
// 如果返回的是数组
|
||
else if (Array.isArray(resData)) {
|
||
companyInfo.value.jobInfoList = resData;
|
||
}
|
||
// 如果返回的是对象，包含列表字段
|
||
else if (resData.data) {
|
||
if (Array.isArray(resData.data)) {
|
||
companyInfo.value.jobInfoList = resData.data;
|
||
} else if (resData.data.rows && Array.isArray(resData.data.rows)) {
|
||
companyInfo.value.jobInfoList = resData.data.rows;
|
||
} else if (resData.data.list && Array.isArray(resData.data.list)) {
|
||
companyInfo.value.jobInfoList = resData.data.list;
|
||
} else if (resData.data.jobInfoList && Array.isArray(resData.data.jobInfoList)) {
|
||
companyInfo.value.jobInfoList = resData.data.jobInfoList;
|
||
} else {
|
||
companyInfo.value.jobInfoList = [];
|
||
}
|
||
} else {
|
||
companyInfo.value.jobInfoList = [];
|
||
}
|
||
} else {
|
||
companyInfo.value.jobInfoList = [];
|
||
}
|
||
}).catch((error) => {
|
||
console.error('获取在招职位列表失败:', error);
|
||
companyInfo.value.jobInfoList = [];
|
||
});
|
||
}
|
||
|
||
onLoad((options) => {
|
||
console.log('options',options);
|
||
let companyId = null;
|
||
|
||
// 优先从 options 中获取 companyId（小程序和 H5 都支持）
|
||
if (options && options.companyId) {
|
||
companyId = decodeURIComponent(options.companyId);
|
||
}
|
||
// 如果 options 中没有，尝试从 URL 解析（仅 H5 环境）
|
||
else {
|
||
// 使用 try-catch 包裹，避免在小程序环境中访问 window.location 报错
|
||
try {
|
||
// #ifdef H5
|
||
const params = parseQueryParams();
|
||
companyId = params.companyId;
|
||
// #endif
|
||
} catch (e) {
|
||
console.warn('解析 URL 参数失败:', e);
|
||
}
|
||
}
|
||
|
||
console.log('companyId', companyId);
|
||
|
||
if (companyId) {
|
||
companyIdRef.value = companyId;
|
||
getCompanyDetail(companyId);
|
||
} else {
|
||
console.error('未获取到 companyId 参数');
|
||
// 如果参数名是 job，尝试兼容旧的方式
|
||
if (options && options.job) {
|
||
try {
|
||
const parsedData = JSON.parse(options.job);
|
||
if (parsedData.companyId) {
|
||
companyIdRef.value = parsedData.companyId;
|
||
getCompanyDetail(parsedData.companyId);
|
||
} else {
|
||
companyInfo.value = { ...companyInfo.value, ...parsedData };
|
||
}
|
||
} catch (e) {
|
||
console.error('解析 job 参数失败:', e);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
onShow(() => {
|
||
// 仅在 H5 环境中从 URL 获取参数（小程序环境中 onShow 不会传递 URL 参数）
|
||
// #ifdef H5
|
||
try {
|
||
const params = parseQueryParams();
|
||
const companyId = params.companyId;
|
||
|
||
if (companyId && companyId !== companyIdRef.value) {
|
||
companyIdRef.value = companyId;
|
||
getCompanyDetail(companyId);
|
||
}
|
||
} catch (e) {
|
||
console.warn('onShow 中解析 URL 参数失败:', e);
|
||
}
|
||
// #endif
|
||
});
|
||
|
||
function expand() {
|
||
isExpanded.value = !isExpanded.value;
|
||
}
|
||
|
||
// 格式化薪资范围
|
||
function formatSalary(minSalary, maxSalary) {
|
||
if (minSalary && maxSalary) {
|
||
return `${minSalary}-${maxSalary}`;
|
||
} else if (minSalary) {
|
||
return `${minSalary}起`;
|
||
} else if (maxSalary) {
|
||
return `最高${maxSalary}`;
|
||
}
|
||
return '面议';
|
||
}
|
||
|
||
// 截断文本，超过指定长度显示省略号
|
||
function truncateText(text, maxLength) {
|
||
if (!text) return '';
|
||
if (text.length <= maxLength) return text;
|
||
return text.substring(0, maxLength) + '...';
|
||
}
|
||
</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;
|
||
}
|
||
|
||
.job-card-wrapper {
|
||
margin-top: 22rpx;
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
.cards {
|
||
padding: 30rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 24rpx;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0rpx 1rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.card-header {
|
||
margin-bottom: 0;
|
||
|
||
.card-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.job-title {
|
||
flex: 1;
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
text-align: left;
|
||
word-break: break-all;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.card-pay {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pay-text {
|
||
font-family: DIN-Medium;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #4C6EFB;
|
||
line-height: 45rpx;
|
||
white-space: nowrap;
|
||
|
||
.salary-amount {
|
||
font-family: DIN-Medium;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #4C6EFB;
|
||
line-height: 45rpx;
|
||
}
|
||
|
||
.salary-unit {
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #4C6EFB;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.tag {
|
||
display: flex;
|
||
align-items: center;
|
||
width: fit-content;
|
||
height: 30rpx;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 4rpx;
|
||
background: #F4F4F4;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #6C7282;
|
||
white-space: nowrap;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
|
||
.tag-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tag-text {
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-location {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-top: 20rpx;
|
||
|
||
.location-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 4rpx;
|
||
margin-top: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.location-text {
|
||
flex: 1;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 25rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|