269 lines
7.8 KiB
Vue
269 lines
7.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="job-header">
|
|
<view class="job-title">{{ jobInfo.jobTitle }}</view>
|
|
<view class="job-info">
|
|
<text class="salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</text>
|
|
<text class="views">{{ jobInfo.view }}浏览</text>
|
|
</view>
|
|
<view class="location-info">
|
|
<view class="location" style="display: inline-block">
|
|
📍 青岛
|
|
<dict-Label dictType="area" :value="jobInfo.jobLocationAreaCode"></dict-Label>
|
|
</view>
|
|
<text class="date">{{ jobInfo.postingDate || '发布日期' }}</text>
|
|
<view class="source">来源 智联招聘</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="job-details">
|
|
<text class="details-title">职位详情</text>
|
|
<view class="tags">
|
|
<view class="tag"><dict-Label dictType="education" :value="jobInfo.education"></dict-Label></view>
|
|
<view class="tag"><dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label></view>
|
|
</view>
|
|
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
|
|
{{ jobInfo.description }}
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
class="company-info"
|
|
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
|
|
>
|
|
<view class="company-name">{{ jobInfo.company?.name }}</view>
|
|
<view class="company-details">
|
|
<dict-tree-Label
|
|
v-if="jobInfo.company?.industry"
|
|
dictType="industry"
|
|
:value="jobInfo.company?.industry"
|
|
></dict-tree-Label>
|
|
<span v-if="jobInfo.company?.industry"> </span>
|
|
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
|
|
单位详情
|
|
</view>
|
|
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
|
|
<map
|
|
style="width: 100%; height: 100%"
|
|
:latitude="jobInfo.latitude"
|
|
:longitude="jobInfo.longitude"
|
|
:markers="mapCovers"
|
|
></map>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="footer">
|
|
<!-- <button class="apply-btn" v-if="!jobInfo.isApply" @click="jobApply">立即申请</button> -->
|
|
<button class="apply-btn" @click="jobApply">立即申请</button>
|
|
<!-- <button class="apply-btn btned" v-else>已申请</button> -->
|
|
<view class="falls-card-matchingrate" @click="jobCollection">
|
|
<uni-icons v-if="!jobInfo.isCollection" type="star" size="40"></uni-icons>
|
|
<uni-icons v-else type="star-filled" color="#FFCB47" size="40"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import point from '@/static/icon/point.png';
|
|
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';
|
|
const { $api, navTo, getLenPx, parseQueryParams } = inject('globalFunction');
|
|
|
|
const jobInfo = ref({});
|
|
const state = reactive({});
|
|
const mapCovers = ref([]);
|
|
const jobIdRef = ref();
|
|
|
|
onLoad((option) => {
|
|
if (option.jobId) {
|
|
initLoad(option);
|
|
}
|
|
});
|
|
|
|
onShow(() => {
|
|
const option = parseQueryParams(); // 兼容微信内置浏览器
|
|
if (option.jobId) {
|
|
initLoad(option);
|
|
}
|
|
});
|
|
|
|
function initLoad(option) {
|
|
const jobId = atob(option.jobId);
|
|
if (jobId !== jobIdRef.value) {
|
|
jobIdRef.value = jobId;
|
|
getDetail(jobId);
|
|
}
|
|
}
|
|
|
|
function getDetail(jobId) {
|
|
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
|
|
const { latitude, longitude, companyName } = resData.data;
|
|
jobInfo.value = resData.data;
|
|
if (latitude && longitude) {
|
|
mapCovers.value = [
|
|
{
|
|
latitude: latitude,
|
|
longitude: longitude,
|
|
iconPath: point,
|
|
label: {
|
|
content: companyName,
|
|
textAlign: 'center',
|
|
padding: 3,
|
|
fontSize: 12,
|
|
bgColor: '#FFFFFF',
|
|
anchorX: getTextWidth(companyName), // X 轴调整，负数向左
|
|
borderRadius: 5,
|
|
},
|
|
width: 34,
|
|
},
|
|
];
|
|
}
|
|
});
|
|
}
|
|
|
|
function getTextWidth(text, size = 12) {
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
context.font = `${12}px Arial`;
|
|
return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
|
|
}
|
|
|
|
// 申请岗位
|
|
function jobApply() {
|
|
const jobId = jobInfo.value.jobId;
|
|
if (jobInfo.value.isApply) {
|
|
const jobUrl = jobInfo.value.jobUrl;
|
|
return window.open(jobUrl);
|
|
} else {
|
|
$api.createRequest(`/app/job/apply/${jobId}`, {}, 'GET').then((resData) => {
|
|
getDetail(jobId);
|
|
$api.msg('申请成功');
|
|
const jobUrl = jobInfo.value.jobUrl;
|
|
return window.open(jobUrl);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 取消/收藏岗位
|
|
function jobCollection() {
|
|
const jobId = jobInfo.value.jobId;
|
|
if (jobInfo.value.isCollection) {
|
|
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'DELETE').then((resData) => {
|
|
getDetail(jobId);
|
|
$api.msg('取消收藏成功');
|
|
});
|
|
} else {
|
|
$api.createRequest(`/app/job/collection/${jobId}`, {}, 'POST').then((resData) => {
|
|
getDetail(jobId);
|
|
$api.msg('收藏成功');
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
|
|
::v-deep .amap-logo {
|
|
opacity: 0 !important;
|
|
}
|
|
::v-deep .amap-copyright {
|
|
opacity: 0 !important;
|
|
}
|
|
.container
|
|
display flex
|
|
flex-direction column
|
|
background-color #f8f8f8
|
|
.job-header
|
|
padding 20rpx 40rpx
|
|
background-color #ffffff
|
|
margin-bottom 10rpx
|
|
.job-title
|
|
font-size 55rpx
|
|
font-weight bold
|
|
color #333
|
|
margin-bottom 10rpx
|
|
.job-info
|
|
display flex
|
|
justify-content space-between
|
|
margin-bottom 10rpx
|
|
.salary
|
|
color #3b82f6
|
|
font-size 42rpx
|
|
font-weight bold
|
|
.views
|
|
font-size 24rpx
|
|
color #999
|
|
.location-info
|
|
font-size 24rpx
|
|
color #666
|
|
.location, .source, .date
|
|
margin-right 10rpx
|
|
margin-top: 20rpx
|
|
.source
|
|
margin-left: 30rpx;
|
|
|
|
.job-details
|
|
background-color #fff
|
|
padding 20rpx 40rpx
|
|
margin-bottom 10rpx
|
|
.details-title
|
|
font-size 41rpx
|
|
font-weight bold
|
|
margin-bottom 15rpx
|
|
.tags
|
|
display flex
|
|
gap 10rpx
|
|
margin 15rpx 0
|
|
.tag
|
|
background-color #3b82f6
|
|
color #fff
|
|
padding 5rpx 15rpx
|
|
border-radius 15rpx
|
|
font-size 22rpx
|
|
.description
|
|
font-size 24rpx
|
|
line-height 36rpx
|
|
color #333
|
|
|
|
.company-info
|
|
background-color #fff
|
|
padding 20rpx 40rpx
|
|
margin-bottom 300rpx
|
|
.company-name
|
|
font-size 28rpx
|
|
font-weight bold
|
|
margin-bottom 10rpx
|
|
.company-details
|
|
font-size 24rpx
|
|
color #666
|
|
.company-map
|
|
height: 340rpx
|
|
width: 100%
|
|
background: #e8e8e8
|
|
margin-top: 10rpx
|
|
border-radius: 16rpx
|
|
overflow: hidden
|
|
|
|
.footer
|
|
position fixed
|
|
bottom calc(var(--status-bar-height) + var(--window-bottom))
|
|
left 0
|
|
width calc(100% - 40rpx)
|
|
padding 20rpx
|
|
background-color #fff
|
|
text-align center
|
|
display flex
|
|
align-items: center
|
|
.apply-btn
|
|
flex: 1
|
|
background-color #22c55e
|
|
color #fff
|
|
border-radius 30rpx
|
|
font-size 32rpx
|
|
margin-right: 30rpx
|
|
.btned
|
|
background-color #666666
|
|
</style>
|