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

<template>
  <div>
    <!-- 顶部广告图 -->
    <div v-if="topAdvertise" class="banner" :style="{'background-image': 'url('+topAdvertise+')'}"></div>
    <div class="stickyBox py-5">
      <headSearch @handleSearch="handleSearch"></headSearch>
    </div>
    <hotJobs></hotJobs>
    <div v-if="leftAdvertise.length" class="advertiseBox">
        <div v-for="val in leftAdvertise" :key="val.mark" class="advertise" :style="{'width': '20px'}">
          <div v-if="!val.show" class=" advertise-box cursor-pointer" @mouseenter="val.show = true"></div>
        </div>
      </div>
    <div class="default-width mb-5" :style="`margin-top: ${leftAdvertise.length * (-372)}px;`">
      <div v-if="leftAdvertise.length" class="advertiseBox">
        <div v-for="val in leftAdvertise" :key="val.mark" class="advertise" :style="{'width':'180px'}">
          <div v-if="val.show">
            <div class="advertise-title d-inline-block">
              <span>广告</span>
              <v-icon class="float-right cursor-pointer pb-1" color="primary" size="28" @click="val.show = false">mdi-close</v-icon>
            </div>
            <img class="advertise-img cursor-pointer" :src="val.img" @click.stop="handleLeftClick(val)">
          </div>
        </div>
      </div>
      <div :style="`margin-top: ${leftAdvertise.length * (-372)}px;`">
        <homeJobTypeCard></homeJobTypeCard>
        <advertisementPage v-if="preferred.length" :list="preferred" :content="preferredContent" class="my-3"></advertisementPage>
        <hotPromotedPositions :class="!preferred.length ? 'mt-10' : ''"></hotPromotedPositions>
        <PopularEnterprises class="mt-10"></PopularEnterprises>
      </div>
    </div>
  </div>
  <!-- 快速填写简易人才信息-弹窗 -->
  <!-- <simplePage v-if="showSimplePage" :closeable="true" closeText="暂时跳过" @close="handleInfoClose" @simpleInfoReady="handleUpdateInfo"></simplePage> -->
  <!-- 广告弹窗 -->
  <v-dialog
    v-model="adDialog"
    max-width="900"
    :persistent="false"
  >
    <div style="cursor: pointer; margin: 0 auto; position: relative;">
      <v-img :src="dialogAdvertise.img" :width="adImgWidth" style="height: auto;border-radius: 4px;" @click="adClick"></v-img>
      <span style="color: #ddddddcc; font-size: 32px; position: absolute; right: 0px; top: 0px;" class="mdi mdi-close-circle-outline cursor-pointer px-3" @click="adDialog = false"></span>
    </div>
  </v-dialog>
</template>

<script setup>
defineOptions({ name:'personal-index'})
// import simplePage from './components/simple.vue'
import headSearch from '@/components/headSearch'
import hotJobs from './components/hotJobs.vue'
import homeJobTypeCard from './components/homeJobTypeCard'
import hotPromotedPositions from './components/hotPromotedPositions.vue'
import PopularEnterprises from './components/popularEnterprises.vue'
import advertisementPage from './components/advertisement/index.vue'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
// import { useUserStore } from '@/store/user'
import { getToken } from '@/utils/auth'
import { getWebContent } from '@/api/common'
import { getRewardEventList } from '@/utils/eventList'

if (!getToken()) getRewardEventList()

// 获取广告图
const topAdvertise = ref('')
const leftAdvertise = ref([])
const dialogAdvertise = ref({})
const preferred = ref([])
const preferredContent = ref({})
const getSystemWebContent = async () => {
  const data = await getWebContent()
  // 优选集团
  preferred.value = data.pcHomePreferred ? data.pcHomePreferred.sort((a, b) => {
    const sortA = a.sort || Infinity
    const sortB = b.sort || Infinity
    return sortA - sortB
  }) : []
  preferredContent.value = data.appPreferredGroup
  // 顶部广告
  topAdvertise.value = data.pcTop && data.pcTop.length ? data.pcTop[0].img : ''
  // 弹窗广告
  dialogAdvertise.value = data.pcAdvertisement ? data.pcAdvertisement[0] : {}
  // 左侧广告
  if (data.pcLeft) leftAdvertise.value = data.pcLeft.map(e => {
    e.show = true
    return e
  })
}

// 弹窗广告跳转
const adClick = () => {
  if (!getToken()) router.push(dialogAdvertise.value.link)
}

// 左侧广告跳转
const handleLeftClick = (val) => {
  if (val.link === '/recruit/enterprise/position/add') {
    const url = getToken(1) ? val.link : '/login?entLogin=true'
    if (!getToken(1)) localStorage.setItem('enterpriseRedirect', '/recruit/enterprise/position/add')
    window.open(url)
  } else window.open(val.link)
}


const router = useRouter()
const handleSearch = (val) => {
  val = val?.includes('&') ? encodeURIComponent(val) : val
  window.open(val ? `/recruit/personal/position?content=${val}` : `/recruit/personal/position`)
}

// const store = useUserStore()
// const simple = ref(localStorage.getItem('simpleCompleteDialogHaveBeenShow'))
// const showSimplePage = ref(false) // 只提示一次
// if (!getToken()) showSimplePage.value = false
// nextTick(() => {
//   if (getToken()) {
//     showSimplePage.value = simple.value && JSON.parse(simple.value) ? true : false
//   }
// })
// const handleInfoClose = () => {
//   localStorage.setItem('simpleCompleteDialogHaveBeenShow', false)
// }
// 更新用户基本信息
// const handleUpdateInfo = async () => {
//   handleInfoClose()
//   await store.getUserBaseInfos(null)
// }

const adImgWidth = ref(document?.documentElement?.clientWidth ?
  Math.floor(document.documentElement.clientWidth/2.2) > 500 ?
  Math.floor(document.documentElement.clientWidth/2.2) : 500
  : 900
)

const adDialog = ref(false)
onMounted(async () => {
  await getSystemWebContent()
  const lastTime = localStorage.getItem('adDialogTime')
  localStorage.setItem('adDialogTime', Date.now())
  if (!lastTime || (Date.now() - Number(lastTime) > 300000)) {
    // 无数据不弹窗
    adDialog.value = dialogAdvertise.value && Object.keys(dialogAdvertise.value).length ? true : false
  }
})
</script>

<style lang="scss" scoped>
.stickyBox {
  position: sticky;
  top: 48px;
  z-index: 998;
  background-color: var(--default-bgc);
}
.advertiseBox {
  position: sticky;
  top: 150px;
  left: 0;
  z-index: 998;
  width: 15px;
  max-width: 180px;
  margin-left: -200px;
}
.advertise {
  // position: sticky;
  // top: 128px;
  // z-index: 999;
  height: 372px;
  &-box {
    position: relative;
    // left: 0;
    width: 15px;
    height: 100%;
    background-color: #00897B;
    &::after {  
      content: "";  
      position: absolute;  
      top: 50%;
      margin-left: 3px;
      transform: translateY(-50%);
      border-width: 10px; // 12px
      border-style: solid; 
      border-color: transparent transparent transparent orange;
    }
  }
  &-title {
    width: 100%;
    color: #000;
    font-size: 14px;
    background-color: #d5d5d5;
    border-left: 3px solid #00897B;
    padding: 8px 5px 0 16px;
    border-radius: 4px 4px 0 0;
  }
  &-img {
    width: 100%; 
    height: 100%; 
    border-radius: 0 0 4px 4px;
    object-fit: cover;
  }
}
// .content-box {
//   margin-top: -372px - 372px;
// }
.banner {
  width: 100%;
  height: 110px;
  // background: url("@/assets/headerBg.jpg") no-repeat;
  background-position: no-repeat;
  background-size: contain;
}
.common-width {
  width: 1160px;
  max-width: 1160px;
  min-width: 1160px;
  margin: 0 auto;
}
</style>