menduner-uniapp/pagesB/positionDetail/index.vue

<template>
  <layout-page>
    <scroll-view class="scrollBox" style="position:relative;">
      <view class="box">
        <view v-if="loading" class="vertical80-center">{{ loadingText }}</view>
        <view v-else>
          <view class="mt-5" style="display: flex;">
            <!-- 赏金 -->
            <view v-if="info.hire && info.hirePrice" class="hirePrice ss-m-r-10 d-flex align-center">
              <view class="iconfont icon-a-1_zhaopin ss-m-r-10" style="color: #e03506; font-size: 20px;"></view>
              <view>{{ `赏金：${commissionCalculation(info.hirePrice / 100, 1)}元` }}</view>
            </view>
            <image v-if="isJobFair" src="/static/svg/jobFair.svg" class="ss-m-r-10" style="width: 30px; height: 30px;"></image>
            <!-- 职位名称 -->
            <h2 class="JobName" style="flex: 1;">{{ formatName(info.name) }}</h2>
          </view>
          <!-- 职位地区 -->
          <view class="d-flex justify-space-between mt-5 align-center">
            <view style="font-size: 14px; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 30px;">
              <span>
                <span>{{positionInfo?.area?.str ?? '全国' }}</span>
                <span class="viewider-mx" v-if="positionInfo?.eduName">|</span>
                <span>{{positionInfo?.eduName }}</span>
                <span class="viewider-mx" v-if="positionInfo?.expName">|</span>
                <span>{{positionInfo?.expName }}</span>
              </span>
            </view>
          </view>
          <view class="d-flex justify-space-between mt-5 align-center">
            <!-- 薪资 -->
            <view>
              <span v-if="!info.payFrom && !info.payTo" class="salary w-600">面议</span>
              <span v-else class="salary w-600">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
            </view>
          </view>
          <view class="font-size-13 color-999 ss-m-t-10" style="text-align: end;">更新时间：{{ timesTampChange(info?.refreshTime || info.updateTime, 'Y-M-D h:m') }}</view>
          <!-- 标签 -->
          <view class="tagList mt">
            <view class="tag" v-for="(tag,i) in info?.tagList || []" :key="'tagList' + i">
              {{ tag }}
            </view>
          </view>
          <!-- 岗位职责 -->
          <view class="topLine fs14 mt-5">
            <view class="fs15 w-600 my5">岗位职责</view>
            <view v-if="!info.content"></view>
            <rich-text v-else class="htmlCss" :nodes="cleanedHtml(info.content)"></rich-text>
          </view>
          <!-- 岗位要求 -->
          <view class="topLine mt-5">
            <view class="fs15 w-600 my5">岗位要求</view>
            <view v-if="!info.requirement"></view>
            <rich-text v-else class="htmlCss" :nodes="cleanedHtml(info.requirement)"></rich-text>
          </view>
          <!-- HR信息 -->
          <view class="topLine mt-5 d-flex">
            <view class="avatarBox">
              <image style="width: 40px; height: 40px;" :src="info.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
            </view>
            <view >
              <view class="contact-name">{{ info.contact?.name }}</view>
              <view class="contact-info">{{ formatName(info.enterprise?.anotherName || info.enterprise?.name) }} {{ info.contact?.postNameCn ? '· ' + info.contact?.postNameCn : '' }}</view>
            </view>
          </view>
          <!-- 工作地址 -->
          <view class="topLine mt-5">
            <view class="fs15 w-600 my5">工作地址</view>
            <view class="my10">
              <uni-icons
                type="map-pin-ellipse"
                color="#00B760"
                class="mr"
                size="25"
              ></uni-icons>
              <span style="color: var(--color-666);font-size: 15px;line-height: 26px;">{{ info.address || '' }}</span>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </layout-page>
</template>

<script setup>
import { commissionCalculation } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import layoutPage from '@/layout'
import { ref, watch } from 'vue';
import { getPositionDetails } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import { onLoad } from '@dcloudio/uni-app'
import { userStore } from '@/store/user'
import { formatName } from '@/utils/getText'

const useUserStore = userStore()
const loading = ref(false)
const loadingText = ref('加载中 . . . ')

// 职位详情
const info = ref({})
const positionInfo = ref({})
const beenLogin = ref(false)
const areaName = ref('')

// 监听登录状态
watch(() => useUserStore.refreshToken, (newVal) => {
	beenLogin.value = Boolean(newVal)
}, { immediate: true }, { deep: true })

let jobId = ''
const isJobFair = ref(false) // 是否是通过招聘会进入的岗位
let obj = {}
onLoad(async (options) => {
  areaName.value = options?.area || ''
  jobId = options?.id || options?.jobId || obj?.jobId || ''
  if (jobId) {
    loading.value = true
    loadingText.value = '加载中 . . . '
    getPositionDetail()
  } else {
    loadingText.value = '加载失败 . . . '
  }
})

// 富文本内容处理，去除多余的换行空格等
const cleanedHtml = (text) => {
  const cleaned = text.replace(/\n/g, '<br>')
  .replace(/\s+/g, ' ')
  .replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>')
  .replace(/<p>\s*(<br>)\s*<\/p>/g, '')
  .replace(/<pre([^>]*)>/g, '<div$1>')
  .replace(/<\/pre>/g, '</div>')
  .replace(/<p>\s*(<\/br>)\s*<\/p>/g, '').trim()
  return cleaned
}

// 职位详情
async function getPositionDetail () {
  try {
    loading.value = true
    const { data } = await getPositionDetails({ id: jobId })
    info.value = data
    positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value, enterprise: dealDictObjData({}, data.enterprise) }
    loading.value = false
    areaName.value = positionInfo.value.area?.str ?? '全国'
  } finally {
  }
}

</script>

<style scoped lang="scss">
@import '../../static/style/position/index.scss';
.hideCanvasView{
	position: relative;
}
.shareCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

.bottom-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 20rpx 0;
  .btnStyle {
    flex: 1;
    margin-right: 20rpx;
  }
  .bgButtons {
    border: 2rpx solid #00B760;
    color: #00B760;
    // background: #FFF;
    border-radius: 50rpx;
  }
  .shareButtonCss {
    font-size: 16px;
    background: unset;
    &::after{
      border:none !important;
    }
  }
  &-tool {
    width: 160rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
.share-pop {
    width: 100%;
    // height:300rpx;
    display: flex;
    justify-content: center;
    .f-straight {
      margin: 40rpx;
      background: unset;
      &::after{
        border:none !important;
      }
    }
    .share-round {
      border-radius:50%;
      height:100rpx;
      width:100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .share-round-1 {
        background-color:#22a039;
    }
    .share-round-2 {
        background-color:#3693cd;
    }
}
.preview {
  position: fixed;
  z-index: 9;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;
  .image {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 100rpx;
  }
}
</style>