menduner/src/views/Home/personal/components/hotPromotedPositions.vue

<template>
  <div>
    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @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.urgent') }}</v-tab>
    </v-tabs>
    <v-window v-model="tab" class="mt-3">
      <v-window-item :value="1">
        <PositionCard v-if="items.filter(Boolean) && items.length" :items="items" :tab="tab" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
      </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>
      </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>
      </v-window-item>
    </v-window>
    <div class="text-center">
      <v-btn class="buttons" color="primary" to="/recruit/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, getUrgentPosition } from '@/api/position'
import { dealDictArrayData } from '@/views/recruit/position/components/dict'

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

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

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