ks-app-employment-service/packageA/pages/post/post.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">&nbsp;</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>