menduner/src/views/recruit/personal/jobFair/details/entJobCard.vue

<!-- 企业 -->
<template>
  <div class="position-relative">
    <div v-if="jobFair?.contentImg" class="position-fixed" style="right: 24px; top: 20px; z-index: 999">
      <v-btn icon="mdi-share-all" color="primary" size="x-large" @click.stop="handleShare"></v-btn>
    </div>

    <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': '100vh'}" class="pt-10">
      <div :class="{'default-width': !isMobile}">
        <h2 class="color-white pt-5 enterpriseName" :class="{'ml-3': isMobile}">{{ enterpriseName }}</h2>
        <div v-if="!items.length" class="emptyText">{{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}</div>
        <template v-else>
          <JobCard :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="pt-5" />
          <div :class="['loading', {'loadMoreText': !loadingType}]" class="pb-5" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
        </template>
      </div>
    </div>

    <div class="hideCanvasView">
      <JobFairEntShare 
        :show="showShare" 
        :enterpriseName="enterpriseName" 
        :logoUrl="logoUrl" 
        :positionList="positionList" 
        :bgImg="jobFair?.contentImg" 
        @success="handlePreview"
      ></JobFairEntShare>
    </div>
  </div>

  <PreviewImage v-if="showPreview" :urlList="[previewSrc]" :fileName="enterpriseName" @close="showPreview = !showPreview, showShare = false" />
</template>

<script setup>
defineOptions({name: 'jobFair-enterprises-job-card'})
import { ref, reactive, onMounted } from 'vue'
import { getJobFair, getJobFairEntJobPage } from '@/api/recruit/personal/jobFair'
import JobCard from './components/jobCard1.vue'
import { useRoute } from 'vue-router'; const route = useRoute();
import { dealDictObjData } from '@/utils/position'
import { getEnterpriseDetails } from '@/api/enterprise'
import { formatName } from '@/utils/getText'
import JobFairEntShare from '@/views/recruit/components/jobFairEntShare'

const query = reactive({
  pageNo: 1,
  pageSize: 20,
	jobFairId: route.params.id,
  enterpriseId: route.query.enterpriseId
})

const logoUrl = ref('')
const showPreview = ref(false)
const showShare = ref(false)
const previewSrc = ref('')
const positionList = ref([])

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 items = ref([])
const loadingText = ['点击加载更多', '加载中...', '']
const loadingType = ref(0)

// 参与招聘会的企业
const getList = async () => {
	loadingType.value = 1

	try {
		const result = await getJobFairEntJobPage(query)
		const list = result?.list || []
    if (list.length) {
      items.value.push(...list.map(e => {
        e.enterprise = dealDictObjData({}, e.enterprise)
        e = dealDictObjData({}, e)
        return e
      }))

			loadingType.value = items.value.length === result.total ? 2 : 0
		} else {
			loadingType.value = 2
		}
	} catch {}
}

// 招聘会详情
const jobFair = ref([])
const enterpriseName = ref('')
const getJobFairDetail = async () => {
  const data = await getJobFair(route?.params?.id)
  if (!data) return
  jobFair.value = data

  const { enterprise } = await getEnterpriseDetails({ id: route.query.enterpriseId })
  enterpriseName.value = formatName(enterprise.anotherName || enterprise.name)
  logoUrl.value = enterprise.logoUrl
  document.title = enterpriseName.value + ' - 招聘会职位'

  getList()
}
getJobFairDetail()

const handleChangePage = () => {
  if (loadingType.value) return // 没有更多数据了
  // 加载更多
  query.pageNo++
  getList()
}

// 海报预览
const handlePreview = (src) => {
  if (!src) return
  previewSrc.value = src
  showPreview.value = true
}

const handleShare = () => {
  positionList.value = items.value && items.value.length > 0 ? items.value.map(e => formatName(e.name)).slice(0, 2) : []
  showShare.value = true
}
</script>

<style scoped lang="scss">
.hideCanvasView {
	position: fixed;
	top: -99999px;
	left: -99999px;
	z-index: -99999;
}
.enterpriseName {
  position: relative;
  padding-left: 20px;
  &::before {
    display: block;
    content: '';
    width: 6px;
    height: 30px;
    background-color: #fff;
    position: absolute;
    top: 25px;
    left: 0;
    border-radius: 2px;
  }
}
.emptyText {
  color: #fff;
  height: calc(100vh - 574px);
  line-height: calc(100vh - 574px);
  text-align: center;
}
.loading {
  margin-top: 8px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.loadMoreText {
  color: #fff;
  cursor: pointer;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>