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

<!-- 分享职位 -->
<template>
  <div style="background-color: #03877a;">
    <v-card class="pa-5" style="box-sizing: border-box; margin: 0 auto;width: 740px;background-color: #03877a;">
      <div v-if="!Object.keys(info).length">加载失败</div>
      <div v-else>
        <!-- 职位名称+薪资 -->
        <div class="d-flex justify-space-between mx-5">
          <h2 class="JobName ellipsis">{{ formatName(info.name) }}</h2>
        </div>
        <!-- 地区、工作经验、学历 -->
        <div class="d-flex justify-space-between mx-5 mt-2">
          <div class="banner-tags">
            <div v-for="(k, i) in desc" :key="k.mdi">
              <span>
                {{ k.value === 'areaName' ? !positionInfo.areaId ? '全国' : positionInfo.area?.str : positionInfo[k.value] }}
              </span>
              <span v-if="i !== desc.length - 1 && (positionInfo[k.value] || k.value === 'areaName')" class="septal-line"></span>
            </div>
          </div>
          <div>
            <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>
          </div>
        </div>
        <!-- 企业信息 -->
        <div class="radius pa-3 mx-5 mt-5 d-flex align-center" style="background-color: #5baea6;">
          <v-avatar style="border: 2px solid #fff;" size="68">
            <img crossOrigin="anonymous" :src="info.enterprise.logoUrl" alt="" style="width: 68px; height: 68px;">
          </v-avatar>
          <div class="enterprise-name ml-5" style="width: 65%;">{{ formatName(info.enterprise?.anotherName || info.enterprise?.name) }}</div>
          <!-- <div style="flex: 1;" class="text-right enterprise-name">{{ info.areaName }}</div> -->
        </div>
        <div class="mx-5 mt-3">
          <span :class="['tag', 'mb-1', { 'mr-5': i !== info.enterprise.welfareList.length - 1}]" v-for="(k, i) in info.enterprise.welfareList" :key="i">{{ k }}</span>
        </div>
        <!-- 岗位职责、岗位要求、二维码 -->
        <div class="white-bgc pa-5 mt-5 radius" style="position: relative;">
          <div v-if="info.content" class="resume-box pa-0 mb-5">
            <div class="resume-header">
              <div class="introduce-title">{{ $t('position.jobResponsibilities') }}</div>
            </div>
            <div class="requirement" v-html="cleanedHtml(info.content)"></div>
          </div>

          <div v-if="info.requirement" class="resume-box pa-0">
            <div class="resume-header">
              <div class="introduce-title">{{ $t('position.jobRequirements') }}</div>
            </div>
            <div class="requirement" v-html="cleanedHtml(info.requirement)"></div>
          </div>

          <div class="px-5 py-3 d-flex justify-space-evenly align-center mt-10 radius" style="background-color: #e3f2f0">
            <div>
              <img :src="url" width="150" height="150">
            </div>
            <div style="color: #333;" class="text-center">
              长 按 识 别 二 维 码
              <div style="color: #6A6A6A">了 解 更 多 职 位 信 息</div>
            </div>
          </div>
         </div>
         <!-- logo -->
         <div class="mt-5 text-center">
            <img crossOrigin="anonymous" src="https://minio.citupro.com/dev/menduner/poster.png" alt="" style="width: 130px; height: 50px;">
         </div>
      </div>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({name: 'recruit-personal-shareJob-index'})
import { ref } from 'vue'
import { getJobAdvertisedShareQrcode, getJobAdvertisedShare } from '@/api/position'
import { formatName } from '@/utils/getText'

// 职位详情
const props = defineProps({
  info: Object,
  positionInfo: Object,
  id: String
})
// 富文本内容处理，去除多余的换行空格等
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 userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
const url = ref('')
// 获取二维码
const getQrCode = async () => {
  // 先将需要的参数传递给后端，后端返回一个id，再根据id获取二维码，小程序端根据scene中的id获取分享的职位id与推荐人id
  const result = await getJobAdvertisedShare({ jobId: props.id, sharedById: userInfo?.id })
  const query = {
    scene: 'id=' + result,
    path: 'pagesB/positionDetail/index',
    width: 200,
    autoColor: false,
    checkPath: true,
    hyaline: true
  }
  const data = await getJobAdvertisedShareQrcode(query)
  url.value = 'data:image/png;base64,' + data
}
getQrCode()

const desc = [
  { value: 'areaName' },
  { value: 'expName' },
  { value: 'eduName' }
]
</script>

<style lang="scss" scoped>
.radius { border-radius: 8px; }
.salary {
  color: #E2D665;
  line-height: 41px;
  font-weight: 600;
  font-size: 20px;
  height: auto;
  display: inline-block;
  vertical-align: sub;
}
.JobName {
  color: #fff;
  font-size: 28px;
  margin-right: 30px;
  margin-top: 1px;
  vertical-align: middle;
  flex: 1;
}
.banner-tags { display: flex; flex-wrap: wrap; color: #fff; }
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: #5C5C5C;
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
  margin-top: 15px;
}
.enterprise-name {
  font-size: 20px;
  color: #fff;
  line-height: 28px;
}
.introduce-title {
  font-weight: 600;
  font-size: 24px;
  border-left: 5px solid #00897B;
  padding-left: 12px;
  line-height: 24px;
  color: var(--v-primary-base);
}
:deep(.v-img__img--cover) {
  object-fit: contain !important;
}
.tag {
  display: inline-block;
  color: #fff;
}
</style>