menduner/src/views/recruit/personal/home/components/hotPromotedPositions.vue

<template>
  <div>
    <div class="d-flex align-center justify-center">
      <div class="home-title">
        精选职位
        <div class="home-title-line"></div>
      </div>
    </div>
    <v-tabs v-model="tab" align-tabs="start" color="primary" @update:model-value="getPositionList">
      <v-tab :value="1">{{ $t('position.recommend') }}</v-tab>
      <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
      <v-tab :value="3">{{ $t('position.hire') }}</v-tab>
    </v-tabs>
    <v-window v-model="tab" class="mt-5">
      <v-window-item :value="1">
        <PositionCard v-if="items.filter(Boolean) && items.length" :items="items" :tab="tab" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
        <Empty v-else class="mb-3" :elevation="false"></Empty>
      </v-window-item>
      <v-window-item :value="2">
        <PositionCard v-if="items.filter(Boolean) && items.length" :items="items" :tab="tab" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
        <Empty v-else class="mb-3" :elevation="false"></Empty>
      </v-window-item>
      <v-window-item :value="3">
        <PositionCard v-if="items.filter(Boolean) && items.length" :items="items" :tab="tab" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
        <Empty v-else class="mb-3" :elevation="false"></Empty>
      </v-window-item>
    </v-window>
    <div class="text-center mt-5" style="border-top: 1px solid #ccc; padding-top: 30px;">
      <v-btn class="buttons btnColor" to="/recruit/personal/position">{{ $t('position.moreBtn') }}</v-btn>
    </div>
  </div>
</template>

<script setup name="hotPromotedPositions">
import PositionCard from '@/components/Position/item.vue'
import { ref } from 'vue'
import { getPromotedPosition, getLatestPosition, getHirePosition } from '@/api/position'
import { dealDictArrayData } from '@/utils/position'

const tab = ref(1)
const items = ref([])

// 推荐职位
const getPositionList = async () => {
  const api = tab.value === 1 ? getPromotedPosition : (tab.value === 2 ? getLatestPosition : getHirePosition)
  const { list } = await api({ pageNo: 1, pageSize: 9 })
  items.value = dealDictArrayData([], list)
}
getPositionList()

// 职位详情
const handlePosition = (item) => {
  if (!item.id) return
  window.open(`/recruit/personal/position/details/${item.id}`)
}
const handleEnterprise = (item) => {
  window.open(`/recruit/personal/company/details/${item.enterpriseId}?key=briefIntroduction`)
}
</script>

<style lang="scss" scoped>
:deep(.v-slide-group__content) {
  border-bottom: 1px solid #ccc !important;
}
:deep(.v-tab) {
  font-weight: 700;
  color: #666;
  font-size: 16px;
}
</style>