menduner/src/views/recruit/personal/shareJob/index.vue

<!-- 分享职位 -->
<template>
  <div style="background-color: #f0f0f0;" :style="{'padding': isMobile ? '0' : '10px'}">
    <v-card
      class="py-3 px-5"
      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;"
      :style="{'width': isMobile ? '100%' : '750px'}"
    >
      <div v-if="!Object.keys(info).length">加载失败</div>
      <div v-else>
        <div class="d-flex justify-space-between">
          <h2 class="JobName ellipsis">{{ info.name }}</h2>
          <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
        </div>
        <div class="d-flex justify-space-between mt-4">
          <div class="banner-tags">
            <div v-for="k in desc" :key="k.mdi" class="mr-3">
              <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
              <span class="f-w-600 ml-1">{{ positionInfo[k.value] }}</span>
            </div>
          </div>
          <div class="mt-4" v-if="info?.tagList">
            <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.tagList" :key="i">{{ k }}</v-chip>
          </div>
        </div>
        <div class="text-end d-flex align-center justify-space-between mt-3">
          <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>
          <publicRecruitment v-if="info.hire" width="50" height="60"></publicRecruitment>
        </div>
        <div v-if="info.hire" class="mt-3">
          <v-chip v-if="info.hirePrice" label color="primary">赏金：{{ info.hirePrice }}元</v-chip>
          <v-chip v-if="info.hirePoint" label color="primary">积分：{{ info.hirePoint }}点</v-chip>
        </div>
        <v-divider class="mt-3"></v-divider>
        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobResponsibilities') }}</div>
        <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobRequirements') }}</div>
        <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
        <v-divider class="my-3"></v-divider>
        <div class="contact">
          <div class="float-left d-flex align-center">
            <v-img :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :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?.name }} · {{ 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 }}</span>
          </div>
        </div>
        <div class="text-center my-10">
          <v-btn v-if="!isMobile" class="mr-2 radius button-item" color="success" variant="outlined" target="_blank" to="/recruit/personal/position">{{ $t('position.moreBtn') }}</v-btn>
          <v-btn class="radius button-item" color="primary" :disabled="delivery" @click="sendResumeProcessVerify">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
        </div>
      </div>
    </v-card>

    <!-- 快速登录/注册 -->
    <login-page
      v-if="sendResume.showLogin"
      :jobId="jobId"
      @loginSuccess="loginSuccess"
      @close="handleClose('showLogin')"
    ></login-page>

    <!-- 快速填写简易人才信息 -->
    <simple-page
      v-if="sendResume.showSimpleInfo"
      @simpleInfoReady="simpleInfoReadyFun"
      @close="handleClose('showSimpleInfo')"
    ></simple-page>

    <!-- 选择简历 -->
    <select-page
      v-if="sendResume.showSelect"
      :hire="info?.hire"
      :jobId="jobId"
      :userId="sharedById"
      @refresh="handleCheckJobDelivery"
      @close="handleClose('showSelect')"
      ref="selectRef"
    ></select-page>
  </div>
</template>

<script setup>
defineOptions({name: 'recruit-personal-shareJob-index'})
import loginPage from './components/login.vue'
import simplePage from './sendResume/simple.vue'
import selectPage from './sendResume/select.vue'
import { onMounted, reactive, ref } from 'vue';
import { getPositionDetails, jobCvRelCheckSend, getPersonJobUnfavorite, getPersonJobFavorite, getJobFavoriteCheck } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import { getPersonalToken } from '@/utils/auth'
import Snackbar from '@/plugins/snackbar'
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()

// 组件挂载后添加事件监听器  
const isMobile = ref(false)
onMounted(() => {
  const userAgent = navigator.userAgent
  isMobile.value = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i.test(userAgent)
})
// 获取路由参数
const queryParams = new URLSearchParams(window.location.search)
const jobId = queryParams.get('jobId') || ''
const sharedById = queryParams.get('sharedById') || ''

// 职位详情
const info = ref({})
const positionInfo = ref({})
const getPositionDetail = async () => {
  const data = await getPositionDetails({ id: jobId })
  info.value = data
  positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
}

// 效验是否已投递
const delivery = ref(false)
const handleCheckJobDelivery = async () => {
  delivery.value = await jobCvRelCheckSend({ jobId })
  return delivery.value
}

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

// 收藏&取消收藏职位
const handleCollection = async () => {
  // 效验登录状态
  if (!getPersonalToken()) {
    actions.value = true
    // handleLogin()
    sendResume.showLogin = true
    return
  }
  if (!jobId) return
  const api = isCollection.value ? getPersonJobUnfavorite : getPersonJobFavorite
  await api(isCollection.value ? jobId : { jobId })
  await getCollectionStatus()
}

// 判断有没有jobId跟sharedById，没有的话关闭当前窗口
if (!jobId) { // !sharedById
  Snackbar.warning('当前打开的链接无效')
  setTimeout(() => {
    window.close()
  }, 2000)
} else {
  getPositionDetail()
  if (getPersonalToken()) {
    handleCheckJobDelivery()
    getCollectionStatus()
  }
}

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

// 快速登录成功
const loginSuccess = async () => {
  sendResume.showLogin = false // 关闭快速登录弹窗
  // actions为true则是收藏时的登录，不需要弹窗选择简历
  if (actions.value) {
    actions.value = false
    Snackbar.success('登录成功')
    await handleCollection()
    return 
  }
  const bool = await handleCheckJobDelivery()
  if (bool) return Snackbar.warning(t('resume.alreadyResume'))
  sendResumeProcessVerify()
}

// 简易人才信息
const simpleInfoReady = ref(false)
const simpleInfoReadyFun = () => {
  sendResume.showSimpleInfo = false
  simpleInfoReady.value = true
  sendResumeProcessVerify()
}
const sendResume = reactive({
  showLogin: false,
  showSimpleInfo: false,
  showSelect: false,
})

// 流程校准
const sendResumeProcessVerify = async () => {
  try { // 1.登录 2.具备人才信息 3.有无附件简历，无则上传
    // 未登录
    if (!getPersonalToken()) {
      sendResume.showLogin = true
      return
    }
    // 已登录
    // * 必填人才信息不完全 -> 不符合快速投递，进入完善人才信息流程
    if (!simpleInfoReady.value) {
      sendResume.showSimpleInfo = true
      return
    }
    // * 简历列表
    // if (!) sendResume.showSelect = true
    sendResume.showSelect = true
  } catch (error) {
    console.error('error', error)
  }
}

const handleClose = (key) => {
  sendResume[key] = false // 弹窗关闭，重置绑定数据
}
</script>

<style lang="scss" scoped>
.f-w-600 { font-weight: 600; }
.radius { border-radius: 8px; }
.salary {
  color: var(--v-error-base);
  line-height: 41px;
  font-weight: 600;
  height: auto;
  display: inline-block;
  vertical-align: sub;
}
.JobName {
  color: #37576c;
  font-size: 28px;
  margin-right: 30px;
  margin-top: 1px;
  // max-width: 45%;
  vertical-align: middle;
  flex: 1;
}
.banner-tags { display: flex; flex-wrap: wrap; }
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
}
.contact {
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
}
.contact-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-222);
  line-height: 28px;
}
.contact-info {
  font-size: 15px;
  color: var(--color-666);
  line-height: 21px;
  margin-top: 8px;
}
.button-item {
  min-width: 110px;
  height: 36px
}
</style>