menduner/src/views/recruit/personal/home/components/advertisement/preferred.vue

<template>
  <div v-if="Object.keys(result).length" class="default-width" style="position: relative;">
    <div style="position: relative;">
      <v-carousel :show-arrows="result.carousel.length > 1 ? 'hover' : false" :hide-delimiters="result.carousel.length > 1 ? false : true" cycle>
        <v-carousel-item v-for="(k, i) in result.carousel" :key="i">
					<v-img :src="k" :lazy-src="k" width="1184" height="500" cover>
						<template v-slot:placeholder>
							<v-row align="center" class="fill-height ma-0" justify="center">
								<v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
							</v-row>
						</template>
					</v-img>
				</v-carousel-item>
      </v-carousel>
			<v-img v-if="result.logo" class="logo-png" :src="result.logo" width="193" height="59"></v-img>
    </div>

    <!-- 集团简介 -->
    <div class="brief-introduction">
      <h2>{{ result?.introduce?.title }}</h2>
      <div class="desc">
        <p v-html="result?.introduce?.describe"></p>
      </div>
			<div v-if="result?.introduce?.thumbnail?.length" class="culture my-15">
        <div v-for="(k, i) in result.introduce.thumbnail" :key="i" class="culture-item">
          <v-img :src="k" :lazy-src="k" width="350" height="230" contain>
						<template v-slot:placeholder>
							<v-row align="center" class="fill-height ma-0" justify="center">
								<v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
							</v-row>
						</template>
					</v-img>
        </div>
      </div>
      <div v-if="result?.introduce?.bigPicture?.url">
        <v-img :src="result.introduce.bigPicture.url" :lazy-src="result.introduce.bigPicture.url">
					<template v-slot:placeholder>
						<v-row align="center" class="fill-height ma-0" justify="center">
							<v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
						</v-row>
					</template>
				</v-img>
      </div>
    </div>

    <!-- 品牌介绍 -->
    <div v-if="result.brandIntroduce && result.brandIntroduce.length" class="brand-introduction">
      <h2>品牌介绍</h2>
      <ul>
        <li v-for="k in result.brandIntroduce" :key="k.title">
          <v-img :src="k.url" width="100%" height="192" :lazy-src="k.url">
						<template v-slot:placeholder>
							<v-row align="center" class="fill-height ma-0" justify="center">
								<v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
							</v-row>
						</template>
					</v-img>
          <h3>{{ k.content }}</h3>
          <span>{{ k.desc }}</span>
        </li>
      </ul>
    </div>

    <!-- 招聘职位 -->
    <div class="recruit-position">
      <h2>招聘职位</h2>
      <div>
        <div class="position-item d-flex align-center" v-for="k in recruitPosition" :key="k.job.id">
          <div class="job-name">
            {{ formatName(k.job.name) }}
            <br>
            {{ formatName(k.enterprise.name) }}
          </div>
          <div class="job-place">
            <div class="job-title">地点</div>
            <p class="font-size-14">{{ !k.job.areaId ? '全国' : k.job.areaName || '' }}</p>
          </div>
          <div class="job-class">
            <div class="job-title">工作经验</div>
            <p class="font-size-14">{{ k.job.expName }}</p>
          </div>
          <div class="job-class">
            <div class="job-title">职位更新</div>
            <p class="font-size-14">{{ timesTampChange(k.job.updateTime) }}</p>
          </div>
          <div class="font-size-14 cursor-pointer view-detail" @click="handlePosition(k)">点击查看详情
            <v-icon>mdi-pan-right</v-icon>
          </div>
        </div>
        <CtPagination
        :total="total"
        :page="queryParams.pageNo"
        :limit="queryParams.pageSize"
        @handleChange="handleChangePage"
      ></CtPagination>
      </div>
    </div>
    <v-btn icon="mdi-chevron-up" size="large" color="primary" class="up-btn" @click="handleToTop"></v-btn>
  </div>
</template>

<script setup>
defineOptions({ name: 'home-adv-preferred'})
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getWebContent } from '@/api/common'
import { getJobAdvertisedSearch } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'

const route = useRoute()
const { id } = route.params
const result = ref({})

onMounted(async () => {
	const data = await getWebContent()
	if (!id || !data.appPreferredGroup) {
		return window.close()
	}
	result.value = data.appPreferredGroup[id] || {}
	document.title = result.value.title || '门墩儿 优选集团'
})

// 招聘职位
const total = ref(0)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  enterpriseId: id
})
const recruitPosition = ref([])
const getRecruitPositionList = async () => {
  const { list, total: number } = await getJobAdvertisedSearch(queryParams.value)
  if (!list.length) {
    total.value = 0
    recruitPosition.value = []
    return
  }
  recruitPosition.value = list.map(e => {
    e.job = { ...e.job, ...dealDictObjData({}, e.job) }
    return e
  })
  total.value = number
}
getRecruitPositionList()

const handleChangePage = (e) => {
  queryParams.value.pageNo = e
  getRecruitPositionList()
}

// 职位详情
const handlePosition = (val) => {
  window.open(`/recruit/personal/position/details/${val.job.id}`)
}

const handleToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style scoped lang="scss">
.logo-png {
  position: absolute;
  top: 30px;
  left: 5%;
}
.culture {
  width: 100%;
  display: flex;
  &-item {
    width: 33.3%;
  }
}
h2 {
  font-size: 32px;
  color: #666;
  line-height: 44px;
  text-align: center;
  margin-bottom: 26px;
  font-weight: 600;
}
.brief-introduction {
  margin: 100px 0;
  .desc {
    color: #666;
    margin-bottom: 40px;
  }
}
.brand-introduction {
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    li {
      width: calc((100% - 96px) / 3);
      min-width: calc((100% - 96px) / 3);
      max-width: calc((100% - 96px) / 3);
      margin: 0 48px 24px 0;
      list-style: none;
      &:nth-child(3n) {
        margin-right: 0;
      }
      h3 {
        height: 30px;
        font-size: 22px;
        color: #333;
        line-height: 30px;
        margin: 24px 0 12px 10px;
      }
      span {
        display: block;
        width: 342px;
        font-size: 14px;
        color: #666;
        line-height: 26px;
        margin: 0 auto;
      }
    }
  }
}
.recruit-position {
  margin-top: 100px;
  .position-item {
    background-color: #f9f9f9;
    margin-bottom: 15px;
    padding: 20px 0 20px 32px;
    .job-name {
      width: 20.5%;
      overflow: hidden;
      margin-right: 5%;
      // color: #333;
      font-size: 15px;
      font-weight: 600;
    }
    .job-place {
      width: 17%;
      margin-right: 5%;
    }
    .job-class {
      width: 15%;
      margin-right: 5%;
    }
    .job-title {
      font-size: 13px;
      color: #8c8c8c;
      line-height: 26px;
    }
  }
}
.view-detail:hover {
  text-decoration: underline;
}
.up-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>