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) }}
              <span v-if="info?.status === '1'" class="color-error">(职位已关闭)</span>
            </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 align-center">
            <view class="avatarBox">
              <image style="width: 40px; height: 40px; border-radius: 50%;" :src="getUserAvatar(info?.contact?.avatar)"></image>
            </view>
            <view class="contact-name">{{ info.contact?.name }}</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>
    <view class="bottom-sticky" v-if="!loading && jobId">
      <view class="bottom-content">
        <button
          v-if="info?.status === '0'"
          class="buttons btnStyle ss-m-l-15"
          type="primary"
          @click="handleEdit"
        >编辑职位</button>
      </view>
    </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, getEnterprisePubJobTypePermission } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import { onLoad } from '@dcloudio/uni-app'
import { userStore } from '@/store/user'
import { formatName } from '@/utils/getText'
import { getUserAvatar } from '@/utils/avatar'

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

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

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

let jobId = ''
const isJobFair = ref(false)
let obj = {}
const isEdit = ref(false)
const fairNoEdit = ref(false)
onLoad(async (options) => {
  jobId = options?.id || options?.jobId || obj?.jobId || ''
  
  // 招聘会进入的岗位
  if (options?.jobFairId) isJobFair.value = true
  // 职位是否可编辑
  if (options?.isEdit && options?.isEdit === 'true') isEdit.value = true
  
  // 发布中的招聘会是否可编辑
  if (options?.fairNoEdit) fairNoEdit.value = true

  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
  } finally {
  }
}

// 职位编辑
const handleEdit = async () => {
  if (!isJobFair.value && !isEdit.value) {
    uni.showToast({ title: '职位发布时间超过24小时的不支持编辑', icon: 'none', duration: 2000 })
    return
  }
  // 已关闭的招聘会职位不支持编辑
  // if (isJobFair.value && info.value.status === '1') {
  //   uni.showToast({ title: '职位已关闭', icon: 'none', duration: 2000 })
  //   return
  // }
  // 发布中的招聘会职位需进入招聘会中进行编辑
  if (fairNoEdit.value) {
	uni.showToast({ title: '该职位属于招聘会职位，请前往招聘会中进行编辑', icon: 'none', duration: 2000 })
	return
  }
  uni.showLoading({ title: '加载中 . . . ' })
  try {
    const res = await getEnterprisePubJobTypePermission()
    if (!res?.data?.length) {
      uni.showToast({ title: '没有该操作权限，请联系平台管理员升级后再试', icon: 'none', duration: 2000 })
      return
    }
    const url = isJobFair.value ? `/pagesB/jobFair/editJob?jobId=${jobId}&jobFairId=${info.value.bizId}` : `/pagesB/positionEdit/index?jobId=${jobId}`
    uni.navigateTo({ url })
    // 跳转编辑页面
  } finally {
    uni.hideLoading()
  }
}

</script>

<style scoped lang="scss">
@import '../../static/style/position/index.scss';
.bottom-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 20rpx 0;
  .btnStyle {
    flex: 1;
    margin: 0 20rpx;
  }
}
</style>