menduner/src/views/recruit/personal/position/components/details.vue

<template>
  <div style="position: relative;">
    <div class="banner px-6" id="share" :class="{'default-width': defaultWidth}">
      <div class="banner-title d-flex justify-space-between">
        <div class="d-flex align-center">
          <h1>{{ info.name }}</h1>
          <span v-if="!info.payFrom && !info.payTo" class="salary">面议</span>
          <span v-else class="salary">{{ info.payFrom ? info.payFrom + '-' : ''}}{{ info.payTo }}{{ positionInfo.payName ? '/' + positionInfo.payName : '' }}</span>
          <svg-icon v-if="info.hire" class="ml-5" name="pin" size="50"></svg-icon>
        </div>
      </div>
      
      <div class="refresh-time text-end">{{ timesTampChange(info.updateTime) }} {{ $t('common.refresh') }} <v-icon color="primary" size="20">mdi-circle-medium</v-icon></div>
      <div class="banner-tags mt-4">
        <span v-for="k in desc" :key="k.mdi">
          <span v-if="positionInfo[k.value]" class="mr-10">
            <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
            <span class="ml-1">{{ positionInfo[k.value] }}</span>
          </span>
        </span>
      </div>
      <div class="banner-tools my-4">
        <v-chip size="small" label v-for="(k, i) in info.tagList" :key="i" class="mr-1" color="primary">{{ k }}</v-chip>
      </div>
      <div class="d-flex justify-space-between mb-5">
        <div>
          <div>
            <v-chip v-if="info.hire && info.hirePrice && info.hirePrice > 0" label color="primary">赏金：{{ commissionCalculation(info.hirePrice / 100, 1) }}元</v-chip>
            <v-chip v-if="info.hire && info.hirePoint && info.hirePoint > 0" label color="primary" class="ml-1">积分：{{ commissionCalculation(info.hirePoint / 100, 1) }}点</v-chip>
          </div>
          <div v-if="info?.hire" class="font-size-14 mt-3 color-error">推荐好友入职成功即可获得赏金</div>
        </div>
        <div class="banner-tools-btns" v-if="props.showOperateBtn">
          <v-btn v-if="info?.hire" class="radius mr-2 button-item" variant="outlined" color="error" prepend-icon="mdi-share-outline" @click="handleShare">我要赏金</v-btn>
          <v-btn v-else class="radius mr-2 button-item" variant="outlined" color="error" prepend-icon="mdi-share-outline" @click="handleShare">{{ $t('position.rewardsShared') }}</v-btn>
          <v-btn class="button-item radius" color="warning" variant="outlined" :prepend-icon="isCollection ? 'mdi-heart' : 'mdi-heart-outline'" @click="handleCollection">{{ isCollection ? $t('position.cancelFavorite') : $t('position.collection') }}</v-btn>
          <v-btn class="button-item mx-2 radius" color="success" variant="outlined" @click="toDetails(info)">{{ $t('position.communicate') }}</v-btn>
          <v-btn class="button-item radius" :disabled="delivery" color="primary" variant="outlined" @click="handleDelivery">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
        </div>
      </div>
      <v-divider></v-divider>
      <div class="d-flex">
          <div class="content-left">
            <div v-if="Object.keys(info).length">
              <div>
                <div class="resume-header">
                  <div class="resume-title">{{ $t('position.jobResponsibilities') }}：</div>
                </div>
                <div v-if="info.content" class="requirement" v-html="cleanedHtml(info.content)"></div>
                <div v-else>暂无</div>
              </div>
              <div class="mt-3">
                <div class="resume-header">
                  <div class="resume-title">{{ $t('position.jobRequirements') }}：</div>
                </div>
                <div v-if="info.requirement" class="requirement" v-html="cleanedHtml(info.requirement)"></div>
                <div v-else>暂无</div>
              </div>
            </div>
            <v-divider class="my-3"></v-divider>
            <div class="contact" v-if="Object.keys(info).length">
              <div class="float-left d-flex align-center">
                <v-img :src="getUserAvatar(info.contact.avatar, info.contact.sex)" :width="45" style="height: 45px;"></v-img>
                <div class="ml-2">
                  <div class="contact-name">{{ info.contact.name }}</div>
                  <div class="contact-info">
                    {{ info.enterprise.anotherName }}
                     <span v-if="info?.enterprise?.anotherName && info?.contact?.postNameCn">·</span>
                    {{ info.contact.postNameCn }}</div>
                </div>
              </div>
            </div>
            <v-divider class="my-3"></v-divider>
            <div>
              <h4>{{ $t('position.address') }}</h4>
              <div class="mt-1">
                <v-icon size="25" color="primary">mdi-map-marker</v-icon>
                <span style="color: var(--color-666);font-size: 15px;">{{ info.address ? info.address : '未知' }}</span>
              </div>
            </div>
            <div class="mt-3 text-center" v-if="props.showOperateBtn">
              <v-btn
                class="mr-2 radius button-item"
                color="success"
                variant="outlined"
                @click="toDetails(info)"
              >
                {{ $t('position.communicate') }}
              </v-btn>
              <v-btn class="radius button-item" :disabled="delivery" color="primary" @click="handleDelivery">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
            </div>
          </div>
          <div class="content-right" v-if="Object.keys(info).length && props.showContentRight">
            <!-- 公司信息 -->
            <EnterpriseInfo :info="{ ...info, position: { ...positionInfo } }"></EnterpriseInfo>
            <!-- 相似职位 -->
            <similarPositions v-if="similarList.length" class="mt-3" :list="similarList" :info="info"></similarPositions>
          </div>
      </div>
    </div>

    <!-- 简历上传 -->
    <CtDialog
      :visible="showUploadDialog"
      :widthType="2"
      :footer="true"
      title="附件简历上传"
      titleClass="text-h6"
      @close="showUploadDialog = false"
      @submit="handleUploadSubmit"
    >
      <CtForm ref="CtFormRef" :items="formItems">
        <template #uploadFile="{ item }">
          <TextInput v-model="item.value" :item="item" @click="openFileInput"></TextInput>
          <File ref="uploadFile" @success="handleUploadResume"></File>
        </template>
      </CtForm>
      <div class="color-666" style="font-size: 13px;">* 仅支持.doc, .docx, .pdf文件且大小不能超过20MB</div>
    </CtDialog>

    <!-- 选择简历 -->
    <selectResumeDialog v-model="showResume" :list="resumeList" @submit="handleSubmit" @close="handleClose"></selectResumeDialog>

    <!-- 职位分享 -->
    <Dialog
      :visible="shareDialog" :widthType="2" :footer="false" titleClass="text-h6"
      :title="$t('position.rewardsShared')"
      @close="shareDialog = false"
    >
      <div>
        <div class="mb-3 text-center">微信分享：保存图片分享给好友</div>
        <div class="d-flex align-center flex-column">
          <v-img :src="previewSrc" width="200" height="250"></v-img>
          <div class="mt-5">
            <v-btn color="primary" variant="outlined" prepend-icon="mdi-eye-outline" @click="showPreview = true" style="width: 133px">预 览</v-btn>
            <v-btn class="ml-3" color="primary" variant="outlined" prepend-icon="mdi-arrow-down-bold-box-outline" @click="handleDownloadImage" style="width: 133px">保存到本地</v-btn>
          </div>
        </div>
      </div>
      <template #footer>
        <v-divider></v-divider>
        <div>
          <v-btn class="float-right ma-2" color="primary" variant="text" @click="shareDialog = false">{{ $t('common.close') }}</v-btn>
        </div>
      </template>
    </Dialog>
    <PreviewImg v-if="showPreview" :list="[previewSrc]" @close="showPreview = false" @download="handleDownloadImage"   :isImage="true"></PreviewImg>

    <Loading :visible="loading"></Loading>
    <div v-if="Object.keys(info).length && Object.keys(positionInfo).length" style="position: absolute; left: -9999px; bottom: 0">
      <PosterPage :id="id" :info="info" :positionInfo="positionInfo" ref="share"></PosterPage>
    </div>

    <!-- 快速登录 -->
    <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
  </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
</template>

<script setup>
defineOptions({ name: 'position-details' })
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Snackbar from '@/plugins/snackbar'
import html2canvas from 'html2canvas'
import { useI18n } from '@/hooks/web/useI18n'
import { prologue, defaultText } from '@/hooks/web/useIM'
import PosterPage from './poster.vue'
import selectResumeDialog from './jobDetails/selectResumeDialog'
import similarPositions from '@/components/Position/similarPositions.vue'
import EnterpriseInfo from '@/components/Enterprise/info.vue'
import Dialog from '@/components/CtDialog'
import loginPage from '@/views/common/loginDialog.vue'
import {
  getPositionDetails,
  getSimilarPosition,
  getJobFavoriteCheck,
  getPersonJobFavorite,
  getPersonJobUnfavorite,
  jobCvRelCheckSend,
  jobCvRelSend
} from '@/api/position'
import { getPersonResumeCv, savePersonResumeCv } from '@/api/recruit/personal/resume'

import { downloadBase64, DPR } from '@/utils'
import { timesTampChange } from '@/utils/date'
import { dealDictObjData, dealDictArrayData, commissionCalculation } from '@/utils/position'
import { getToken } from '@/utils/auth'
import { getUserAvatar } from '@/utils/avatar'

const props = defineProps({
  defaultWidth: {
    type: Boolean,
    default: true
  },
  showOperateBtn: {
    type: Boolean,
    default: true
  },
  showContentRight: {
    type: Boolean,
    default: true
  },
  propJobId: {
    type: [String, Number],
    default: ''
  },
})

const { t } = useI18n()
const router = useRouter()
const { id } = props.propJobId ? { id: props.propJobId } : router.currentRoute.value.params
const delivery = ref(false) // 是否已投递简历
const loading = ref(false)
const showLogin = ref(false)
const previewSrc = ref('')
const showPreview = ref(false)
// 附件简历上传
const CtFormRef = ref()
const showUploadDialog = ref(false)
const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'title',
      value: '',
      label: '附件简历名称 *',
      rules: [v => !!v || '请输入附件简历名称']
    },
    {
      slotName: 'uploadFile',
      key: 'url',
      value: '',
      truthValue: '',
      label: '点击上传附件简历 *',
      outline: true,
      accept: '.doc, .docx, .pdf',
      prependInnerIcon: 'mdi-file-document-outline',
      rules: [v => !!v || '请上传您的附件简历']
    }
  ]
})

const nextFunc = ref(null)
let loginCloseWarningWord = ''
// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
  if (nextFunc.value) nextFunc.value()
}

const loginClose = () => {
  showLogin.value = false
  Snackbar.warning(loginCloseWarningWord)
}

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

const share = ref()
// 生成图片
const generateAndDownloadImage = async () => {
  if (!share.value) return
  loading.value = true
  try {  
    const canvas = await html2canvas(share.value.$el, { scale: DPR(), useCORS: true })
    const image = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
    previewSrc.value = `data:image/png;base64,${image}`
    loading.value = false
    showPreview.value = true
  } catch (error) {
    console.error('Error generating image:', error)
    Snackbar.error('图片生成失败')
  }
}

// 保存图片到本地
const handleDownloadImage = () => {
  const { name, areaName, payFrom, payTo } = info.value
  const salary = payFrom && payTo ? `${payFrom ? '_' + payFrom + '-' : ''}${payTo}` : '-面议'
  downloadBase64(previewSrc.value, `${name}${areaName ? '_' + areaName : ''}${salary}${positionInfo.value.payName ? '-' + positionInfo.value.payName : ''}`)
  setTimeout(() => {
    Snackbar.success('下载成功')
  }, 500);
}

// 相似职位
const similarList = ref([])
const getSimilarPositionList = async () => {
  if (!Object.keys(positionInfo).length) return
  const { list } = await getSimilarPosition({ pageNo: 1, pageSize: 4, id })
  if (!list.length) return
  const items = list.splice(0, 4)
  similarList.value = dealDictArrayData([], items)
}

// 职位详情
const info = ref({})
const positionInfo = ref({})
const getPositionDetail = async () => {
  const data = await getPositionDetails({ id })
  info.value = data
  positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
  if (props.type !=='recommendShow') getSimilarPositionList()
}
getPositionDetail()

// 效验是否有投递过简历
const deliveryCheck = async () => {
  const data = await jobCvRelCheckSend({ jobId: id })
  if (data) delivery.value = true
}
if (getToken()) deliveryCheck()

const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
]

// 效验求职者是否有收藏该职位
const isCollection = ref(true)
const getCollectionStatus = async () => {
  if (!getToken()) return isCollection.value = false
  const data = await getJobFavoriteCheck({ jobId: id })
  isCollection.value = data
}
getCollectionStatus()

// 分享有礼
const shareDialog = ref(false)
const handleShare = async () => {
  if (!getToken()) {
    showLogin.value = true // 打开快速登录弹窗
    Snackbar.warning('您还未登录，请先登录后再试')
    //
    nextFunc.value = handleShare // 登录成功后要执行的操作
    loginCloseWarningWord = '您已取消登录，无法分享职位给好友' // 取消登录提示语
    return
  }
  generateAndDownloadImage() // 生成海报
}

// 收藏&取消收藏职位
const handleCollection = async () => {
  if (!getToken()) {
    showLogin.value = true // 打开快速登录弹窗
    Snackbar.warning('您还未登录，请先登录后再试')
    //
    nextFunc.value = handleCollection // 登录成功后要执行的操作
    loginCloseWarningWord = '您已取消登录，无法收藏职位' // 取消登录提示语
    return
  }
  const api = isCollection.value ? getPersonJobUnfavorite : getPersonJobFavorite
  await api(isCollection.value ? id : { jobId: id })
  await getCollectionStatus()
}

// 选择文件
const uploadFile = ref()
const openFileInput = () => {
  uploadFile.value.trigger()
}

// 上传附件
const handleUploadResume = async (url, title, filename) => {
  const obj = formItems.value.options.find(e => e.key === 'url')
  obj.value = filename
  obj.truthValue = url
}

// 上传附件
const handleUploadSubmit = async () => {
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  formItems.value.options.forEach(e => {
    obj[e.key] = e.truthValue || e.value
  })
  if (!obj.title || !obj.url) return
  loading.value = true
  await savePersonResumeCv(obj)
  await jobCvRelSend({ jobId: id, title: obj.title, url: obj.url, type: info.value.hire ? 1 : 0 })
  showUploadDialog.value = false
  setTimeout(() => {
    Snackbar.success(t('resume.deliverySuccess'))
    deliveryCheck()
    loading.value = false
  }, 1000)
}

const showResume = ref(false)

// 效验是否有投递简历
const resumeList = ref([])
const selectResume = ref()
const handleDelivery = async () => {
  if (!getToken()) {
    showLogin.value = true // 打开快速登录弹窗
    Snackbar.warning('您还未登录，请先登录后再试')
    //
    nextFunc.value = handleDelivery // 登录成功后要执行的操作
    loginCloseWarningWord = '您已取消登录，无法投递简历' // 取消登录提示语
    return
  }
  if (delivery.value) return Snackbar.warning(t('resume.alreadyResume'))
  const result = await getPersonResumeCv()
  resumeList.value = result
  // 没有上传过简历的先去上传
  if (!result.length) {
    Snackbar.warning('您还未上传过简历，请先上传简历')
    showUploadDialog.value = true
    return
  }
  showResume.value = true
}

// 简历投递
const handleClose = () => {
  showResume.value = false
  selectResume.value = null
}
const handleSubmit = async (val) =>{
  selectResume.value = val
  if (!selectResume.value) return Snackbar.warning(t('resume.selectResumeToSubmit'))
  const obj = resumeList.value.find(e => e.id === selectResume.value)
  if (!obj) return Snackbar.warning(t('resume.selectedResumeNotExist'))
  handleClose()
  loading.value = true
  await jobCvRelSend({ jobId: id, title: obj.title, url: obj.url, type: info.value.hire ? 1 : 0 })
  setTimeout(async () => {
    Snackbar.success(t('resume.deliverySuccess'))
    await deliveryCheck()
    loading.value = false
  }, 3000)
}

let toDetailsInfo = {}
// 沟通
const toDetails = async (info) => {
  if (info) toDetailsInfo = info // 快速登录弹窗回调使用
  else info = toDetailsInfo
  if (!getToken()) {
    showLogin.value = true // 打开快速登录弹窗
    Snackbar.warning('您还未登录，请先登录后再试')
    //
    loginCloseWarningWord = '您已取消登录，无法对职位进行沟通' // 取消登录提示语
    nextFunc.value = toDetails // 登录成功后要执行的操作 (toDetails执行不成功，原因未找到)
    return
  }
  try {
    const userId = info.contact.userId
    const enterpriseId = info.contact.enterpriseId
    const textObj = {
      text: defaultText,
      positionInfo: positionInfo.value
    }
    await prologue({userId, enterpriseId, text: JSON.stringify(textObj)})
    let url = `/recruit/personal/message?id=${info.id}`
    if (info.contact.enterpriseId) {
      url += `&enterprise=${info.contact.enterpriseId}`
    }

    window.open(url)
  } catch (error) {
    console.log(error)
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/recruit/position/index.scss'
</style>