681 lines
15 KiB
Vue
681 lines
15 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>
|
||
<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 line_2">{{ fairInfo?.jobFairTitle }}</view>
|
||
<view class="row2">
|
||
<text>{{ fairInfo?.jobFairAddress }}</text>
|
||
<convert-distance :alat="fairInfo?.latitude" :along="fairInfo?.longitude" :blat="latitudeVal"
|
||
:blong="longitudeVal"></convert-distance>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="locations">
|
||
<image class="location-img" src="/static/icon/mapLine.png"></image>
|
||
<view class="location-info">
|
||
<view class="info">
|
||
<text class="info-title">{{ fairInfo?.jobFairAddress }}</text>
|
||
<text class="info-text">位置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="conetent-info" :class="{ expanded: isExpanded }">
|
||
<view class="info-title">内容描述</view>
|
||
<view class="info-desirption">{{ fairInfo?.jobFairIntroduction }}</view>
|
||
<!-- <view class="info-title title2">公司地址</view>
|
||
<view class="locationCompany"></view> -->
|
||
<view class="company-times">
|
||
<view class="info-title">内容描述</view>
|
||
<view class="card-times">
|
||
<view class="time-left">
|
||
<view class="left-date">{{ parseDateTime(fairInfo.jobFairStartTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(fairInfo.jobFairStartTime).date }}</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-center">
|
||
<view class="center-date">
|
||
{{ getTimeStatus(fairInfo.jobFairStartTime, fairInfo.jobFairEndTime).statusText }}
|
||
</view>
|
||
<view class="center-dateDay">
|
||
{{ getHoursBetween(fairInfo.jobFairStartTime, fairInfo.jobFairEndTime) }}小时
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-right">
|
||
<view class="left-date">{{ parseDateTime(fairInfo.jobFairEndTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(fairInfo.jobFairEndTime).date }}</view>
|
||
</view>
|
||
</view>
|
||
</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">参会单位（{{ companyList.length }}）</text>
|
||
</view>
|
||
<view v-for="job in companyList" :key="job.id">
|
||
<view class="cards" :style="getItemBackgroundStyle('bj.png')"
|
||
@click="navTo('/packageA/pages/UnitDetails/UnitDetails?job='+JSON.stringify(job))">
|
||
<view class="card-company">
|
||
<view class="company line_1">
|
||
<image :src="`${baseUrl}/jobfair/mc.png`" mode=""></image>
|
||
{{ job.companyName }}
|
||
</view>
|
||
<view class="ris">
|
||
<text class="fs_14">
|
||
在招职位：
|
||
{{ job.jobInfoList.length || '-' }}
|
||
个
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<view class="fl_box fs_14">
|
||
{{ job.scale }}
|
||
</view>
|
||
</view>
|
||
<view class="card-tags">
|
||
<view class="tag" v-if="job.industry">
|
||
<image :src="`${baseUrl}/jobfair/hy.png`" mode=""></image>
|
||
{{ job.industry }}
|
||
</view>
|
||
<view class="tag">
|
||
<image :src="`${baseUrl}/jobfair/lx.png`" mode=""></image>
|
||
{{ job.companyType }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<template #footer>
|
||
<view class="footer" v-if="hasnext">
|
||
<view class="btn-wq button-click" :class="{ 'btn-desbel': fairInfo.isCollection }"
|
||
@click="applyExhibitors">
|
||
{{ fairInfo.isCollection ? '已预约招聘会' : '预约招聘会' }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import config from "@/config.js"
|
||
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 useLocationStore from '@/stores/useLocationStore';
|
||
const {
|
||
$api,
|
||
navTo,
|
||
vacanciesTo,
|
||
navBack
|
||
} = inject('globalFunction');
|
||
import {
|
||
storeToRefs
|
||
} from 'pinia';
|
||
const {
|
||
longitudeVal,
|
||
latitudeVal
|
||
} = storeToRefs(useLocationStore());
|
||
|
||
const isExpanded = ref(false);
|
||
const fairInfo = ref({});
|
||
const companyList = ref([]);
|
||
const hasnext = ref(true);
|
||
|
||
const baseUrl = config.imgBaseUrl
|
||
const getItemBackgroundStyle = (imageName) => ({
|
||
backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
|
||
backgroundSize: '100% 100%', // 覆盖整个容器
|
||
backgroundPosition: 'center', // 居中
|
||
backgroundRepeat: 'no-repeat'
|
||
});
|
||
onLoad((options) => {
|
||
getCompanyInfo(options.jobFairId);
|
||
});
|
||
|
||
function getCompanyInfo(id) {
|
||
// $api.createRequest(`/app/fair/${id}`).then((resData) => {
|
||
// fairInfo.value = resData.data;
|
||
// companyList.value = resData.data.companyList;
|
||
// hasAppointment();
|
||
// });
|
||
$api.myRequest('/jobfair/public/jobfair/detail', {
|
||
jobFairId: id
|
||
}).then((resData) => {
|
||
console.log(resData, 'resData');
|
||
fairInfo.value = resData.data;
|
||
console.log(fairInfo.value, 'fairInfo.value');
|
||
// hasAppointment()
|
||
});
|
||
$api.myRequest('/jobfair/public/jobfair/enterprises-with-jobs-by-job-fair-id', {
|
||
jobFairId: id
|
||
}).then((resData) => {
|
||
companyList.value = resData.data;
|
||
// hasAppointment()
|
||
});
|
||
};
|
||
|
||
const hasAppointment = () => {
|
||
const isTimePassed = (timeStr) => {
|
||
const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
|
||
const now = Date.now();
|
||
return now < targetTime;
|
||
};
|
||
|
||
hasnext.value = isTimePassed(fairInfo.value.startTime);
|
||
};
|
||
|
||
function openMap(lat, lng, name = '位置') {
|
||
const isConfirmed = window.confirm('是否打开地图查看位置？');
|
||
if (!isConfirmed) return;
|
||
|
||
// 使用高德地图或百度地图的 H5 链接打开
|
||
const url = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(name)}`;
|
||
window.location.href = url;
|
||
}
|
||
|
||
function expand() {
|
||
isExpanded.value = !isExpanded.value;
|
||
}
|
||
|
||
// 取消/收藏岗位
|
||
function applyExhibitors() {
|
||
const fairId = fairInfo.value.jobFairId;
|
||
if (fairInfo.value.isCollection) {
|
||
// $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
|
||
// getCompanyInfo(fairId);
|
||
// $api.msg('取消预约成功');
|
||
// });
|
||
$api.msg('已预约成功');
|
||
} else {
|
||
$api.createRequest(`/app/fair/collection/${fairId}`, {}, 'POST').then((resData) => {
|
||
getCompanyInfo(fairId);
|
||
$api.msg('预约成功');
|
||
});
|
||
}
|
||
}
|
||
|
||
function parseDateTime(datetimeStr) {
|
||
if (!datetimeStr) return {
|
||
time: '',
|
||
date: ''
|
||
};
|
||
|
||
const dateObj = new Date(datetimeStr);
|
||
|
||
if (isNaN(dateObj.getTime())) return {
|
||
time: '',
|
||
date: ''
|
||
}; // 无效时间
|
||
|
||
const year = dateObj.getFullYear();
|
||
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
|
||
const day = String(dateObj.getDate()).padStart(2, '0');
|
||
const hours = String(dateObj.getHours()).padStart(2, '0');
|
||
const minutes = String(dateObj.getMinutes()).padStart(2, '0');
|
||
|
||
return {
|
||
time: `${hours}:${minutes}`,
|
||
date: `${year}年${month}月${day}日`,
|
||
};
|
||
}
|
||
|
||
function getTimeStatus(startTimeStr, endTimeStr) {
|
||
const now = new Date();
|
||
const startTime = new Date(startTimeStr);
|
||
const endTime = new Date(endTimeStr);
|
||
|
||
// 判断状态：0 开始中，1 过期，2 待开始
|
||
let status = 0;
|
||
let statusText = '开始中';
|
||
let color = '#13C57C'; // 进行中 - 绿色
|
||
if (now < startTime) {
|
||
status = 2; // 待开始
|
||
statusText = '待开始';
|
||
color = '#015EEA'; // 未开始 - 蓝色
|
||
} else if (now > endTime) {
|
||
status = 1; // 已过期
|
||
statusText = '已过期';
|
||
color = '#999999'; // 已过期 - 灰色
|
||
} else {
|
||
status = 0; // 进行中
|
||
statusText = '进行中';
|
||
color = '#13C57C'; // 进行中 - 绿色
|
||
}
|
||
return {
|
||
status, // 0: 进行中，1: 已过期，2: 待开始
|
||
statusText,
|
||
color
|
||
};
|
||
}
|
||
|
||
function getHoursBetween(startTimeStr, endTimeStr) {
|
||
const start = new Date(startTimeStr);
|
||
const end = new Date(endTimeStr);
|
||
|
||
const diffMs = end - start;
|
||
const diffHours = diffMs / (1000 * 60 * 60);
|
||
|
||
return +diffHours.toFixed(2); // 保留 2 位小数
|
||
}
|
||
</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 {
|
||
flex: 1;
|
||
|
||
.row1 {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
.row2 {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6C7282;
|
||
line-height: 45rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.locations {
|
||
padding: 0 28rpx;
|
||
height: 86rpx;
|
||
|
||
position: relative;
|
||
margin-bottom: 36rpx;
|
||
|
||
.location-img {
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
border: 2rpx solid #EFEFEF;
|
||
}
|
||
|
||
.location-info {
|
||
position: absolute;
|
||
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.info {
|
||
padding: 0 60rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
white-space: nowrap;
|
||
|
||
.info-title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.info-text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9B9B9B;
|
||
position: relative;
|
||
padding-right: 20rpx
|
||
}
|
||
|
||
.info-text::before {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
content: '';
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
border-radius: 2rpx;
|
||
background: #9B9B9B;
|
||
transform: translate(0, -75%) rotate(-45deg)
|
||
}
|
||
|
||
.info-text::after {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
content: '';
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
border-radius: 2rpx;
|
||
background: #9B9B9B;
|
||
transform: translate(0, -25%) rotate(45deg)
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: justify;
|
||
}
|
||
|
||
.title2 {
|
||
margin-top: 48rpx
|
||
}
|
||
}
|
||
|
||
.company-times {
|
||
padding-top: 40rpx;
|
||
|
||
.info-title {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.expanded {
|
||
max-height: 1000rpx; // 足够显示完整内容
|
||
}
|
||
|
||
.expand {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
white-space: nowrap;
|
||
justify-content: center;
|
||
margin-bottom: 46rpx;
|
||
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;
|
||
|
||
.card-company {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.company {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.salary {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.ris {
|
||
background: #53ACFF;
|
||
color: #fff;
|
||
padding: 7rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.card-companyName {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6C7282;
|
||
}
|
||
|
||
.card-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.tag {
|
||
width: fit-content;
|
||
height: 30rpx;
|
||
background: #E0F0FF;
|
||
border-radius: 4rpx;
|
||
padding: 6rpx 26rpx;
|
||
line-height: 30rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #595959;
|
||
text-align: center;
|
||
margin-top: 14rpx;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20rpx;
|
||
image{
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-bottom {
|
||
margin-top: 15rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #6C7282;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-times {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx 10rpx 30rpx;
|
||
|
||
.time-left,
|
||
.time-right {
|
||
text-align: center;
|
||
|
||
.left-date {
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.left-dateDay {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 40rpx;
|
||
height: 0rpx;
|
||
border: 2rpx solid #D4D4D4;
|
||
margin-top: 64rpx;
|
||
}
|
||
|
||
.time-center {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.center-date {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FF881A;
|
||
}
|
||
|
||
.center-dateDay {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 6rpx;
|
||
line-height: 48rpx;
|
||
width: 104rpx;
|
||
height: 48rpx;
|
||
background: #F9F9F9;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
|
||
padding: 40rpx 28rpx 20rpx 28rpx;
|
||
|
||
.btn-wq {
|
||
height: 90rpx;
|
||
background: #256BFA;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 90rpx
|
||
}
|
||
|
||
.btn-desbel {
|
||
background: #6697FB;
|
||
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11, 44, 112, 0.12);
|
||
}
|
||
}
|
||
</style>
|